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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue