Ludo
6d654e884b
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>
29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
<nav>
|
|
<ul><li><a href="/"><strong>{{ .Site.Title }}</strong></a></li></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>
|