From be4f4c3ac920e3c3da4ce5294cb1dbe8b0d4ff4d Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Tue, 19 Sep 2023 20:08:26 +0100 Subject: Links hover with text shadow instead of font weight --- public/css/modules/link.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'public/css/modules') diff --git a/public/css/modules/link.css b/public/css/modules/link.css index 4bf2fc7..4d7986a 100644 --- a/public/css/modules/link.css +++ b/public/css/modules/link.css @@ -12,8 +12,7 @@ text-decoration-thickness 100ms, text-underline-offset 100ms, border-color 100ms, - font-weight 100ms, - font-size 100ms; + text-shadow 100ms; } .link:is(:hover, :focus, :focus-visible, :focus-within), @@ -21,15 +20,18 @@ text-decoration-color: currentColor; text-decoration-thickness: calc(4 * var(--relative-eighth-rem)); text-underline-offset: calc(3 * var(--relative-eighth-rem)); - font-weight: 700; + text-shadow: + 0 1px 0 currentColor, + 1px 0 0 currentColor, + 1px 0 0 currentColor, + 0 1px 0 currentColor; transition: color 300ms, text-decoration-color 300ms, text-decoration-thickness 300ms, text-underline-offset 300ms, border-color 300ms, - font-weight 300ms, - font-size 300ms; + text-shadow 300ms; } .link:focus, .link:focus-visible { -- cgit v1.2.3