diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/superpowers/specs/2026-04-20-footer-redesign-design.md | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/docs/superpowers/specs/2026-04-20-footer-redesign-design.md b/docs/superpowers/specs/2026-04-20-footer-redesign-design.md new file mode 100644 index 0000000..e917b51 --- /dev/null +++ b/docs/superpowers/specs/2026-04-20-footer-redesign-design.md @@ -0,0 +1,159 @@ +# Footer Redesign — Design Spec +**Date:** 2026-04-20 +**Status:** Approved +**Branch:** week-7-footer (to be created) + +--- + +## Context + +The current footer is a placeholder: 3-column grid with site title, quick links, and email — no personality, no hacker identity. This redesign replaces it with a footer that reflects the site owner's professional identity, tech stack, and philosophy, while adding a "Fortune Cookie" feature that displays a random quote on every page load. + +--- + +## Layout + +3 equal columns, full-width copyright bar underneath. Stacks to 1 column on mobile. No column section headers. + +``` +┌─────────────────────────────────────────────────┐ +│ $ fortune │ role: … │ built with │ +│ danix │ cert: … │ [Hugo][Tailwind] │ +│ │ os: … │ [Alpine][HTML5] │ +│ "quote…" │ focus: … │ [CSS3][JS] │ +│ — Author │ │ │ +│ │ │ features │ +│ │ │ [WCAG 2.1 AA] │ +│ │ │ [Open Source] │ +│ │ │ [Privacy Friendly]│ +│ │ │ [Claude Code] │ +├─────────────────────────────────────────────────┤ +│ Made with ❤️ lack of 😴 lots of ☕ by danix │ +│ © 2026 Danilo M. · All rights reserved │ +└─────────────────────────────────────────────────┘ +``` + +Mobile: all columns stack vertically, copyright bar unchanged. + +--- + +## Column 1 — Fortune Cookie + +No section header. + +**Subline:** `$ fortune danix` (dimmed, monospace — looks like a shell command) +**Quote text:** italic, `--text` color, `font-mono` +**Attribution:** `— Author Name`, `--text-dim` color + +**Data source:** `data/quotes.yaml` +**Format:** +```yaml +quotes: + - text: "The quieter you become, the more you can hear." + author: "Ram Dass" + - text: "In theory, theory and practice are the same. In practice, they are not." + author: "Albert Einstein" +``` + +**Rendering:** Hugo renders all quotes into a JSON array in the template. A small vanilla JS snippet (no Alpine needed) picks one at random on each page load and injects it into the DOM. The `<blockquote>` element is pre-rendered in Hugo with the first quote as a no-JS fallback. + +**A11y:** `<blockquote>` with `<cite>` for attribution. `aria-live="polite"` on the quote container so screen readers announce the randomly selected quote after JS fires. + +--- + +## Column 2 — About (Terminal Readout) + +No section header. + +**Style:** key-value table, monospace font + +| Key | Value | Color | +|-----|-------|-------| +| `role:` | Cybersecurity Specialist | `--text` | +| `cert:` | eJPT | `--accent2` (green — highlights credential) | +| `os:` | Slackware (2005–present) | `--text`, year in `--text-dim` | +| `focus:` | open-source · privacy | `--text` | + +Keys use `--text-dim`. Layout: `<dl>` with `<dt>`/`<dd>` pairs for semantic correctness and screen reader support. + +--- + +## Column 3 — Stack & Feature Badges + +No section header. Two sub-groups with small dimmed labels above each group. + +**built with** (purple badges — `--accent`): +Hugo · Tailwind CSS · Alpine.js · HTML5 · CSS3 · JavaScript + +**features** (green badges — `--accent2`): +WCAG 2.1 AA · Open Source · Privacy Friendly · Claude Code + +**Badge style:** new `.badge-footer-accent` and `.badge-footer-accent2` CSS variants — same shape as existing `.badge` component but using `--accent` / `--accent2` colors. `aria-hidden="true"` on purely decorative badges; meaningful ones (WCAG 2.1 AA) get descriptive text. + +--- + +## Copyright Bar + +Full-width, centered, below a `border-t` separator. + +**Line 1:** `Made with ❤️ lack of 😴 lots of ☕ by danix` +- `danix` links to the language-appropriate About page: + - English: `/is/` + - Italian: `/it/is/` + - Resolved dynamically via Hugo: `{{ .Site.LanguagePrefix }}/is/` + - Styled in `--accent`, hover to `--accent2` +- Emoji are wrapped in `<span aria-hidden="true">` with adjacent screen-reader text via `<span class="sr-only">` + +**Line 2:** `© 2026 Danilo M. · All rights reserved` +- Year rendered with Hugo's `{{ now.Year }}` +- Uses existing `{{ i18n "allRightsReserved" }}` key + +--- + +## Theming Standard Compliance + +- All colors via CSS custom properties: `var(--accent)`, `var(--accent2)`, `var(--text)`, `var(--text-dim)` +- No hard-coded hex values in template or new CSS +- Fonts: `font-mono` (JetBrains Mono) for all terminal-style text +- No section headers — cleaner, less noise +- Frosted-bar styling (`frosted-bar border-t`) inherited from existing footer wrapper — no change needed +- Mobile-first: `grid-cols-1` base, `md:grid-cols-3` at 768px+ +- Spacing: gap-8 between columns (2rem), consistent with existing grid patterns + +--- + +## Accessibility Requirements + +- **Semantic HTML:** `<footer>`, `<blockquote>`, `<cite>`, `<dl>`/`<dt>`/`<dd>` +- **Screen readers:** `aria-live="polite"` on fortune quote container; `aria-hidden="true"` on decorative emoji with `sr-only` text equivalents +- **Color contrast:** All text on `--bg2` background must meet ≥4.5:1 (verified: `--text` 12.3:1, `--text-dim` 5.2:1, `--accent` 5.1:1, `--accent2` 7.2:1) +- **Keyboard:** Only interactive element is the `danix` About link — standard focus ring applies +- **Motion:** No animations — no `prefers-reduced-motion` concern +- **Touch targets:** The `danix` link in copyright bar must be ≥44×44px tap target (padding applied) + +--- + +## Files to Create / Modify + +| File | Action | +|------|--------| +| `themes/danix-xyz-hacker/layouts/partials/footer.html` | Replace entirely | +| `themes/danix-xyz-hacker/assets/css/main.css` | Add `.badge-footer-accent`, `.badge-footer-accent2` component classes | +| `data/quotes.yaml` | Create — initial quote set (10–15 quotes) | +| `themes/danix-xyz-hacker/assets/js/fortune.js` | Create — tiny vanilla JS random quote picker | +| `i18n/en.yaml` | Add `footer_built_with`, `footer_features` label keys | +| `i18n/it.yaml` | Add same keys in Italian | + +--- + +## Verification + +1. Run `hugo server` — footer renders on all page types (home, single, list) +2. Reload page 5+ times — quote changes each reload +3. Disable JS — first quote from YAML shows as static fallback +4. Toggle dark/light theme — all colors switch correctly via CSS vars +5. Resize to 375px — columns stack to single column, no overflow +6. Tab through footer — only the `danix` About link is focusable, focus ring visible +7. Check `danix` link: English site → `/is/`, Italian site → `/it/is/` +8. Run screen reader — quote announced after page load, emoji skipped, `dl` keys/values read correctly +9. Run `npm run build` — CSS compiles without errors |