From 7c0cae3f94268d20db35e8d396d62773f24c968f Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Sat, 25 May 2024 22:37:16 -0700 Subject: [PATCH] Improve focus outline styling --- index.html | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 7c1137f..805d075 100644 --- a/index.html +++ b/index.html @@ -82,6 +82,20 @@ font-weight: 700; } + button, + textarea, + a { + border-radius: 4px; + outline: 2px solid transparent; + outline-offset: 1px; + transition: outline-color 400ms; + + &:focus-within { + transition: outline-color 200ms; + outline-color: hsl(216deg 50% 40%); + } + } + button { line-height: 0; background: none; @@ -109,7 +123,6 @@ max-inline-size: calc(100cqi - 16px); min-block-size: 15rem; padding: 4px; - border-radius: 4px; border: 1px solid hsl(216deg 50% 80%); } @@ -165,11 +178,12 @@ a { font-weight: 700; text-decoration: none; + color: hsl(216deg 50% 40%); } a:hover, a:focus { - text-decoration: underline; + text-decoration: 2px underline hsl(216deg 50% 40%); } abbr { -- 2.47.3