Веб-сайт самохостера Lotigara

summaryrefslogtreecommitdiff
path: root/css/responsivity.css
diff options
context:
space:
mode:
authorIvan Davydov <lotigara@lotigara.ru>2025-06-21 18:29:46 +0300
committerIvan Davydov <lotigara@lotigara.ru>2025-06-21 18:29:46 +0300
commit01773eabc92ef6ee90657e8fa179e36e52464f4e (patch)
tree18586cf57fc3c0ef2828f9d405ceb73c61bc080a /css/responsivity.css
parent401aa8724fb641bfae48fabef1d09ed448242cd3 (diff)
Make the website minimalistic
Diffstat (limited to 'css/responsivity.css')
-rw-r--r--css/responsivity.css162
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;
}
}