UI touch ups

openspec/changes/archive/2026-02-11-final-touches/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-11

openspec/changes/archive/2026-02-11-final-touches/design.md

@@ -0,0 +1,82 @@
+## Context
+
+The primary header navigation is currently laid out as a simple left brand + right nav flex row. This makes the header feel left-heavy and de-emphasizes the brand. The site already uses a cohesive visual system (tokenized colors, glow accents, motion preferences) and has existing accessibility constraints (focus-visible, reduced motion).
+
+Relevant implementation notes:
+
+- Header markup is in `site/src/layouts/BaseLayout.astro`.
+- Styling is in `site/src/styles/global.css`.
+- Public feature flags are expressed via `PUBLIC_*` env vars and commonly use an opt-out string comparison (`!== "false"`) similar to `PUBLIC_ENABLE_SW`.
+
+This change is purely UI-level: layout and hover presentation. No routing, data, or backend behavior changes are required.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Add a left-side logo in the header using the same asset as the favicon, sized appropriately and aligned with the header rhythm.
+- Center the site brand label ("SanthoshJ") in the primary header layout without breaking the mobile hamburger behavior.
+- Introduce a novel 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)
+- Gate the hover-line treatment behind a public env flag so it can be turned off to preserve the current behavior.
+- Preserve accessibility:
+  - no layout shift due to hover effects
+  - keyboard focus remains visible and not confused with hover-only affordances
+  - reduced motion mode substantially reduces/disables the animation
+
+**Non-Goals:**
+
+- Redesigning the overall header/nav visual language beyond layout + hover line.
+- Changing navigation destinations, labels, or analytics tracking attributes.
+- Introducing new font families or major typography changes.
+- Adding new build dependencies.
+
+## Decisions
+
+### 1) Header layout strategy: CSS Grid for centering
+
+Decision: implement the header container as a 3-column grid (`left / center / right`) and place:
+
+- left: logo link
+- center: brand text link
+- right: nav links (desktop) and hamburger toggle (mobile)
+
+Rationale: grid makes true center alignment robust even when left/right columns have different widths, and avoids brittle absolute positioning.
+
+Alternative: flex with spacer elements. Rejected due to center drift as content changes.
+
+### 2) Logo asset and sizing
+
+Decision: reuse `site/public/favicon.png` as the logo source initially, styled to a fixed square size with pixel-snapped rendering.
+
+Rationale: avoids introducing new assets. If needed later, replace with a dedicated logo asset (same path/size contract).
+
+### 3) Hover-line implementation: pseudo-element with no layout impact
+
+Decision: implement the hover line using `::after` (or `background-size`) so it does not affect layout metrics.
+
+- visible only on `:hover`
+- reduced motion: animation disabled/reduced
+- focus-visible: keep existing focus ring; optionally show a static line for focus (not animated)
+
+Rationale: avoids CLS and keeps the effect decorative.
+
+### 4) Feature flag: public opt-out env var
+
+Decision: add `PUBLIC_ENABLE_NAV_HOVER_LINE` (string) and treat `"false"` as disabled; all other values (including undefined) keep current behavior.
+
+Rationale: matches existing public env patterns and ensures default behavior remains unchanged.
+
+### 5) Scope of "titles"
+
+Decision: apply the hover-line to primary header title links (center brand + Videos/Podcast/Blog nav) and to explicit title elements for the three primary content surfaces (Videos, Podcast, Blog) where they are presented as headings; avoid applying to card titles and other headings.
+
+Rationale: keeps the effect intentional and avoids visual noise.
+
+## Risks / Trade-offs
+
+- [Mobile header regressions] Grid changes could break the hamburger layout → Mitigation: keep mobile nav toggle and panel behavior unchanged; add targeted CSS at the existing breakpoint.
+- [Accessibility confusion] Hover-only affordance might be mistaken for focus indicator → Mitigation: do not remove focus-visible styles; keep hover line hover-only and optionally static on focus.
+- [Theme contrast] Line color may be low-contrast in some themes → Mitigation: use existing accent tokens and test across dark/light/high-contrast.
+- [Over-application] Accidentally applying effect to card titles → Mitigation: apply only to selectors scoped to nav links + specific page/module title classes.

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

@@ -0,0 +1,33 @@
+## 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)

openspec/changes/archive/2026-02-11-final-touches/specs/nav-hover-line/spec.md

@@ -0,0 +1,47 @@
+## ADDED Requirements
+
+### Requirement: Hover line appears only on hover for primary header titles
+The site MUST render a decorative animated line that appears only on hover for the primary header title links:
+
+- SanthoshJ (center brand link)
+
+- Videos
+- Podcast
+- Blog
+
+The hover line MUST NOT cause layout shift.
+
+#### Scenario: Hover line is hidden by default
+- **WHEN** the header renders
+- **THEN** the hover line is not visible on primary header title links until hover
+
+#### Scenario: Hover line appears on hover
+- **WHEN** a pointer user hovers a primary header title link
+- **THEN** an animated line appears as a hover affordance for that title
+
+### Requirement: Hover line applies to section/module titles for key surfaces
+The site MUST apply the same hover-line treatment to the titles for the Videos, Podcast, and Blog surfaces, but only on titles (not on card titles).
+
+#### Scenario: Titles use hover line
+- **WHEN** a pointer user hovers the Videos/Podcast/Blog surface title element
+- **THEN** the hover line appears only for that title
+
+#### Scenario: Card titles are unaffected
+- **WHEN** a pointer user hovers a content card title
+- **THEN** no hover line effect is applied (existing behavior remains)
+
+### Requirement: Hover line is gated by a public env flag
+The hover-line effect MUST be controllable via a public environment variable `PUBLIC_ENABLE_NAV_HOVER_LINE`.
+
+If `PUBLIC_ENABLE_NAV_HOVER_LINE` is set to the string `"false"`, the hover-line effect MUST be disabled and the current behavior MUST continue.
+
+#### Scenario: Flag disables hover line
+- **WHEN** `PUBLIC_ENABLE_NAV_HOVER_LINE` is set to `"false"`
+- **THEN** hovering primary header title links and surface titles does not render the hover line effect
+
+### Requirement: Reduced motion disables or substantially reduces animation
+If `prefers-reduced-motion: reduce` is set, the hover-line animation MUST be disabled or substantially reduced.
+
+#### Scenario: Reduced motion disables noticeable hover animation
+- **WHEN** `prefers-reduced-motion: reduce` is set and a user hovers a nav title
+- **THEN** the hover line does not animate noticeably

