From 6fe130ebb969eca675a2838f41176eb00dd08e80 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Thu, 16 Apr 2026 11:20:50 +0200
Subject: docs: add frosted glass implementation plan

---
 .../plans/2026-04-16-footer-frosted-glass.md       | 233 +++++++++++++++++++++
 1 file changed, 233 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-16-footer-frosted-glass.md

(limited to 'docs/superpowers')

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
-- 
cgit v1.2.3