52 lines
2.2 KiB
Markdown
52 lines
2.2 KiB
Markdown
# 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
|
|
|