From 1a61aeade0e2858d9bd51119f2d8a2b0653cc1bd Mon Sep 17 00:00:00 2001
From: Ben Goldsworthy <admin@bengoldsworthy.net>
Date: Fri, 9 May 2025 18:47:23 +0200
Subject: [PATCH] style: add hover styles to focus

---
 assets/css/base/_typography.scss      |  5 +++++
 assets/css/components/_button.scss    | 23 ++++++++++++-----------
 assets/css/components/_item-tile.scss |  3 ++-
 assets/css/layout/_header.scss        | 11 ++++++-----
 assets/css/themes/_dark.scss          |  3 ++-
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss
index c829aa0..11cb525 100644
--- a/assets/css/base/_typography.scss
+++ b/assets/css/base/_typography.scss
@@ -97,6 +97,11 @@ a {
     text-decoration: none;
     opacity: 1;
   }
+
+  &:focus {
+    text-decoration-style: double;
+    opacity: 1;
+  }
 }
 
 ::selection {
diff --git a/assets/css/components/_button.scss b/assets/css/components/_button.scss
index 1f2d00c..6bd53c4 100644
--- a/assets/css/components/_button.scss
+++ b/assets/css/components/_button.scss
@@ -1,17 +1,18 @@
 .label--button {
-    cursor: pointer;
-    display: block;
-    inline-size: fit-content;
-    margin-inline: auto;
+  cursor: pointer;
+  display: block;
+  inline-size: fit-content;
+  margin-inline: auto;
 }
 
 .button {
-    border: 2px solid $dark;
-    background-color: $light;
-    padding: 0.4em 1em;
-    cursor: pointer;
+  border: 2px solid $dark;
+  background-color: $light;
+  padding: 0.4em 1em;
+  cursor: pointer;
 
-    &:hover {
-        box-shadow: 2px 2px gray;
-    }
+  &:hover,
+  &:focus {
+    box-shadow: 2px 2px gray;
+  }
 }
diff --git a/assets/css/components/_item-tile.scss b/assets/css/components/_item-tile.scss
index 646e069..173f430 100644
--- a/assets/css/components/_item-tile.scss
+++ b/assets/css/components/_item-tile.scss
@@ -3,7 +3,8 @@
   box-sizing: border-box;
   border: 2px solid transparent;
 
-  &:hover {
+  &:hover,
+  &:focus {
     border-color: $dark;
 
     & .item-tile__title-wrapper {
diff --git a/assets/css/layout/_header.scss b/assets/css/layout/_header.scss
index c9ac3af..1c85732 100644
--- a/assets/css/layout/_header.scss
+++ b/assets/css/layout/_header.scss
@@ -4,10 +4,10 @@
   grid-gap: 0;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto auto auto;
-  grid-template-areas: 
-    "header-title" 
-    "header-tagline" 
-    "header-icons" 
+  grid-template-areas:
+    "header-title"
+    "header-tagline"
+    "header-icons"
     "header-nav";
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -66,7 +66,8 @@
         padding: 0.4em;
         background-color: inherit;
 
-        &:hover {
+        &:hover,
+        &:focus {
           background-color: #ffffd0;
         }
 
diff --git a/assets/css/themes/_dark.scss b/assets/css/themes/_dark.scss
index 1e2ae21..430f90c 100644
--- a/assets/css/themes/_dark.scss
+++ b/assets/css/themes/_dark.scss
@@ -9,7 +9,8 @@
     color: $light;
     border-color: $light;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: $dark;
     }
   }