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

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

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

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

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