From 5d574dc107749f7384608960410dd3244a35bb84 Mon Sep 17 00:00:00 2001
From: WalkQuackBack <quacksareback@duck.com>
Date: Thu, 24 Apr 2025 22:41:02 -0400
Subject: [PATCH 1/2] feat: state feedback improvements

---
 src/layouts/components/Footer.astro           |  2 +-
 src/layouts/components/Navigation.astro       | 48 ++++++++--
 src/pages/blog/_components/ArticleCard.astro  | 39 ++++++--
 .../community/_components/UserCard.astro      | 83 ++++++++++++++++-
 src/pages/ports/_components/PortCard.svelte   | 41 +++++++--
 src/styles/_buttons.scss                      | 92 ++++++++++---------
 6 files changed, 231 insertions(+), 74 deletions(-)

diff --git a/src/layouts/components/Footer.astro b/src/layouts/components/Footer.astro
index 4c76a118..e006f5d9 100644
--- a/src/layouts/components/Footer.astro
+++ b/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" />
diff --git a/src/layouts/components/Navigation.astro b/src/layouts/components/Navigation.astro
index 9165116d..2f517f7c 100644
--- a/src/layouts/components/Navigation.astro
+++ b/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,11 +92,23 @@ 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;
@@ -91,17 +116,20 @@ import { navigationLinks } from "@data/links";
       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>
diff --git a/src/pages/blog/_components/ArticleCard.astro b/src/pages/blog/_components/ArticleCard.astro
index c016ba2e..b84591f9 100644
--- a/src/pages/blog/_components/ArticleCard.astro
+++ b/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;
       }
     }
 
diff --git a/src/pages/community/_components/UserCard.astro b/src/pages/community/_components/UserCard.astro
index 5bdcddb4..969837d6 100644
--- a/src/pages/community/_components/UserCard.astro
+++ b/src/pages/community/_components/UserCard.astro
@@ -16,13 +16,13 @@ const username = href.split("/").pop() as string;
 const isPlaceholder = (maintainersWithoutAvatars as string[]).includes(username);
 ---
 
-<div class="card-user">
-  <a {href}>
+<a {href}>
+  <div class="card-user">
     <ProfilePicture {username} size={256} wxh={128} />
     <br />
-    <span class=`user-name ${isPlaceholder ? "placeholder" : ""}`>{name ?? username}</span></a
-  >
-</div>
+    <span class=`user-name ${isPlaceholder ? "placeholder" : ""}`>{name ?? username}</span>
+  </div>
+</a>
 
 <style lang="scss">
   @use "@styles/utils";
@@ -30,9 +30,82 @@ const isPlaceholder = (maintainersWithoutAvatars as string[]).includes(username)
   .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%;
     }
diff --git a/src/pages/ports/_components/PortCard.svelte b/src/pages/ports/_components/PortCard.svelte
index d464798c..6350e048 100644
--- a/src/pages/ports/_components/PortCard.svelte
+++ b/src/pages/ports/_components/PortCard.svelte
@@ -43,17 +43,40 @@
     color: var(--subtext0);
     font-size: 1.6rem;
 
-    transition: all 300ms ease-in-out;
-
-    &:hover {
-      transform: scale(102%);
-
-      background-position: top right;
+    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;
+    }
 
-      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;
       }
     }
 
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 5199f7f7..eb1deec0 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -25,9 +25,44 @@
   font-weight: 500;
   color: var(--text);
 
-  transition: all 350ms ease-in-out;
   cursor: pointer;
 
+  transition:
+    opacity 225ms cubic-bezier(0, 0, 0, 1),
+    translate 225ms cubic-bezier(0, 0, 0, 1),
+    scale 150ms cubic-bezier(0, 0, 0, 1),
+    background 225ms cubic-bezier(0, 0, 0, 1);
+
+  will-change: opacity, scale;
+
+  // State layer
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: currentColor;
+    transition: opacity 50ms linear;
+    opacity: 0;
+
+    will-change: opacity;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      &::after {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &:active {
+    scale: 0.95;
+    &::after {
+      opacity: 0.18;
+    }
+  }
+
   &-small {
     @include utils.containerPadding(xxs);
 
@@ -38,71 +73,49 @@
     background-color: transparent;
   }
 
-  &-transparent:hover,
-  &-transparent:focus {
-    background-color: color-mix(in srgb, transparent, var(--text) 10%);
-  }
-
   &-has-icon {
     display: flex;
     align-items: center;
     gap: var(--space-xs);
   }
 
-  &-peach {
-    background-color: var(--peach);
-    background-image: linear-gradient(120deg, var(--peach), var(--red));
+  &-peach,
+  &-mauve,
+  &-green,
+  &-blue {
     background-size: 150% 100%;
+    background-repeat: no-repeat;
     background-position: top left;
 
     font-weight: 600;
     color: var(--inverted-text);
 
     &:hover {
-      background-position: top right;
+      background-position: 100% 100%;
     }
+    &::after {
+      background-color: var(--text);
+    }
+  }
+
+  &-peach {
+    background-color: var(--peach);
+    background-image: linear-gradient(120deg, var(--peach), var(--red));
   }
 
   &-mauve {
     background-color: var(--mauve);
     background-image: linear-gradient(120deg, var(--pink), var(--mauve));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
   }
 
   &-green {
     background-color: var(--green);
     background-image: linear-gradient(120deg, var(--teal), var(--green));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
   }
 
   &-blue {
     background-color: var(--blue);
     background-image: linear-gradient(120deg, var(--blue), var(--sky));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
   }
 
   &-success {
@@ -114,8 +127,3 @@
     animation-delay: 500ms;
   }
 }
-
-.btn,
-.btn * {
-  transition: background-position 350ms ease-in-out;
-}

From 98b802b05cdf636d22588f6db85d26df3b23dfb6 Mon Sep 17 00:00:00 2001
From: WalkQuackBack <quacksareback@duck.com>
Date: Thu, 8 May 2025 18:00:42 -0400
Subject: [PATCH 2/2] fix: href usercard

---
 src/pages/community/_components/UserCard.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/community/_components/UserCard.astro b/src/pages/community/_components/UserCard.astro
index 0d50a03d..461e1cdc 100644
--- a/src/pages/community/_components/UserCard.astro
+++ b/src/pages/community/_components/UserCard.astro
@@ -13,7 +13,7 @@ const username = url.split("/").pop() as string;
 const isPlaceholder = (maintainersWithoutAvatars as string[]).includes(username);
 ---
 
-<a {href}>
+<a href={url}>
   <div class="card-user">
     <ProfilePicture {username} size={256} wxh={128} />
     <br />