Move site header layout styles to columns; fix nav spacing

Do a bit of testing on Chrome too.

assets/styles/root.css

@@ -1,14 +1,2 @@
 @layer reset, typography, root, layout, section, page, utility;
 
-:root {
-  --menu-icon-size: 20px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --twitter-icon: url(/icons/twitter-dark.svg);
-    --github-icon: url(/icons/github-dark.svg);
-    --instagram-icon: url(/icons/instagram-dark.svg);
-    --feed-icon: url(/icons/rss-dark.svg);
-  }
-}

assets/styles/root/002_colors.css

@@ -156,6 +156,10 @@
       background-clip: text;
       color: transparent;
     }
+
+    h1.gradient a[href] {
+      color: inherit;
+    }
   }
 
   header.site nav > li {
@@ -198,12 +202,16 @@
     background-color: inherit;
   }
 
-  .title, .title a {
-    color: var(--color);
-  }
-
   .post header a,
   .post header a:visited {
     color: inherit;
   }
+
+  .social > li + li:before {
+    color: var(--dark);
+  }
+
+  .title, .title a {
+    color: var(--color);
+  }
 }

assets/styles/root/002_columns.css

@@ -6,6 +6,7 @@
   --list-item-block-gap: var(--body-item-spacing);
   --margin-min-width: var(--body-item-spacing);
   --margin-max-width: 1fr;
+  --menu-icon-size: 20px;
   --nav-bulleted-spacing: 0.75rem;
 }
 
@@ -159,6 +160,60 @@
     width: 100%;
   }
 
+  header.site {
+    display: flex;
+    width: 100%;
+  }
+
+  header.site h1 {
+    margin: 0;
+    order: 1;
+  }
+
+  header.site > .grid {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 0.5em;
+    margin: 0 auto;
+    max-width: var(--content-width);
+    padding: 1.5rem 3rem;
+    width: 100%;
+  }
+
+  header.site > .grid > nav {
+    align-items: center;
+    display: flex;
+    justify-content: start;
+    list-style: none;
+  }
+
+  header.site nav > li { display: block; }
+
+  header.site nav:first-of-type {
+    justify-content: start;
+    order: 2;
+  }
+  @media (max-width: 435px) {
+    header.site nav:first-of-type { order: 5; }
+  }
+
+  header.site nav:last-of-type {
+    justify-content: end;
+    order: 3;
+  }
+
+  @media (max-width: 516px) {
+    header.site > .platter {
+      border-left: none;
+      border-radius: 0;
+      border-right: none;
+      border-top: none;
+    }
+
+    header.site > .grid { max-width: none; }
+  }
+
   img {
     height: auto;
     max-width: 100%;
@@ -192,12 +247,16 @@
       padding-block-start: 0.5em;
   }
 
