From 580cd2da26bf18617d93fd9b5a58726a51d7019a Mon Sep 17 00:00:00 2001
From: Bad Manners <me@badmanners.xyz>
Date: Sun, 18 Aug 2024 23:01:45 -0300
Subject: [PATCH] Improvements to a11y, scripts, and About page

---
 .prettierignore                         |  4 +-
 package-lock.json                       |  4 +-
 package.json                            |  2 +-
 src/components/AgeRestrictedModal.astro | 60 +++++++++++++------------
 src/components/AutoDarkMode.astro       |  4 ++
 src/components/DarkModeScript.astro     |  7 +--
 src/layouts/BaseLayout.astro            | 20 ++++-----
 src/pages/about.astro                   | 26 +++++++----
 src/pages/index.astro                   | 42 ++++++++---------
 src/pages/sam_brendan.astro             | 17 ++++---
 10 files changed, 104 insertions(+), 82 deletions(-)
 create mode 100644 src/components/AutoDarkMode.astro

diff --git a/.prettierignore b/.prettierignore
index f150f24..a37bf70 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,3 @@
-src/components/DarkModeScript.astro
+src/components/AutoDarkMode.astro
+.astro/
+dist/
diff --git a/package-lock.json b/package-lock.json
index 95b54b8..da02835 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "badmanners.xyz",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "badmanners.xyz",
-      "version": "2.0.3",
+      "version": "2.0.4",
       "hasInstallScript": true,
       "dependencies": {
         "@astrojs/check": "^0.9.2",
diff --git a/package.json b/package.json
index 0dc6bbe..809e450 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "badmanners.xyz",
   "type": "module",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "scripts": {
     "postinstall": "astro sync",
     "dev": "astro dev",
diff --git a/src/components/AgeRestrictedModal.astro b/src/components/AgeRestrictedModal.astro
index a9128a4..c74293c 100644
--- a/src/components/AgeRestrictedModal.astro
+++ b/src/components/AgeRestrictedModal.astro
@@ -5,7 +5,7 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
 <template id="template-modal-age-restricted">
   <div
     id="modal-age-restricted"
-    class="fixed inset-0 bg-stone-100 dark:bg-stone-900"
+    class="fixed inset-0 bg-stone-50 dark:bg-zinc-900"
     tabindex="-1"
     role="dialog"
     aria-hidden="false"
@@ -14,15 +14,15 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
       <div class="text-bm-500 dark:text-bm-400">
         <IconTriangleExclamation width="3rem" height="3rem" />
       </div>
-      <div class="pb-3 pt-2 text-3xl font-light text-stone-700 sm:pb-4 sm:pt-2 dark:text-stone-50">
+      <div class="pb-3 pt-2 text-3xl font-light text-stone-700 sm:pb-4 sm:pt-2 dark:text-zinc-50">
         Age verification
       </div>
       <div
-        class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl text-stone-700 dark:border-stone-300 dark:text-stone-50"
+        class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl text-stone-700 dark:border-zinc-300 dark:text-zinc-50"
       >
         You must be 18+ to access this page.
       </div>
-      <p class="px-8 text-lg font-light leading-snug text-stone-700 sm:max-w-2xl dark:text-stone-50">
+      <p class="px-8 text-lg font-light leading-snug text-stone-700 sm:max-w-2xl dark:text-zinc-50">
         By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
         screen from appearing in the future.
       </p>
@@ -30,14 +30,14 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
         <button
           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-stone-300 dark:text-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
+          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"
         >
           Cancel
         </button>
         <button
           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-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
+          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"
         >
           I'm at least 18 years old
         </button>
@@ -49,30 +49,34 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
 <script>
   (function () {
     if (localStorage.getItem("ageVerified") !== "true") {
-      document.body.appendChild(
-        document
-          .querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")!
-          .content.cloneNode(true),
+      const fragment = document
+        .querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")!
+        .content.cloneNode(true) as DocumentFragment;
+      const modal = fragment.firstElementChild as HTMLElementTagNameMap["div"];
+      const controller = new AbortController();
+      const { signal } = controller;
+      modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!.addEventListener(
+        "click",
+        (e: MouseEvent) => {
+          e.preventDefault();
+          location.href = "about:blank";
+        },
+        { signal },
+      );
+      modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
+        "click",
+        (e: MouseEvent) => {
+          e.preventDefault();
+          controller.abort();
+          localStorage.setItem("ageVerified", "true");
+          document.body.style.overflow = "auto";
+          modal.remove();
+        },
+        { signal },
       );
-      const modal = document.querySelector<HTMLElementTagNameMap["div"]>("body > div#modal-age-restricted")!;
-      const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
-      const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
-      function onRejectButtonClick(e: MouseEvent) {
-        e.preventDefault();
-        location.href = "about:blank";
-      }
-      function onAcceptButtonClick(e: MouseEvent) {
-        e.preventDefault();
-        rejectButton.removeEventListener("click", onRejectButtonClick);
-        acceptButton.removeEventListener("click", onAcceptButtonClick);
-        localStorage.setItem("ageVerified", "true");
-        document.body.style.overflow = "auto";
-        modal.remove();
-      }
-      rejectButton.addEventListener("click", onRejectButtonClick);
-      acceptButton.addEventListener("click", onAcceptButtonClick);
       document.body.style.overflow = "hidden";
-      rejectButton.focus();
+      document.body.appendChild(fragment);
+      document.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")?.focus();
     }
   })();
 </script>
diff --git a/src/components/AutoDarkMode.astro b/src/components/AutoDarkMode.astro
new file mode 100644
index 0000000..67423e2
--- /dev/null
+++ b/src/components/AutoDarkMode.astro
@@ -0,0 +1,4 @@
+---
+---
+
+<script is:inline>!function(){var a="dark",b="auto",c="colorScheme",d=document.body.classList,e=localStorage,f=e.getItem(c);f&&f!==b?f===a&&d.add(a):(e.setItem(c,b),matchMedia("(prefers-color-scheme: dark)").matches&&d.add(a))}();</script>
diff --git a/src/components/DarkModeScript.astro b/src/components/DarkModeScript.astro
index 5dda7eb..16645fc 100644
--- a/src/components/DarkModeScript.astro
+++ b/src/components/DarkModeScript.astro
@@ -1,8 +1,8 @@
 ---
+import DarkModeInline from "./AutoDarkMode.astro";
+---
 
----
-
-<script is:inline>!function(){var a="dark",b="auto",c="colorScheme",d=document.body.classList,e=localStorage,f=e.getItem(c);f&&f!==b?f===a&&d.add(a):(e.setItem(c,b),matchMedia("(prefers-color-scheme: dark)").matches&&d.add(a))}();</script>
+<DarkModeInline />
 
 <script>
   (function () {
@@ -12,6 +12,7 @@
     }
     document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
       button.classList.remove("hidden");
+      button.style.removeProperty("display");
       button.setAttribute("aria-hidden", "false");
       button.addEventListener("click", (e) => {
         e.preventDefault();
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b6f4771..5210603 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -78,18 +78,16 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
               Licenses
             </a>
           </div>
-          <span class="mt-1 print:hidden"
-            ><button
-              data-dark-mode
-              aria-labelledby="label-toggle-dark-mode"
-              aria-hidden="true"
-              class="m-1 hidden p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300"
-            >
-              <IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
-              <IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />
-              <span id="label-toggle-dark-mode" class="hidden">Toggle dark mode</span>
-            </button>&nbsp;</span
+          <button
+            data-dark-mode
+            style={{display: "none"}}
+            class="mt-2 print:hidden p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300"
+            aria-labelledby="label-toggle-dark-mode"
           >
+            <IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
+            <IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />
+            <span id="label-toggle-dark-mode" class="sr-only">Toggle dark mode</span>
+          </button>
         </footer>
       </div>
     </div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 474f48b..be6182f 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -7,24 +7,34 @@ import ImageSamStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp"
 
 <BaseLayout pageTitle="About me">
   <meta slot="head-description" property="og:description" content="About Bad Manners." />
-  <article aria-labelledby="title-about-me">
+  <article class="h-card" aria-labelledby="title-about-me">
     <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
-    <section>
-      <p class="my-5 sm:my-6 sm:px-5 md:px-6">
-        You can call me <b>Bad Manners</b>, <b>Manners</b>, <b>BM</b>, <b>Bad</b>, <b>Bananas</b>... many choices to
-        pick from! My pronouns are "he/him". You can also call me <b>Sam</b>, which is my fursona's name. He is a mimic
-        and maned wolf hybrid, and you can learn more about him by clicking on him below!
+    <section id="section-bad-manners">
+      <p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
+        You can call me <b class="p-name">Bad Manners</b>, <b class="p-nickname">Manners</b>, <b class="p-nickname"
+          ><abbr>BM</abbr></b
+        >, <b class="p-nickname">Bad</b>, <b class="p-nickname">Briefcase</b>... many choices to pick from! My pronouns
+        are "<span class="p-pronoun">he/him</span>". The term "<em>bad manners</em>" comes from gaming, where it's used
+        to refer to acting in a purposefully disrespectful and taunting manner towards other players, but I also chose
+        this moniker as it has plenty of personal meanings attached to it.
+      </p>
+    </section>
+    <section id="section-sam-brendan" class="h-card">
+      <p class="my-4 sm:mb-3 sm:mt-6">
+        You can also call me <b class="p-first-name">Sam</b>, which is my <span class="p-category">fursona</span>'s
+        name. He is a <span class="p-note">mimic and maned wolf hybrid</span>, and you can learn more about him by
+        clicking on him below!
       </p>
       <figure class="mt-4">
         <a
           href="/sam_brendan"
-          class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
+          class="u-url group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
           aria-label="Learn more about Sam"
         >
           <Image
             src={ImageSamStickerJuicebox}
+            class="u-photo max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
             alt="Sam Brendan with googly eyes and fangs showing from his lips, sipping from the straw of a banana juice box as some of the liquid escapes his mouth. Art by OliveCow."
-            class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
             loading="eager"
             height={320}
           />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ed258e9..ebd4ae6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -60,7 +60,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">@badmanners.xyz on Bluesky</span>
           </a>
         </li>
         <li>
@@ -76,7 +76,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadManners on Codeberg</span>
           </a>
         </li>
         <li>
@@ -92,7 +92,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadManners on Eka's Portal</span>
           </a>
         </li>
         <li>
@@ -108,7 +108,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadManners on Fur Affinity</span>
           </a>
         </li>
         <li>
@@ -124,7 +124,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadMannersXYZ on GitHub</span>
           </a>
         </li>
         <li>
@@ -140,7 +140,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">Bad_Manners on GitLab</span>
           </a>
         </li>
         <li>
@@ -156,7 +156,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadManners on Inkbunny</span>
           </a>
         </li>
         <li>
@@ -172,7 +172,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">badmanners on Itaku</span>
           </a>
         </li>
         <li>
@@ -188,7 +188,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">Bad Manners on Itch.io</span>
           </a>
         </li>
         <li>
@@ -204,7 +204,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">badmanners on Keybase</span>
           </a>
         </li>
         <li>
@@ -220,7 +220,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">@BadManners@meow.social on Mastodon</span>
           </a>
         </li>
         <li>
@@ -236,7 +236,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">badmanners.neocities.org on Neocities</span>
           </a>
         </li>
         <li>
@@ -252,7 +252,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadManners on Picarto</span>
           </a>
         </li>
         <li>
@@ -268,7 +268,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">badmanners.10 on Signal</span>
           </a>
         </li>
         <li>
@@ -284,7 +284,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">Bad Manners on SoFurry</span>
           </a>
         </li>
         <li>
@@ -300,7 +300,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">badmanners_ on Steam</span>
           </a>
         </li>
         <li>
@@ -316,7 +316,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">Bad Manners on SubscribeStar</span>
           </a>
         </li>
         <li>
@@ -332,7 +332,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">@bad_manners on Telegram</span>
           </a>
         </li>
         <li>
@@ -348,7 +348,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">bad__manners on Twitch</span>
           </a>
         </li>
         <li>
@@ -364,7 +364,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">BadManners on Weasyl</span>
           </a>
         </li>
         <li>
@@ -380,7 +380,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
               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>
+            <span class="p-nickname sr-only">@BadManners__ on X</span>
           </a>
         </li>
         <li>
diff --git a/src/pages/sam_brendan.astro b/src/pages/sam_brendan.astro
index 5accb5b..5d9218c 100644
--- a/src/pages/sam_brendan.astro
+++ b/src/pages/sam_brendan.astro
@@ -8,13 +8,16 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
 
 <BaseLayout pageTitle="Sam Brendan">
   <meta slot="head-description" property="og:description" content="Mimic x maned wolf hybrid." />
-  <article aria-labelledby="title-sam-brendan">
-    <h1 id="title-sam-brendan" class="text-2xl sm:text-3xl">Sam Brendan</h1>
+  <article class="h-card" aria-labelledby="title-sam-brendan">
+    <h1 id="title-sam-brendan" class="p-name text-2xl sm:text-3xl">Sam Brendan</h1>
     <section>
       <p class="my-4 text-justify sm:my-6 sm:px-5 md:px-12">
-        <b>Sam Brendan</b> (or simply <b>Sam</b>) is a mimic x maned wolf hybrid. The main color of his fur is lime
-        green, with light teal and white details. His most noticeable feature, however, is the metal briefcase that he
-        has in lieu of a face &ndash; the mimic portion of his body.
+        <b><span class="p-given-name">Sam</span> <span class="p-family-name">Brendan</span></b> (or simply <b
+          class="p-nickname">Sam</b
+        >), also going by <b class="p-nickname">Bad Manners</b>, is a <span class="p-note"
+          >mimic x maned wolf hybrid</span
+        >. The main color of his fur is lime green, with light teal and white details. His most noticeable feature,
+        however, is the metal briefcase that he has in lieu of a face &ndash; the mimic portion of his body.
       </p>
     </section>
     <section aria-labelledby="title-physical-description">
@@ -28,7 +31,7 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
           <Image
             src={ImageSamRefsheet}
             alt="A reference sheet of Sam Brendan, a mimic x maned wolf hybrid. Art by Rimmi."
-            class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+            class="u-photo max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
             loading="eager"
             height={512}
           />
@@ -80,7 +83,7 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
           <Image
             src={ImageSamAllStickers}
             alt="A set with ten stickers of Sam Brendan displaying different actions and emotions. Art by OliveCow."
-            class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+            class="u-photo max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
             loading="lazy"
             height={512}
           />