feat: state feedback improvements

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-small"
         aria-label="Play pronunciation"
         onclick="document.querySelector('#pronunciation').play();">
         <SpeakerHighVolume width={20} height={20} fill="currentColor" />

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.
@@ -48,8 +50,19 @@ import { navigationLinks } from "@data/links";
     }
 
     /*  Start playing the animation again on hover. */
-    &:hover :global(svg *) {
-      animation-play-state: running;
+    &:hover {
+      :global(svg *) {
+        animation-play-state: running;
+      }
+    }
+
+    // Touch target
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -4px;
+      border-radius: inherit;
+      pointer-events: all;
     }
   }
 
@@ -79,29 +92,44 @@ import { navigationLinks } from "@data/links";
 
     text-decoration: none;
 
+    transition: color 200ms ease;
+    will-change: color;
+
+    // Touch target
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -14px -8px;
+      border-radius: inherit;
+      // background-color: red;
+      pointer-events: all;
+    }
+
     &::after {
       content: "";
 
-      transition: transform 200ms ease-in-out;
-      transition-delay: 200ms;
+      transition: transform 200ms ease;
 
       position: absolute;
       bottom: -6px;
       left: 0;
       transform: scaleX(0);
       transform-origin: top right;
 
-      width: 20px;
+      width: 50%;
       height: 3px;
 
       background: var(--__accent-colour);
-    }
 
-    &:hover::after {
-      transition-delay: 10ms;
+      will-change: transform;
+    }
 
-      transform: scaleX(1);
-      transform-origin: top left;
+    &:hover {
+      color: var(--__accent-colour);
+      &::after {
+        transform: scaleX(1);
+        transform-origin: top left;
+      }
     }
   }
 </style>

src/pages/blog/_components/ArticleCard.astro

@@ -93,15 +93,40 @@ const formattedDatePosted = new Date(post.data.datePosted).toLocaleDateString("e
     overflow: clip;
     height: 100%;
 
-    transition: all 300ms ease-in-out;
-
-    &:hover {
-      transform: scale(102%);
+    transition: scale 200ms cubic-bezier(0, 0, 0, 1);
+
+    will-change: scale;
+
+    // State layer
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: var(--surface0);
+      transition: opacity 50ms linear;
+      opacity: 0;
+
+      will-change: opacity;
+      z-index: -1;
+    }
 
-      background-position: top right;
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: none;
+        @media (prefers-reduced-motion: no-preference) {
+          scale: 1.025;
+        }
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
 
-      @media (prefers-reduced-motion) {
-        transform: none;
+    &:active {
+      scale: 0.975;
+      &::after {
+        opacity: 0.65;
       }
     }
 

src/pages/community/_components/UserCard.astro

@@ -13,23 +13,96 @@ const username = url.split("/").pop() as string;
 const isPlaceholder = (maintainersWithoutAvatars as string[]).includes(username);
 ---
 
-<div class="card-user">
-  <a href={url}>
+<a href={url}>
+  <div class="card-user">
     <ProfilePicture {username} size={256} wxh={128} />
     <br />
-    <span class=`user-name ${isPlaceholder ? "placeholder" : ""}`>{name}</span></a
-  >
-</div>
+    <span class=`user-name ${isPlaceholder ? "placeholder" : ""}`>{name}</span>
+  </div>
+</a>
 
 <style lang="scss">
   @use "@styles/utils";
 
   .card-user {
     @include utils.containerPadding(md);
     border-radius: var(--border-radius-large);
+    transition: scale 200ms cubic-bezier(0, 0, 0, 1);
+
+    will-change: scale;
+
+    // State layer
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: var(--surface0);
+      transition: opacity 50ms linear;
+      opacity: 0;
+
+      will-change: opacity;
+      z-index: -1;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: none;
+        @media (prefers-reduced-motion: no-preference) {
+          scale: 1.025;
+        }
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:active {
+      scale: 0.975;
+      &::after {
+        opacity: 0.65;
+      }
+    }
     background-color: var(--mantle);
     text-align: center;
 
+    transition: scale 200ms cubic-bezier(0, 0, 0, 1);
+
+    will-change: scale;
+
+    // State layer
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: var(--surface0);
+      transition: opacity 50ms linear;
+      opacity: 0;
+
+      will-change: opacity;
+      z-index: -1;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: none;
+        @media (prefers-reduced-motion: no-preference) {
+          scale: 1.05;
+        }
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:active {
+      scale: 0.975;
+      &::after {
+        opacity: 0.65;
+      }
+    }
+
     img {
       border-radius: 50%;
     }

src/pages/ports/_components/PortCard.svelte

@@ -56,29 +56,50 @@
 
     color: var(--subtext0);
     font-size: 1.6rem;
-
-    opacity: 0.5;
-
-    transform: translateY(10px);
+
     transition:
       transform 0.3s cubic-bezier(0, 0, 0, 1),
-      opacity 0.3s cubic-bezier(0, 0, 0, 1);
+      opacity 0.3s cubic-bezier(0, 0, 0, 1),
+      scale 0.2s cubic-bezier(0, 0, 0, 1);
+
+    opacity: 0.5;
+    transform: translateY(10px);
 
+    // State layer
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: var(--surface0);
+      transition: opacity 50ms linear;
+      opacity: 0;
+
+      z-index: -1;
+    }
+
     &.visible {
       opacity: 1;
       transform: translateY(0);
       transition-delay: 0s;
     }
 
-    &:hover {
-      transform: scale(102%);
-
-      background-position: top right;
-
-      text-decoration: none;
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: none;
+        @media (prefers-reduced-motion: no-preference) {
+          scale: 1.05;
+        }
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
 
-      @media (prefers-reduced-motion) {
-        transform: none;
+    &:active {
+      scale: 0.975;
+      &::after {
+        opacity: 0.65;
       }
     }