glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Limited visual depth — shadows, transitions, micro-interactions #64

New issue
Closed
opened 2026-06-09 21:35:06 +00:00 by glow · 1 comment
glow commented 2026-06-09 21:35:06 +00:00
Owner
Copy link

Issues

  1. Shadows — cards use no shadow by default, only on hover
  2. Transitions — page navigation is instant, no fade; cookie banner appears abruptly
  3. Micro-interactions — no loading states on newsletter form, no success/error animations
  4. Focus states — rely on browser defaults, no explicit :focus-visible styling
  5. Active states — pressed buttons not visually distinct from hover

Suggested Fix

  • Add subtle `shadow-sm` to cards by default
  • Add explicit `:focus-visible` outlines matching accent color
  • Add loading skeleton for article hero images
  • Use CSS `view-transition` API for page transitions
  • Add micro-animations to CTA buttons
## Issues 1. **Shadows** — cards use no shadow by default, only on hover 2. **Transitions** — page navigation is instant, no fade; cookie banner appears abruptly 3. **Micro-interactions** — no loading states on newsletter form, no success/error animations 4. **Focus states** — rely on browser defaults, no explicit :focus-visible styling 5. **Active states** — pressed buttons not visually distinct from hover ## Suggested Fix - Add subtle \`shadow-sm\` to cards by default - Add explicit \`:focus-visible\` outlines matching accent color - Add loading skeleton for article hero images - Use CSS \`view-transition\` API for page transitions - Add micro-animations to CTA buttons
glow closed this issue 2026-06-09 21:47:22 +00:00
glow commented 2026-06-09 21:47:25 +00:00
Author
Owner
Copy link

Fixed in commit bafeb2a

Changes made to site/src/global.css:

  • Added box-shadow: 0 1px 3px rgba(0,0,0,0.06) and explicit transition to .pillar-card
  • Added .pillar-card:hover with lifted shadow (+4px) and translateY(-2px)
  • Added :focus-visible outline (2px solid var(--a)) for both .pillar-card and .article-card
  • Added main { animation: fadeIn 0.15s ease-in } with @keyframes fadeIn for page transitions

Closes #64

Fixed in commit bafeb2a Changes made to `site/src/global.css`: - Added `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` and explicit transition to `.pillar-card` - Added `.pillar-card:hover` with lifted shadow (+4px) and translateY(-2px) - Added `:focus-visible` outline (2px solid var(--a)) for both `.pillar-card` and `.article-card` - Added `main { animation: fadeIn 0.15s ease-in }` with `@keyframes fadeIn` for page transitions Closes #64
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#64
No description provided.