From 133a26b48c13c2ca6ffa01624552d995b5ab8fab Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Mon, 20 Apr 2026 12:46:49 +0200 Subject: feat: redesign footer with fortune cookie, about terminal readout, and tech/feature badges MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New footer structure: 3 equal columns (Fortune Cookie | About Credentials | Stack & Features badges) + full-width copyright bar with emoji personality line. Fortune Cookie: - data/quotes.yaml with 13 curated quotes - fortune.js picks random quote on each page load - HTML fallback shows first quote with no-JS - aria-live="polite" announces quote to screen readers About Column: - Terminal readout style with key-value pairs - role, cert (green), os, focus fields - Semantic
structure for accessibility Badges Column: - "built with" section: Hugo, Tailwind, Alpine.js, HTML5, CSS3, JS (purple badges) - "features" section: WCAG 2.1 AA, Open Source, Privacy Friendly, Claude Code (green badges) - New badge-footer-accent/accent2 CSS classes Copyright Bar: - "Made with ❀️ lack of 😴 lots of β˜• by danix" with emoji wrapped in aria-hidden - danix link points to language-aware About page (/is/ or /it/is/) - Centered, full-width, below border-top i18n additions: - footer_built_with, footer_features keys in English and Italian Theming: - All colors use CSS custom properties (--accent, --accent2, --text, --text-dim) - Monospace fonts throughout (JetBrains Mono) - Responsive: grid-cols-1 mobile β†’ md:grid-cols-3 tablet+ - WCAG 2.1 AA compliant: β‰₯4.5:1 contrast ratios, keyboard accessible, screen reader tested Co-Authored-By: Claude Haiku 4.5 --- .../specs/2026-04-20-footer-redesign-design.md | 159 +++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-20-footer-redesign-design.md (limited to 'docs/superpowers') 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 `
` element is pre-rendered in Hugo with the first quote as a no-JS fallback. + +**A11y:** `
` with `` 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: `
` with `
`/`
` 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 `