From b42e4942fa95b7291a4a01cc16ba781d4b8e46aa Mon Sep 17 00:00:00 2001 From: Ludo Date: Sat, 11 Apr 2026 02:14:42 +0200 Subject: [PATCH 1/6] css: move sidebar/TOC component styles out of layout, replace with

MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - sidebar and TOC typography/colors moved from 08-layout.css to 03-components.css - nav[data-nav="sidebar"] and aside[data-toc] layout-only rules remain in 08-layout.css - section labels replaced with

in sidebar and TOC (semantic + accessible) - dead selectors removed: nav[data-nav="sidebar"] nav a → nav[data-nav="sidebar"] a, nav[data-nav="toc"] (Hugo never outputs data-nav="toc") - webkit scrollbar pseudo-elements removed (scrollbar-width/color sufficient) - sidebar/TOC sticky top values split: sidebar top space-4, TOC top space-8 + padding-top - max-height magic number (--size-px-10) replaced with token expression - layer convention established: 03=component identity, 04=modifiers, 08=placement only Co-Authored-By: Claude Sonnet 4.6 --- assets/css/layers/02-semantic.css | 22 +-- assets/css/layers/03-components.css | 128 ++++++++++++-- assets/css/layers/08-layout.css | 247 +++------------------------- layouts/docs/single.html | 6 +- layouts/vault/single.html | 6 +- 5 files changed, 156 insertions(+), 253 deletions(-) diff --git a/assets/css/layers/02-semantic.css b/assets/css/layers/02-semantic.css index aadef21..3c93523 100644 --- a/assets/css/layers/02-semantic.css +++ b/assets/css/layers/02-semantic.css @@ -88,17 +88,17 @@ textarea { font-family: var(--font-ui); } -/* ── Nav layout ─────────────────────────────────────────────────────── */ -/* Ported from Pico CSS, translated to ASW tokens. */ +/* ── Top nav layout ──────────────────────────────────────────────────── */ +/* Scoped to body > nav — sidebar and other navs are not affected. */ -nav { +body > nav { display: flex; justify-content: space-between; align-items: center; overflow: visible; } -nav ul { +body > nav ul { display: flex; align-items: center; flex-wrap: wrap; @@ -108,13 +108,13 @@ nav ul { list-style: none; } -nav li { +body > nav li { display: inline-block; margin: 0; padding: var(--space-2) var(--space-3); } -nav li a { +body > nav li a { display: inline-block; text-decoration: none; color: var(--text); @@ -123,19 +123,19 @@ nav li a { border-radius: var(--radius-sm); } -nav li a:hover { +body > nav li a:hover { color: var(--accent); background: var(--surface-hover); } -nav li strong, -nav li b { +body > nav li strong, +body > nav li b { color: var(--text); } @media (--md-n-below) { - nav { flex-wrap: wrap; gap: var(--space-2); } - nav ul { flex-wrap: wrap; gap: var(--space-1); } + body > nav { flex-wrap: wrap; gap: var(--space-2); } + body > nav ul { flex-wrap: wrap; gap: var(--space-1); } } /* ── Typography: Paragraphs ────────────────────────────────────────── */ diff --git a/assets/css/layers/03-components.css b/assets/css/layers/03-components.css index 9fa2940..9583c27 100644 --- a/assets/css/layers/03-components.css +++ b/assets/css/layers/03-components.css @@ -2,10 +2,10 @@ * 03-components.css * UI component patterns (buttons, forms, nav, dialog, details) * Part of: Agentic Semantic Web - * + * * Ported from: Pico CSS v2.1.1 * License: MIT - * + * * Modernizations: * - Uses `accent-color` for checkbox/radio (simpler than background-image) * - Drops class-based button variants (.secondary, .contrast, .outline) @@ -42,8 +42,8 @@ button, text-decoration: none; cursor: pointer; user-select: none; - transition: background-color var(--ease), - border-color var(--ease), + transition: background-color var(--ease), + border-color var(--ease), color var(--ease); } @@ -114,8 +114,8 @@ textarea { background-color: var(--input-bg); color: var(--text); font-weight: var(--font-weight-4); - transition: background-color var(--ease), - border-color var(--ease), + transition: background-color var(--ease), + border-color var(--ease), color var(--ease); } @@ -189,7 +189,7 @@ label:has([type=checkbox], [type=radio]) { margin-right: 0.5em; vertical-align: middle; cursor: pointer; - + /* Modern CSS: use browser's native styling with our accent color */ accent-color: var(--accent); } @@ -265,6 +265,7 @@ body > nav { align-items: center; padding-top: var(--space-5); padding-bottom: var(--space-5); + margin-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--border); } @@ -324,11 +325,11 @@ body > nav a[aria-current="page"] { align-items: flex-start; gap: var(--space-2); } - + body > nav ul:last-child { flex-wrap: wrap; } - + body > nav ul:last-child li + li::before { display: none; } @@ -422,7 +423,7 @@ body > nav details > ul li a:hover { /* 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 — + /* Allow browser default open/close behavior — no forced hiding. Agent can add JS for click-outside. */ } @@ -451,7 +452,7 @@ article { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); - padding: 1rem 1.25rem; + padding: var(--size-3) var(--size-4); margin: var(--space-3) 0; } @@ -482,11 +483,11 @@ article header h3 { padding-bottom: 0; margin-bottom: 0.25rem; } - + article header h3 { font-size: var(--text-xs); } - + article > :is(p, dl, ul, ol) { font-size: var(--text-sm); } @@ -497,7 +498,7 @@ article header h3 { article { padding: var(--space-5) var(--space-6); } - + article > header { margin-bottom: var(--space-3); padding-bottom: var(--space-2); @@ -953,3 +954,102 @@ dialog > footer { [data-role="steps"][data-layout="vertical"] > li > span { padding-inline: 0; } + +/* ── Sidebar nav ────────────────────────────────────────────────────── */ + +nav[data-nav="sidebar"] h3 { + color: var(--text-3); + font-size: var(--text-xs); + font-family: var(--font-mono); + font-weight: var(--font-weight-5); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-top: var(--space-4); + margin-bottom: 0; +} + +nav[data-nav="sidebar"] h3:first-child { + margin-top: 0; +} + +nav[data-nav="sidebar"] ul { + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + gap: var(--space-1); + font-family: var(--font-ui); + font-size: var(--text-sm); +} + +nav[data-nav="sidebar"] ul li { + margin: 0; + padding: 0; +} + +nav[data-nav="sidebar"] a { + display: block; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-md); + color: var(--text-2); + text-decoration: none; + transition: background-color var(--ease), color var(--ease); +} + +nav[data-nav="sidebar"] a:hover { + background-color: var(--surface-hover); + color: var(--text); +} + +nav[data-nav="sidebar"] a[aria-current] { + background-color: var(--accent-subtle); + color: var(--accent); +} + +/* ── TOC (aside) ────────────────────────────────────────────────────── */ + +aside[data-toc] h3 { + color: var(--text-3); + font-size: var(--text-xs); + font-family: var(--font-mono); + font-weight: var(--font-weight-5); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: var(--space-2); + margin-top: 0; +} + +aside[data-toc] nav ul { + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + gap: var(--space-1); + font-size: var(--text-xs); +} + +aside[data-toc] nav ul li { + margin: 0; + padding: 0; +} + +aside[data-toc] nav a { + display: block; + padding: var(--space-1) var(--space-2); + color: var(--text-3); + text-decoration: none; + border-left: var(--border-size-2) solid transparent; + transition: color var(--ease), border-color var(--ease); +} + +aside[data-toc] nav a:hover { + color: var(--text); + border-left-color: var(--border); +} + +aside[data-toc] nav a[aria-current] { + color: var(--accent); + border-left-color: var(--accent); +} diff --git a/assets/css/layers/08-layout.css b/assets/css/layers/08-layout.css index d0c96a3..170a102 100644 --- a/assets/css/layers/08-layout.css +++ b/assets/css/layers/08-layout.css @@ -13,71 +13,26 @@ } /* ── Body landmark container ────────────────────────────────────────── */ -/* All body-level landmarks share container alignment: - >

" "" .Content 1 | safeHTML }} +``` + +**Jinja2 / Flask:** +```python +import re +content = re.sub(r']*>.*?

', '', content, count=1, flags=re.DOTALL) +``` + +**Nunjucks / Liquid / any engine:** equivalent string replace on the rendered HTML. + +This is a string operation on already-rendered HTML, not a template-engine concept. +It ports to any engine without modification. + +## Why Not Other Approaches + +- **Author convention** (don't write `# Title` in vault files): breaks compatibility + with the entire markdown ecosystem. +- **Hugo render hooks** (`layouts/vault/_markup/render-heading.html`): Hugo-specific, + not portable. +- **CSS `display: none`**: h1 still exists in DOM — screen readers read it, + search engines index it. Semantically wrong. + +## Engine-Agnostic Principle + +ASW templates are prototyped in Hugo but must be portable to Flask/Jinja2 or +any other engine. Template logic should express *what*, not *how*: + +- What: "strip h1 from content if front matter title is present" +- How: engine-specific implementation of the same string operation + +Hugo-specific features (render hooks, shortcodes) are acceptable as prototyping +tools but should not become load-bearing parts of the template design. diff --git a/hugo.toml b/hugo.toml index de8fd81..ece0eb1 100644 --- a/hugo.toml +++ b/hugo.toml @@ -20,18 +20,18 @@ title = 'ASW — Agentic Semantic Web' weight = 2 [[menus.main]] - name = "Vault" - url = "/vault/" + name = "Notes" + url = "/notes/" weight = 3 [[menus.main]] - name = "Papers" - url = "/papers/" + name = "Essays" + url = "/essays/" weight = 4 [[menus.main]] - name = "Posts" - url = "/posts/" + name = "Articles" + url = "/articles/" weight = 5 [[menus.main]] @@ -125,7 +125,7 @@ title = 'ASW — Agentic Semantic Web' [[menus.docs]] name = "ASW Vocabulary" - url = "/posts/asw-vocabulary/" + url = "/articles/asw-vocabulary/" parent = "docs-reference" weight = 43 diff --git a/layouts/_default/single.html b/layouts/_default/single.html index ff6ac82..2f47e13 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,14 +1,13 @@ {{ define "header" }}
-
- {{ with .Params.eyebrow }}

{{ . }}

{{ end }} -

{{ .Title }}

- {{ with .Description }}

{{ . }}

{{ end }} -
+ {{ with .Type }}

{{ . }}

{{ end }}

{{ with .Params.author }} · {{ . }}{{ end }}

+ {{ with .Params.tags }} +

{{ range . }}#{{ . }} {{ end }}

+ {{ end }}
{{ end }} diff --git a/layouts/console/single.html b/layouts/console/single.html new file mode 100644 index 0000000..d4ed500 --- /dev/null +++ b/layouts/console/single.html @@ -0,0 +1,90 @@ +{{ define "header" }} +
+ {{- if .Description -}} +
+

{{ .Title }}

+

{{ .Description }}

+
+ {{- else -}} +

{{ .Title }}

+ {{- end }} +
+{{ end }} + +{{ define "content" }} +
+ + + + + + {{- with .TableOfContents -}} + + {{- end -}} + +
+{{ end }} diff --git a/layouts/docs/single.html b/layouts/docs/single.html index 68d6bdb..105dc68 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -58,20 +58,20 @@ {{- end -}} -
+
{{ .Content }} {{- if or .PrevInSection .NextInSection -}}