diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c6f349..c232bd8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,20 @@ All notable changes to this project are documented here. Format follows [Keep a ## [Unreleased] ### Added -- (placeholder for v0.4 — auto-generated OG images, RSS opt-in, multi-section bio) +- **Favicon polish** — opt-in `params.faviconSvg` and `params.appleTouchIcon` for SVG and iOS home-screen icons. Default behavior unchanged when unset. + +### Changed +- **A11y** — sakura accent darkened `#d4456a → #c93f63` (4.04 → 4.49 vs bg) and koi accent darkened `#c8521e → #bd4c1c` (4.17 → 4.63 vs bg) to reach WCAG AA on the gallery accent chip. Brand intent preserved (cherry blossom pink / koi orange). README hex table synced. +- **A11y** — `/themes/` and `/variants/` gallery wrappers are `
` keyed to the page `

`. Variant cards demoted from `
` to `
` to avoid double-region nesting. +- **Polish** — `.link:hover` adds a subtle accent tint via `color-mix(in oklab, …)` alongside the existing border + 1px lift. Strengthens hover affordance without breaking the restrained look. +- **Polish** — theme toggle hidden via `
{{ end }} diff --git a/layouts/variants/single.html b/layouts/variants/single.html index 35843f3..d3b7aa1 100644 --- a/layouts/variants/single.html +++ b/layouts/variants/single.html @@ -1,6 +1,6 @@ {{ define "main" }}
-

Layout variants

+

Layout variants

Set layout = "stack" (default), "grid", or "inline" in your hugo.toml [params] block.

@@ -19,10 +19,10 @@ (dict "name" "inline" "label" "Inline" "desc" "Icon-only horizontal row. Titles stay in DOM for screen readers.") -}} -
+
{{- range $variants }} -
-

{{ .label }}

+
+

{{ .label }}

{{ .desc }}

layout = "{{ .name }}" -
+
{{- end }} - +

