From 1ffbee8850b3cdb06b6caefb11bed11baaf9b6e0 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Thu, 25 Jul 2024 09:55:51 -0700
Subject: [PATCH] Structure: Collapse the outer grid columns (margins and
 gutters) on small screens

Let the border of the site header and footer touch the edges of the screen too.
---
 assets/css/010_structure.css   | 33 +++++++++++++++++++++++++++++----
 assets/css/080_site_footer.css |  7 +++++++
 assets/css/080_site_header.css |  8 ++++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index a2cc4f6..0d230a6 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -43,6 +43,35 @@ body {
   margin: 0;
 }
 
+@media screen and (max-width: 480px) {
+  body {
+    grid-template-columns:
+      [
+        full-start
+        wide-start
+        wide-gutter-start
+        wide-gutter-left-start
+        wide-gutter-left-end
+        gutter-start
+        gutter-left-start
+      ]
+      var(--gutter-width)
+      [gutter-left-end main-start]
+      minmax(auto, var(--content-width))
+      [main-end gutter-right-start]
+      var(--gutter-width)
+      [
+        gutter-right-end
+        gutter-end
+        wide-gutter-right-start
+        wide-gutter-right-end
+        wide-gutter-end
+        wide-end
+        full-end
+      ];
+  }
+}
+
 .body__container,
 .site-header,
 .main--list,
@@ -73,10 +102,6 @@ article.content
   gap: var(--space-xl) 0;
 }
 
-.site-header__content {
-  grid-column: main-start / main-end;
-}
-
 :is(.list-header, p) {
   grid-column: main-start / main-end;
 }
diff --git a/assets/css/080_site_footer.css b/assets/css/080_site_footer.css
index d2ea9ca..7c16ed2 100644
--- a/assets/css/080_site_footer.css
+++ b/assets/css/080_site_footer.css
@@ -19,3 +19,10 @@
   margin-block-end: var(--space-m);
   padding-block-start: var(--space-s);
 }
+
+@media screen and (max-width: 480px) {
+  .site-footer {
+    grid-column: full-start / full-end;
+    padding-inline: var(--gutter-width);
+  }
+}
diff --git a/assets/css/080_site_header.css b/assets/css/080_site_header.css
index b483b75..280774f 100644
--- a/assets/css/080_site_header.css
+++ b/assets/css/080_site_header.css
@@ -18,6 +18,7 @@
 .site-header__content {
   border-bottom: 2px dashed var(--gray6);
   gap: var(--space-l);
+  grid-column: main-start / main-end;
   padding-bottom: var(--space-xs);
 
   .site-header__title {
@@ -63,3 +64,10 @@
     }
   }
 }
+
+@media screen and (max-width: 480px) {
+  .site-header__content {
+    grid-column: full-start / full-end;
+    padding-inline: var(--gutter-width);
+  }
+}