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).
This commit is contained in:
parent
8ea2358412
commit
a302d81f14
GPG key ID:
159D6AD58C8E55E9
4 changed files with 151 additions and 141 deletions
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,76 +12,79 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
{{/* Docs sidebar — this is navigation, not an aside */}}
|
||||
<nav aria-label="Documentation" data-nav="sidebar">
|
||||
{{- $menu := index .Site.Menus "docs" -}}
|
||||
{{- if $menu -}}
|
||||
{{- range $menu -}}
|
||||
{{- if .HasChildren -}}
|
||||
<small>{{ .Name }}</small>
|
||||
<section data-layout="docs">
|
||||
|
||||
<nav aria-label="Documentation" data-nav="sidebar">
|
||||
{{- $menu := index .Site.Menus "docs" -}}
|
||||
{{- if $menu -}}
|
||||
{{- range $menu -}}
|
||||
{{- 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 }}"
|
||||
{{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
|
||||
{{- .Name -}}
|
||||
<a href="{{ .RelPermalink }}"
|
||||
{{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
|
||||
{{- .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 -}}
|
||||
{{- with .CurrentSection -}}
|
||||
<small>{{ .Title }}</small>
|
||||
<ul>
|
||||
{{- range .RegularPages -}}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}"
|
||||
{{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
|
||||
{{- .LinkTitle -}}
|
||||
</a>
|
||||
</li>
|
||||
</nav>
|
||||
|
||||
<article role="main">
|
||||
{{ .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 -}}
|
||||
</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">
|
||||
{{ .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 -}}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -12,81 +12,84 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
{{/* Vault sidebar navigation */}}
|
||||
<nav aria-label="Vault" data-nav="sidebar">
|
||||
{{- $menuName := .Site.Params.vault_menu | default "vault" -}}
|
||||
{{- $menu := index .Site.Menus $menuName -}}
|
||||
{{- if $menu -}}
|
||||
{{- range $menu -}}
|
||||
{{- if .HasChildren -}}
|
||||
<small>{{ .Name }}</small>
|
||||
<section data-layout="docs">
|
||||
|
||||
<nav aria-label="Vault" data-nav="sidebar">
|
||||
{{- $menuName := .Site.Params.vault_menu | default "vault" -}}
|
||||
{{- $menu := index .Site.Menus $menuName -}}
|
||||
{{- if $menu -}}
|
||||
{{- range $menu -}}
|
||||
{{- 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 }}"
|
||||
{{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
|
||||
{{- .Name -}}
|
||||
<a href="{{ .RelPermalink }}"
|
||||
{{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
|
||||
{{- .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 -}}
|
||||
{{- with .CurrentSection -}}
|
||||
<small>{{ .Title }}</small>
|
||||
<ul>
|
||||
{{- range .RegularPages -}}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}"
|
||||
{{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
|
||||
{{- .LinkTitle -}}
|
||||
</a>
|
||||
</li>
|
||||
</nav>
|
||||
|
||||
<article role="main">
|
||||
{{ .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 -}}
|
||||
</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">
|
||||
{{ .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 -}}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue