Re-mark up the site heading

layouts/partials/header.html

@@ -1,27 +1,27 @@
-<header class="header">
-  <div class="title-and-menu">
-    <h1><a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a></h1>
+<header class="site">
+  <div class="platter">
+    <div class="grid">
+      <h1 class="site">
+        <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
+      </h1>
 
       {{ $url := .RelPermalink }}
       {{ with site.Menus.main }}
-    <nav class="menu">
-      <menu>
+      <nav class="site bulleted">
         {{ range . }}
         <li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
         {{ end }}
-      </menu>
       </nav>
       {{ end }}
-  </div>
 
-  <nav class="social">
-    <menu>
+      <nav class="site 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>
         {{ with .OutputFormats.Get "rss" }}
         <li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
         {{ end }}
-    </menu>
       </nav>
+    </div>
+  </div>
 </header>

static/styles/root.css

@@ -99,6 +99,7 @@ header.site {
 
 header.site h1 {
     font-family: var(--font-family-site-heading);
+    margin: 0;
 }
 
 header.site .grid {
@@ -136,6 +137,9 @@ nav.site li {
     display: block;
     margin-inline-end: 0.5em;
 }
+nav.site .active {
+    font-weight: bold;
+}
 
 nav.bulleted li:first-child::before {
     content: "";