From 7f61437f929bc589e3a432321163ec6a7f8e8e06 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 3 Feb 2023 08:19:29 -0800
Subject: [PATCH] Style <main> with box-sizing: border-box and compute the
 max-width

---
 assets/styles/root.css | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/assets/styles/root.css b/assets/styles/root.css
index bd04978..506975a 100644
--- a/assets/styles/root.css
+++ b/assets/styles/root.css
@@ -312,6 +312,23 @@ header.site > .grid {
     width: 100%;
 }
 
+header.site > .grid > nav {
+    align-items: center;
+    display: flex;
+    font-size: max(1.5rem, 80%);
+    justify-content: start;
+    letter-spacing: 0.12em;
+    list-style: none;
+    text-transform: lowercase;
+}
+
+header.site > .grid > nav > li {
+    color: var(--site-nav-link-color);
+    display: block;
+}
+
+header.site > .grid > nav > .active { font-weight: bold; }
+
 header.site > .grid > nav:first-of-type {
     justify-content: start;
     order: 2;
@@ -361,29 +378,13 @@ img.circular {
 }
 
 main {
-    max-width: var(--content-width);
+    box-sizing: border-box;
+    max-width: calc(var(--content-width) + 2 * var(--body-item-spacing));
     margin: var(--body-item-spacing) auto;
     padding-inline: var(--body-item-spacing);
     width: 100%;
 }
 
-header.site > .grid > nav {
-    align-items: center;
-    display: flex;
-    font-size: max(1.5rem, 80%);
-    justify-content: start;
-    letter-spacing: 0.12em;
-    list-style: none;
-    text-transform: lowercase;
-}
-
-header.site > .grid > nav > li {
-    color: var(--site-nav-link-color);
-    display: block;
-}
-
-header.site > .grid > nav > .active { font-weight: bold; }
-
 main > :first-child,
 main > article > :first-child { margin-block-start: 0; }
 main > :not(:last-child),