Added focus-visible where it was missing

src/components/AppLayout/components/Html.astro

@@ -604,9 +604,13 @@ const { currentTheme } = Astro.locals;
       color: var(--color-base-750);
       text-decoration: underline dotted 0.1em var(--color-base-650);
 
-      &:hover {
+      border-radius: 9999px;
+      
+      &:hover, &:focus-visible {
         color: var(--color-base-850);
         text-decoration-color: var(--color-base-750);
+        outline: 3px solid var(--color-base-750);
+        outline-offset: 2px;
       }
 
       &:active {
@@ -629,9 +633,12 @@ const { currentTheme } = Astro.locals;
   .pressable-icon {
     transition: 150ms color;
     cursor: pointer;
+    border-radius: 9999px;
 
-    &:hover {
+    &:hover, &:focus-visible {
       color: var(--color-base-700);
+      outline-color: var(--color-base-700);
+      outline-offset: 4px;
     }
 
     &:active {
@@ -646,11 +653,19 @@ const { currentTheme } = Astro.locals;
     transition-duration: 150ms;
     transition-property: text-decoration-color, color;
 
+    border-radius: 9999px;
+    
     &:hover {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }
 
+    &:focus-visible {
+      color: var(--color-base-750);
+      outline: 3px solid var(--color-base-750);
+      outline-offset: 3px;
+    }
+
     &:active {
       color: var(--color-base-650);
       text-decoration-color: var(--color-base-550);

src/components/Button.astro

@@ -59,7 +59,7 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
       height: 1.5em;
     }
 
-    &:hover {
+    &:hover, &:focus-visible {
       box-shadow: inset 0 0.1em 0.1em 0 var(--color-shadow-2);
       translate: unset;
     }

src/components/Previews/GenericPreview.astro

@@ -146,7 +146,7 @@ for (const attribute of attributes) {
     position: relative;
     width: unset;
 
-    &a:hover > #footer > p {
+    &a:hover > #footer > p, &a:focus-visible #footer > p {
       color: var(--color-base-750);
     }
 
@@ -173,6 +173,7 @@ for (const attribute of attributes) {
         color: var(--color-base-400);
         display: grid;
         place-content: center;
+        border-radius: 0.7em;
 
         & > svg {
           width: 64px;

src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro

@@ -75,7 +75,7 @@ const title = (() => {
         transition-duration: 150ms;
         transition-property: border-color, color;
 
-        &:hover {
+        &:hover, &:focus-visible {
           color: var(--color-base-750);
           border-color: var(--color-base-750);
         }

src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro

@@ -149,7 +149,7 @@ const { title, language } = (() => {
       text-decoration-color: transparent;
     }
 
-    &a:hover > #title {
+    &a:hover > #title, &a:focus-visible > #title {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }

src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro

@@ -83,42 +83,4 @@ const {
       }
     }
   }
-
-  /* a {
-    width: 100%;
-    height: 64px;
-    overflow: hidden;
-    display: grid;
-    place-items: center;
-    grid-template-areas: "center";
-    border-radius: 12px;
-
-    transition: 100ms scale;
-
-    &:hover,
-    &:focus-visible {
-      scale: 105%;
-    }
-
-    & > div {
-      grid-area: center;
-      padding: 1em;
-      border-radius: 1em;
-      text-align: center;
-      background-color: color-mix(in srgb, var(--color-elevation-0) 70%, transparent);
-      backdrop-filter: blur(8px);
-
-      & > p:has(+ p) {
-        margin-bottom: 0.3em;
-      }
-    }
-
-    & > img {
-      grid-area: center;
-      height: 100%;
-      object-fit: cover;
-      box-shadow: 0 5px 20px -10px var(--color-shadow-0);
-      border-radius: 12px;
-    }
-  } */
 </style>