Better progressive enhancement and ARIA

src/pages/index.astro

@@ -42,7 +42,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
         class="u-logo mx-auto my-4 h-screen max-h-48 rounded-full transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 sm:max-h-72"
       />
       <p class="p-note mt-6 sm:px-5 md:px-6">I'm a safe vore enthusiast, and a furry who occasionally writes stuff.</p>
-      <ul id="links" class="grid grid-cols-3 gap-x-4 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32" aria-label="Links">
+      <ul
+        id="links"
+        class="grid grid-cols-3 gap-x-4 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32"
+        aria-label="Links"
+      >
         <li>
           <a
             class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
@@ -51,7 +55,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Bluesky"
           >
-            <IconBluesky height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconBluesky
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">@badmanners.xyz on Bluesky</span>
           </a>
         </li>
@@ -63,7 +71,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Codeberg"
           >
-            <IconCodeberg height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconCodeberg
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadManners on Codeberg</span>
           </a>
         </li>
@@ -75,7 +87,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Eka's Portal"
           >
-            <IconEkasPortal height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconEkasPortal
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadManners on Eka's Portal</span>
           </a>
         </li>
@@ -87,7 +103,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Fur Affinity"
           >
-            <IconFurAffinity height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconFurAffinity
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadManners on Fur Affinity</span>
           </a>
         </li>
@@ -99,7 +119,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="GitHub"
           >
-            <IconGitHub height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconGitHub
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadMannersXYZ on GitHub</span>
           </a>
         </li>
@@ -111,7 +135,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="GitLab"
           >
-            <IconGitLab height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconGitLab
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">Bad_Manners on GitLab</span>
           </a>
         </li>
@@ -123,7 +151,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Inkbunny"
           >
-            <IconInkbunny height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconInkbunny
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadManners on Inkbunny</span>
           </a>
         </li>
@@ -135,7 +167,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Itaku"
           >
-            <IconItaku height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconItaku
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">badmanners on Itaku</span>
           </a>
         </li>
@@ -147,7 +183,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Itch.io"
           >
-            <IconItchIO height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconItchIO
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">Bad Manners on Itch.io</span>
           </a>
         </li>
@@ -159,7 +199,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Keybase"
           >
-            <IconKeybase height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconKeybase
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">badmanners on Keybase</span>
           </a>
         </li>
@@ -171,7 +215,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Mastodon"
           >
-            <IconMastodon height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconMastodon
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">@BadManners@meow.social on Mastodon</span>
           </a>
         </li>
@@ -183,7 +231,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Neocities"
           >
-            <IconNeocities height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconNeocities
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">badmanners.neocities.org on Neocities</span>
           </a>
         </li>
@@ -195,7 +247,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Picarto"
           >
-            <IconPicarto height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconPicarto
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadManners on Picarto</span>
           </a>
         </li>
@@ -207,7 +263,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Signal"
           >
-            <IconSignal height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconSignal
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">badmanners.10 on Signal</span>
           </a>
         </li>
@@ -219,7 +279,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="SoFurry"
           >
-            <IconSoFurry height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconSoFurry
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">Bad Manners on SoFurry</span>
           </a>
         </li>
@@ -231,7 +295,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Steam"
           >
-            <IconSteam height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconSteam
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">badmanners_ on Steam</span>
           </a>
         </li>
@@ -243,7 +311,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="SubscribeStar"
           >
-            <IconSubscribeStar height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconSubscribeStar
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">Bad Manners on SubscribeStar</span>
           </a>
         </li>
@@ -255,7 +327,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Telegram"
           >
-            <IconTelegram height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconTelegram
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">@bad_manners on Telegram</span>
           </a>
         </li>
@@ -267,7 +343,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Twitch"
           >
-            <IconTwitch height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconTwitch
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">bad__manners on Twitch</span>
           </a>
         </li>
@@ -279,7 +359,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="Weasyl"
           >
-            <IconWeasyl height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconWeasyl
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">BadManners on Weasyl</span>
           </a>
         </li>
@@ -291,7 +375,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
             rel="me"
             aria-label="X"
           >
-            <IconX height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconX
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
             <span class="p-nickname hidden">@BadManners__ on X</span>
           </a>
         </li>
@@ -299,9 +387,13 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
           <a
             class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
             href="/contact"
-            aria-label="More options..."
+            aria-label="More socials..."
           >
-            <IconEllipsis height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
+            <IconEllipsis
+              height="1.75rem"
+              width="1.75rem"
+              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
+            />
           </a>
         </li>
       </ul>
@@ -320,4 +412,3 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
     });
   })();
 </script>
-