1.4 KiB
1.4 KiB
1. Header Branding Layout
- 1.1 Update
site/src/layouts/BaseLayout.astroheader markup to add a left logo link (favicon asset) and move "SanthoshJ" brand link to the center - 1.2 Update
site/src/styles/global.cssheader layout to center brand text robustly (grid-based layout) while preserving mobile hamburger behavior - 1.3 Ensure logo has correct sizing and explicit dimensions (no layout shift)
2. Hover Line Effect (Gated)
- 2.1 Add
PUBLIC_ENABLE_NAV_HOVER_LINEtosite/src/env.d.ts - 2.2 Add config wiring in
site/src/lib/config.ts(or directimport.meta.envusage) with opt-out semantics ("false"disables) - 2.3 Implement hover-line CSS for primary header title links (brand + Videos/Podcast/Blog), hover-only, no layout shift
- 2.4 Implement hover-line CSS for the Videos/Podcast/Blog surface title elements only (not card titles)
- 2.5 Add reduced-motion handling so the effect is disabled/substantially reduced under
prefers-reduced-motion: reduce - 2.6 Ensure focus-visible styles remain clear and are not replaced by hover-only affordances
3. Verification
- 3.1 Verify layout on desktop + mobile widths (no overlap with nav toggle)
- 3.2 Verify hover-line is enabled by default and fully disabled when
PUBLIC_ENABLE_NAV_HOVER_LINE="false" - 3.3 Run
npm -C site run buildand ensure no new typecheck regressions