make guide section more mobile friendly on portrait

2025-12-15 19:59:57 +03:00
parent 122b706350
commit 21ace9299f
5 changed files with 85 additions and 27 deletions
--- a/data/static/css/theme-peachy.css
+++ b/data/static/css/theme-peachy.css
@@ -60,11 +60,6 @@ body {
  color: black;
 }

-@media (orientation: portrait) {
-  body {
-    margin: 12px 0;
-  }
-}
 :where(a:link) {
  color: black;
 }
@@ -1540,6 +1535,21 @@ img.badge-button {
  color: black;
 }

+@media (orientation: portrait) {
+  body {
+    margin: 12px 0;
+  }
+  .guide-container {
+    grid-template-areas: "guide-toc" "guide-topics";
+    grid-template-columns: unset;
+  }
+  .guide-toc {
+    position: unset;
+  }
+  .guide-section {
+    padding-right: 12px;
+  }
+}
 #topnav {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;