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

26
src/pages/about.astro
View file

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

42
src/pages/index.astro
View file

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

17
src/pages/sam_brendan.astro
View file

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