openspec/changes/archive/2026-02-11-final-touches/specs/navbar-branding/spec.md

@@ -0,0 +1,25 @@
+## ADDED Requirements
+
+### Requirement: Primary header shows logo and centered brand
+The site MUST render a primary header that includes:
+
+- a left-side logo that links to `/`
+- a centered brand label "SanthoshJ" that links to `/`
+- the primary navigation links (Videos, Podcast, Blog)
+
+The logo MUST use the same visual asset as the site favicon.
+
+#### Scenario: Desktop header layout
+- **WHEN** a user loads the home page on a desktop viewport
+- **THEN** the header shows the logo on the left, the brand label centered, and the nav links on the right
+
+#### Scenario: Mobile header layout
+- **WHEN** a user loads the home page on a mobile viewport
+- **THEN** the header still shows the logo on the left and the brand label centered without overlapping the nav toggle
+
+### Requirement: Logo size is visually aligned
+The header logo MUST be sized to match the header rhythm and MUST not cause layout shift.
+
+#### Scenario: Logo has fixed dimensions
+- **WHEN** the header renders
+- **THEN** the logo element has explicit width and height and does not change size on load

openspec/changes/archive/2026-02-11-final-touches/tasks.md

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

openspec/specs/nav-hover-line/spec.md

@@ -0,0 +1,51 @@
+# nav-hover-line Specification
+
+## Purpose
+TBD - created by archiving change final-touches. Update Purpose after archive.
+## Requirements
+### Requirement: Hover line appears only on hover for primary header titles
+The site MUST render a decorative animated line that appears only on hover for the primary header title links:
+
+- SanthoshJ (center brand link)
+
+- Videos
+- Podcast
+- Blog
+
+The hover line MUST NOT cause layout shift.
+
+#### Scenario: Hover line is hidden by default
+- **WHEN** the header renders
+- **THEN** the hover line is not visible on primary header title links until hover
+
+#### Scenario: Hover line appears on hover
+- **WHEN** a pointer user hovers a primary header title link
+- **THEN** an animated line appears as a hover affordance for that title
+
+### Requirement: Hover line applies to section/module titles for key surfaces
+The site MUST apply the same hover-line treatment to the titles for the Videos, Podcast, and Blog surfaces, but only on titles (not on card titles).
+
+#### Scenario: Titles use hover line
+- **WHEN** a pointer user hovers the Videos/Podcast/Blog surface title element
+- **THEN** the hover line appears only for that title
+
+#### Scenario: Card titles are unaffected
+- **WHEN** a pointer user hovers a content card title
+- **THEN** no hover line effect is applied (existing behavior remains)
+
+### Requirement: Hover line is gated by a public env flag
+The hover-line effect MUST be controllable via a public environment variable `PUBLIC_ENABLE_NAV_HOVER_LINE`.
+
+If `PUBLIC_ENABLE_NAV_HOVER_LINE` is set to the string `"false"`, the hover-line effect MUST be disabled and the current behavior MUST continue.
+
+#### Scenario: Flag disables hover line
+- **WHEN** `PUBLIC_ENABLE_NAV_HOVER_LINE` is set to `"false"`
+- **THEN** hovering primary header title links and surface titles does not render the hover line effect
+
+### Requirement: Reduced motion disables or substantially reduces animation
+If `prefers-reduced-motion: reduce` is set, the hover-line animation MUST be disabled or substantially reduced.
+
+#### Scenario: Reduced motion disables noticeable hover animation
+- **WHEN** `prefers-reduced-motion: reduce` is set and a user hovers a nav title
+- **THEN** the hover line does not animate noticeably
+

openspec/specs/navbar-branding/spec.md

@@ -0,0 +1,29 @@
+# navbar-branding Specification
+
+## Purpose
+TBD - created by archiving change final-touches. Update Purpose after archive.
+## Requirements
+### Requirement: Primary header shows logo and centered brand
+The site MUST render a primary header that includes:
+
+- a left-side logo that links to `/`
+- a centered brand label "SanthoshJ" that links to `/`
+- the primary navigation links (Videos, Podcast, Blog)
+
+The logo MUST use the same visual asset as the site favicon.
+
+#### Scenario: Desktop header layout
+- **WHEN** a user loads the home page on a desktop viewport
+- **THEN** the header shows the logo on the left, the brand label centered, and the nav links on the right
+
+#### Scenario: Mobile header layout
+- **WHEN** a user loads the home page on a mobile viewport
+- **THEN** the header still shows the logo on the left and the brand label centered without overlapping the nav toggle
+
+### Requirement: Logo size is visually aligned
+The header logo MUST be sized to match the header rhythm and MUST not cause layout shift.
+
+#### Scenario: Logo has fixed dimensions
+- **WHEN** the header renders
+- **THEN** the logo element has explicit width and height and does not change size on load
+