-  nav.bulleted>li:first-child::before {
+  nav.bulleted > li:not(:first-child)::before {
-    margin-inline: 0;
+    margin-inline-start: var(--nav-bulleted-spacing);
   }
 
-  nav.bulleted>li::before {
+  nav.social > li {
-    margin-inline: var(--nav-bulleted-spacing);
+    margin-inline-start: var(--nav-bulleted-spacing);
+  }
+
+  nav.social > li:first-child {
+    margin-inline-start: 0;
   }
 
   ul, ol {
@@ -240,6 +299,10 @@
       display: grid;
       grid-template-columns: subgrid;
     }
+
+    .list .post header h1 {
+      grid-column: content-start / content-end;
+    }
   }
 
   .list .post time {
@@ -329,12 +392,30 @@
     grid-column: gutter-start / gutter-end;
   }
 
-  .post p,
+  .post > * {
-  .post .tags,
-  .post .title {
     grid-column: content-start / content-end;
   }
 
+  .social {
+    display: block flex;
+    margin-left: auto;
+    order: 2;
+  }
+
+  .social > li > a {
+    display: block;
+    height: var(--menu-icon-size);
+    width: var(--menu-icon-size);
+  }
+
+  .social > li > a > span {
+    display: none;
+  }
+
+  .social > li + li:before {
+    padding: 0 0.5rem;
+  }
+
   .youtube iframe {
     aspect-ratio: 16 / 9;
     margin-bottom: -3px;

assets/styles/root/050_site_header.css

@@ -17,104 +17,13 @@
         }
     }
 
-
+    #social-menu-mastodon img { content: var(--mastodon-icon); }
-    header.site a[href],
-    header.site a[href]:hover {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    header.site {
-        display: flex;
-        width: 100%;
-        z-index: 10000;
-    }
-
-    header.site h1 {
-        margin: 0;
-        order: 1;
-    }
-
-    header.site > .grid {
-        align-items: baseline;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0 0.5em;
-        margin: 0 auto;
-        max-width: var(--content-width);
-        padding: 1.5rem 3rem;
-        width: 100%;
-    }
-
-    header.site > .grid > nav {
-        align-items: center;
-        display: flex;
-        justify-content: start;
-        list-style: none;
-    }
-
-    header.site nav > li { display: block; }
-
-    header.site nav:first-of-type {
-        justify-content: start;
-        order: 2;
-    }
-
-    header.site nav:last-of-type {
-        justify-content: end;
-        order: 3;
-    }
-
-    @media (max-width: 516px) {
-        header.site > .platter {
-            border-left: none;
-            border-radius: 0;
-            border-right: none;
-            border-top: none;
-        }
-
-        header.site > .grid { max-width: none; }
-    }
-
-    @media (max-width: 435px) {
-        header.site nav:first-of-type { order: 5; }
-    }
-
-    nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); }
-    nav.social > li:first-child { margin-inline-start: 0; }
-
-    .social {
-        display: block flex;
-        letter-spacing: 2px;
-        margin-left: auto;
-        order: 2;
-    }
-
-    .social > li > a {
-        background-image: var(--url);
-        background-repeat: no-repeat;
-        background-size: var(--menu-icon-size);
-        display: block;
-        height: var(--menu-icon-size);
-        width: var(--menu-icon-size);
-    }
-
-    .social > li > a > span {
-        display: none;
-    }
-
-    .social > li + li:before {
-        color: var(--dark);
-        padding: 0 0.5rem;
-    }
-
-    #social-menu-mastodon img {
-        content: var(--mastodon-icon);
-        position: relative;
-        top: 1px;
-    }
-
     #social-menu-github img { content: var(--github-icon); }
     #social-menu-instagram img { content: var(--instagram-icon); }
     #social-menu-feed img { content: var(--feed-icon); }
+
+    #social-menu-mastodon img {
+        position: relative;
+        top: 1px;
+    }
 }

assets/styles/root/050_typography.css

@@ -80,7 +80,17 @@
         content: "↳";
     }
 
-    header.site nav > .active { font-weight: bold; }
+    header.site h1 > a:hover {
+      text-decoration: none;
+    }
+
+    header.site nav {
+      list-style: none;
+    }
+
+    header.site nav > .active {
+      font-weight: bold;
+    }
 
     h1, h2, h3, h4, h5, h6 {
         font-family: var(--font-family-heading);
@@ -157,6 +167,9 @@
         line-height: var(--line-height);
     }
 
+    .social {
+      letter-spacing: 2px;
+    }
 
     .title {
         font-size: var(--h5-size);

layouts/partials/header.html

@@ -9,13 +9,18 @@
     <nav class="social">
       {{ with site.Menus.social }}
         {{- range . -}}
-        {{- $id := .Identifier -}}
+          {{- $id := .Identifier -}}
-        {{- $targetBlank := .Params.targetBlank | default true -}}
+          {{- $targetBlank := .Params.targetBlank | default true -}}
-        <li id="social-menu-{{ $id }}">
+          <li id="social-menu-{{ $id }}">
-          <a href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}">
+            <a
-            <img alt="{{ .Name }}">
+              href="{{ .URL }}"
-          </a>
+              {{ if $targetBlank }}
-        </li>
+                target="_blank"
+              {{ end }}
+              aria-label="{{ .Name }}">
+              <img alt="{{ .Name }}" width=20 height=20>
+            </a>
+          </li>
         {{- end -}}
       {{ end }}
     </nav>

layouts/partials/site_nav.html

@@ -3,7 +3,15 @@
 <nav class="site bulleted">
 {{ with site.Menus.main }}
     {{- range . -}}
-    <li><a {{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }} href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
+    <li>
+      <a
+        {{ if $currentPage.HasMenuCurrent "main" . }}
+          class="active"
+        {{ end }}
+        href="{{ .URL }}">
+        <span>{{ .Name }}</span>
+      </a>
+    </li>
     {{- end -}}
 {{ end }}
 </nav>