Build the page scaffolding with CSS grid

Grid columns are symmetrical. From the outside in, they are:

- outer margin
- inner margin
- wide gutter
- inner gutter
- main content

assets/css/010_spacing.css

@@ -50,10 +50,6 @@ hr {
   margin-block: var(--space-m);
 }
 
-main {
-  margin-block-end: var(--space-xl);
-}
-
 p + p {
   margin-block-start: var(--space-paragraph);
 }

assets/css/010_structure.css

@@ -12,18 +12,63 @@
  ************************/
 
 :root {
-  --content-width: 40rem;
+  --content-width: 30rem;
+  --gutter-width: var(--space-m);
 }
 
 body {
+  display: grid;
+  gap: 0;
+  grid-template-columns:
+    [full-start]
+    1fr
+    [wide-start]
+    1fr
+    [wide-gutter-start wide-gutter-left-start]
+    var(--gutter-width)
+    [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]
+    var(--gutter-width)
+    [wide-gutter-right-end wide-gutter-end]
+    1fr
+    [wide-end]
+    1fr
+    [full-end];
   margin: 0;
 }
 
-main {
+.body__container,
-  /* Center the content and ensure a minimum margin. The calculation in the
+.site-header,
-   * second argument does what `auto` would do if it could be used in max(). */
+main
-  margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
+{
-  max-width: var(--content-width);
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: full-start / full-end;
+}
+
+.body__container {
+  gap: var(--space-xl) 0;
+}
+
+.nav-breadcrumb,
+.site-header__content,
+.site-footer
+{
+  grid-column: main-start / main-end;
+}
+
+{{- $wideElements := "figure, pre" -}}
+
+.body__container > :not({{ $wideElements }}) {
+  grid-column: main-start / main-end;
+}
+.body__container > :is(figure, pre) {
+  grid-column: wide-gutter-start / wide-gutter-end;
 }
 
 figure, img {

assets/css/099_content.css

@@ -21,6 +21,11 @@
 .content-title {
   margin-block: var(--space-xl) var(--space-l);
 
+  /* margin-block-start is handled by the grid */
+  &:first-child, &:first-child .title {
+    margin-block-start: 0;
+  }
+
   .title:has(+ .subtitle) {
     margin-block-end: var(--space-xs);
   }

assets/css/099_site_header.css

@@ -44,11 +44,3 @@
     }
   }
 }
-
-.site-header__container,
-.site-footer__container {
-  /* Center the content and ensure a minimum margin. The calculation in the
-   * second argument does what `auto` would do if it could be used in max(). */
-  margin-inline: max(var(--space-m), 50% - var(--content-width) / 2);
-  max-width: var(--content-width);
-}

layouts/_default/baseof.html

@@ -8,14 +8,16 @@
     <header class="site-header">
       {{ partial "site/header.html" . }}
     </header>
-    <main>
+    <div class="body__container">
       {{ if not .IsNode }}
         {{ partial "page_breadcrumb.html" . }}
       {{ end }}
-      {{ block "main" . }}{{ end }}
+      <main>
-    </main>
+        {{ block "main" . }}{{ end }}
-    <footer class="site-footer">
+      </main>
-      {{ partial "site/footer.html" . }}
+      <footer class="site-footer">
-    </footer>
+        {{ partial "site/footer.html" . }}
+      </footer>
+    </div>
   </body>
 </html>