Clean up the header layout and styles

layouts/partials/header.html

@@ -1,6 +1,5 @@
 <header class="site">
-  <div class="platter">
+  <div class="platter grid">
-    <div class="grid">
       <h1 class="site">
         <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
       </h1>
@@ -18,7 +17,7 @@
       </nav>
       {{ end }}
 
-      <nav class="site social">
+      <nav class="social">
         <li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
         <li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
         <li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
@@ -27,5 +26,4 @@
         {{ end }}
       </nav>
   </div>
-  </div>
 </header>

static/styles/root.css

@@ -293,47 +293,48 @@ header.site.animated {
     }
 }
 
-header.site h1 {
+header.site > .grid > h1 {
     font-family: var(--font-family-site-heading);
     font-size: 2em;
     margin: 0;
+    order: 1;
+    white-space: nowrap;
 }
 
-header.site .grid {
+header.site > .grid {
     align-items: baseline;
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
     gap: 0 0.5em;
-    grid-template-columns: max-content auto max-content;
-    grid-template-areas:
-        "title menu social";
-    max-width: var(--content-width);
-    width: var(--content-width);
-}
-@media (max-width: 450px) {
-    header.site .grid {
-        grid-template-columns: repeat(2, max-content);
-        grid-template-rows: repeat(2, max-content);
-        grid-template-areas:
-            "title social"
-            "menu menu";
-        max-width: var(--content-width);
-        width: inherit;
-    }
-}
-
-header.site .platter {
     margin: 0 auto;
+    max-width: var(--content-width);
     padding: 1.5rem 3rem;
+    width: 100%;
 }
 
-header.site .grid nav:first-of-type {
+header.site > .grid > nav:first-of-type {
-    grid-area: menu;
     justify-content: start;
+    order: 2;
 }
 
-header.site .grid nav:last-of-type {
+header.site > .grid > nav:last-of-type {
-    grid-area: social;
     justify-content: end;
+    order: 3;
+}
+
+@media (max-width: 516px) {
+    header.site > .platter {
+        border-radius: 0;
+    }
+    header.site > .grid {
+        max-width: none;
+    }
+}
+
+@media (max-width: 435px) {
+    header.site > .grid > nav:first-of-type {
+        order: 5;
+    }
 }
 
 html {
@@ -369,7 +370,7 @@ main h6 { font-size: var(--body-font-size); }
 
 main h5, main h6 { font-family: var(--font-family-body); }
 
-nav.site {
+header.site > .grid > nav {
     align-items: center;
     display: flex;
     font-size: max(1.5rem, 80%);
@@ -379,20 +380,21 @@ nav.site {
     text-transform: lowercase;
 }
 
-nav.site li {
+header.site > .grid > nav > li {
     color: var(--site-nav-link-color);
     display: block;
     margin-inline-end: 0.5em;
 }
-nav.site .active { font-weight: bold; }
 
-nav.bulleted li:first-child::before {
+header.site > .grid > nav > .active { font-weight: bold; }
+
+nav.bulleted > li:first-child::before {
     color: var(--html-color);
     content: "";
     margin-inline-end: 0;
 }
 
-nav.bulleted li::before {
+nav.bulleted > li::before {
     color: var(--heading-color);
     content: "•";
     font-size: 60%;
@@ -518,17 +520,14 @@ ol ol {
     width: 100%;
 }
 
-.social menu li + li {
-    margin-left: var(--social-menu-padding);
-}
-
 .social {
-    display: flex;
+    display: block;
     letter-spacing: 2px;
     margin-left: auto;
+    order: 2;
 }
 
-.social a {
+.social > li > a {
     background-image: var(--url);
     background-repeat: no-repeat;
     background-size: var(--menu-icon-size);
@@ -537,7 +536,7 @@ ol ol {
     width: var(--menu-icon-size);
 }
 
-.social a span {
+.social > li > a > span {
     display: none;
 }