astro-website/openspec/changes/archive/2026-02-11-final-touches/proposal.md

Why

The site header can feel visually left-weighted. A tighter, more intentional navbar layout and hover treatment will improve polish and brand presentation.

What Changes

• Move the site branding text "SanthoshJ" to the center of the navbar (desktop and mobile-safe).
• Add a left-side logo using the existing favicon asset, sized appropriately for the header.
• Add a novel/creative animated hover line treatment that appears only on hover:
  • primary header title links: brand + Videos, Podcast, Blog
  • section/module titles for Videos, Podcast, Blog (titles only)
• Add a public env flag to enable/disable the hover line effect:
  • default behavior remains unchanged unless explicitly enabled/disabled
  • when disabled, revert to current hover behavior
• Ensure all the above changes are WCAG compliant.

Capabilities

New Capabilities

• navbar-branding: Add a left logo and centered brand layout in the primary header.
• nav-hover-line: Provide an animated hover-line treatment for primary header title links and key section titles, gated by a public env flag.

Modified Capabilities

• (none)

Impact

• site/src/layouts/BaseLayout.astro (header markup: logo placement, centered brand, nav link structure)
• site/src/styles/global.css (navbar layout + hover line animation styles)
• site/public/favicon.* (reuse as navbar logo asset)
• site/src/env.d.ts + site/src/lib/config.ts (new PUBLIC_* env flag wiring)