social: youtube card hover — expanding translucent red halo #20

Merged

michalvankodev merged 2 commits from social/youtube-hover-halo into main 2026-09-11 11:47:15 +02:00

Conversation 1 Commits 2 Files changed 1 +17 -6

michalvankodev commented 2026-09-11 10:37:56 +02:00

Owner

Copy link

Replaces the obsolete scale/rounded-none hover stub on the YouTube social card with YouTube's current (2025) hover highlight:

• a translucent red halo (rgba(255, 0, 0, 0.13)) spreading 1rem around the card
• the box-shadow lives directly on .social-card-youtube — outer box-shadows paint only outside the border-box, so the card's own white background stays clean and the halo follows the card's real border-radius (review: dropped the earlier ::after version as vestigial)
• shadow spread animates 0 → 1rem over 150ms ease-out on hover, symmetric on leave
• the transition list carries transition-colors' properties so the card's hover:border-blue-400 keeps fading (the unlayered rule overrides the utility)
• no element motion — kept outside the prefers-reduced-motion gate on purpose

Pure CSS, one file: styles/input.css.

Replaces the obsolete scale/rounded-none hover stub on the YouTube social card with YouTube's current (2025) hover highlight: - a translucent red halo (`rgba(255, 0, 0, 0.13)`) spreading 1rem around the card - the box-shadow lives **directly on `.social-card-youtube`** — outer box-shadows paint only outside the border-box, so the card's own white background stays clean and the halo follows the card's real border-radius (review: dropped the earlier `::after` version as vestigial) - shadow spread animates `0 → 1rem` over 150ms ease-out on hover, symmetric on leave - the transition list carries `transition-colors`' properties so the card's `hover:border-blue-400` keeps fading (the unlayered rule overrides the utility) - no element motion — kept outside the `prefers-reduced-motion` gate on purpose Pure CSS, one file: `styles/input.css`.

michalvankodev added 1 commit 2026-09-11 10:37:56 +02:00

social: youtube card hover — expanding translucent red halo ... 0e12650e73

Replaces the obsolete scale/rounded-none hover stub with YouTube's
current hover highlight: a ::after overlay whose box-shadow spread
animates 0 → 1rem (rgba red 0.13) over 150ms ease-out when the card
is hovered. Hidden behind the card's white background so only the
surrounding halo is visible.

forgejo-actions commented 2026-09-11 10:40:01 +02:00

Copy link

🪦 Live preview

removed (PR closed)

<!-- preview-link --> ## 🪦 Live preview removed (PR closed)

michalvankodev added 1 commit 2026-09-11 11:44:14 +02:00

review: drop ::after — halo shadow directly on the card ... 723c7209f3

Outer box-shadows never paint inside the border-box, so the pseudo-element
was vestigial from the earlier oversized-halo design. The shadow now lives
on .social-card-youtube itself: no position:relative / z-index /
pointer-events plumbing, and the halo corners follow the card's real
border-radius. The transition list carries transition-colors' properties
so the card's hover:border-blue-400 keeps fading (this unlayered rule
overrides the utility).

michalvankodev merged commit 723c7209f3 into main 2026-09-11 11:47:15 +02:00

michalvankodev deleted branch social/youtube-hover-halo 2026-09-11 11:47:15 +02:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

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

michalvankodev/michalvankodev-site!20

No description provided.