# 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 `