style: add hover styles to focus

assets/css/base/_typography.scss

@@ -97,6 +97,11 @@ a {
     text-decoration: none;
     opacity: 1;
   }
+
+  &:focus {
+    text-decoration-style: double;
+    opacity: 1;
+  }
 }
 
 ::selection {

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;
+  }
 }

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 {

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;
         }
 

assets/css/themes/_dark.scss

@@ -9,7 +9,8 @@
     color: $light;
     border-color: $light;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: $dark;
     }
   }