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

feat: oklch color system, hamburger nav, theme toggle, footer, CSS fixes

Browse source 
Color system:
- Replace all --color-N references in dark mode with oklch()
- Fine-grained surface steps (12%→15%→18%→21%→22%)
- Smooth text gradient (92%→78%→62%→48%)
- Heading hierarchy (95%→65%)
- All palette-driven via --palette-hue and --palette-chroma

Navigation:
- Hamburger menu for mobile (data-nav-toggle + JS)
- Theme toggle button (sun/moon, localStorage persistence)
- data-theme="light|dark" override on <html>
- Cleaned nav CSS, removed old dropdown conflicts

Footer:
- Three-column nav grid (Framework, Resources, Project)
- Branding header + tagline
- Proper semantic structure (header + 3 nav + p)

Fixes:
- Sidebar: compact spacing, --sidebar-link-max token
- TOC: compact, scroll spy with IntersectionObserver
- Prev/next: inline arrows, data-role="prev-next" restored
- Section dividers scoped to article/main only
- Grid columns use tokens not hardcoded values

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 20:43:56 +02:00
parent e0bda45953
commit 6d654e884b
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
12 changed files with 390 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

4
site/hugo_stats.json
View file

@ -27,7 +27,6 @@
"h6", "h6",
"head", "head",
"header", "header",
"hgroup",
"hr", "hr",
"html", "html",
"input", "input",
@ -45,7 +44,6 @@
"script", "script",
"section", "section",
"select", "select",
"small",
"span", "span",
"strong", "strong",
"summary", "summary",
@ -62,6 +60,7 @@
"ul" "ul"
], ],
"classes": [ "classes": [
"chroma",
"footnote-backref", "footnote-backref",
"footnote-ref", "footnote-ref",
"footnotes", "footnotes",
@ -213,6 +212,7 @@
"timeline", "timeline",
"token-colour-mapping", "token-colour-mapping",
"token-mapping-prism", "token-mapping-prism",
"try-the-shortcodes",
"two-columns", "two-columns",
"typography", "typography",
"typography-scale", "typography-scale",

32
site/layouts/_default/baseof.html
View file

@ -7,7 +7,37 @@
{{ partial "nav.html" . }} {{ partial "nav.html" . }}
{{ block "content" . }}{{ end }} {{ block "content" . }}{{ end }}
<footer> <footer>
<a href="/">{{ .Site.Title }}</a> · {{ now.Format "2006" }} <header>
<strong>Agentic Semantic Web</strong>
<p>Semantic HTML for the agentic era.</p>
</header>
<nav aria-label="Framework">
<h3>Framework</h3>
<ul>
<li><a href="/docs/getting-started/introduction/">Getting Started</a></li>
<li><a href="/docs/core/tokens/">Token System</a></li>
<li><a href="/docs/core/data-attributes/">Data Attributes</a></li>
<li><a href="/layouts/">Layouts</a></li>
</ul>
</nav>
<nav aria-label="Resources">
<h3>Resources</h3>
<ul>
<li><a href="/docs/packs/overview/">Packs</a></li>
<li><a href="/docs/reference/vocabulary/">Vocabulary</a></li>
<li><a href="/docs/reference/charts/">Charts</a></li>
<li><a href="/lab/">Lab</a></li>
</ul>
</nav>
<nav aria-label="Project">
<h3>Project</h3>
<ul>
<li><a href="https://git.trentuna.com/trentuna/asw">Source</a></li>
<li><a href="/docs/llms.txt">llms.txt</a></li>
<li><a href="https://trentuna.com">trentuna.com</a></li>
</ul>
</nav>
<p>Built by <a href="https://trentuna.com">Trentuna</a> · Styled by ASW · {{ now.Format "2006" }}</p>
</footer> </footer>
</body> </body>
</html> </html>

2
site/layouts/_default/single.html
View file

@ -26,7 +26,7 @@
{{ .Content }} {{ .Content }}
{{- if or .PrevInSection .NextInSection }} {{- if or .PrevInSection .NextInSection }}
<footer> <footer data-role="prev-next">
{{- with .PrevInSection }} {{- with .PrevInSection }}
<a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a> <a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a>
{{- end }} {{- end }}

31
site/layouts/docs/single.html
View file

@ -29,7 +29,7 @@
{{ .Content }} {{ .Content }}
{{- if or .PrevInSection .NextInSection -}} {{- if or .PrevInSection .NextInSection -}}
<footer> <footer data-role="prev-next">
{{- with .NextInSection -}} {{- with .NextInSection -}}
<a href="{{ .RelPermalink }}" rel="prev"> <a href="{{ .RelPermalink }}" rel="prev">
<span aria-hidden="true">←</span> {{ .LinkTitle }} <span aria-hidden="true">←</span> {{ .LinkTitle }}
@ -52,4 +52,33 @@
{{- end -}} {{- end -}}
</section> </section>
<script>
// TOC scroll spy — highlights current section in the aside
(function(){
var toc = document.querySelector('[data-toc]');
if (!toc) return;
var links = toc.querySelectorAll('a');
if (!links.length) return;
var headings = [];
links.forEach(function(a) {
var id = a.getAttribute('href');
if (id && id.startsWith('#')) {
var el = document.getElementById(id.slice(1));
if (el) headings.push({ el: el, link: a });
}
});
if (!headings.length) return;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
links.forEach(function(a) { a.removeAttribute('aria-current'); });
headings.forEach(function(h) {
if (h.el === entry.target) h.link.setAttribute('aria-current', 'true');
});
}
});
}, { rootMargin: '0px 0px -70% 0px' });
headings.forEach(function(h) { observer.observe(h.el); });
})();
</script>
{{ end }} {{ end }}

