css: move sidebar/TOC component styles out of layout, replace <small> with <h3>

- sidebar and TOC typography/colors moved from 08-layout.css to 03-components.css
- nav[data-nav="sidebar"] and aside[data-toc] layout-only rules remain in 08-layout.css
- <small> section labels replaced with <h3> in sidebar and TOC (semantic + accessible)
- dead selectors removed: nav[data-nav="sidebar"] nav a → nav[data-nav="sidebar"] a,
  nav[data-nav="toc"] (Hugo never outputs data-nav="toc")
- webkit scrollbar pseudo-elements removed (scrollbar-width/color sufficient)
- sidebar/TOC sticky top values split: sidebar top space-4, TOC top space-8 + padding-top
- max-height magic number (--size-px-10) replaced with token expression
- layer convention established: 03=component identity, 04=modifiers, 08=placement only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/layers/02-semantic.css

@@ -88,17 +88,17 @@ textarea {
   font-family: var(--font-ui);
 }
 
-/* ── Nav layout ─────────────────────────────────────────────────────── */
+/* ── Top nav layout ──────────────────────────────────────────────────── */
-/* Ported from Pico CSS, translated to ASW tokens.                       */
+/* Scoped to body > nav — sidebar and other navs are not affected.       */
 
-nav {
+body > nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   overflow: visible;
 }
 
-nav ul {
+body > nav ul {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -108,13 +108,13 @@ nav ul {
   list-style: none;
 }
 
-nav li {
+body > nav li {
   display: inline-block;
   margin: 0;
   padding: var(--space-2) var(--space-3);
 }
 
-nav li a {
+body > nav li a {
   display: inline-block;
   text-decoration: none;
   color: var(--text);
@@ -123,19 +123,19 @@ nav li a {
   border-radius: var(--radius-sm);
 }
 
-nav li a:hover {
+body > nav li a:hover {
   color: var(--accent);
   background: var(--surface-hover);
 }
 
-nav li strong,
+body > nav li strong,
-nav li b {
+body > nav li b {
   color: var(--text);
 }
 
 @media (--md-n-below) {
-  nav { flex-wrap: wrap; gap: var(--space-2); }
+  body > nav { flex-wrap: wrap; gap: var(--space-2); }
-  nav ul { flex-wrap: wrap; gap: var(--space-1); }
+  body > nav ul { flex-wrap: wrap; gap: var(--space-1); }
 }
 
 /* ── Typography: Paragraphs ────────────────────────────────────────── */

assets/css/layers/03-components.css

@@ -265,6 +265,7 @@ body > nav {
   align-items: center;
   padding-top: var(--space-5);
   padding-bottom: var(--space-5);
+
   margin-bottom: var(--space-6);
   border-bottom: var(--border-width) solid var(--border);
 }
@@ -451,7 +452,7 @@ article {
   background: transparent;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  padding: 1rem 1.25rem;
+  padding: var(--size-3) var(--size-4);
   margin: var(--space-3) 0;
 }
 
@@ -953,3 +954,102 @@ dialog > footer {
 [data-role="steps"][data-layout="vertical"] > li > span {
   padding-inline: 0;
 }
+
+/* ── Sidebar nav ────────────────────────────────────────────────────── */
+
+nav[data-nav="sidebar"] h3 {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-5);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-top: var(--space-4);
+  margin-bottom: 0;
+}
+
+nav[data-nav="sidebar"] h3:first-child {
+  margin-top: 0;
+}
+
+nav[data-nav="sidebar"] ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-1);
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+}
+
+nav[data-nav="sidebar"] ul li {
+  margin: 0;
+  padding: 0;
+}
+
+nav[data-nav="sidebar"] a {
+  display: block;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--text-2);
+  text-decoration: none;
+  transition: background-color var(--ease), color var(--ease);
+}
+
+nav[data-nav="sidebar"] a:hover {
+  background-color: var(--surface-hover);
+  color: var(--text);
+}
+
+nav[data-nav="sidebar"] a[aria-current] {
+  background-color: var(--accent-subtle);
+  color: var(--accent);
+}
+
+/* ── TOC (aside) ────────────────────────────────────────────────────── */
+
+aside[data-toc] h3 {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-5);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-2);
+  margin-top: 0;
+}
+
+aside[data-toc] nav ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+}
+
+aside[data-toc] nav ul li {
+  margin: 0;
+  padding: 0;
+}
+
+aside[data-toc] nav a {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-3);
+  text-decoration: none;
+  border-left: var(--border-size-2) solid transparent;
+  transition: color var(--ease), border-color var(--ease);
+}
+
+aside[data-toc] nav a:hover {
+  color: var(--text);
+  border-left-color: var(--border);
+}
+
+aside[data-toc] nav a[aria-current] {
+  color: var(--accent);
+  border-left-color: var(--accent);
+}