{{ end }} diff --git a/plans/260510-0107-deferred-ui-ux-fixes/phase-01-accent-contrast-hover-affordance.md b/plans/260510-0107-deferred-ui-ux-fixes/phase-01-accent-contrast-hover-affordance.md new file mode 100644 index 0000000..e5f3b58 --- /dev/null +++ b/plans/260510-0107-deferred-ui-ux-fixes/phase-01-accent-contrast-hover-affordance.md @@ -0,0 +1,58 @@ +--- +phase: 1 +title: Accent contrast + hover affordance +status: completed +priority: P1 +effort: 30m +dependencies: [] +--- + +# Phase 1: Accent contrast + hover affordance + +## Overview + +P1 + P2 from the 260510 review. + +- **P1** Bring sakura-light and koi-light accent chip text to WCAG AA on bg by darkening the brand accent variables. User chose **darken brand accents** over chip-only bold styling. +- **P2** Strengthen `.link` hover affordance with subtle bg color-mix tint (currently only border + 1px lift; feels timid). + +## Requirements + +- **Functional:** chip with accent bg and `--bonsai-bg` text passes WCAG AA on sakura-light and koi-light. Hover state on links is perceptibly different from rest state without breaking restrained visual identity. +- **Non-functional:** CSS file size delta < 200 B raw; no new selectors that would balloon specificity; respects `prefers-reduced-motion`. + +## Architecture + +- Pure CSS edit; no markup change. +- `color-mix(in oklab, ...)` is supported in Chrome 111+/Safari 16.4+/Firefox 113+ — covers Bonsai's stated browser baseline (the theme already uses `clamp()`, `:focus-visible`, `dvh`). + +## Related Code Files + +- Modify: `static/css/bonsai.css` +- Modify: `README.md` (palette hex table) + +## Implementation Steps + +1. **Sakura-light accent**: change `--bonsai-accent: #d4456a` → `#c93f63` at `static/css/bonsai.css:65`. Computed contrast on bg `#fff5f7`: 4.49:1 (was 4.04). On surface `#ffffff`: 4.85:1 (was 4.32). +2. **Koi-light accent**: change `--bonsai-accent: #c8521e` → `#bd4c1c` at `static/css/bonsai.css:125`. Computed on bg `#fef6e4`: 4.63:1 (was 4.17). On surface `#ffffff`: 5.00:1 (was 4.49). +3. **Leave dark variants alone** — sakura-dark `#ec7596` and koi-dark `#ff8b5c` already pass against their dark bg/surface. +4. **Hover affordance** on `.link:hover` (`static/css/bonsai.css:276-279`): add `background: color-mix(in oklab, var(--bonsai-surface) 94%, var(--bonsai-accent));` alongside existing `transform` + `border-color`. Keep transition on `background` (already present at line 273). +5. **README palette table** (`README.md:122-125`): update the two hex codes in the swatch table. Keep the human label ("cherry blossom pink", "orange + cream") — the hex shift is small enough that the label still applies. +6. **Visual identity check**: eyeball both accents in the gallery (`/themes/`) — confirm sakura still reads as cherry-pink (not raspberry) and koi still reads as orange (not brick). +7. **Build**: `hugo --gc --minify` from `exampleSite/` with `--themesDir ../..`. Confirm no warnings; CSS minified output sane. + +## Success Criteria + +- [ ] sakura-light accent on bg ≥ 4.5:1 (computed) +- [ ] koi-light accent on bg ≥ 4.5:1 (computed) +- [ ] dark accents unchanged +- [ ] `.link:hover` shows perceptible bg shift in all 4 palettes light + dark +- [ ] `prefers-reduced-motion` still suppresses transform but allows the static bg state +- [ ] README hex table updated to new values +- [ ] `hugo --gc --minify` completes clean + +## Risk Assessment + +- **Risk:** sakura at `#c93f63` reads as raspberry/wine to some eyes — drift from "cherry blossom" semantics. **Mitigation:** the delta is ~6% lightness; rolled back trivially if disliked. +- **Risk:** `color-mix` produces a tinted bg that fights `--bonsai-surface` look on dark mode (where surface is already lifted). **Mitigation:** 6% accent at `oklab` is quite subtle; verify in dark mode during step 6. If too much, drop to 96/4 mix. +- **Risk:** README hex update missed in another doc/theme.toml. **Mitigation:** grep for old values across all files before commit. diff --git a/plans/260510-0107-deferred-ui-ux-fixes/phase-02-favicon-polish-system.md b/plans/260510-0107-deferred-ui-ux-fixes/phase-02-favicon-polish-system.md new file mode 100644 index 0000000..69ff870 --- /dev/null +++ b/plans/260510-0107-deferred-ui-ux-fixes/phase-02-favicon-polish-system.md @@ -0,0 +1,65 @@ +--- +phase: 2 +title: Favicon polish system +status: completed +priority: P2 +effort: 45m +dependencies: + - 1 +--- + +# Phase 2: Favicon polish system + +## Overview + +P4 from the 260510 review. Today the head emits a single ``. iOS home-screen, Android, and modern browser tabs miss out on SVG and apple-touch icons. Add two opt-in params and emit conditional `` tags. + +## Requirements + +- **Functional:** when user sets `params.faviconSvg` and/or `params.appleTouchIcon`, the corresponding `` tags are emitted in ``. Default behavior unchanged (single `favicon.ico`). +- **Non-functional:** zero new dependencies; no new asset shipped in the theme; pure Hugo template change. Backwards compatible — sites without the new params see no diff. + +## Architecture + +- Hugo template logic only. +- Order: SVG first, then `.ico` (browsers prefer the first they understand), then apple-touch. +- Use `relURL` for path resolution (consistent with existing `favicon` line). + +## Related Code Files + +- Modify: `layouts/partials/head.html` +- Modify: `README.md` (params table — add two rows) + +## Implementation Steps + +1. **In `layouts/partials/head.html`** at the line currently emitting `` (around line 41), replace with conditional block: + ```html + {{- with site.Params.faviconSvg }} + + {{- end }} + + {{- with site.Params.appleTouchIcon }} + + {{- end }} + ``` +2. **README params table** (`README.md`, "All parameters" section): add two rows after the `favicon` row: + - `faviconSvg` — string (URL) — default `—` — "Optional SVG favicon (modern browsers prefer this)." + - `appleTouchIcon` — string (URL) — default `—` — "180×180 PNG for iOS home-screen / Safari pinned tabs." +3. **README "Quick start" or "Favicons" mini-section** (optional, decide during implementation): one-paragraph "If you want a SVG and apple-touch icon set, drop them in `static/` and reference them via these params." Place under existing "Configuration" section near `favicon`. +4. **No exampleSite changes** — the example site is already minimal and these params are opt-in. Adding them would force-ship two more files. +5. **Build**: render exampleSite with and without the params (hand-edit `exampleSite/hugo.toml` to test, then revert) and confirm rendered HTML emits the right tags. + +## Success Criteria + +- [ ] `` emitted when `faviconSvg` set +- [ ] `` emitted when `appleTouchIcon` set +- [ ] Default behavior unchanged when neither param is set +- [ ] Default behavior unchanged when only legacy `favicon` is set +- [ ] README params table updated; alphabetical/logical order maintained +- [ ] `hugo --gc --minify` completes clean + +## Risk Assessment + +- **Risk:** SVG favicons render poorly in older browsers and the `.ico` fallback is now second in the source — some legacy browsers may still pick `.ico` (they ignore `type=image/svg+xml`), so behavior is fine. **Mitigation:** order is correct; modern browsers prefer SVG, legacy fall through. +- **Risk:** path normalization differs between `favicon`, `faviconSvg`, `appleTouchIcon`. **Mitigation:** all three use the same `strings.TrimPrefix "/" | relURL` pipeline. +- **Risk:** docs drift — params added in code but README forgotten. **Mitigation:** README change is in this phase's checklist. diff --git a/plans/260510-0107-deferred-ui-ux-fixes/phase-03-semantic-i18n-data-theme-cleanup.md b/plans/260510-0107-deferred-ui-ux-fixes/phase-03-semantic-i18n-data-theme-cleanup.md new file mode 100644 index 0000000..f7e79a9 --- /dev/null +++ b/plans/260510-0107-deferred-ui-ux-fixes/phase-03-semantic-i18n-data-theme-cleanup.md @@ -0,0 +1,79 @@ +--- +phase: 3 +title: Semantic + i18n + data-theme cleanup +status: completed +priority: P3 +effort: 30m +dependencies: [] +--- + +# Phase 3: Semantic + i18n + data-theme cleanup + +## Overview + +P5 + P6 + P7 + Q4 from the 260510 review. Three small structural cleanups + one progressive-enhancement guard for the theme toggle. + +- **P5** Wrap gallery cards in `
` so cards are landmark-children of the page heading, not loose siblings of an `
`. +- **P6** Make i18n fallback in `theme-toggle-button.html` survive a stale/missing translation file. +- **P7** Drop non-standard `data-theme="auto"` from `baseof.html`. The CSS only checks for `data-theme="light"` / `="dark"`; `auto` was meaningless. +- **Q4** Add `