feat: oklch color system, hamburger nav, theme toggle, footer, CSS fixes
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:
parent
e0bda45953
commit
6d654e884b
GPG key ID:
F6E479DEFAB84D6E
12 changed files with 390 additions and 195 deletions
|
|
@ -27,7 +27,6 @@
|
|||
"h6",
|
||||
"head",
|
||||
"header",
|
||||
"hgroup",
|
||||
"hr",
|
||||
"html",
|
||||
"input",
|
||||
|
|
@ -45,7 +44,6 @@
|
|||
"script",
|
||||
"section",
|
||||
"select",
|
||||
"small",
|
||||
"span",
|
||||
"strong",
|
||||
"summary",
|
||||
|
|
@ -62,6 +60,7 @@
|
|||
"ul"
|
||||
],
|
||||
"classes": [
|
||||
"chroma",
|
||||
"footnote-backref",
|
||||
"footnote-ref",
|
||||
"footnotes",
|
||||
|
|
@ -213,6 +212,7 @@
|
|||
"timeline",
|
||||
"token-colour-mapping",
|
||||
"token-mapping-prism",
|
||||
"try-the-shortcodes",
|
||||
"two-columns",
|
||||
"typography",
|
||||
"typography-scale",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,37 @@
|
|||
{{ partial "nav.html" . }}
|
||||
{{ block "content" . }}{{ end }}
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
{{ .Content }}
|
||||
|
||||
{{- if or .PrevInSection .NextInSection }}
|
||||
<footer>
|
||||
<footer data-role="prev-next">
|
||||
{{- with .PrevInSection }}
|
||||
<a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
{{ .Content }}
|
||||
|
||||
{{- if or .PrevInSection .NextInSection -}}
|
||||
<footer>
|
||||
<footer data-role="prev-next">
|
||||
{{- with .NextInSection -}}
|
||||
<a href="{{ .RelPermalink }}" rel="prev">
|
||||
<span aria-hidden="true">←</span> {{ .LinkTitle }}
|
||||
|
|
@ -52,4 +52,33 @@
|
|||
{{- end -}}
|
||||
|
||||
</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 }}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
{{ .Content }}
|
||||
|
||||
{{- if or .PrevInSection .NextInSection }}
|
||||
<footer>
|
||||
<footer data-role="prev-next">
|
||||
{{- with .PrevInSection }}
|
||||
<a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -41,3 +41,19 @@
|
|||
{{- range .AlternativeOutputFormats -}}
|
||||
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
|
||||
{{- 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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,29 @@
|
|||
<nav>
|
||||
<ul><li><a href="/"><strong>{{ .Site.Title }}</strong></a></li></ul>
|
||||
<ul>
|
||||
<ul data-nav-links>
|
||||
{{- range sort hugo.Data.nav.items "weight" }}
|
||||
<li><a href="{{ .url }}"{{ if eq (relURL .url) $.RelPermalink }} aria-current="page"{{ end }}>{{ .name }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
<button data-nav-toggle aria-label="Menu" hidden></button>
|
||||
<button data-theme-toggle aria-label="Toggle theme"></button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -52,28 +52,31 @@
|
|||
--palette-hue: 250; /* blue-violet default */
|
||||
--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-1: var(--color-13); /* ~16% */
|
||||
--surface-2: var(--color-11); /* ~20% */
|
||||
--surface: oklch(12% 0.02 var(--palette-hue));
|
||||
--surface-1: oklch(15% 0.02 var(--palette-hue));
|
||||
--surface-2: oklch(18% 0.02 var(--palette-hue));
|
||||
--surface-3: oklch(21% 0.02 var(--palette-hue));
|
||||
--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-2: var(--color-5); /* 80% */
|
||||
--text-3: var(--color-7); /* 66% */
|
||||
--text-dim: var(--color-9); /* 53% */
|
||||
--text: oklch(92% 0.02 var(--palette-hue));
|
||||
--text-2: oklch(78% 0.03 var(--palette-hue));
|
||||
--text-3: oklch(62% 0.03 var(--palette-hue));
|
||||
--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-hover: var(--color-7); /* 66% */
|
||||
--on-accent: var(--color-16);
|
||||
--accent-focus: oklch(58% 0.15 var(--palette-hue) / 0.35);
|
||||
--accent-subtle: oklch(58% 0.15 var(--palette-hue) / 0.10);
|
||||
--accent: oklch(65% var(--palette-chroma) var(--palette-hue));
|
||||
--accent-hover: oklch(72% var(--palette-chroma) var(--palette-hue));
|
||||
--on-accent: oklch(5% 0.02 var(--palette-hue));
|
||||
--accent-focus: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.35);
|
||||
--accent-subtle: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.10);
|
||||
|
||||
/* ── Links — fixed blue hue, not palette-driven ─────────────────
|
||||
Blue is the web convention. Accent is palette-tinted UI chrome. */
|
||||
|
|
@ -85,14 +88,14 @@
|
|||
--link-focus: oklch(65% 0.06 250);
|
||||
|
||||
/* Secondary accents — fixed hues, not palette-driven */
|
||||
--accent-blue: oklch(65% 0.15 250); /* matches --link */
|
||||
--accent-red: oklch(65% 0.18 25); /* matches --error */
|
||||
--accent-orange: oklch(75% 0.15 80); /* matches --warn */
|
||||
--accent-blue: oklch(65% 0.15 250);
|
||||
--accent-red: oklch(65% 0.18 25);
|
||||
--accent-orange: oklch(75% 0.15 80);
|
||||
|
||||
/* ── Border ────────────────────────────────────────────────────── */
|
||||
/* ── Border — subtle steps between surfaces ────────────────────── */
|
||||
|
||||
--border: var(--color-14); /* ~20% lightness */
|
||||
--border-subtle: var(--color-15); /* ~16% lightness */
|
||||
--border: oklch(25% 0.03 var(--palette-hue));
|
||||
--border-subtle: oklch(20% 0.02 var(--palette-hue));
|
||||
--border-width: 1px;
|
||||
--outline-width: 2px;
|
||||
|
||||
|
|
@ -131,12 +134,12 @@
|
|||
--h5-weight: var(--font-weight-6); /* 600 */
|
||||
--h6-weight: var(--font-weight-6);
|
||||
|
||||
--h1-color: var(--color-2);
|
||||
--h2-color: var(--color-3);
|
||||
--h3-color: var(--color-3);
|
||||
--h4-color: var(--color-5);
|
||||
--h5-color: var(--color-5);
|
||||
--h6-color: var(--color-7);
|
||||
--h1-color: oklch(95% 0.02 var(--palette-hue));
|
||||
--h2-color: oklch(90% 0.02 var(--palette-hue));
|
||||
--h3-color: oklch(85% 0.03 var(--palette-hue));
|
||||
--h4-color: oklch(78% 0.03 var(--palette-hue));
|
||||
--h5-color: oklch(72% 0.03 var(--palette-hue));
|
||||
--h6-color: oklch(65% 0.03 var(--palette-hue));
|
||||
|
||||
/* ── Spacing aliases ─────────────────────────────────────────────
|
||||
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 */
|
||||
|
||||
/* Structural dimensions */
|
||||
--sidebar-width: 220px; /* docs sidebar column */
|
||||
--toc-width: 200px; /* docs TOC column */
|
||||
--sidebar-link-max: var(--size-12); /* max-width for sidebar nav links */
|
||||
--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 */
|
||||
--docs-max-width: 1400px; /* docs layout outer cap */
|
||||
--card-min-width: 280px; /* card-grid minmax floor */
|
||||
|
|
@ -227,7 +233,7 @@
|
|||
--kbd-bg: var(--text);
|
||||
--kbd-color: var(--surface);
|
||||
--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 ─────────────────────────────────────────────────── */
|
||||
|
||||
|
|
@ -245,7 +251,7 @@
|
|||
--warn: oklch(75% 0.15 80); /* amber */
|
||||
--error: oklch(75% 0.15 25); /* red */
|
||||
--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-focus: oklch(65% 0.06 25);
|
||||
|
|
@ -253,7 +259,7 @@
|
|||
/* ── Component tokens ─────────────────────────────────────────────── */
|
||||
|
||||
--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);
|
||||
--accordion-active: var(--accent-hover);
|
||||
|
||||
|
|
@ -287,8 +293,8 @@
|
|||
Hues are FIXED (like state colors) — not palette-driven.
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
--syntax-comment: var(--color-9); /* muted — same as --text-dim */
|
||||
--syntax-punctuation: var(--color-9); /* same muted level */
|
||||
--syntax-comment: oklch(48% 0.03 var(--palette-hue)); /* same as --text-dim */
|
||||
--syntax-punctuation: oklch(48% 0.03 var(--palette-hue)); /* same muted level */
|
||||
--syntax-string: oklch(75% 0.15 145); /* green — same as --ok */
|
||||
--syntax-keyword: oklch(72% 0.15 250); /* blue — close to --link-hover */
|
||||
--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
|
||||
Subtle upscaling at large viewports — all rem values follow.
|
||||
|
|
|
|||
|
|
@ -9,23 +9,20 @@
|
|||
/* ── Navigation ────────────────────────────────────────────────────────*/
|
||||
/* 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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-5);
|
||||
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
||||
margin-bottom: var(--space-6);
|
||||
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 {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
|
|
@ -66,134 +63,95 @@ body > nav a[aria-current="page"] {
|
|||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Medium screens: allow links to wrap */
|
||||
@media (--nav-compact) {
|
||||
body > nav ul {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 0;
|
||||
}
|
||||
/* ── Theme toggle ─────────────────────────────────────────────────────*/
|
||||
|
||||
body > nav [data-theme-toggle] {
|
||||
background: none;
|
||||
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) {
|
||||
body > nav {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
body > nav ul:last-child {
|
||||
flex-wrap: wrap;
|
||||
body > nav > ul:first-child {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
body > nav ul:last-child li + li::before {
|
||||
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 {
|
||||
body > nav [data-nav-toggle] {
|
||||
display: block;
|
||||
padding: 0.35rem 1rem;
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
transition: background-color var(--ease-fast), color var(--ease-fast);
|
||||
}
|
||||
order: 2;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
body > nav details > ul li a:hover {
|
||||
background: var(--border-subtle);
|
||||
color: var(--text);
|
||||
}
|
||||
body > nav [data-theme-toggle] {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
/* Close dropdown when clicking outside (CSS-only via :focus-within) */
|
||||
nav details:not(:focus-within) > ul,
|
||||
nav details:not(:focus-within) > div {
|
||||
/* Allow browser default open/close behavior —
|
||||
no forced hiding. Agent can add JS for click-outside. */
|
||||
}
|
||||
body > nav [data-nav-links] {
|
||||
order: 4;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
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 */
|
||||
@media (--md-n-below) {
|
||||
nav details > ul,
|
||||
nav details > div {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-left: 2px solid var(--border);
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.25rem 0 0.25rem 0.5rem;
|
||||
background: transparent;
|
||||
body > nav [data-nav-links] li + li::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > nav [data-nav-links] a {
|
||||
display: block;
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
|
||||
body > nav [data-nav-links][data-collapsed] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -209,7 +167,7 @@ article {
|
|||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4) var(--space-5a);
|
||||
margin: var(--space-3) 0;
|
||||
/* margin: var(--space-3) 0; */
|
||||
}
|
||||
|
||||
article > header {
|
||||
|
|
@ -286,7 +244,8 @@ article dt:first-of-type {
|
|||
|
||||
/* ── Sections ──────────────────────────────────────────────────────────*/
|
||||
|
||||
section + section {
|
||||
article section + section,
|
||||
main section + section {
|
||||
padding-top: var(--space-5);
|
||||
border-top: var(--border-width) solid var(--border-subtle);
|
||||
}
|
||||
|
|
@ -316,13 +275,71 @@ article[data-role="card"] header h3 {
|
|||
|
||||
/* ── Footer ────────────────────────────────────────────────────────────*/
|
||||
|
||||
body > footer,
|
||||
footer:last-child {
|
||||
margin-top: 3rem;
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-6);
|
||||
body > footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 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);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ nav[data-nav="sidebar"] h3 {
|
|||
font-weight: var(--weight-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: var(--space-4);
|
||||
margin-bottom: 0;
|
||||
margin-top: var(--space-3);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
nav[data-nav="sidebar"] h3:first-child {
|
||||
|
|
@ -29,17 +29,25 @@ nav[data-nav="sidebar"] ul {
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: var(--space-1);
|
||||
gap: 0;
|
||||
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 {
|
||||
display: block;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-2);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -72,10 +80,14 @@ aside[data-toc] nav ul {
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: var(--space-1);
|
||||
gap: 0;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
aside[data-toc] nav ul li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
aside[data-toc] nav a {
|
||||
display: block;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
/* ── Wrapper ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.chroma {
|
||||
background: var(--surface-2);
|
||||
background: var(--surface-1);
|
||||
border-radius: var(--radius-2);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.chroma pre {
|
||||
background: var(--surface-2);
|
||||
background: var(--surface-1);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-2);
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ nav[data-layout="actions"] a:hover {
|
|||
|
||||
[data-layout="docs"] {
|
||||
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;
|
||||
gap: var(--space-6);
|
||||
max-width: var(--docs-max-width);
|
||||
|
|
@ -148,8 +148,8 @@ nav[data-layout="actions"] a:hover {
|
|||
|
||||
[data-role="prev-next"] a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
text-decoration: none;
|
||||
color: var(--text-2);
|
||||
max-width: 45%;
|
||||
|
|
@ -160,13 +160,8 @@ nav[data-layout="actions"] a:hover {
|
|||
color: var(--accent);
|
||||
}
|
||||
|
||||
[data-role="prev-next"] a[rel="prev"] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
[data-role="prev-next"] a[rel="next"] {
|
||||
align-items: flex-end;
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
[data-role="prev-next"] small {
|
||||
|
|
@ -185,7 +180,7 @@ nav[data-layout="actions"] a:hover {
|
|||
|
||||
@media (--docs-toc-hidden) {
|
||||
[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] {
|
||||
display: none;
|
||||
|
|
@ -205,8 +200,10 @@ nav[data-layout="actions"] a:hover {
|
|||
/* Article content column: reading-optimised prose width.
|
||||
Overrides body > article container sizing from 08-layout.css. */
|
||||
[data-layout="docs"] > article {
|
||||
max-width: var(--width-prose);
|
||||
min-width: 0;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
max-width: var(--width-prose);
|
||||
}
|
||||
|
||||
/* ── Console layout ─────────────────────────────────────────────────── */
|
||||
|
|
@ -215,7 +212,7 @@ nav[data-layout="actions"] a:hover {
|
|||
|
||||
[data-layout="console"] {
|
||||
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;
|
||||
gap: var(--space-6);
|
||||
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) {
|
||||
[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] {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue