Awesome GitHub: Convert header and footer to Astro spec

[ashleyshaw]

Overview

Convert the Awesome GitHub header and footer components from the existing implementation to pixel-match the React prototype specification exactly. This is a critical visual alignment task for the Astro site redesign.

Specification Reference

The design spec is the authoritative source:

• Prototype location: wceu-2026/design_handoff_awesome_github/
• Live site: https://github.lightspeedwp.agency/
• Design tokens: colors_and_type.css, app-styles.css
• Component structure: React prototype (chrome.jsx, icons.jsx)

Requirements

Header (64px sticky bar)

• 82% background opacity + 12px backdrop blur
• Navigation: Browse ▾ · Cookbook · Learn · Resources ▾
• Browse dropdown: 2-column grid (2×4 cards, 8 categories)
• Resources dropdown: 5 simple resource links
• Search trigger: "Search resources" text + ⌘K kbd chip (desktop only)
• Branch toggle: Segmented control (main/develop) persisting to localStorage
• Theme toggle: Sun/moon icons swapping by data-theme
• GitHub external link
• Responsive at 1024px breakpoint

Footer (always dark #090909)

• Cyan radial halo from top center
• 4-column layout: Catalogues (2×4 grid), More, Learn, Reference
• White logo + tagline
• Correct copyright: "© 2026 LightSpeed · Crafted with care in WordPress."
• GPL-3.0 license text

Design System

• Custom Heroicons-style SVG icons (24×24, 1.6 stroke, outlined)
• Surface tokens: --panel, --panel-2, --hair (flip with theme)
• Theme-aware brand icons (blue light / cyan dark)

Success Criteria

• Header renders at exactly 64px height
• All dropdowns open/close with correct interactions (click, hover, ESC, outside-click)
• Search trigger shows text on desktop, collapses to icon on mobile at ≤1024px
• Branch toggle persists to localStorage key "ag-branch"
• Theme toggle swaps accent colors (brand blue ↔ light cyan)
• Footer has correct 4-column structure with categories grid
• Cyan halo visible in dark mode
• Mobile drawer slides from right, sections in spec order
• All icons from custom SVG library render correctly
• No hardcoded colors — all use CSS variables
• Responsive layout at 1920px, 1024px, 768px, 480px
• Keyboard accessible (Tab, Enter, Escape)
• Theme persistence works (localStorage keys: ag-theme, ag-branch)

Related Files

File	Status	Purpose
website/src/styles/awesome-github.css	✅	Design tokens (--panel, --panel-2, --hair)
website/src/lib/icons.ts	✅	Custom SVG icon library
website/src/components/AwesomeGithub/Icon.astro	✅	Icon component (custom SVGs)
website/src/components/AwesomeGithub/AwesomeGithubNav.astro	✅	Header/nav rewrite
website/src/components/AwesomeGithub/AwesomeGithubFooter.astro	✅	Footer rewrite
website/public/awesome-github/	✅	Brand SVG assets

Implementation Phases

• Phase 1: Design tokens (--panel, --panel-2, --hair)
• Phase 2: Icon library (Heroicons-style SVGs)
• Phase 3: Nav/header rewrite (64px, dropdowns, search, branch, theme, GitHub link)
• Phase 6: Footer rewrite (4 columns, halo, white logo)
• Phase 5: Detailed responsive testing
• Phase 9: Full accessibility audit (WAVE, JAWS, keyboard nav)

Testing Checklist

Visual

• Desktop (1920px): All elements visible and correctly spaced
• Tablet (1024px): Mobile layout triggers correctly
• Mobile (480px): Drawer works, interactive elements functional
• Dark mode: All colors update, cyan halo visible, icons swap
• Light mode: Blue accents, correct contrast

Interactions

• Browse dropdown: Opens on click/hover, closes on ESC/outside-click, chevron rotates
• Resources dropdown: Same behavior as Browse
• Search trigger: Text + kbd chip on desktop, icon-only on mobile
• Branch toggle: Persists selection, updates aria-pressed
• Theme toggle: Swaps sun/moon icons and all accent colors
• Mobile drawer: Slides from right, overlay blocks background, closes on nav click

Accessibility

• All buttons have aria-label or aria-pressed
• Dropdowns use aria-expanded correctly
• Drawer uses aria-hidden correctly
• Focus indicators visible on all interactive elements
• Keyboard navigation: Tab through elements, Enter/Space to activate, Escape to close
• Screen reader announces button states

Acceptance Criteria Met

All items from spec §10 Acceptance Checklist are implemented and ready for verification.

---

Related: Awesome GitHub Astro conversion epic
Priority: High (visual spec alignment blocking design approval)

[linear-code]

LS-943

LS-1101

[github-actions]

⚠️ This issue does not follow a required issue template.

Missing required section(s): Definition of Ready (DoR), Definition of Done (DoD)

The issue will remain open and flagged until the body is corrected.
Please update the issue with one of the official templates:

• https://github.com/lightspeedwp/.github/issues/new/choose

If this was opened by automation, update the automation to preserve the template sections before creating the issue.