1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
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
|
