diff options
Diffstat (limited to 'archive/css/responsivity.css')
| -rw-r--r-- | archive/css/responsivity.css | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/archive/css/responsivity.css b/archive/css/responsivity.css new file mode 100644 index 0000000..58fc1f3 --- /dev/null +++ b/archive/css/responsivity.css @@ -0,0 +1,193 @@ +@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){ + div.inner_page { + width: 95%; + } + + body { + font-size: 32pt; + } + + div.content_section_text p::first-letter,div.content::first-letter { + font-size: 37pt; + } + + /* https://css-tricks.com/responsive-data-tables/ */ + + /* + * Force table to not be like tables anymore + */ + table, thead, tbody, th, td, tr { + display: block; + } + + /* + * Hide table headers (but not display: none;, for accessibility) + */ + thead tr { + position: absolute; + top: -9999%; + left: -9999%; + } + + td { + /* Behave like a "row" */ + border: none; + position: relative; + padding-left: 50%; + } + + td::before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + } +} + +/* iframe */ +@media (width: 400px) and (height: 250px) { + div.inner_page { + width: 95%; + } + + body { + font-size: 11pt; + } + + div.content_section_text p::first-letter,div.content::first-letter { + font-size: 15pt; + } + + /* + * Force table to not be like tables anymore + */ + table, thead, tbody, th, td, tr { + display: block; + } + + /* + * Hide table headers (but not display: none;, for accessibility) + */ + thead tr { + position: absolute; + top: -9999%; + left: -9999%; + } + + td { + /* Behave like a "row" */ + border: none; + position: relative; + padding-left: 50%; + } + + td::before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + } +} + +@media (max-width: 400px) and (orientation: portrait){ + div.inner_page { + width: 100%; + margin: 0; + } + + body { + font-size: 24pt; + } +} +@media only screen and (orientation: landscape) + and (min-width: 992px) + and (max-width: 1199px) { + body { font-size: 14pt; } + } + @media only screen and (orientation: landscape) + and (min-width: 768px) + and (max-width: 991px) { + body { font-size: 14pt; } + } + @media only screen and (orientation: landscape) + and (min-width: 480px) + and (max-width: 767px) { + body { font-size: 11pt; } + } + @media only screen and (orientation: landscape) + and (max-width: 479px) { + body { font-size: 8pt; } + } + @media only screen and (orientation: landscape) + and (min-device-width : 375px) + and (max-device-width : 667px) { + body { font-size: 9.5pt; } + } + +/* https://css-tricks.com/responsive-data-tables/ */ +/* +Max width before this PARTICULAR table gets nasty +This query will take effect for any screen smaller than 760px +and also iPads specifically. +*/ +/*@media +only screen and (max-width: 760px), +(min-device-width: 768px) and (max-device-width: 1024px) {*/ +@media (max-width: 1024px) and (min-width: 401px) { + div.inner_page { + width: 95%; + } + + body { + font-size: 32pt; + } + + div.content_section_text p::first-letter,div.content::first-letter { + font-size: 37pt; + } + + /* + * Force table to not be like tables anymore + */ + table, thead, tbody, th, td, tr { + display: block; + } + + /* + * Hide table headers (but not display: none;, for accessibility) + */ + thead tr { + position: absolute; + top: -9999%; + left: -9999%; + } + + tbody tr { + border-top: 5px solid var(--gray-color); + border-bottom: 5px solid var(--gray-color); + } + + td { + /* Behave like a "row" */ + border: none; + position: relative; + padding-left: 50%; + } + + td::before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + } +} |