assets/css/layers/08-layout.css

@@ -13,71 +13,26 @@
 }
 
 /* ── Body landmark container ────────────────────────────────────────── */
-/* All body-level landmarks share container alignment:
-   <body> > <nav>, <header>, <article role="main">, <footer> */
 
-body > nav,
+body > nav   { width: 100%; }
-body > header,
+body > footer { width: 100%; }
-body > article,
+
-body > section,
+/* Header: wider than article — room for hero titles, eyebrows, meta.   */
-body > footer {
+body > header {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: var(--container-padding);
-  padding-left: var(--container-padding);
-}
-
-@media (--sm-n-above) {
-  body > nav,
-  body > header,
-  body > article,
-  body > section,
-  body > footer {
-    max-width: var(--width-sm);
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-@media (--md-n-above) {
-  body > nav,
-  body > header,
-  body > article,
-  body > section,
-  body > footer {
-    max-width: var(--width-md);
-  }
-}
-
-@media (--lg-n-above) {
-  body > nav,
-  body > header,
-  body > article,
-  body > section,
-  body > footer {
   max-width: var(--width-lg);
-  }
+  margin-inline: auto;
+  padding-inline: var(--container-padding);
 }
 
-@media (--xl-n-above) {
+/* Article and section: standard content width. Reading width lives on
-  body > nav,
+   inner elements (p, li…) via max-inline-size — not on the container.  */
-  body > header,
+body > article,
-  body > article,
+body > section {
-  body > section,
+  width: 100%;
-  body > footer {
+  max-width: var(--width-lg);
-    max-width: var(--width-xl);
+  margin-inline: auto;
-  }
+  padding-inline: var(--container-padding);
-}
-
-@media (--xxl-n-above) {
-  body > nav,
-  body > header,
-  body > article,
-  body > section,
-  body > footer {
-    max-width: var(--width-2xl);
-  }
 }
 
 /* ── Body baseline ──────────────────────────────────────────────────── */
@@ -148,106 +103,21 @@ nav[data-layout="actions"] a:hover {
   align-items: start;
 }
 
-/* ── Left sidebar ───────────────────────────────────────────────────── */
+/* ── Sidebar + TOC shared sticky behaviour ──────────────────────────── */
 
-[data-layout="docs"] > nav[data-nav="sidebar"] {
+[data-layout="docs"] > nav[data-nav="sidebar"],
+[data-layout="docs"] > aside[data-toc] {
   position: sticky;
-  top: calc(var(--nav-height) + var(--space-4));
+  max-height: calc(100vh - var(--nav-height) - var(--space-4) * 2);
-  max-height: calc(100vh - var(--size-px-10));
   overflow-y: auto;
-  /* ASW-styled scrollbar — thin, subtle, no system chrome */
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
 }
 
-[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar {
+/* ── Left sidebar ───────────────────────────────────────────────────── */
-  width: var(--scrollbar-size);
-}
 
-[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-track {
+[data-layout="docs"] > nav[data-nav="sidebar"] {
-  background: transparent;
+  top: calc(var(--nav-height) + var(--space-4));
-}
-
-[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: var(--radius-full);
-}
-
-[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-thumb:hover {
-  background: var(--text-3);
-}
-
-/* Sidebar nav — vertical list, no top-bar chrome */
-nav[data-nav="sidebar"] {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 0;
-  margin: 0;
-  border: none;
-  gap: 0;
-}
-
-nav[data-nav="sidebar"] small {
-  display: block;
-  color: var(--text-3);
-  font-size: var(--text-xs);
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 0 var(--space-3);
-  margin-bottom: var(--space-2);
-  margin-top: var(--space-4);
-}
-
-nav[data-nav="sidebar"] small:first-child {
-  margin-top: 0;
-}
-
-nav[data-nav="sidebar"] ul {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--space-1);
-  font-family: var(--font-ui);
-  font-size: var(--text-sm);
-}
-
-nav[data-nav="sidebar"] ul li {
-  margin: 0;
-  padding: 0;
-}
-
-/* No pipe separators in sidebar */
-nav[data-nav="sidebar"] ul li + li::before,
-nav[data-nav="sidebar"] ul li + li::before {
-  display: none;
-}
-
-[data-layout="docs"] > nav[data-nav="sidebar"] nav a {
-  display: block;
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-md);
-  color: var(--text-2);
-  text-decoration: none;
-  text-align: left;
-  transition: background-color var(--ease), color var(--ease);
-  font-family: var(--font-ui);
-  font-size: var(--text-sm);
-}
-
-[data-layout="docs"] > nav[data-nav="sidebar"] nav a:hover {
-  background-color: var(--surface-hover);
-  color: var(--text);
-}
-
-[data-layout="docs"] > nav[data-nav="sidebar"] nav a[aria-current] {
-  background-color: var(--accent-subtle);
-  color: var(--accent);
 }
 
 /* ── Main content ───────────────────────────────────────────────────── */
@@ -259,77 +129,10 @@ nav[data-nav="sidebar"] ul li + li::before {
 /* ── Right TOC ──────────────────────────────────────────────────────── */
 
 [data-layout="docs"] > aside[data-toc] {
-  position: sticky;
+  top: calc(var(--nav-height) + var(--space-8));
-  top: calc(var(--nav-height) + var(--space-4));
+  padding-top: var(--space-8);
-  max-height: calc(100vh - var(--size-px-10));
-  overflow-y: auto;
 }
 
-/* TOC nav — vertical, compact, no top-bar chrome */
-[data-layout="docs"] > aside[data-toc] nav,
-nav[data-nav="toc"] {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 0;
-  margin: 0;
-  border: none;
-  gap: 0;
-}
-
-[data-layout="docs"] > aside[data-toc] small {
-  display: block;
-  color: var(--text-3);
-  font-size: var(--text-xs);
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: var(--space-2);
-}
-
-[data-layout="docs"] > aside[data-toc] nav ul,
-nav[data-nav="toc"] ul {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--space-1);
-  font-size: var(--text-xs);
-}
-
-[data-layout="docs"] > aside[data-toc] nav ul li {
-  margin: 0;
-  padding: 0;
-}
-
-[data-layout="docs"] > aside[data-toc] nav ul li + li::before,
-nav[data-nav="toc"] ul li + li::before {
-  display: none;
-}
-
-[data-layout="docs"] > aside[data-toc] nav a {
-  display: block;
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-xs);
-  color: var(--text-3);
-  text-decoration: none;
-  text-align: left;
-  border-left: var(--border-size-2) solid transparent;
-  transition: color var(--ease), border-color var(--ease);
-}
-
-[data-layout="docs"] > aside[data-toc] nav a:hover {
-  color: var(--text);
-  border-left-color: var(--border);
-}
-
-[data-layout="docs"] > aside[data-toc] nav a[aria-current] {
-  color: var(--accent);
-  border-left-color: var(--accent);
-}
 
 /* ── Prev/Next navigation ───────────────────────────────────────────── */
 

layouts/docs/single.html

@@ -19,7 +19,7 @@
       {{- if $menu -}}
         {{- range $menu -}}
           {{- if .HasChildren -}}
-          <small>{{ .Name }}</small>
+          <h3>{{ .Name }}</h3>
           <ul>
             {{- range .Children -}}
             <li>
@@ -43,7 +43,7 @@
         {{- end -}}
       {{- else -}}
         {{- with .CurrentSection -}}
-        <small>{{ .Title }}</small>
+        <h3>{{ .Title }}</h3>
         <ul>
           {{- range .RegularPages -}}
           <li>
@@ -81,7 +81,7 @@
 
     {{- with .TableOfContents -}}
     <aside data-toc>
-      <small>On this page</small>
+      <h3>On this page</h3>
       {{ . }}
     </aside>
     {{- end -}}

layouts/vault/single.html

@@ -20,7 +20,7 @@
       {{- if $menu -}}
         {{- range $menu -}}
           {{- if .HasChildren -}}
-          <small>{{ .Name }}</small>
+          <h3>{{ .Name }}</h3>
           <ul>
             {{- range .Children -}}
             <li>
@@ -44,7 +44,7 @@
         {{- end -}}
       {{- else -}}
         {{- with .CurrentSection -}}
-        <small>{{ .Title }}</small>
+        <h3>{{ .Title }}</h3>
         <ul>
           {{- range .RegularPages -}}
           <li>
@@ -86,7 +86,7 @@
 
     {{- with .TableOfContents -}}
     <aside data-toc>
-      <small>On this page</small>
+      <h3>On this page</h3>
       {{ . }}
     </aside>
     {{- end -}}