From 48fe7f041ed6e839d34a7d302ac16abfa6fa3f9b Mon Sep 17 00:00:00 2001
From: Bad Manners <me@badmanners.xyz>
Date: Thu, 29 Aug 2024 15:38:12 -0300
Subject: [PATCH] Improvements to scripts and index page on text-only browser

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/AgeRestrictedModal.astro       | 38 ++++----
 .../AgeRestrictedScriptInline.astro           |  2 +-
 src/components/DarkModeScript.astro           |  2 +-
 src/components/DarkModeScriptInline.astro     |  2 +-
 src/pages/[...config].ts                      |  2 +
 src/pages/index.astro                         | 91 +++++++++----------
 8 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 088f410..2441359 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "badmanners.xyz",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "badmanners.xyz",
-      "version": "2.1.7",
+      "version": "2.1.8",
       "hasInstallScript": true,
       "dependencies": {
         "@astrojs/check": "^0.9.2",
diff --git a/package.json b/package.json
index d264ddc..27a78ce 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "badmanners.xyz",
   "type": "module",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "scripts": {
     "postinstall": "astro sync",
     "dev": "astro dev",
diff --git a/src/components/AgeRestrictedModal.astro b/src/components/AgeRestrictedModal.astro
index c4e0b0b..04302dd 100644
--- a/src/components/AgeRestrictedModal.astro
+++ b/src/components/AgeRestrictedModal.astro
@@ -30,10 +30,11 @@ import { IconTriangleExclamation } from "./icons";
       screen from appearing in the future.
     </p>
     <div
+      style={{ display: "none" }}
+      id="age-verification-button-list"
       class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 font-medium sm:max-w-2xl sm:flex-row"
     >
       <button
-        style={{ display: "none" }}
         data-modal-reject
         id="age-verification-reject"
         class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
@@ -41,7 +42,6 @@ import { IconTriangleExclamation } from "./icons";
         Cancel
       </button>
       <button
-        style={{ display: "none" }}
         data-modal-accept
         id="age-verification-accept"
         class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
@@ -55,46 +55,46 @@ import { IconTriangleExclamation } from "./icons";
 <AgeRestrictedScriptInline />
 
 <script>
-  type AgeVerified = "true" | undefined;
-
   const ageRestrictedModalSetup = () => {
     const modal = document.querySelector<HTMLElementTagNameMap["div"]>("div#modal-age-restricted");
     // Not an age-restricted page
     if (!modal) {
       return;
     }
-    if (modal !== document.querySelector("body > div#modal-age-restricted")) {
+    if (modal !== document.querySelector("body>div#modal-age-restricted")) {
       throw new Error("#modal-age-restricted must be a direct child of the body element!");
     }
-    let ageVerified: AgeVerified = localStorage.ageVerified;
-    if (ageVerified !== "true") {
+    const addAgeVerifiedQueryToLinks = () =>
+      document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
+        let newHref = new URL(el.href);
+        newHref.searchParams.set("ageVerified", "true");
+        el.href = newHref.toString();
+      });
+    if (localStorage.ageVerified === "true") {
+      addAgeVerifiedQueryToLinks();
+    } else {
       const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
       const onRejectButtonClick = (e: MouseEvent) => {
         e.preventDefault();
         location.href = "about:blank";
       };
       rejectButton.addEventListener("click", onRejectButtonClick);
-      rejectButton.style.removeProperty("display");
-      const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
-      acceptButton.addEventListener(
+      modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
         "click",
         (e: MouseEvent) => {
           e.preventDefault();
           rejectButton.removeEventListener("click", onRejectButtonClick);
-          ageVerified = "true";
-          localStorage.ageVerified = ageVerified;
+          localStorage.ageVerified = "true";
           document.body.style.overflow = "auto";
-          document.querySelectorAll("body > :not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
-          document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
-            let newHref = new URL(el.href);
-            newHref.searchParams.set("ageVerified", "true");
-            el.href = newHref.href;
-          });
+          document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
           modal.style.display = "none";
+          addAgeVerifiedQueryToLinks();
         },
         { once: true },
       );
-      acceptButton.style.removeProperty("display");
+      modal
+        .querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
+        .style.removeProperty("display");
       rejectButton.focus();
     }
   };
diff --git a/src/components/AgeRestrictedScriptInline.astro b/src/components/AgeRestrictedScriptInline.astro
index d8f6de7..9e6075b 100644
--- a/src/components/AgeRestrictedScriptInline.astro
+++ b/src/components/AgeRestrictedScriptInline.astro
@@ -1,4 +1,4 @@
 ---
 ---
 
-<script is:inline>(a=>{let b="body > ",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(a.location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]==d?i("a[href][data-age-restricted]").forEach(x=>{let y=new URL(x.href);y[f].set(e,d);x.href=y}):((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>
+<script is:inline>(a=>{let b="body>",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]!=d&&((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>
diff --git a/src/components/DarkModeScript.astro b/src/components/DarkModeScript.astro
index 95e458c..fba84ad 100644
--- a/src/components/DarkModeScript.astro
+++ b/src/components/DarkModeScript.astro
@@ -10,7 +10,7 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
   const colorSchemeSetup = () => {
     let colorScheme: ColorScheme = localStorage.colorScheme;
     if (!colorScheme || colorScheme === "auto") {
-      colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      colorScheme = matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
     }
     const toggleColorScheme = (e: MouseEvent) => {
       e.preventDefault();
diff --git a/src/components/DarkModeScriptInline.astro b/src/components/DarkModeScriptInline.astro
index 621acf1..7adce1f 100644
--- a/src/components/DarkModeScriptInline.astro
+++ b/src/components/DarkModeScriptInline.astro
@@ -1,4 +1,4 @@
 ---
 ---
 
-<script is:inline>(a=>{var b="dark",c="auto",d="colorScheme",e=a.body.classList,f=localStorage,g=f[d];g==c?(f[d]=c,matchMedia("(prefers-color-scheme: dark)").matches&&e.add(b)):g==b&&e.add(b)})(document)</script>
+<script is:inline>(a=>{var b="dark",c="colorScheme",d=localStorage,e=d[c];(e=="auto"||!e?matchMedia("(prefers-color-scheme:dark)").matches:e==b)&&a.body.classList.add(b)})(document)</script>
diff --git a/src/pages/[...config].ts b/src/pages/[...config].ts
index e58d758..598dca7 100644
--- a/src/pages/[...config].ts
+++ b/src/pages/[...config].ts
@@ -12,10 +12,12 @@ RedirectMatch 301 ^/@/carrd\b https://badmanners.carrd.co
 RedirectMatch 301 ^/@/code[_-]?berg\b https://codeberg.org/BadManners
 RedirectMatch 301 ^/@/co[_-]?host\b https://cohost.org/BadManners
 RedirectMatch 301 ^/@/discord\b /#discord
+RedirectMatch 301 ^/@/e-?mail(address)?\b /#e-mail
 RedirectMatch 301 ^/@/(fur[_-]?affinity|fa)\b https://www.furaffinity.net/user/badmanners
 RedirectMatch 301 ^/@/(gallery|stor(y|ies)|games?)\b https://gallery.badmanners.xyz
 RedirectMatch 301 ^/@/(git[_-]?hub|gh)\b https://github.com/BadMannersXYZ
 RedirectMatch 301 ^/@/git[_-]?lab\b https://gitlab.com/Bad_Manners
+RedirectMatch 301 ^/@/(google|g-?mail(address)?)\b /#gmail
 RedirectMatch 301 ^/@/gum[_-]?road\b https://badmanners.gumroad.com
 RedirectMatch 301 ^/@/(ink[_-]?bunny|ib)\b https://inkbunny.net/BadManners
 RedirectMatch 301 ^/@/itaku\b https://itaku.ee/profile/badmanners
diff --git a/src/pages/index.astro b/src/pages/index.astro
index baeb2f3..aed18c8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -52,7 +52,7 @@ import {
   </Fragment>
   <article class="h-card" aria-label="Homepage of Bad Manners">
     <h1 id="title-home" class="pb-4 text-3xl tracking-tight sm:text-5xl">
-      Hi, I'm <span class="p-name font-medium">Bad Manners</span>!
+      Hi, I'm <b class="p-name font-medium">Bad Manners</b>!
     </h1>
     <section>
       <img
@@ -62,17 +62,13 @@ import {
         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, a furry, and occasional writer.</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 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32" aria-label="Links">
         {
           Astro.site ? (
             <li>
               <a
                 id="permalink"
-                class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+                class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
                 href={Astro.site}
                 aria-label="Permalink"
                 data-clipboard={Astro.site}
@@ -83,6 +79,7 @@ import {
                   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"
                 />
+                <p class="sr-only">https://badmanners.xyz</p>
               </a>
             </li>
           ) : null
@@ -90,7 +87,7 @@ import {
         <li>
           <a
             id="gallery"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://gallery.badmanners.xyz"
             rel="me"
             aria-label="Main gallery"
@@ -101,15 +98,16 @@ import {
               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"
             />
+            <p class="sr-only">Gallery on https://gallery.badmanners.xyz</p>
           </a>
         </li>
         <li>
           <a
             id="pronouns"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://pronouns.cc/@BadManners"
             rel="me"
-            aria-label="Pronouns"
+            aria-label="Pronouns (he/they)"
           >
             <IconCommentDots
               height="1.75rem"
@@ -117,14 +115,14 @@ import {
               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"
             />
             <p class="p-nickname sr-only">@BadManners on pronouns.cc</p>
-            <p class="p-pronoun sr-only">he/him/his/his/himself</p>
-            <p class="p-pronoun sr-only">they/them/their/theirs/themself</p>
+            <p class="p-pronoun hidden">he/him/his/his/himself</p>
+            <p class="p-pronoun hidden">they/them/their/theirs/themself</p>
           </a>
         </li>
         <li>
           <a
             id="e-mail"
-            class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="mailto:me@badmanners.xyz"
             rel="me"
             aria-label="E-mail"
@@ -136,13 +134,13 @@ import {
               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"
             />
-            <p class="sr-only">E-mail address</p>
+            <p class="sr-only">me@badmanners.xyz</p>
           </a>
         </li>
         <li>
           <a
             id="bluesky"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://bsky.app/profile/badmanners.xyz"
             rel="me"
             aria-label="Bluesky"
@@ -158,7 +156,7 @@ import {
         <li>
           <a
             id="codeberg"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://codeberg.org/BadManners"
             rel="me"
             aria-label="Codeberg"
@@ -174,7 +172,7 @@ import {
         <li>
           <a
             id="cohost"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://cohost.org/BadManners"
             rel="me"
             aria-label="Cohost"
@@ -190,7 +188,7 @@ import {
         <li>
           <button
             id="discord"
-            class="text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             aria-label="Discord"
             data-clipboard="badmanners"
             data-noun="Discord username"
@@ -207,7 +205,7 @@ import {
         <li>
           <a
             id="eka-s-portal"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://aryion.com/g4/user/BadManners"
             rel="me"
             aria-label="Eka's Portal"
@@ -223,7 +221,7 @@ import {
         <li>
           <a
             id="fur-affinity"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.furaffinity.net/user/BadManners"
             rel="me"
             aria-label="Fur Affinity"
@@ -239,7 +237,7 @@ import {
         <li>
           <a
             id="github"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://github.com/BadMannersXYZ"
             rel="me"
             aria-label="GitHub"
@@ -255,7 +253,7 @@ import {
         <li>
           <a
             id="gitlab"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://gitlab.com/Bad_Manners"
             rel="me"
             aria-label="GitLab"
@@ -271,7 +269,7 @@ import {
         <li>
           <a
             id="gmail"
-            class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="mailto:badmanners.vore@gmail.com"
             rel="me"
             aria-label="Gmail"
@@ -283,13 +281,13 @@ import {
               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"
             />
-            <p class="sr-only">Google/Gmail address</p>
+            <p class="sr-only">badmanners.vore@gmail.com</p>
           </a>
         </li>
         <li>
           <a
             id="inkbunny"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://inkbunny.net/BadManners"
             rel="me"
             aria-label="Inkbunny"
@@ -305,7 +303,7 @@ import {
         <li>
           <a
             id="itaku"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://itaku.ee/profile/badmanners"
             rel="me"
             aria-label="Itaku"
@@ -321,7 +319,7 @@ import {
         <li>
           <a
             id="itch"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://bad-manners.itch.io"
             rel="me"
             aria-label="Itch.io"
@@ -337,7 +335,7 @@ import {
         <li>
           <a
             id="keybase"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://keybase.io/badmanners"
             rel="me"
             aria-label="Keybase"
@@ -353,7 +351,7 @@ import {
         <li>
           <a
             id="keyoxide"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://keyoxide.org/aspe%3Akeyoxide.org%3AUWYBVFCBFXTVUF2U6FS6AYJHLU"
             rel="me"
             aria-label="Keyoxide"
@@ -363,13 +361,13 @@ import {
               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"
             />
-            <p class="u-uid hidden">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</p>
+            <p class="sr-only"><span class="p-uid">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</span> on Keyoxide</p>
           </a>
         </li>
         <li>
           <a
             id="ko-fi"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://ko-fi.com/badmanners"
             rel="me"
             aria-label="Ko-fi"
@@ -385,7 +383,7 @@ import {
         <li>
           <a
             id="mastodon"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://meow.social/@BadManners"
             rel="me"
             aria-label="Mastodon"
@@ -401,7 +399,7 @@ import {
         <li>
           <a
             id="neocities"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://badmanners.neocities.org"
             rel="me"
             aria-label="Neocities"
@@ -417,7 +415,7 @@ import {
         <li>
           <a
             id="picarto"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.picarto.tv/BadManners"
             rel="me"
             aria-label="Picarto"
@@ -433,7 +431,7 @@ import {
         <li>
           <a
             id="reddit"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.reddit.com/user/BadManners_"
             rel="me"
             aria-label="Reddit"
@@ -449,7 +447,7 @@ import {
         <li>
           <a
             id="signal"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
             rel="me"
             aria-label="Signal"
@@ -465,7 +463,7 @@ import {
         <li>
           <a
             id="sofurry"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://bad-manners.sofurry.com"
             rel="me"
             aria-label="SoFurry"
@@ -481,7 +479,7 @@ import {
         <li>
           <a
             id="ssh"
-            class="u-key text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-key text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="/ssh.pub"
             aria-label="SSH public key"
             data-clipboard="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJ3QAZd3E95gxef2kiXppWa/xhcwBtnKMZJaW6s4d7Tm Bad Manners <me@badmanners.xyz>"
@@ -492,12 +490,13 @@ import {
               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"
             />
+            <p class="sr-only">SSH public key</p>
           </a>
         </li>
         <li>
           <a
             id="steam"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://steamcommunity.com/id/badmanners_"
             rel="me"
             aria-label="Steam"
@@ -513,7 +512,7 @@ import {
         <li>
           <a
             id="subscribestar"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://subscribestar.adult/bad-manners"
             rel="me"
             aria-label="SubscribeStar"
@@ -529,7 +528,7 @@ import {
         <li>
           <a
             id="telegram"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://t.me/bad_manners"
             rel="me"
             aria-label="Telegram"
@@ -545,7 +544,7 @@ import {
         <li>
           <a
             id="tumblr"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.tumblr.com/badmannersxyz"
             rel="me"
             aria-label="Tumblr"
@@ -561,7 +560,7 @@ import {
         <li>
           <a
             id="twitch"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.twitch.tv/bad__manners"
             rel="me"
             aria-label="Twitch"
@@ -577,7 +576,7 @@ import {
         <li>
           <a
             id="weasyl"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.weasyl.com/~badmanners"
             rel="me"
             aria-label="Weasyl"
@@ -593,7 +592,7 @@ import {
         <li>
           <a
             id="x"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://x.com/BadManners__"
             rel="me"
             aria-label="X"
@@ -609,7 +608,7 @@ import {
         <li>
           <a
             id="youtube"
-            class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
+            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             href="https://www.youtube.com/@BadMannersXYZ"
             rel="me"
             aria-label="YouTube"