Trial some mobile friendly grid settings

Arcadia-Science · Jan 11, 2025 · 24ff00a · 24ff00a
1 parent b2c2066
commit 24ff00a
Showing 1 changed file with 32 additions and 10 deletions.
diff --git a/assets/css/grid.css b/assets/css/grid.css
@@ -1,13 +1,3 @@
-:root {
-  --grid-margin: 1.5em;
-  --grid-edge-col: 3fr;
-  --grid-page-margin: min(450px, 2vw);
-  --grid-body-outset: 35px;
-  --grid-body-padding: 1.5em;
-  --grid-body-content: minmax(500px, calc(850px - 3em));
-  --grid-sidebar-width: minmax(75px, 145px);
-}
-
 /* Force CSS grid to contain figures according to their column specs */
 .page-columns .column-body,
 .page-columns .column-body-outset,
@@ -21,6 +11,18 @@
     height: auto;
 }
 
+/* Mobile-first base variables */
+:root {
+    --grid-margin: clamp(1rem, 3vw, 1.5em);
+    --grid-edge-col: minmax(0, 3fr);
+    --grid-page-margin: clamp(1rem, 2vw, 450px);
+    --grid-body-outset: clamp(1rem, 3vw, 35px);
+    --grid-body-padding: clamp(1rem, 2vw, 1.5em);
+    --grid-body-content: minmax(min(100vw - 2rem, 500px), 850px);
+    --grid-sidebar-width: clamp(0px, 15vw, 145px);
+}
+
+/* Base mobile layout */
 body .page-columns {
     display: grid;
     gap: 0;
@@ -40,3 +42,23 @@ body .page-columns {
         [screen-end];
 }
 
+/* Simplified mobile layout for very small screens */
+@media (max-width: 640px) {
+    body .page-columns {
+        grid-template-columns: 
+            [screen-start page-start body-start body-content-start] 1rem
+            [content] 1fr
+            [screen-end page-end body-end body-content-end] 1rem;
+    }
+}
+
+/* Tablet breakpoint adjustments */
+@media (min-width: 641px) and (max-width: 1024px) {
+    body .page-columns {
+        grid-template-columns: 
+            [screen-start] var(--grid-margin)
+            [page-start body-start body-content-start] 1fr
+            [body-content-end body-end page-end] var(--grid-margin)
+            [screen-end];
+    }
+}