UI touch ups
This commit is contained in:
@@ -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
|
||||
Reference in New Issue
Block a user