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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
|
# Footer & Header Frosted Glass Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Add a unified frosted glass + glow aesthetic to both header and footer for visual cohesion with the hacker theme.
**Architecture:** Create a reusable `.frosted-bar` CSS component combining backdrop blur, subtle border, and accent glow. Apply to both `<header>` and `<footer>` elements. Uses existing CSS variables for automatic light/dark theme support.
**Tech Stack:** Tailwind CSS + custom CSS components, Hugo templates, CSS custom properties (variables)
---
## File Structure
- **Modify:** `themes/danix-xyz-hacker/assets/css/main.css` — Add `.frosted-bar` component (lines ~175-180)
- **Modify:** `themes/danix-xyz-hacker/layouts/partials/header.html` — Add class to `<header>` element
- **Modify:** `themes/danix-xyz-hacker/layouts/partials/footer.html` — Replace old styling with `.frosted-bar` class
---
## Tasks
### Task 1: Add `.frosted-bar` CSS Component
**Files:**
- Modify: `themes/danix-xyz-hacker/assets/css/main.css:175-178`
- [ ] **Step 1: Add the `.frosted-bar` component to main.css**
Open `themes/danix-xyz-hacker/assets/css/main.css` and locate the `/* Glow effect utility */` section around line 175.
Insert the new component right after the `.glow-accent` rule (after line 178):
```css
/* Frosted glass bar (header/footer) */
.frosted-bar {
background-color: rgba(12, 21, 32, 0.92);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
box-shadow: 0 0 20px var(--accent-glow);
}
html.theme-light .frosted-bar {
background-color: rgba(248, 249, 250, 0.92);
}
```
This creates a component that:
- Uses semi-transparent background matching current header (`bg-bg2/92`)
- Adds `backdrop-filter: blur(10px)` for the frosted glass effect
- Uses theme-aware border color via CSS variable
- Applies the accent glow matching content cards
- [ ] **Step 2: Verify the CSS is syntactically correct**
Check that the CSS block is properly formatted with matching braces and semicolons.
- [ ] **Step 3: Commit this CSS change**
```bash
git add themes/danix-xyz-hacker/assets/css/main.css
git commit -m "feat: add frosted-bar CSS component for header and footer"
```
---
### Task 2: Update Header Template
**Files:**
- Modify: `themes/danix-xyz-hacker/layouts/partials/header.html:1`
- [ ] **Step 1: Add `.frosted-bar` class to header element**
Open `themes/danix-xyz-hacker/layouts/partials/header.html`.
Find line 1:
```html
<header class="sticky top-0 z-50 bg-bg2/92 backdrop-blur border-b border-border">
```
Replace with:
```html
<header class="sticky top-0 z-50 frosted-bar border-b">
```
This applies the new component and removes the now-redundant inline Tailwind classes (`bg-bg2/92 backdrop-blur border-b border-border`).
- [ ] **Step 2: Verify the change**
Confirm the header element now has `class="sticky top-0 z-50 frosted-bar border-b"` and nothing else besides the layout classes.
- [ ] **Step 3: Commit**
```bash
git add themes/danix-xyz-hacker/layouts/partials/header.html
git commit -m "refactor: apply frosted-bar component to header"
```
---
### Task 3: Update Footer Template
**Files:**
- Modify: `themes/danix-xyz-hacker/layouts/partials/footer.html:1`
- [ ] **Step 1: Replace footer styling with `.frosted-bar`**
Open `themes/danix-xyz-hacker/layouts/partials/footer.html`.
Find line 1:
```html
<footer class="mt-16 border-t border-border/30 py-12 bg-surface/20">
```
Replace with:
```html
<footer class="mt-16 frosted-bar py-12">
```
This replaces the old hard border (`border-t border-border/30`) and semi-transparent background (`bg-surface/20`) with the unified frosted glass component.
- [ ] **Step 2: Verify the change**
Confirm the footer element now has `class="mt-16 frosted-bar py-12"`.
- [ ] **Step 3: Commit**
```bash
git add themes/danix-xyz-hacker/layouts/partials/footer.html
git commit -m "refactor: apply frosted-bar component to footer"
```
---
### Task 4: Rebuild CSS and Test
**Files:**
- Build output: `themes/danix-xyz-hacker/assets/css/main.min.css`
- [ ] **Step 1: Run CSS build pipeline**
From the project root, run:
```bash
npm run build
```
Expected output: CSS compilation completes successfully, `main.min.css` is regenerated.
- [ ] **Step 2: Start the Hugo dev server**
```bash
hugo server -D
```
Expected: Server starts on `http://localhost:1313` (or your configured port).
- [ ] **Step 3: Open the site in a browser and verify dark mode**
Open `http://localhost:1313` in your browser.
Verify:
- Header has the frosted glass effect with glow (should look like content cards)
- Footer has matching frosted glass effect with glow
- Both have subtle border and blur effect
- Border is visible but not harsh
- [ ] **Step 4: Toggle to light mode and verify**
Use the theme toggle button in the header.
Verify:
- Header and footer background adapts to light theme colors
- Glow effect is visible in light mode (slightly different color, should be purple/blue)
- Border adapts correctly
- Blur effect is still present
- [ ] **Step 5: Test on mobile (responsive)**
Resize browser to mobile width (375px) or use dev tools device emulation.
Verify:
- Header and footer still look good on mobile
- No layout issues
- Glow effect is visible and not overwhelming
- [ ] **Step 6: Commit the built CSS**
```bash
git add themes/danix-xyz-hacker/assets/css/main.min.css public/css/main.min.css
git commit -m "build: rebuild CSS with frosted-bar component"
```
---
### Task 5: Final Review and Cleanup
**Files:**
- Review: `themes/danix-xyz-hacker/layouts/partials/header.html`
- Review: `themes/danix-xyz-hacker/layouts/partials/footer.html`
- Review: `themes/danix-xyz-hacker/assets/css/main.css`
- [ ] **Step 1: Visual comparison**
In the browser, compare header and footer:
- Do they have matching frosted glass + glow effects?
- Is the aesthetic consistent with content cards?
- Does the glow feel appropriate (not too subtle, not overwhelming)?
- Do hard borders look soft and integrated now?
- [ ] **Step 2: Check for any remaining old footer styling**
Search the footer.html file for any leftover classes like `bg-surface/20` or `border-border/30` that might have been missed.
- [ ] **Step 3: Verify no console errors**
Open browser dev tools console (F12) and check for any CSS or JavaScript errors related to the changes.
- [ ] **Step 4: Final commit message**
If everything looks good, no additional commits needed — the work is complete. If you found issues in steps 1-3, fix them and create a new commit.
---
## Verification Checklist
After all tasks complete, verify:
- [ ] Header and footer both have frosted glass + glow effect
- [ ] Both elements work in dark and light themes
- [ ] No visual regression on other page elements
- [ ] Mobile layout still looks correct
- [ ] CSS builds without warnings
- [ ] All commits are clean and focused
|
