From 01d27411d7fd4928dc0a8a2cd2d81e1bf8ebe167 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 20 Aug 2023 12:23:08 -0700
Subject: [PATCH] Establish a grid system

There are 5 content columns, two gutter tracks, two wide content columns, and two margin columns
---
 assets/styles/root/002_columns.css | 72 ++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 assets/styles/root/002_columns.css

diff --git a/assets/styles/root/002_columns.css b/assets/styles/root/002_columns.css
new file mode 100644
index 0000000..65250e8
--- /dev/null
+++ b/assets/styles/root/002_columns.css
@@ -0,0 +1,72 @@
+@layer root {
+    :root {
+        --margin-min-width: var(--body-item-spacing);
+        --margin-max-width: 1fr;
+    }
+
+    main {
+        --content-columns: 5;
+        --gutter-width: 3rem;
+
+        display: grid;
+        grid-template-columns:
+            [margin-left]
+            minmax(var(--margin-min-width), var(--margin-max-width))
+            [wide-content-start wide-content-left-start]
+            1fr
+            [wide-content-left-end gutter-start gutter-left-start]
+            var(--gutter-width)
+            [gutter-left-end content-start]
+            repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
+            [content-end gutter-right-start]
+            var(--gutter-width)
+            [gutter-right-end gutter-end wide-content-right-start]
+            1fr
+            [wide-content-right-end wide-content-end]
+            minmax(var(--margin-min-width), var(--margin-max-width))
+            [margin-right];
+    }
+
+    @media (max-width: 960px) {
+        main {
+            --margin-min-width: 0;
+            --margin-max-width: 0;
+        }
+    }
+
+    @media (max-width: 519px) {
+        /* Collapse the margin and wide content tracks */
+        main {
+            --content-columns: 3;
+
+            grid-template-columns:
+                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
+                var(--gutter-width)
+                [gutter-left-end content-start]
+                repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
+                [content-end gutter-right-start]
+                var(--gutter-width)
+                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
+        }
+    }
+
+    @media (max-width: 415px) {
+        main {
+            --content-columns: 1;
+
+            display: grid;
+            grid-template-columns:
+                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
+                var(--gutter-width)
+                [gutter-left-end content-start]
+                calc(100% - 2 * var(--gutter-width))
+                [content-end gutter-right-start]
+                var(--gutter-width)
+                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
+        }
+    }
+
+    main > :is(header, article, footer) {
+        grid-column: gutter-start / gutter-end;
+    }
+}