mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul Bakaus
88d647a555
The old /skills was one long scrollable list. Replace it with a proper
app-shell layout: sticky left sidebar with every skill grouped by
category, main column on the right with an orientation piece (intro
+ 'how to pick one' callout + category sections with chip lists).
- scripts/build-sub-pages.js
- renderSkillsSidebar(): the sticky left rail used across the /skills
section. Takes an optional currentSkillId so we can mark the active
skill with aria-current when detail pages adopt the same shell in a
later commit
- renderSkillsOverviewMain(): the right column. Editorial header,
'how to pick one' callout that inlines 5 hot-link skill references,
then one block per category (title, count, description, chip row
of all skills in that category)
- wrapInDocsLayout(): tiny helper that pastes the sidebar and main
into a .skills-layout grid
- public/css/sub-pages.css
- Copy .skip-link a11y styles over from main.css so the 'Skip to
content' link is properly hidden until keyboard focus (was showing
unstyled at the top-left of every generated page)
- Add .skills-layout grid shell (260px sidebar + flex main column,
max-width 1400px, clamp-based horizontal padding)
- Add sticky .skills-sidebar with its own scroll-y overflow and a
thin scrollbar; group titles + mono link list; aria-current styling
with a 2px left accent bar
- Add .skills-overview-howto callout, category sections with chip
rows, and mobile collapse (sidebar becomes an inline block above
the main column at <=920px)
- Introduce --site-header-height and --skills-sidebar-width tokens
No detail page layout changes in this commit — those still use the
single-column .skill-detail shell.