Clean up main page links

astro.config.mjs

@@ -26,6 +26,10 @@ export default defineConfig({
           match: /^\/@\/(aryion|ekas?(portal)?)\b/,
           url: "https://aryion.com/g4/user/BadManners",
         },
+        {
+          match: /^\/@\/blog\b/,
+          url: "https://gallery.badmanners.xyz/blog",
+        },
         {
           match: /^\/@\/(blue[_-]?sky|bsky)\b/,
           url: "https://bsky.app/profile/badmanners.xyz",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "badmanners.xyz",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "badmanners.xyz",
-      "version": "2.1.12",
+      "version": "2.1.13",
       "hasInstallScript": true,
       "dependencies": {
         "@astrojs/check": "^0.9.3",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "badmanners.xyz",
   "type": "module",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "scripts": {
     "postinstall": "astro sync",
     "dev": "astro dev",

src/components/icons/SVGIcon.astro

@@ -6,11 +6,20 @@ type Props = {
   class?: string;
   fill?: string;
   children: any;
+  "aria-label"?: string;
 };
 
-const { width, height, class: className, fill = "currentColor", viewBox } = Astro.props;
+const { width, height, class: className, fill = "currentColor", viewBox, "aria-label": ariaLabel } = Astro.props;
 ---
 
-<svg style={{ width, height, fill }} class={className} viewBox={viewBox} aria-hidden="true">
+<svg
+  style={{ width, height, fill }}
+  class={className}
+  viewBox={viewBox}
+  aria-hidden={ariaLabel ? undefined : "true"}
+  role={ariaLabel ? "img" : undefined}
+  aria-label={ariaLabel}
+  focusable="false"
+>
   <slot />
 </svg>

src/layouts/BaseLayout.astro

@@ -40,7 +40,9 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
         aria-hidden="true"
       >
       </div>
-      <div class="relative my-auto flex flex-col items-center justify-center px-3 py-8 sm:py-12 md:px-12 print:p-0">
+      <div
+        class="relative my-auto flex flex-col items-center justify-center px-2 py-8 sm:py-12 md:px-3 lg:px-6 print:p-0"
+      >
         <main
           class="w-full max-w-5xl flex-shrink-0 flex-grow-0 justify-center rounded-xl bg-stone-50 px-4 pb-6 pt-4 text-center text-base font-normal tracking-tight text-stone-700 sm:px-8 sm:pb-8 sm:pt-6 sm:text-lg dark:bg-zinc-800 dark:text-zinc-50 print:bg-transparent print:p-0"
         >

src/pages/about.astro

@@ -16,10 +16,12 @@ import { ImageSamStickerJuicebox } from "@assets/images";
           class="p-nickname font-semibold">Briefcase</b
         >... many choices to pick from! My pronouns are <span
           class="p-pronoun font-medium underline decoration-current decoration-dotted"
-          data-tippy-content="he/him/his/his/himself">he/him</span
+          title="he/him/his/his/himself"
+          data-tooltip>he/him</span
         > or <span
           class="p-pronoun font-medium underline decoration-current decoration-dotted"
-          data-tippy-content="they/them/their/theirs/themself">they/them</span
+          title="they/them/their/theirs/themself"
+          data-tooltip>they/them</span
         >. The term "bad manners" comes from gaming, referencing when someone acts in a purposefully disrespectful and
         taunting manner towards other players &ndash; and I chose this moniker as it has plenty of personal meanings
         attached to it.
@@ -67,11 +69,11 @@ import { ImageSamStickerJuicebox } from "@assets/images";
   import tippy from "tippy.js";
   import "tippy.js/dist/tippy.css";
 
-  const initTooltips = () => {
-    tippy("[data-tippy-content]", {
-      theme: "bm",
-    });
-  };
-
-  initTooltips();
+  const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
+  tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
+  tippy(tooltipItems, {
+    content: (el) => (el as HTMLElement).dataset.tooltip!,
+    theme: "bm",
+  });
+  tooltipItems.forEach((el) => el.removeAttribute("title"));
 </script>

src/pages/feed.xml.ts

@@ -4,10 +4,15 @@ import { set as dateSet, subMinutes } from "date-fns";
 import { TOS_FEED } from "@data/tos";
 
 export const GET: APIRoute = ({ site }) => {
+  if (!site) {
+    throw new Error("site is required.");
+  }
   return rss({
     title: "Bad Manners",
     description: "Bad Manners status updates",
-    site: site!,
+    site,
+    xmlns: { atom: "http://www.w3.org/2005/Atom" },
+    customData: `<link href="${site}" rel="alternate" type="text/html" /><atom:link href="${new URL("feed.xml", site)}" rel="self" type="application/rss+xml" />`,
     items: TOS_FEED.map(({ status, updatedAt }) => ({
       title: {
         CLOSED: "Story commissions are closed.",
@@ -15,7 +20,7 @@ export const GET: APIRoute = ({ site }) => {
         SEMI_OPEN: "Story commissions are semi-open, and I may accept them less frequently.",
         PRIVATE: "Story commissions are private; they are only open to select commissioners.",
       }[status],
-      link: "https://badmanners.xyz/terms_of_service",
+      link: new URL("terms_of_service", site).toString(),
       pubDate: subMinutes(dateSet(updatedAt, { hours: 12, minutes: 0, seconds: 0 }), updatedAt.getTimezoneOffset()),
     })),
   });

src/pages/index.astro

@@ -51,11 +51,11 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
       title="Gallery feed"
     />
   </Fragment>
-  <article class="h-card" aria-label="Homepage of Bad Manners">
+  <article id="homepage" 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 <b class="p-name font-medium">Bad Manners</b>!
     </h1>
-    <section>
+    <section id="homepage-section">
       <img
         loading="eager"
         src="/logo.webp"
@@ -65,15 +65,21 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
       <p class="p-note mt-6 sm:px-5 md:px-6">
         I'm a safe vore enthusiast, a furry, a programmer, and occasional writer.
       </p>
-      <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">
+      <ul
+        id="links"
+        class="grid grid-cols-3 gap-x-4 px-4 pt-8 sm:grid-cols-4 sm:px-20 lg:grid-cols-5"
+        aria-label="Links"
+      >
         {
           Astro.site ? (
             <li>
               <a
                 id="permalink"
-                class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+                class="u-url contact-link group"
                 href={Astro.site}
                 aria-label="Permalink"
+                title="Permalink"
+                data-tooltip
                 data-clipboard={Astro.site}
                 data-noun="URL"
               >
@@ -86,10 +92,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="gallery"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://gallery.badmanners.xyz"
             rel="me"
             aria-label="Main gallery"
+            title="Main gallery"
+            data-tooltip
             data-age-restricted
           >
             <IconBriefcase height="1.75rem" width="1.75rem" class="contact-icon" />
@@ -99,10 +107,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="pronouns"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://pronouns.cc/@BadManners"
             rel="me"
             aria-label="Pronouns (he/they)"
+            title="Pronouns (he/they)"
+            data-tooltip
           >
             <IconCommentDots height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">@BadManners on pronouns.cc</p>
@@ -113,10 +123,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="e-mail"
-            class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-email contact-link group"
             href="mailto:me@badmanners.xyz"
             rel="me"
             aria-label="E-mail"
+            title="E-mail"
+            data-tooltip
             data-clipboard="me@badmanners.xyz"
             data-noun="E-mail address"
           >
@@ -127,10 +139,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="bluesky"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://bsky.app/profile/badmanners.xyz"
             rel="me"
             aria-label="Bluesky"
+            title="Bluesky"
+            data-tooltip
           >
             <IconBluesky height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">@badmanners.xyz on Bluesky</p>
@@ -139,10 +153,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="codeberg"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://codeberg.org/BadManners"
             rel="me"
             aria-label="Codeberg"
+            title="Codeberg"
+            data-tooltip
           >
             <IconCodeberg height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadManners on Codeberg</p>
@@ -153,6 +169,8 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
             id="discord"
             class="text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
             aria-label="Discord"
+            title="Discord"
+            data-tooltip
             data-clipboard="badmanners"
             data-noun="Discord username"
             aria-disabled="true"
@@ -164,10 +182,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="eka-s-portal"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://aryion.com/g4/user/BadManners"
             rel="me"
             aria-label="Eka's Portal"
+            title="Eka's Portal"
+            data-tooltip
           >
             <IconEkasPortal height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadManners on Eka's Portal</p>
@@ -176,10 +196,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="fur-affinity"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://www.furaffinity.net/user/BadManners"
             rel="me"
             aria-label="Fur Affinity"
+            title="Fur Affinity"
+            data-tooltip
           >
             <IconFurAffinity height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadManners on Fur Affinity</p>
@@ -188,10 +210,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="gitgud"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://gitgud.io/BadMannersXYZ"
             rel="me"
             aria-label="GitGud"
+            title="GitGud"
+            data-tooltip
           >
             <IconGitGud height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadMannersXYZ on GitGud</p>
@@ -200,10 +224,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="github"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://github.com/BadMannersXYZ"
             rel="me"
             aria-label="GitHub"
+            title="GitHub"
+            data-tooltip
           >
             <IconGithub height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadMannersXYZ on GitHub</p>
@@ -212,10 +238,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="gitlab"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://gitlab.com/Bad_Manners"
             rel="me"
             aria-label="GitLab"
+            title="GitLab"
+            data-tooltip
           >
             <IconGitlab height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">Bad_Manners on GitLab</p>
@@ -224,10 +252,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="gmail"
-            class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-email contact-link group"
             href="mailto:badmanners.vore@gmail.com"
             rel="me"
             aria-label="Gmail"
+            title="Gmail"
+            data-tooltip
             data-clipboard="badmanners.vore@gmail.com"
             data-noun="Gmail address"
           >
@@ -238,9 +268,11 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="gpg"
-            class="u-key text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-key contact-link group"
             href="/gpg.pub"
             aria-label="GPG public key"
+            title="GPG public key"
+            data-tooltip
             data-clipboard={gpgKey}
             data-noun="GPG key"
           >
@@ -251,10 +283,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="inkbunny"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://inkbunny.net/BadManners"
             rel="me"
             aria-label="Inkbunny"
+            title="Inkbunny"
+            data-tooltip
           >
             <IconInkbunny height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadManners on Inkbunny</p>
@@ -263,10 +297,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="itaku"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://itaku.ee/profile/badmanners"
             rel="me"
             aria-label="Itaku"
+            title="Itaku"
+            data-tooltip
           >
             <IconItaku height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners on Itaku</p>
@@ -275,10 +311,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="itch"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://bad-manners.itch.io"
             rel="me"
             aria-label="Itch.io"
+            title="Itch.io"
+            data-tooltip
           >
             <IconItchIO height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">Bad Manners on Itch.io</p>
@@ -287,10 +325,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="keybase"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://keybase.io/badmanners"
             rel="me"
             aria-label="Keybase"
+            title="Keybase"
+            data-tooltip
           >
             <IconKeybase height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners on Keybase</p>
@@ -299,24 +339,26 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="keyoxide"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://keyoxide.org/aspe%3Akeyoxide.org%3AUWYBVFCBFXTVUF2U6FS6AYJHLU"
             rel="me"
             aria-label="Keyoxide"
+            title="Keyoxide"
+            data-tooltip
           >
             <IconKeyoxide height="1.75rem" width="1.75rem" class="contact-icon" />
-            <p class="sr-only select-none">
-              <span class="p-uid">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</span> on Keyoxide
-            </p>
+            <p class="p-uid sr-only select-none">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</p>
           </a>
         </li>
         <li>
           <a
             id="ko-fi"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://ko-fi.com/badmanners"
             rel="me"
             aria-label="Ko-fi"
+            title="Ko-fi"
+            data-tooltip
           >
             <IconKofi height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners on Ko-fi</p>
@@ -325,10 +367,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="mastodon"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://meow.social/@BadManners"
             rel="me"
             aria-label="Mastodon"
+            title="Mastodon"
+            data-tooltip
           >
             <IconMastodon height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">@BadManners@meow.social on Mastodon</p>
@@ -337,10 +381,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="neocities"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://badmanners.neocities.org"
             rel="me"
             aria-label="Neocities"
+            title="Neocities"
+            data-tooltip
           >
             <IconNeocities height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners.neocities.org on Neocities</p>
@@ -349,10 +395,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="picarto"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://www.picarto.tv/BadManners"
             rel="me"
             aria-label="Picarto"
+            title="Picarto"
+            data-tooltip
           >
             <IconPicarto height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadManners on Picarto</p>
@@ -361,10 +409,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="signal"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
             rel="me"
             aria-label="Signal"
+            title="Signal"
+            data-tooltip
           >
             <IconSignal height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners.10 on Signal</p>
@@ -373,10 +423,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="sofurry"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://bad-manners.sofurry.com"
             rel="me"
             aria-label="SoFurry"
+            title="SoFurry"
+            data-tooltip
           >
             <IconSoFurry height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">Bad Manners on SoFurry</p>
@@ -385,9 +437,11 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="ssh"
-            class="u-key text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-key contact-link group"
             href="/ssh.pub"
             aria-label="SSH public key"
+            title="SSH public key"
+            data-tooltip
             data-clipboard={sshKey}
             data-noun="SSH key"
           >
@@ -398,10 +452,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="steam"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://steamcommunity.com/id/badmanners_"
             rel="me"
             aria-label="Steam"
+            title="Steam"
+            data-tooltip
           >
             <IconSteam height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners_ on Steam</p>
@@ -410,10 +466,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="subscribestar"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://subscribestar.adult/bad-manners"
             rel="me"
             aria-label="SubscribeStar"
+            title="SubscribeStar"
+            data-tooltip
           >
             <IconSubscribeStar height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">Bad Manners on SubscribeStar</p>
@@ -422,10 +480,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="telegram"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://t.me/bad_manners"
             rel="me"
             aria-label="Telegram"
+            title="Telegram"
+            data-tooltip
           >
             <IconTelegram height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">@bad_manners on Telegram</p>
@@ -434,10 +494,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="twitch"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://www.twitch.tv/bad__manners"
             rel="me"
             aria-label="Twitch"
+            title="Twitch"
+            data-tooltip
           >
             <IconTwitch height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">bad__manners on Twitch</p>
@@ -446,10 +508,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="weasyl"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://www.weasyl.com/~badmanners"
             rel="me"
             aria-label="Weasyl"
+            title="Weasyl"
+            data-tooltip
           >
             <IconWeasyl height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">BadManners on Weasyl</p>
@@ -458,10 +522,12 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         <li>
           <a
             id="youtube"
-            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
+            class="u-url contact-link group"
             href="https://www.youtube.com/@BadMannersXYZ"
             rel="me"
             aria-label="YouTube"
+            title="YouTube"
+            data-tooltip
           >
             <IconYouTube height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">@BadMannersXYZ on YouTube</p>
@@ -472,6 +538,13 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
   </article>
 </BaseLayout>
 
+<style>
+  ul#links > li {
+    min-width: 6rem;
+    flex: 1 1 0%;
+  }
+</style>
+
 <script>
   import tippy, { hideAll } from "tippy.js";
   import "tippy.js/dist/tippy.css";
@@ -499,10 +572,13 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
     });
 
     // Instantiate hover tooltips
-    tippy("ul#links li > :is(a, button)[aria-label]", {
-      content: (el) => el.getAttribute("aria-label")!,
+    const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
+    tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
+    tippy(tooltipItems, {
+      content: (el) => (el as HTMLElement).dataset.tooltip!,
       theme: "bm",
     });
+    tooltipItems.forEach((el) => el.removeAttribute("title"));
 
     // Add functionality to custom clipboard items
     let tooltipTimeoutTag: TimeoutTag = null;

src/pages/sam_brendan.astro

@@ -103,11 +103,19 @@ import { ImageSamAllStickers, ImageSamRefsheet } from "@assets/images";
         </figcaption>
       </figure>
       <p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12">
-        Sam is normally solitary and anxious but friendly and extremely curious, with a particular interest in sciences.
-        Sometimes introverted and shy, sometimes loud and active, he's quite prone to mood swings, although he tries to
-        be reasonable and act on good intentions and manners whenever possible. He is quite fond of anagrams and
-        wordplay. His main weaknesses are ear scritches and constantly focusing on others' approval. His main strength
-        is finding humor in little things.
+        Sam identifies as male, and uses <span
+          class="p-pronoun underline decoration-current decoration-dotted"
+          title="he/him/his/his/himself"
+          data-tooltip>he/him</span
+        > or <span
+          class="p-pronoun underline decoration-current decoration-dotted"
+          title="they/them/their/theirs/themself"
+          data-tooltip>they/them</span
+        > pronouns. He is normally solitary and anxious but friendly and extremely curious, with a particular interest in
+        sciences. Sometimes introverted and shy, sometimes loud and active, he's quite prone to mood swings, although he
+        tries to be reasonable and act on good intentions and manners whenever possible. He is quite fond of anagrams and
+        wordplay. His main weaknesses are ear scritches and constantly focusing on others' approval. His main strength is
+        finding humor in little things.
       </p>
       <p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12">
         Due to his inability to display facial expressions, he usually resorts to stereotypical conveyances of emotions
@@ -186,3 +194,16 @@ import { ImageSamAllStickers, ImageSamRefsheet } from "@assets/images";
     </section>
   </article>
 </BaseLayout>
+
+<script>
+  import tippy from "tippy.js";
+  import "tippy.js/dist/tippy.css";
+
+  const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
+  tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
+  tippy(tooltipItems, {
+    content: (el) => (el as HTMLElement).dataset.tooltip!,
+    theme: "bm",
+  });
+  tooltipItems.forEach((el) => el.removeAttribute("title"));
+</script>

src/pages/work.astro

@@ -56,7 +56,15 @@ import { SUBSCRIBESTAR_ENABLED } from "@data/subscribestar";
         >, as part of Strawberry Jam 8 (a game jam hosted by eevee on Feb. 2024). It's been my biggest project so far,
         and I'm very proud of it! Check it out if you have an hour to spare and the subject matters interest you.
       </p>
-      <p class="mb-4 mt-4 text-justify indent-6 sm:mt-6 sm:px-5 sm:indent-12">
+      <iframe
+        class="mx-auto my-4 h-[169px] w-full max-w-[554px]"
+        src="https://itch.io/embed/2547066?linkback=true&border_width=2&bg_color=351a1a&fg_color=ffffff&link_color=cd70c5&border_color=473660"
+        title="Crossing Over on itch.io"
+        loading="eager"
+      >
+        Crossing Over by Bad Manners
+      </iframe>
+      <p class="my-4 text-justify indent-6 sm:mt-6 sm:px-5 sm:indent-12">
         You can find my galleries through any of the links below. Aside from the first link, these also include some of
         the art that I got from others (commissions, gifts, etc.).
       </p>

src/styles/base.css

@@ -24,11 +24,11 @@
     @apply text-stone-800 hover:text-bm-500 focus:text-bm-500 dark:text-zinc-300 dark:hover:text-bm-400 dark:focus:text-bm-400;
   }
 
-  .button-close {
-    @apply rounded-full p-[6px] text-stone-800 hover:bg-stone-300 hover:text-stone-800 focus:bg-stone-300 focus:text-stone-800 sm:p-2 dark:text-zinc-300 dark:hover:bg-zinc-500 dark:hover:text-zinc-800 dark:focus:bg-zinc-500 dark:focus:text-zinc-800;
-  }
-
   .contact-icon {
     @apply 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;
   }
+
+  .contact-link {
+    @apply text-link block w-full py-2 transition-colors motion-reduce:transition-none;
+  }
 }