# 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
