From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 26 May 2024 05:37:16 +0000 (-0700)
Subject: Improve focus outline styling
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=7c0cae3f94268d20db35e8d396d62773f24c968f;p=event-hashes

Improve focus outline styling
---

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 {