UI polish, colour themes, and a redesigned landing

[jjsnack]

Branch of UI fixes plus a multi-theme colour system.

UI

• Larger topic pills; hover colour-fills across UI elements
• Sticky top nav; footer fixed to the bottom-left corner (no divider)
• Larger list titles; full-row hover fill; vertically-centred dates
• Console hidden on touch devices; console + button persist on every desktop page
• Removed the theme toggle — theme now follows the system, changed via the console

Themes

• Multi-colour "pop" themes (not monochrome) picked from the console: paper, dracula, valentine
• Themes colour selection highlight, inline code, syntax highlighting, and mermaid diagrams
• Semantic sets (link / pill / row / terminal / focus) so a theme can tint each surface independently
• Each theme is its own file under assets/css/themes/*.css, auto-discovered and concatenated after main.css
• Colourable surfaces + a "how to add a theme" recipe documented in CLAUDE.md

Landing & console (this round)

• Landing reworked into a front door: greeting, featured latest post (title, date, topics, summary, read link), a short recents list, topics, and a link to the archive — no longer a clone of /posts/
• /posts/ is the full archive: paginator moved here
• Console ↑/↓ walks previous commands, shell-style
• Raised post-nav and added page-bottom padding so content clears the fixed footer
• Added a code-heavy example post and pagination config

Verification

node assets/js/console.js self-check passes; hugo --minify builds clean (23 pages). Not yet eyeballed in a live browser.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Bgxxw4baXATznPYP4ARHzW

[jjsnack]

Review — UI polish, colour themes, redesigned landing

Reviewed against frontend-UI / accessibility and JS best-practice lenses. Solid PR — the theme "sets" architecture is clean, the self-check is extended, and the ponytail: comments name the shortcuts. node assets/js/console.js passes. Findings ranked by severity.

Accessibility

1. Home page has no h1. layouts/index.html — the top heading is <h2 class="lead__title">. The site-title in the header is a link, not a heading, so the page jumps straight to h2. Every other layout (list, single, taxonomy) has an h1. This breaks the document outline and hurts SEO. Cheapest fix: promote the greeting to the h1:

{{ with $intro }}<h1 class="intro">{{ . }}</h1>{{ end }}

2. Syntax + comment colours fail WCAG AA on the light themes. In main.css the light-base pop palette on white: --c-yellow #b8860b (strings) ≈ 3.2:1, --c-green #2e8b57 (functions) ≈ 3.7:1 — both under the 4.5:1 needed for normal-size text (code counts). Comments use --muted; valentine's --muted #a86b7e on #fff0f5 ≈ 3:1. Darken the light/paper yellow + green and the valentine muted. (Computed, not rendered — please eyeball after.)

UX tradeoffs (deliberate — flagging so they're conscious calls)

3. Touch devices lose all manual theme control. The console is hidden on touch and the toggle was removed, so on mobile the theme is 100% OS-driven with no in-page override. The PR body frames this as intentional — noting it here.

4. Fixed footer can overlap content. .site-footer { position: fixed; bottom-left } relies on a magic main { padding-bottom: 6rem } to clear it. On short viewports / large zoom the footer sits over the last post rows and the pager, and the 6rem breaks if the footer ever grows past one line.

JS / robustness (nits)

5. Pre-paint script trusts any stored theme string. baseof.html: if (t) document.documentElement.dataset.theme = t; — a stale or removed theme name is still applied (falls back to dark-base via :not([data-theme="light"])). A whitelist check against the known modes would be safer. Optional.

6. Arrow-key keydown precedence reads ambiguous. console.js: if (e.key !== "ArrowUp" && e.key !== "ArrowDown" || !cmdHistory.length) — correct (&& binds first) but parenthesize the arrow test for clarity.

Keep as-is (good)

• Console focus management (input ↔ launch on open/close, Escape to close) is correct.
• Pager disabled states use <span>, not dead <a> — right call.
• The sets pattern (each surface defaults to --accent) keeps theme files ~14 lines.
• History recall (histIdx == length means the current line) matches shell semantics.

Fixes for #1, #2, and #6 in a follow-up PR.

🤖 Generated with Claude Code