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>
59 lines
2.7 KiB
HTML
59 lines
2.7 KiB
HTML
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark light">
|
|
<title>
|
|
{{- if .IsHome -}}
|
|
{{ .Site.Title }}
|
|
{{- else -}}
|
|
{{ .Title }} · {{ .Site.Title }}
|
|
{{- end -}}
|
|
</title>
|
|
{{- with .Description }}<meta name="description" content="{{ . }}">{{- end }}
|
|
{{- if not .Description }}{{- with .Site.Params.description }}<meta name="description" content="{{ . }}">{{- end }}{{- end }}
|
|
|
|
{{- /* ── Meta partials ─────────────────────────────────────────── */}}
|
|
{{- partial "meta/seo.html" . -}}
|
|
{{- partial "meta/og.html" . -}}
|
|
{{- partial "meta/ai-disclosure.html" . -}}
|
|
{{- partial "meta/json-ld.html" . -}}
|
|
|
|
{{- /* ── CSS ────────────────────────────────────────────────────── */}}
|
|
{{- if hugo.IsDevelopment }}
|
|
<link rel="stylesheet" href="/vendor/open-props.min.css">
|
|
<link rel="stylesheet" href="/vendor/media.min.css">
|
|
<link rel="stylesheet" href="/css/layers/00-reset.css">
|
|
<link rel="stylesheet" href="/css/layers/01-tokens.css">
|
|
<link rel="stylesheet" href="/css/layers/02-typography.css">
|
|
<link rel="stylesheet" href="/css/layers/03-landmarks.css">
|
|
<link rel="stylesheet" href="/css/layers/04-forms.css">
|
|
<link rel="stylesheet" href="/css/layers/05-components.css">
|
|
<link rel="stylesheet" href="/css/layers/06-navigation.css">
|
|
<link rel="stylesheet" href="/css/layers/07-data-attrs.css">
|
|
<link rel="stylesheet" href="/css/layers/08-utilities.css">
|
|
<link rel="stylesheet" href="/css/layers/09-charts.css">
|
|
<link rel="stylesheet" href="/css/layers/10-chroma.css">
|
|
<link rel="stylesheet" href="/css/layers/11-layout.css">
|
|
<link rel="stylesheet" href="/css/layers/12-landing.css">
|
|
{{- else }}
|
|
<link rel="stylesheet" href="/asw.css">
|
|
{{- end }}
|
|
|
|
{{- 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>
|