2
site/layouts/essay/single.html
View file

@ -27,7 +27,7 @@
{{ .Content }} {{ .Content }}
{{- if or .PrevInSection .NextInSection }} {{- if or .PrevInSection .NextInSection }}
<footer> <footer data-role="prev-next">
{{- with .PrevInSection }} {{- with .PrevInSection }}
<a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a> <a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a>
{{- end }} {{- end }}

16
site/layouts/partials/head.html
View file

@ -41,3 +41,19 @@
{{- range .AlternativeOutputFormats -}} {{- range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}"> <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{- end }} {{- end }}
<script>
// Theme toggle — respects OS preference, persists choice
(function(){
var s = localStorage.getItem('theme');
if (s) document.documentElement.setAttribute('data-theme', s);
document.addEventListener('click', function(e) {
var b = e.target.closest('[data-theme-toggle]');
if (!b) return;
var current = document.documentElement.getAttribute('data-theme')
|| (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
var next = current === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
});
})();
</script>

23
site/layouts/partials/nav.html
View file

@ -1,8 +1,29 @@
<nav> <nav>
<ul><li><a href="/"><strong>{{ .Site.Title }}</strong></a></li></ul> <ul><li><a href="/"><strong>{{ .Site.Title }}</strong></a></li></ul>
<ul> <ul data-nav-links>
{{- range sort hugo.Data.nav.items "weight" }} {{- range sort hugo.Data.nav.items "weight" }}
<li><a href="{{ .url }}"{{ if eq (relURL .url) $.RelPermalink }} aria-current="page"{{ end }}>{{ .name }}</a></li> <li><a href="{{ .url }}"{{ if eq (relURL .url) $.RelPermalink }} aria-current="page"{{ end }}>{{ .name }}</a></li>
{{- end }} {{- end }}
</ul> </ul>
<button data-nav-toggle aria-label="Menu" hidden></button>
<button data-theme-toggle aria-label="Toggle theme"></button>
</nav> </nav>
<script>
// Hamburger — toggle nav links on mobile
(function(){
var btn = document.querySelector('[data-nav-toggle]');
var links = document.querySelector('[data-nav-links]');
if (!btn || !links) return;
// Show button only when JS is available
if (matchMedia('(max-width:767.98px)').matches) btn.hidden = false;
matchMedia('(max-width:767.98px)').addEventListener('change', function(e) {
btn.hidden = !e.matches;
if (!e.matches) links.removeAttribute('data-collapsed');
});
btn.addEventListener('click', function() {
var open = links.hasAttribute('data-collapsed');
if (open) links.removeAttribute('data-collapsed');
else links.setAttribute('data-collapsed', '');
});
})();
</script>

143
src/layers/01-tokens.css
View file

@ -52,28 +52,31 @@
--palette-hue: 250; /* blue-violet default */ --palette-hue: 250; /* blue-violet default */
--palette-chroma: 0.15; --palette-chroma: 0.15;
/* ── Surfaces — dark end of the 16-step scale ─────────────────── */ /* ── Surfaces — oklch for fine-grained dark steps ────────────── */
/* Open Props' 16-step scale is too coarse in the dark end.
We use oklch directly with palette-hue for precise control. */
--surface: var(--color-14); /* ~10% lightness */ --surface: oklch(12% 0.02 var(--palette-hue));
--surface-1: var(--color-13); /* ~16% */ --surface-1: oklch(15% 0.02 var(--palette-hue));
--surface-2: var(--color-11); /* ~20% */ --surface-2: oklch(18% 0.02 var(--palette-hue));
--surface-3: oklch(21% 0.02 var(--palette-hue));
--surface-card: var(--surface-1); --surface-card: var(--surface-1);
--surface-hover: var(--surface-2); --surface-hover: oklch(22% 0.03 var(--palette-hue));
/* ── Text — light end of the scale ────────────────────────────── */ /* ── Text — smooth gradient from bright to muted ────────────── */
--text: var(--color-6); /* 93% lightness */ --text: oklch(92% 0.02 var(--palette-hue));
--text-2: var(--color-5); /* 80% */ --text-2: oklch(78% 0.03 var(--palette-hue));
--text-3: var(--color-7); /* 66% */ --text-3: oklch(62% 0.03 var(--palette-hue));
--text-dim: var(--color-9); /* 53% */ --text-dim: oklch(48% 0.03 var(--palette-hue));
/* ── Accent — peak chroma step, palette-driven ─────────────────── */ /* ── Accent — peak chroma, palette-driven ─────────────────────── */
--accent: var(--color-8); /* 58%, peak chroma */ --accent: oklch(65% var(--palette-chroma) var(--palette-hue));
--accent-hover: var(--color-7); /* 66% */ --accent-hover: oklch(72% var(--palette-chroma) var(--palette-hue));
--on-accent: var(--color-16); --on-accent: oklch(5% 0.02 var(--palette-hue));
--accent-focus: oklch(58% 0.15 var(--palette-hue) / 0.35); --accent-focus: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.35);
--accent-subtle: oklch(58% 0.15 var(--palette-hue) / 0.10); --accent-subtle: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.10);
/* ── Links — fixed blue hue, not palette-driven ───────────────── /* ── Links — fixed blue hue, not palette-driven ─────────────────
Blue is the web convention. Accent is palette-tinted UI chrome. */ Blue is the web convention. Accent is palette-tinted UI chrome. */
@ -85,14 +88,14 @@
--link-focus: oklch(65% 0.06 250); --link-focus: oklch(65% 0.06 250);
/* Secondary accents — fixed hues, not palette-driven */ /* Secondary accents — fixed hues, not palette-driven */
--accent-blue: oklch(65% 0.15 250); /* matches --link */ --accent-blue: oklch(65% 0.15 250);
--accent-red: oklch(65% 0.18 25); /* matches --error */ --accent-red: oklch(65% 0.18 25);
--accent-orange: oklch(75% 0.15 80); /* matches --warn */ --accent-orange: oklch(75% 0.15 80);
/* ── Border ────────────────────────────────────────────────────── */ /* ── Border — subtle steps between surfaces ────────────────────── */
--border: var(--color-14); /* ~20% lightness */ --border: oklch(25% 0.03 var(--palette-hue));
--border-subtle: var(--color-15); /* ~16% lightness */ --border-subtle: oklch(20% 0.02 var(--palette-hue));
--border-width: 1px; --border-width: 1px;
--outline-width: 2px; --outline-width: 2px;
@ -131,12 +134,12 @@
--h5-weight: var(--font-weight-6); /* 600 */ --h5-weight: var(--font-weight-6); /* 600 */
--h6-weight: var(--font-weight-6); --h6-weight: var(--font-weight-6);
--h1-color: var(--color-2); --h1-color: oklch(95% 0.02 var(--palette-hue));
--h2-color: var(--color-3); --h2-color: oklch(90% 0.02 var(--palette-hue));
--h3-color: var(--color-3); --h3-color: oklch(85% 0.03 var(--palette-hue));
--h4-color: var(--color-5); --h4-color: oklch(78% 0.03 var(--palette-hue));
--h5-color: var(--color-5); --h5-color: oklch(72% 0.03 var(--palette-hue));
--h6-color: var(--color-7); --h6-color: oklch(65% 0.03 var(--palette-hue));
/* ── Spacing aliases ───────────────────────────────────────────── /* ── Spacing aliases ─────────────────────────────────────────────
Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem), Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
@ -171,8 +174,11 @@
--container-padding: var(--space-4); /* inline padding at small viewports */ --container-padding: var(--space-4); /* inline padding at small viewports */
/* Structural dimensions */ /* Structural dimensions */
--sidebar-width: 220px; /* docs sidebar column */ --sidebar-link-max: var(--size-12); /* max-width for sidebar nav links */
--toc-width: 200px; /* docs TOC column */ --sidebar-min: 10rem; /* docs sidebar column min */
--sidebar-max: 14rem; /* docs sidebar column max */
--toc-min: 10rem; /* docs TOC column min */
--toc-max: 13rem; /* docs TOC column max */
--nav-height: 60px; /* sticky nav offset */ --nav-height: 60px; /* sticky nav offset */
--docs-max-width: 1400px; /* docs layout outer cap */ --docs-max-width: 1400px; /* docs layout outer cap */
--card-min-width: 280px; /* card-grid minmax floor */ --card-min-width: 280px; /* card-grid minmax floor */
@ -227,7 +233,7 @@
--kbd-bg: var(--text); --kbd-bg: var(--text);
--kbd-color: var(--surface); --kbd-color: var(--surface);
--code-color: var(--text-2); --code-color: var(--text-2);
--table-stripe: color-mix(in oklch, var(--color-15) 50%, transparent); --table-stripe: oklch(8% 0.01 var(--palette-hue) / 0.50);
/* ── Form tokens ─────────────────────────────────────────────────── */ /* ── Form tokens ─────────────────────────────────────────────────── */
@ -245,7 +251,7 @@
--warn: oklch(75% 0.15 80); /* amber */ --warn: oklch(75% 0.15 80); /* amber */
--error: oklch(75% 0.15 25); /* red */ --error: oklch(75% 0.15 25); /* red */
--info: oklch(75% 0.15 250); /* blue */ --info: oklch(75% 0.15 250); /* blue */
--blocked: var(--color-9); --blocked: oklch(48% 0.03 var(--palette-hue));
--error-active: oklch(65% 0.18 25); --error-active: oklch(65% 0.18 25);
--error-focus: oklch(65% 0.06 25); --error-focus: oklch(65% 0.06 25);
@ -253,7 +259,7 @@
/* ── Component tokens ─────────────────────────────────────────────── */ /* ── Component tokens ─────────────────────────────────────────────── */
--track-bg: var(--surface-2); /* progress / meter background */ --track-bg: var(--surface-2); /* progress / meter background */
--modal-overlay: color-mix(in oklch, var(--color-16) 80%, transparent); --modal-overlay: oklch(5% 0.01 var(--palette-hue) / 0.80);
--modal-backdrop: blur(0.375rem); --modal-backdrop: blur(0.375rem);
--accordion-active: var(--accent-hover); --accordion-active: var(--accent-hover);
@ -287,8 +293,8 @@
Hues are FIXED (like state colors) — not palette-driven. Hues are FIXED (like state colors) — not palette-driven.
══════════════════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════════════════ */
--syntax-comment: var(--color-9); /* muted — same as --text-dim */ --syntax-comment: oklch(48% 0.03 var(--palette-hue)); /* same as --text-dim */
--syntax-punctuation: var(--color-9); /* same muted level */ --syntax-punctuation: oklch(48% 0.03 var(--palette-hue)); /* same muted level */
--syntax-string: oklch(75% 0.15 145); /* green — same as --ok */ --syntax-string: oklch(75% 0.15 145); /* green — same as --ok */
--syntax-keyword: oklch(72% 0.15 250); /* blue — close to --link-hover */ --syntax-keyword: oklch(72% 0.15 250); /* blue — close to --link-hover */
--syntax-property: oklch(65% 0.15 250); /* blue — same as --link */ --syntax-property: oklch(65% 0.15 250); /* blue — same as --link */
@ -372,6 +378,73 @@
} }
/* ══════════════════════════════════════════════════════════════════
MANUAL THEME OVERRIDE — data-theme attribute on <html>
Mirrors the prefers-color-scheme block above.
Set by the theme toggle button + persisted in localStorage.
══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
color-scheme: light;
--surface: var(--color-1);
--surface-1: var(--color-2);
--surface-2: var(--color-3);
--surface-card: var(--color-1);
--surface-hover: var(--color-2);
--text: var(--color-14);
--text-2: var(--color-12);
--text-3: var(--color-10);
--text-dim: var(--color-8);
--accent: var(--color-9);
--accent-hover: var(--color-10);
--on-accent: var(--color-1);
--border: var(--color-4);
--border-subtle: var(--color-3);
--link: oklch(45% 0.15 250);
--link-hover: oklch(38% 0.15 250);
--link-underline: oklch(45% 0.08 250);
--link-hover-underline: oklch(38% 0.10 250);
--link-focus: oklch(45% 0.06 250);
--h1-color: var(--color-16);
--h2-color: var(--color-15);
--h3-color: var(--color-14);
--h4-color: var(--color-13);
--h5-color: var(--color-12);
--h6-color: var(--color-11);
--ok: oklch(40% 0.15 145);
--warn: oklch(40% 0.15 80);
--error: oklch(40% 0.15 25);
--info: oklch(40% 0.15 250);
--mark-bg: oklch(92% 0.08 80);
--mark-color: var(--color-15);
--selection: oklch(80% 0.06 250);
--syntax-comment: var(--color-8);
--syntax-punctuation: var(--color-10);
--syntax-string: oklch(40% 0.15 145);
--syntax-keyword: oklch(38% 0.15 250);
--syntax-property: oklch(45% 0.15 250);
--syntax-variable: oklch(40% 0.15 80);
--syntax-deleted: oklch(40% 0.15 25);
--syntax-inserted: oklch(40% 0.15 145);
--syntax-namespace: oklch(40% 0.15 80);
--syntax-url: var(--link);
}
/* Force dark when OS is light but user chose dark */
:root[data-theme="dark"] {
color-scheme: dark;
}
/* ══════════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════════
RESPONSIVE FONT SCALING RESPONSIVE FONT SCALING
Subtle upscaling at large viewports — all rem values follow. Subtle upscaling at large viewports — all rem values follow.

281
src/layers/03-landmarks.css
View file

@ -9,23 +9,20 @@
/* ── Navigation ────────────────────────────────────────────────────────*/ /* ── Navigation ────────────────────────────────────────────────────────*/
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */ /* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
/* Nav content centered at --width-xl without a wrapper element.
max() falls back to --container-padding on narrow viewports. */
body > nav {
padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
}
body > nav { body > nav {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
padding-top: var(--space-5); gap: var(--space-4);
padding-bottom: var(--space-5); padding: var(--space-5) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
margin-bottom: var(--space-6); margin-bottom: var(--space-6);
border-bottom: var(--border-width) solid var(--border); border-bottom: var(--border-width) solid var(--border);
} }
/* Push nav-links and buttons to the right */
body > nav [data-nav-links] {
margin-inline-start: auto;
}
body > nav strong { body > nav strong {
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 700; font-weight: 700;
@ -66,134 +63,95 @@ body > nav a[aria-current="page"] {
color: var(--text); color: var(--text);
} }
/* Medium screens: allow links to wrap */ /* ── Theme toggle ─────────────────────────────────────────────────────*/
@media (--nav-compact) {
body > nav ul { body > nav [data-theme-toggle] {
flex-wrap: wrap; background: none;
gap: 0.25rem 0; border: none;
} cursor: pointer;
font-size: 1.25rem;
padding: var(--space-2);
color: var(--text-2);
transition: color var(--ease-3);
line-height: 1;
} }
/* Small screens: stack brand above links */ body > nav [data-theme-toggle]::before {
content: "☀️";
}
[data-theme="light"] body > nav [data-theme-toggle]::before {
content: "🌙";
}
body > nav [data-theme-toggle]:hover {
color: var(--text);
}
/* ── Hamburger toggle ─────────────────────────────────────────────────*/
body > nav [data-nav-toggle] {
display: none;
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
padding: var(--space-1) var(--space-2);
color: var(--text-2);
transition: color var(--ease-3);
line-height: 1;
}
body > nav [data-nav-toggle]::before {
content: "☰";
}
body > nav [data-nav-toggle]:hover {
color: var(--text);
}
/* ── Mobile nav ───────────────────────────────────────────────────────*/
@media (--md-n-below) { @media (--md-n-below) {
body > nav { body > nav {
flex-direction: column; flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-2); gap: var(--space-2);
} }
body > nav ul:last-child { body > nav > ul:first-child {
flex-wrap: wrap; order: 1;
} }
body > nav ul:last-child li + li::before { body > nav [data-nav-toggle] {
display: none;
}
}
/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
/* <details> inside <nav> becomes a dropdown menu. No classes needed.
Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
body > nav li:has(details) {
display: flex;
align-items: center;
}
body > nav details {
position: relative;
margin: 0;
}
body > nav details summary {
color: var(--text-2);
font-family: var(--font-mono);
font-size: var(--text-sm);
list-style: none;
cursor: pointer;
transition: color var(--ease);
}
body > nav details summary:hover {
color: var(--text);
}
/* Override accordion chevron in nav context */
body > nav details summary::after {
content: "▾";
float: none;
margin-inline-start: 0.25rem;
transform: none;
font-size: var(--text-xs);
}
body > nav details[open] > summary::after {
content: "▴";
transform: none;
}
/* Dropdown panel */
body > nav details > ul,
body > nav details > div {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
min-width: var(--dropdown-min-width);
padding: 0.5rem 0;
margin: 0;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-dropdown);
z-index: 20;
list-style: none;
display: flex;
flex-direction: column;
}
body > nav details > ul li {
margin: 0;
padding: 0;
}
/* Remove pipe separator in dropdown items */
body > nav details > ul li + li::before {
display: none;
}
body > nav details > ul li a {
display: block; display: block;
padding: 0.35rem 1rem; order: 2;
color: var(--text-2); margin-inline-start: auto;
text-decoration: none; }
font-family: var(--font-mono);
font-size: var(--text-sm);
transition: background-color var(--ease-fast), color var(--ease-fast);
}
body > nav details > ul li a:hover { body > nav [data-theme-toggle] {
background: var(--border-subtle); order: 3;
color: var(--text); }
}
/* Close dropdown when clicking outside (CSS-only via :focus-within) */ body > nav [data-nav-links] {
nav details:not(:focus-within) > ul, order: 4;
nav details:not(:focus-within) > div { width: 100%;
/* Allow browser default open/close behavior — flex-direction: column;
no forced hiding. Agent can add JS for click-outside. */ padding-top: var(--space-3);
} border-top: var(--border-width) solid var(--border);
margin-top: var(--space-2);
animation: var(--animation-fade-in) var(--ease-3);
}
/* Mobile: dropdown becomes full-width */ body > nav [data-nav-links] li + li::before {
@media (--md-n-below) { display: none;
nav details > ul, }
nav details > div {
position: static; body > nav [data-nav-links] a {
box-shadow: none; display: block;
border: none; padding: var(--space-2) 0;
border-left: 2px solid var(--border); }
margin-left: 0.5rem;
padding: 0.25rem 0 0.25rem 0.5rem; body > nav [data-nav-links][data-collapsed] {
background: transparent; display: none;
} }
} }
@ -209,7 +167,7 @@ article {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5a); padding: var(--space-4) var(--space-5a);
margin: var(--space-3) 0; /* margin: var(--space-3) 0; */
} }
article > header { article > header {
@ -286,7 +244,8 @@ article dt:first-of-type {
/* ── Sections ──────────────────────────────────────────────────────────*/ /* ── Sections ──────────────────────────────────────────────────────────*/
section + section { article section + section,
main section + section {
padding-top: var(--space-5); padding-top: var(--space-5);
border-top: var(--border-width) solid var(--border-subtle); border-top: var(--border-width) solid var(--border-subtle);
} }
@ -316,13 +275,71 @@ article[data-role="card"] header h3 {
/* ── Footer ────────────────────────────────────────────────────────────*/ /* ── Footer ────────────────────────────────────────────────────────────*/
body > footer, body > footer {
footer:last-child { display: grid;
margin-top: 3rem; grid-template-columns: repeat(4, 1fr);
padding-top: var(--space-5); gap: var(--space-6);
padding-bottom: var(--space-6); margin-top: var(--space-8);
padding: var(--space-6) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
border-top: var(--border-width) solid var(--border); border-top: var(--border-width) solid var(--border);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--text-xs); font-size: var(--text-xs);
color: var(--text-3); color: var(--text-3);
} }
body > footer > p {
grid-column: 1 / -1;
}
body > footer h3 {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-2);
margin-bottom: var(--space-2);
}
body > footer > header strong {
font-family: var(--font-mono);
font-size: var(--text-base);
color: var(--text);
letter-spacing: -0.03em;
}
body > footer > header p {
color: var(--text-dim);
margin-top: var(--space-1);
}
body > footer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
body > footer ul li {
margin: 0;
list-style: none;
}
body > footer a {
color: var(--text-3);
text-decoration: none;
transition: color var(--ease-3);
}
body > footer a:hover {
color: var(--accent);
}
body > footer > p {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--border-subtle);
text-align: center;
color: var(--text-dim);
}

24
src/layers/06-navigation.css
View file

@ -15,8 +15,8 @@ nav[data-nav="sidebar"] h3 {
font-weight: var(--weight-medium); font-weight: var(--weight-medium);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
margin-top: var(--space-4); margin-top: var(--space-3);
margin-bottom: 0; margin-bottom: var(--space-1);
} }
nav[data-nav="sidebar"] h3:first-child { nav[data-nav="sidebar"] h3:first-child {
@ -29,17 +29,25 @@ nav[data-nav="sidebar"] ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: var(--space-1); gap: 0;
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: var(--text-sm); font-size: var(--text-xs);
}
nav[data-nav="sidebar"] ul li {
margin-bottom: 0;
} }
nav[data-nav="sidebar"] a { nav[data-nav="sidebar"] a {
display: block; display: block;
padding: var(--space-2) var(--space-3); padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-2); color: var(--text-2);
text-decoration: none; text-decoration: none;
max-width: var(--sidebar-link-max);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background-color var(--ease), color var(--ease); transition: background-color var(--ease), color var(--ease);
} }
@ -72,10 +80,14 @@ aside[data-toc] nav ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: var(--space-1); gap: 0;
font-size: var(--text-xs); font-size: var(--text-xs);
} }
aside[data-toc] nav ul li {
margin-bottom: 0;
}
aside[data-toc] nav a { aside[data-toc] nav a {
display: block; display: block;
padding: var(--space-1) var(--space-2); padding: var(--space-1) var(--space-2);

4
src/layers/10-chroma.css
View file

@ -11,13 +11,13 @@
/* ── Wrapper ─────────────────────────────────────────────────────────── */ /* ── Wrapper ─────────────────────────────────────────────────────────── */
.chroma { .chroma {
background: var(--surface-2); background: var(--surface-1);
border-radius: var(--radius-2); border-radius: var(--radius-2);
overflow-x: auto; overflow-x: auto;
} }
.chroma pre { .chroma pre {
background: var(--surface-2); background: var(--surface-1);
padding: var(--space-4); padding: var(--space-4);
border-radius: var(--radius-2); border-radius: var(--radius-2);
overflow-x: auto; overflow-x: auto;

23
src/layers/11-layout.css
View file

@ -94,7 +94,7 @@ nav[data-layout="actions"] a:hover {
[data-layout="docs"] { [data-layout="docs"] {
display: grid; display: grid;
grid-template-columns: var(--sidebar-width) 1fr var(--toc-width); grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr minmax(var(--toc-min), var(--toc-max));
grid-template-rows: auto; grid-template-rows: auto;
gap: var(--space-6); gap: var(--space-6);
max-width: var(--docs-max-width); max-width: var(--docs-max-width);
@ -148,8 +148,8 @@ nav[data-layout="actions"] a:hover {
[data-role="prev-next"] a { [data-role="prev-next"] a {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: var(--space-1); gap: var(--space-2);
text-decoration: none; text-decoration: none;
color: var(--text-2); color: var(--text-2);
max-width: 45%; max-width: 45%;
@ -160,13 +160,8 @@ nav[data-layout="actions"] a:hover {
color: var(--accent); color: var(--accent);
} }
[data-role="prev-next"] a[rel="prev"] {
align-items: flex-start;
}
[data-role="prev-next"] a[rel="next"] { [data-role="prev-next"] a[rel="next"] {
align-items: flex-end; margin-inline-start: auto;
margin-left: auto;
} }
[data-role="prev-next"] small { [data-role="prev-next"] small {
@ -185,7 +180,7 @@ nav[data-layout="actions"] a:hover {
@media (--docs-toc-hidden) { @media (--docs-toc-hidden) {
[data-layout="docs"] { [data-layout="docs"] {
grid-template-columns: var(--toc-width) 1fr; grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr;
} }
[data-layout="docs"] > aside[data-toc] { [data-layout="docs"] > aside[data-toc] {
display: none; display: none;
@ -205,8 +200,10 @@ nav[data-layout="actions"] a:hover {
/* Article content column: reading-optimised prose width. /* Article content column: reading-optimised prose width.
Overrides body > article container sizing from 08-layout.css. */ Overrides body > article container sizing from 08-layout.css. */
[data-layout="docs"] > article { [data-layout="docs"] > article {
max-width: var(--width-prose);
min-width: 0; min-width: 0;
justify-self: center;
width: 100%;
max-width: var(--width-prose);
} }
/* ── Console layout ─────────────────────────────────────────────────── */ /* ── Console layout ─────────────────────────────────────────────────── */
@ -215,7 +212,7 @@ nav[data-layout="actions"] a:hover {
[data-layout="console"] { [data-layout="console"] {
display: grid; display: grid;
grid-template-columns: var(--sidebar-width) 1fr var(--toc-width); grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr minmax(var(--toc-min), var(--toc-max));
grid-template-rows: auto; grid-template-rows: auto;
gap: var(--space-6); gap: var(--space-6);
padding: var(--space-6) var(--space-5) var(--space-6) 0; padding: var(--space-6) var(--space-5) var(--space-6) 0;
@ -248,7 +245,7 @@ nav[data-layout="actions"] a:hover {
@media (--docs-toc-hidden) { @media (--docs-toc-hidden) {
[data-layout="console"] { [data-layout="console"] {
grid-template-columns: var(--sidebar-width) 1fr; grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr;
} }
[data-layout="console"] > aside[data-toc] { [data-layout="console"] > aside[data-toc] {
display: none; display: none;