badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to a11y, scripts, and About page

Browse source
This commit is contained in:
Bad Manners 2024-08-18 23:01:45 -03:00
parent ed22306c34
commit 580cd2da26
10 changed files with 104 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.prettierignore
View file

@ -1 +1,3 @@
src/components/DarkModeScript.astro src/components/AutoDarkMode.astro
.astro/
dist/

4
package-lock.json generated
View file

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

2
package.json
View file

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

48
src/components/AgeRestrictedModal.astro
View file

@ -5,7 +5,7 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<template id="template-modal-age-restricted"> <template id="template-modal-age-restricted">
<div <div
id="modal-age-restricted" 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" tabindex="-1"
role="dialog" role="dialog"
aria-hidden="false" aria-hidden="false"
@ -14,15 +14,15 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<div class="text-bm-500 dark:text-bm-400"> <div class="text-bm-500 dark:text-bm-400">
<IconTriangleExclamation width="3rem" height="3rem" /> <IconTriangleExclamation width="3rem" height="3rem" />
</div> </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 Age verification
</div> </div>
<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. You must be 18+ to access this page.
</div> </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 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. screen from appearing in the future.
</p> </p>
@ -30,14 +30,14 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<button <button
data-modal-reject data-modal-reject
id="age-verification-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 Cancel
</button> </button>
<button <button
data-modal-accept data-modal-accept
id="age-verification-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 I'm at least 18 years old
</button> </button>
@ -49,30 +49,34 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<script> <script>
(function () { (function () {
if (localStorage.getItem("ageVerified") !== "true") { if (localStorage.getItem("ageVerified") !== "true") {
document.body.appendChild( const fragment = document
document
.querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")! .querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")!
.content.cloneNode(true), .content.cloneNode(true) as DocumentFragment;
); const modal = fragment.firstElementChild as HTMLElementTagNameMap["div"];
const modal = document.querySelector<HTMLElementTagNameMap["div"]>("body > div#modal-age-restricted")!; const controller = new AbortController();
const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!; const { signal } = controller;
const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!; modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!.addEventListener(
function onRejectButtonClick(e: MouseEvent) { "click",
(e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
location.href = "about:blank"; location.href = "about:blank";
} },
function onAcceptButtonClick(e: MouseEvent) { { signal },
);
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
"click",
(e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
rejectButton.removeEventListener("click", onRejectButtonClick); controller.abort();
acceptButton.removeEventListener("click", onAcceptButtonClick);
localStorage.setItem("ageVerified", "true"); localStorage.setItem("ageVerified", "true");
document.body.style.overflow = "auto"; document.body.style.overflow = "auto";
modal.remove(); modal.remove();
} },
rejectButton.addEventListener("click", onRejectButtonClick); { signal },
acceptButton.addEventListener("click", onAcceptButtonClick); );
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
rejectButton.focus(); document.body.appendChild(fragment);
document.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")?.focus();
} }
})(); })();
</script> </script>

4
src/components/AutoDarkMode.astro Normal file
View file

@ -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>

7
src/components/DarkModeScript.astro
View file

@ -1,8 +1,8 @@
--- ---
import DarkModeInline from "./AutoDarkMode.astro";
---
--- <DarkModeInline />
<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>
<script> <script>
(function () { (function () {
@ -12,6 +12,7 @@
} }
document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => { document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
button.classList.remove("hidden"); button.classList.remove("hidden");
button.style.removeProperty("display");
button.setAttribute("aria-hidden", "false"); button.setAttribute("aria-hidden", "false");
button.addEventListener("click", (e) => { button.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();

12
src/layouts/BaseLayout.astro
View file

@ -78,18 +78,16 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
Licenses Licenses
</a> </a>
</div> </div>
<span class="mt-1 print:hidden" <button
><button
data-dark-mode 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" 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" /> <IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
<IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" /> <IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />
<span id="label-toggle-dark-mode" class="hidden">Toggle dark mode</span> <span id="label-toggle-dark-mode" class="sr-only">Toggle dark mode</span>
</button>&nbsp;</span </button>
>
</footer> </footer>
</div> </div>
</div> </div>

26
src/pages/about.astro
View file

@ -7,24 +7,34 @@ import ImageSamStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp"
<BaseLayout pageTitle="About me"> <BaseLayout pageTitle="About me">
<meta slot="head-description" property="og:description" content="About Bad Manners." /> <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> <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
<section> <section id="section-bad-manners">
<p class="my-5 sm:my-6 sm:px-5 md:px-6"> <p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
You can call me <b>Bad Manners</b>, <b>Manners</b>, <b>BM</b>, <b>Bad</b>, <b>Bananas</b>... many choices to You can call me <b class="p-name">Bad Manners</b>, <b class="p-nickname">Manners</b>, <b class="p-nickname"
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 ><abbr>BM</abbr></b
and maned wolf hybrid, and you can learn more about him by clicking on him below! >, <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> </p>
<figure class="mt-4"> <figure class="mt-4">
<a <a
href="/sam_brendan" 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" aria-label="Learn more about Sam"
> >
<Image <Image
src={ImageSamStickerJuicebox} 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." 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" loading="eager"
height={320} height={320}
/> />

42
src/pages/index.astro
View file

@ -60,7 +60,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -76,7 +76,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -92,7 +92,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -108,7 +108,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -124,7 +124,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -140,7 +140,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -156,7 +156,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -172,7 +172,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -188,7 +188,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -204,7 +204,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -220,7 +220,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -236,7 +236,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -252,7 +252,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -268,7 +268,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -284,7 +284,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -300,7 +300,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -316,7 +316,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -332,7 +332,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -348,7 +348,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -364,7 +364,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>
@ -380,7 +380,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
width="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" 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> </a>
</li> </li>
<li> <li>

17
src/pages/sam_brendan.astro
View file

@ -8,13 +8,16 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
<BaseLayout pageTitle="Sam Brendan"> <BaseLayout pageTitle="Sam Brendan">
<meta slot="head-description" property="og:description" content="Mimic x maned wolf hybrid." /> <meta slot="head-description" property="og:description" content="Mimic x maned wolf hybrid." />
<article aria-labelledby="title-sam-brendan"> <article class="h-card" aria-labelledby="title-sam-brendan">
<h1 id="title-sam-brendan" class="text-2xl sm:text-3xl">Sam Brendan</h1> <h1 id="title-sam-brendan" class="p-name text-2xl sm:text-3xl">Sam Brendan</h1>
<section> <section>
<p class="my-4 text-justify sm:my-6 sm:px-5 md:px-12"> <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 <b><span class="p-given-name">Sam</span> <span class="p-family-name">Brendan</span></b> (or simply <b
green, with light teal and white details. His most noticeable feature, however, is the metal briefcase that he class="p-nickname">Sam</b
has in lieu of a face &ndash; the mimic portion of his body. >), 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> </p>
</section> </section>
<section aria-labelledby="title-physical-description"> <section aria-labelledby="title-physical-description">
@ -28,7 +31,7 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
<Image <Image
src={ImageSamRefsheet} src={ImageSamRefsheet}
alt="A reference sheet of Sam Brendan, a mimic x maned wolf hybrid. Art by Rimmi." 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" loading="eager"
height={512} height={512}
/> />
@ -80,7 +83,7 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
<Image <Image
src={ImageSamAllStickers} src={ImageSamAllStickers}
alt="A set with ten stickers of Sam Brendan displaying different actions and emotions. Art by OliveCow." 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" loading="lazy"
height={512} height={512}
/> />