diff options
| -rw-r--r-- | docs/superpowers/plans/2026-04-16-footer-frosted-glass.md | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/docs/superpowers/plans/2026-04-16-footer-frosted-glass.md b/docs/superpowers/plans/2026-04-16-footer-frosted-glass.md new file mode 100644 index 0000000..1210de8 --- /dev/null +++ b/docs/superpowers/plans/2026-04-16-footer-frosted-glass.md @@ -0,0 +1,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 |