34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
## 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)
|