trentuna/asw
8
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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:
Vigilio Desto 2026-04-10 21:05:31 +02:00
parent 8ea2358412
commit a302d81f14
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
4 changed files with 151 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

34
assets/css/layers/08-layout.css
View file

@ -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;
}
}