feat: a11y touch targets

src/layouts/components/Footer.astro

@@ -28,7 +28,7 @@ import { footerLinks } from "@data/links";
       <p class="divider">•</p>
       <span>/ˌkætpʊˈtʃiːn/</span>
       <button
-        class="play-pronunciation"
+        class="play-pronunciation btn btn-transparent btn-small"
         aria-label="Play pronunciation"
         onclick="document.querySelector('#pronunciation').play();">
         <SpeakerHighVolume width={20} height={20} fill="currentColor" />
@@ -83,14 +83,10 @@ import { footerLinks } from "@data/links";
     }
 
     .play-pronunciation {
-      border: none;
-      background: none;
-      color: inherit;
+      --btn-target-size: 24px;
       align-self: baseline;
 
-      &:hover {
-        cursor: pointer;
-      }
+      cursor: pointer;
     }
   </style>
 </footer>

src/layouts/components/Navigation.astro

@@ -39,6 +39,8 @@ import { navigationLinks } from "@data/links";
     width: 4rem;
     height: 4rem;
 
+    position: relative;
+
     /*  The SVG is playing the animation by default; To avoid a
      *  constantly playing animation the playstate is set to paused.
      *  The :global() selector is necessary to avoid Astro's auto scoping.
@@ -51,6 +53,15 @@ import { navigationLinks } from "@data/links";
     &:hover :global(svg *) {
       animation-play-state: running;
     }
+
+    // Touch target
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -4px;
+      border-radius: inherit;
+      pointer-events: all;
+    }
   }
 
   ul {
@@ -103,5 +114,14 @@ import { navigationLinks } from "@data/links";
       transform: scaleX(1);
       transform-origin: top left;
     }
+
+    // Touch target
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -14px -8px;
+      border-radius: inherit;
+      pointer-events: all;
+    }
   }
 </style>

src/pages/palette/index.astro

@@ -108,11 +108,11 @@ const toHsl = (hsl: ColorFormat["hsl"]) => {
     }
 
     summary {
+      @include utils.containerPadding(md);
       cursor: pointer;
     }
 
     .flavor {
-      @include utils.containerPadding();
       margin-block-start: var(--space-md);
 
       border-radius: var(--border-radius-normal);
@@ -131,12 +131,20 @@ const toHsl = (hsl: ColorFormat["hsl"]) => {
     }
 
     .color-list {
-      margin-block-start: var(--space-md);
+      // margin-block-start: var(--space-sm);
       margin-inline: auto;
+      padding: var(--space-md);
+      padding-block-start: 0;
     }
 
     .color-list-entry {
       --__current-color: var(--current-color, var(--text));
+      @media (pointer: coarse) {
+        & > td {
+          --btn-target-size: 50px;
+          padding-block: calc(0 * var(--base-unit));
+        }
+      }
     }
 
     .color-name {

src/styles/_buttons.scss

@@ -113,6 +113,16 @@
     animation: btnFadeOut 350ms linear forwards;
     animation-delay: 500ms;
   }
+
+  @media (pointer: coarse) {
+    & {
+      min-width: var(--btn-target-size, 48px);
+      min-height: var(--btn-target-size, 44px);
+    }
+    &-small {
+      @include utils.containerPadding(xxs-y);
+    }
+  }
 }
 
 .btn,

src/styles/_scaffolding.scss

@@ -2,6 +2,8 @@
 *::before,
 *::after {
   box-sizing: border-box;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 html {