diff options
Diffstat (limited to 'css/responsivity.css')
| -rw-r--r-- | css/responsivity.css | 162 |
1 files changed, 27 insertions, 135 deletions
diff --git a/css/responsivity.css b/css/responsivity.css index 58fc1f3..75d4ec7 100644 --- a/css/responsivity.css +++ b/css/responsivity.css @@ -1,8 +1,4 @@ -@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){ - div.inner_page { - width: 95%; - } - +@media (max-width: 1199px) and (min-width: 401px) { body { font-size: 32pt; } @@ -46,148 +42,44 @@ padding-right: 10px; white-space: nowrap; } -} -/* iframe */ -@media (width: 400px) and (height: 250px) { - div.inner_page { - width: 95%; + iframe { + width: 100%; + aspect-ratio: 1/1!important; } +} +@media only screen and (orientation: landscape) +and (min-width: 992px) +and (max-width: 1199px) { 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; + font-size: 14pt; } } - -@media (max-width: 400px) and (orientation: portrait){ - div.inner_page { - width: 100%; - margin: 0; - } - +@media only screen and (orientation: landscape) +and (min-width: 768px) +and (max-width: 991px) { body { - font-size: 24pt; + font-size: 14pt; } } @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%; - } - +and (min-width: 480px) +and (max-width: 767px) { 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); + font-size: 11pt; } - - td { - /* Behave like a "row" */ - border: none; - position: relative; - padding-left: 50%; +} +@media only screen and (orientation: landscape) +and (max-width: 479px) { + body { + font-size: 8pt; } - - 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 only screen and (orientation: landscape) +and (min-device-width : 375px) +and (max-device-width : 667px) { + body { + font-size: 9.5pt; } } |