style touch-up

src/components/ProjectsFeature.astro

@@ -84,11 +84,9 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
 
   .showcase {
     display: grid;
-    flex-direction: row;
     grid-template-columns: repeat(auto-fill, 10rem);
     max-width: 100%;
     gap: 0.75rem;
-    scroll-snap-type: x mandatory;
     padding-block: 1.5rem;
     justify-content: center;
     padding-inline: 0.5rem;
@@ -119,6 +117,14 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
     &:focus-visible {
       outline: none;
     }
+    &:hover {
+      .icon {
+        color: var(--text-main);
+        img {
+          transform: translateY(-0.1rem);
+        }
+      }
+    }
   }
 
   .icon {
@@ -130,6 +136,7 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
       width: 100%;
       height: 100%;
       border-radius: 0.25rem;
+      transition: transform 0.2s ease;
     }
   }
 

src/components/SocialsWidget.astro

@@ -36,6 +36,7 @@
     <a href="https://x.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
       <img src="/assets/icons/x.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
       <span>X</span>
+    </a>
     <a href="https://bsky.app/profile/youhavetrouble.bsky.social" class="social-link" target="_blank"
        rel="external">
       <img src="/assets/icons/bsky.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
@@ -58,23 +59,25 @@
     gap: 1.5rem;
 
     .grid {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 8rem);
+      max-width: 100%;
       justify-content: center;
-      align-items: center;
       width: 100%;
       gap: 1rem;
+      padding-block: 1rem;
 
       a {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        width: 5.5rem;
+        width: 100%;
         height: 5.5rem;
         text-decoration: none;
         padding: 0.5rem;
         gap: 0.25rem;
+        border-radius: 0.25rem;
 
         span {
           color: var(--text-secondary);
@@ -103,17 +106,14 @@
         &:hover {
           color: var(--text-main);
           img {
-            transform: translateY(-0.2rem);
+            transform: translateY(-0.1rem);
           }
         }
+        &:focus-within {
+          background-color: #548e9b;
+        }
         &:focus-visible {
           outline: none;
-          span {
-            color: var(--primary-color);
-            &::after {
-              width: 100%;
-            }
-          }
         }
       }
     }