docs layout: wrap sidebar+article+toc in <section data-layout="docs">

Docs and vault layouts need a wider grid container for the 3-column
layout (sidebar nav + article + TOC). Wrapped in <section> — a body
child that gets container rules but overrides to --docs-max-width.

Updated CSS selectors: aside:first-of-type → nav[data-nav="sidebar"]
to match the semantic HTML (sidebar IS navigation, not an aside).

assets/css/layers/08-layout.css

@@ -19,6 +19,7 @@
 body > nav,
 body > header,
 body > article,
+body > section,
 body > footer {
   width: 100%;
   margin-right: auto;
@@ -31,6 +32,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-sm);
     padding-right: 0;
@@ -42,6 +44,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-md);
   }
@@ -51,6 +54,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-lg);
   }
@@ -60,6 +64,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-xl);
   }
@@ -69,6 +74,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-2xl);
   }
@@ -144,7 +150,7 @@ nav[data-layout="actions"] a:hover {
 
 /* ── Left sidebar ───────────────────────────────────────────────────── */
 
-[data-layout="docs"] > aside:first-of-type {
+[data-layout="docs"] > nav[data-nav="sidebar"] {
   position: sticky;
   top: calc(var(--nav-height) + var(--space-4));
   max-height: calc(100vh - var(--size-px-10));
@@ -154,25 +160,24 @@ nav[data-layout="actions"] a:hover {
   scrollbar-color: var(--border) transparent;
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar {
   width: var(--scrollbar-size);
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-track {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-track {
   background: transparent;
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: var(--radius-full);
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb:hover {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-thumb:hover {
   background: var(--text-3);
 }
 
 /* Sidebar nav — vertical list, no top-bar chrome */
-[data-layout="docs"] > aside:first-of-type nav,
 nav[data-nav="sidebar"] {
   display: flex;
   flex-direction: column;
@@ -184,7 +189,7 @@ nav[data-nav="sidebar"] {
   gap: 0;
 }
 
-[data-layout="docs"] > aside:first-of-type nav small {
+nav[data-nav="sidebar"] small {
   display: block;
   color: var(--text-3);
   font-size: var(--text-xs);
@@ -196,11 +201,10 @@ nav[data-nav="sidebar"] {
   margin-top: var(--space-4);
 }
 
-[data-layout="docs"] > aside:first-of-type nav small:first-child {
+nav[data-nav="sidebar"] small:first-child {
   margin-top: 0;
 }
 
-[data-layout="docs"] > aside:first-of-type nav ul,
 nav[data-nav="sidebar"] ul {
   display: flex;
   flex-direction: column;
@@ -213,18 +217,18 @@ nav[data-nav="sidebar"] ul {
   font-size: var(--text-sm);
 }
 
-[data-layout="docs"] > aside:first-of-type nav ul li {
+nav[data-nav="sidebar"] ul li {
   margin: 0;
   padding: 0;
 }
 
 /* No pipe separators in sidebar */
-[data-layout="docs"] > aside:first-of-type nav ul li + li::before,
+nav[data-nav="sidebar"] ul li + li::before,
 nav[data-nav="sidebar"] ul li + li::before {
   display: none;
 }
 
-[data-layout="docs"] > aside:first-of-type nav a {
+[data-layout="docs"] > nav[data-nav="sidebar"] nav a {
   display: block;
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
@@ -236,12 +240,12 @@ nav[data-nav="sidebar"] ul li + li::before {
   font-size: var(--text-sm);
 }
 
-[data-layout="docs"] > aside:first-of-type nav a:hover {
+[data-layout="docs"] > nav[data-nav="sidebar"] nav a:hover {
   background-color: var(--surface-hover);
   color: var(--text);
 }
 
-[data-layout="docs"] > aside:first-of-type nav a[aria-current] {
+[data-layout="docs"] > nav[data-nav="sidebar"] nav a[aria-current] {
   background-color: var(--accent-subtle);
   color: var(--accent);
 }
@@ -390,7 +394,7 @@ nav[data-nav="toc"] ul li + li::before {
     grid-template-columns: 1fr;
     padding: var(--space-4);
   }
-  [data-layout="docs"] > aside:first-of-type {
+  [data-layout="docs"] > nav[data-nav="sidebar"] {
     display: none;
   }
 }

layouts/docs/single.html

@@ -12,76 +12,79 @@
 {{ end }}
 
 {{ define "content" }}
-  {{/* Docs sidebar — this is navigation, not an aside */}}
+  <section data-layout="docs">
-  <nav aria-label="Documentation" data-nav="sidebar">
+
-    {{- $menu := index .Site.Menus "docs" -}}
+    <nav aria-label="Documentation" data-nav="sidebar">
-    {{- if $menu -}}
+      {{- $menu := index .Site.Menus "docs" -}}
-      {{- range $menu -}}
+      {{- if $menu -}}
-        {{- if .HasChildren -}}
+        {{- range $menu -}}
-        <small>{{ .Name }}</small>
+          {{- if .HasChildren -}}
+          <small>{{ .Name }}</small>
+          <ul>
+            {{- range .Children -}}
+            <li>
+              <a href="{{ .URL }}"
+                {{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
+                {{- .Name -}}
+              </a>
+            </li>
+            {{- end -}}
+          </ul>
+          {{- else -}}
+          <ul>
+            <li>
+              <a href="{{ .URL }}"
+                {{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
+                {{- .Name -}}
+              </a>
+            </li>
+          </ul>
+          {{- end -}}
+        {{- end -}}
+      {{- else -}}
+        {{- with .CurrentSection -}}
+        <small>{{ .Title }}</small>
         <ul>
-          {{- range .Children -}}
+          {{- range .RegularPages -}}
           <li>
-            <a href="{{ .URL }}"
+            <a href="{{ .RelPermalink }}"
-              {{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
+               {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
-              {{- .Name -}}
+              {{- .LinkTitle -}}
             </a>
           </li>
           {{- end -}}
         </ul>
-        {{- else -}}
-        <ul>
-          <li>
-            <a href="{{ .URL }}"
-              {{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
-              {{- .Name -}}
-            </a>
-          </li>
-        </ul>
         {{- end -}}
       {{- end -}}
-    {{- else -}}
+    </nav>
-      {{- with .CurrentSection -}}
+
-      <small>{{ .Title }}</small>
+    <article role="main">
-      <ul>
+      {{ .Content }}
-        {{- range .RegularPages -}}
+
-        <li>
+      {{- if or .PrevInSection .NextInSection -}}
-          <a href="{{ .RelPermalink }}"
+      <footer data-role="prev-next">
-             {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
+        {{- with .NextInSection -}}
-            {{- .LinkTitle -}}
+        <a href="{{ .RelPermalink }}" rel="prev">
-          </a>
+          <small>← Previous</small>
-        </li>
+          <span>{{ .LinkTitle }}</span>
+        </a>
         {{- end -}}
-      </ul>
+        {{- with .PrevInSection -}}
+        <a href="{{ .RelPermalink }}" rel="next">
+          <small>Next →</small>
+          <span>{{ .LinkTitle }}</span>
+        </a>
+        {{- end -}}
+      </footer>
       {{- end -}}
+    </article>
+
+    {{- with .TableOfContents -}}
+    <aside data-toc>
+      <small>On this page</small>
+      {{ . }}
+    </aside>
     {{- end -}}
-  </nav>
 
-  <article role="main">
+  </section>
-    {{ .Content }}
-
-    {{- if or .PrevInSection .NextInSection -}}
-    <footer data-role="prev-next">
-      {{- with .NextInSection -}}
-      <a href="{{ .RelPermalink }}" rel="prev">
-        <small>← Previous</small>
-        <span>{{ .LinkTitle }}</span>
-      </a>
-      {{- end -}}
-      {{- with .PrevInSection -}}
-      <a href="{{ .RelPermalink }}" rel="next">
-        <small>Next →</small>
-        <span>{{ .LinkTitle }}</span>
-      </a>
-      {{- end -}}
-    </footer>
-    {{- end -}}
-  </article>
-
-  {{- with .TableOfContents -}}
-  <aside data-toc>
-    <small>On this page</small>
-    {{ . }}
-  </aside>
-  {{- end -}}
 {{ end }}

layouts/vault/single.html

@@ -12,81 +12,84 @@
 {{ end }}
 
 {{ define "content" }}
-  {{/* Vault sidebar navigation */}}
+  <section data-layout="docs">
-  <nav aria-label="Vault" data-nav="sidebar">
+
-    {{- $menuName := .Site.Params.vault_menu | default "vault" -}}
+    <nav aria-label="Vault" data-nav="sidebar">
-    {{- $menu := index .Site.Menus $menuName -}}
+      {{- $menuName := .Site.Params.vault_menu | default "vault" -}}
-    {{- if $menu -}}
+      {{- $menu := index .Site.Menus $menuName -}}
-      {{- range $menu -}}
+      {{- if $menu -}}
-        {{- if .HasChildren -}}
+        {{- range $menu -}}
-        <small>{{ .Name }}</small>
+          {{- if .HasChildren -}}
+          <small>{{ .Name }}</small>
+          <ul>
+            {{- range .Children -}}
+            <li>
+              <a href="{{ .URL }}"
+                {{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
+                {{- .Name -}}
+              </a>
+            </li>
+            {{- end -}}
+          </ul>
+          {{- else -}}
+          <ul>
+            <li>
+              <a href="{{ .URL }}"
+                {{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
+                {{- .Name -}}
+              </a>
+            </li>
+          </ul>
+          {{- end -}}
+        {{- end -}}
+      {{- else -}}
+        {{- with .CurrentSection -}}
+        <small>{{ .Title }}</small>
         <ul>
-          {{- range .Children -}}
+          {{- range .RegularPages -}}
           <li>
-            <a href="{{ .URL }}"
+            <a href="{{ .RelPermalink }}"
-              {{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
+               {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
-              {{- .Name -}}
+              {{- .LinkTitle -}}
             </a>
           </li>
           {{- end -}}
         </ul>
-        {{- else -}}
-        <ul>
-          <li>
-            <a href="{{ .URL }}"
-              {{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
-              {{- .Name -}}
-            </a>
-          </li>
-        </ul>
         {{- end -}}
       {{- end -}}
-    {{- else -}}
+    </nav>
-      {{- with .CurrentSection -}}
+
-      <small>{{ .Title }}</small>
+    <article role="main">
-      <ul>
+      {{ .Content }}
-        {{- range .RegularPages -}}
+
-        <li>
+      {{- $prevURL := index .Params "prev-url" -}}
-          <a href="{{ .RelPermalink }}"
+      {{- $prevTitle := index .Params "prev-title" -}}
-             {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
+      {{- $nextURL := index .Params "next-url" -}}
-            {{- .LinkTitle -}}
+      {{- $nextTitle := index .Params "next-title" -}}
-          </a>
+      {{- if or $prevURL $nextURL -}}
-        </li>
+      <footer data-role="prev-next">
+        {{- if $prevURL -}}
+        <a href="{{ $prevURL }}" rel="prev">
+          <small>← Previous</small>
+          <span>{{ $prevTitle }}</span>
+        </a>
         {{- end -}}
-      </ul>
+        {{- if and $nextURL $nextTitle -}}
+        <a href="{{ $nextURL }}" rel="next">
+          <small>Next →</small>
+          <span>{{ $nextTitle }}</span>
+        </a>
+        {{- end -}}
+      </footer>
       {{- end -}}
+    </article>
+
+    {{- with .TableOfContents -}}
+    <aside data-toc>
+      <small>On this page</small>
+      {{ . }}
+    </aside>
     {{- end -}}
-  </nav>
 
-  <article role="main">
+  </section>
-    {{ .Content }}
-
-    {{- $prevURL := index .Params "prev-url" -}}
-    {{- $prevTitle := index .Params "prev-title" -}}
-    {{- $nextURL := index .Params "next-url" -}}
-    {{- $nextTitle := index .Params "next-title" -}}
-    {{- if or $prevURL $nextURL -}}
-    <footer data-role="prev-next">
-      {{- if $prevURL -}}
-      <a href="{{ $prevURL }}" rel="prev">
-        <small>← Previous</small>
-        <span>{{ $prevTitle }}</span>
-      </a>
-      {{- end -}}
-      {{- if and $nextURL $nextTitle -}}
-      <a href="{{ $nextURL }}" rel="next">
-        <small>Next →</small>
-        <span>{{ $nextTitle }}</span>
-      </a>
-      {{- end -}}
-    </footer>
-    {{- end -}}
-  </article>
-
-  {{- with .TableOfContents -}}
-  <aside data-toc>
-    <small>On this page</small>
-    {{ . }}
-  </aside>
-  {{- end -}}
 {{ end }}