trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: CSS tasks 7-9 — split components into landmarks, forms, navigation

Browse source 
Extract from monolithic 03-components.css:
- 03-landmarks.css: nav, article, section, hgroup, dt/dd, footer
- 04-forms.css: buttons, inputs, selects, checkboxes, validation
- 06-navigation.css: sidebar nav, TOC aside

03-components.css retains: accordion, dialog, breadcrumb, steps.
All files will be renumbered to final scheme in next task.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 15:29:35 +02:00
parent b602a8d54e
commit 9ace9ea2bb
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
5 changed files with 683 additions and 664 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/layers/06-navigation.css Normal file
View file

@ -0,0 +1,96 @@
/**
* 06-navigation.css
* Navigation patterns beyond the basic nav landmark.
* Part of: Agentic Semantic Web
*
* Covers: sidebar navigation, table of contents (TOC)
*/
/* ── Sidebar nav ────────────────────────────────────────────────────── */
nav[data-nav="sidebar"] h3 {
color: var(--text-3);
font-size: var(--text-xs);
font-family: var(--font-mono);
font-weight: var(--weight-medium);
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"] 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(--weight-medium);
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 a {
display: block;
padding: var(--space-1) var(--space-2);
color: var(--text-3);
text-decoration: none;
border-left: var(--focus-ring-width) 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);
}