Finish up new index page and improve accessibility

This commit is contained in:
Bad Manners 2024-08-15 23:56:11 -03:00
parent e3d1f6999b
commit 403ae18b6e
23 changed files with 304 additions and 185 deletions

View file

@ -2,7 +2,7 @@
import { Image } from "astro:assets";
import BaseLayout from "../layouts/BaseLayout.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import samStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp";
import ImageSamStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp";
---
<BaseLayout pageTitle="About me">
@ -12,24 +12,24 @@ import samStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp";
<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> &ndash; 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!
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!
</p>
<div class="mt-4">
<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"
aria-label="Learn more about Sam"
>
<Image
src={samStickerJuicebox}
src={ImageSamStickerJuicebox}
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="lazy"
loading="eager"
height={320}
/>
</a>
<span class="text-base">
<figcaption class="text-base">
A sticker of Sam by
<a
class="text-link transition-colors motion-reduce:transition-none"
@ -39,8 +39,8 @@ import samStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp";
<span class="underline">OliveCow</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>.
</span>
</div>
</figcaption>
</figure>
</section>
</article>
</BaseLayout>

View file

@ -1,13 +1,13 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconClone from "../components/icons/IconClone.astro";
import IconEnvelope from "../components/icons/IconEnvelope.astro";
import IconBluesky from "../components/icons/brands/IconBluesky.astro";
import IconDiscord from "../components/icons/brands/IconDiscord.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconClone from "../components/icons/IconClone.astro";
import IconEnvelope from "../components/icons/IconEnvelope.astro";
---
<BaseLayout pageTitle="Contact">

View file

@ -1,17 +1,22 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconBluesky from "../components/icons/brands/IconBluesky.astro";
import IconCodeberg from "../components/icons/brands/IconCodeberg.astro";
import IconEkasPortal from "../components/icons/brands/IconEkasPortal.astro";
import IconFurAffinity from "../components/icons/brands/IconFurAffinity.astro";
import IconGitHub from "../components/icons/brands/IconGitHub.astro";
import IconGitLab from "../components/icons/brands/IconGitLab.astro";
import IconInkbunny from "../components/icons/brands/IconInkbunny.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
import IconTwitter from "../components/icons/brands/IconTwitter.astro";
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconItchIO from "../components/icons/brands/IconItchIO.astro";
import IconKeybase from "../components/icons/brands/IconKeybase.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
import IconSteam from "../components/icons/brands/IconSteam.astro";
import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
import IconX from "../components/icons/brands/IconX.astro";
---
<BaseLayout>
@ -32,86 +37,15 @@ import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astr
class="u-logo mx-auto my-4 h-screen max-h-48 rounded-full transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 sm:max-h-72"
/>
<p class="p-note mt-6 sm:px-5 md:px-6">I'm a safe vore enthusiast, and a furry who occasionally writes stuff.</p>
<ul class="grid grid-cols-3 gap-4 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32">
<ul class="grid grid-cols-3 gap-x-4 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32">
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
target="_blank"
rel="me"
title="Fur Affinity"
>
<IconFurAffinity height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
target="_blank"
rel="me"
title="Eka's Portal"
>
<IconEkasPortal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
target="_blank"
rel="me"
title="Inkbunny"
>
<IconInkbunny height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com/"
target="_blank"
rel="me"
title="SoFurry"
>
<IconSoFurry height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">Bad Manners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
target="_blank"
rel="me"
title="Weasyl"
>
<IconWeasyl height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://meow.social/@BadManners"
target="_blank"
title="Mastodon"
>
<IconMastodon height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners@meow.social</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://bsky.app/profile/badmanners.xyz"
target="_blank"
rel="me"
title="Bluesky"
aria-label="Bluesky"
>
<IconBluesky height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@badmanners.xyz</span>
@ -119,35 +53,103 @@ import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astr
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://x.com/BadManners__"
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://codeberg.org/BadManners"
target="_blank"
title="X"
rel="me"
title="Codeberg"
aria-label="Codeberg"
>
<IconTwitter height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners__</span>
<IconCodeberg height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://t.me/bad_manners"
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
target="_blank"
title="Telegram"
rel="me"
title="Eka's Portal"
aria-label="Eka's Portal"
>
<IconTelegram height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@bad_manners</span>
<IconEkasPortal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
target="_blank"
rel="me"
title="Fur Affinity"
aria-label="Fur Affinity"
>
<IconFurAffinity height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://github.com/BadMannersXYZ"
target="_blank"
rel="me"
title="GitHub"
aria-label="GitHub"
>
<IconGitHub height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadMannersXYZ</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://gitlab.com/Bad_Manners"
target="_blank"
rel="me"
title="GitLab"
aria-label="GitLab"
>
<IconGitLab height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">Bad_Manners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
target="_blank"
rel="me"
title="Inkbunny"
aria-label="Inkbunny"
>
<IconInkbunny height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://bad-manners.itch.io"
target="_blank"
rel="me"
title="Itch.io"
aria-label="Itch.io"
>
<IconItchIO height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">bad-manners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://keybase.io/badmanners"
target="_blank"
rel="me"
title="Keybase"
aria-label="Keybase"
>
<IconKeybase height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners</span>
@ -155,11 +157,25 @@ import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astr
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://meow.social/@BadManners"
target="_blank"
rel="me"
title="Mastodon"
aria-label="Mastodon"
>
<IconMastodon height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners@meow.social</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
target="_blank"
rel="me"
title="Signal"
aria-label="Signal"
>
<IconSignal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners.10</span>
@ -167,16 +183,82 @@ import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astr
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com/"
target="_blank"
rel="me"
title="SoFurry"
aria-label="SoFurry"
>
<IconSoFurry height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">Bad Manners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://steamcommunity.com/id/badmanners_/"
target="_blank"
rel="me"
title="Steam"
aria-label="Steam"
>
<IconSteam height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners_</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://subscribestar.adult/bad-manners"
target="_blank"
rel="me"
title="SubscribeStar"
aria-label="SubscribeStar"
>
<IconSubscribeStar height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">bad-manners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://t.me/bad_manners"
target="_blank"
rel="me"
title="Telegram"
aria-label="Telegram"
>
<IconTelegram height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@bad_manners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
target="_blank"
rel="me"
title="Weasyl"
aria-label="Weasyl"
>
<IconWeasyl height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
href="https://x.com/BadManners__"
target="_blank"
rel="me"
title="X"
aria-label="X"
>
<IconX height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners__</span>
</a>
</li>
</ul>
</section>
</article>

View file

@ -2,8 +2,8 @@
import { Image } from "astro:assets";
import BaseLayout from "../layouts/BaseLayout.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import samRefsheet from "../assets/images/sam_refsheet.webp";
import samAllStickers from "../assets/images/sam_all_stickers.webp";
import ImageSamAllStickers from "../assets/images/sam_all_stickers.webp";
import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
---
<BaseLayout pageTitle="Sam Brendan">
@ -19,28 +19,28 @@ import samAllStickers from "../assets/images/sam_all_stickers.webp";
</section>
<section aria-labelledby="title-physical-description">
<h2 id="title-physical-description" class="my-4 text-lg sm:my-6 sm:text-2xl">Physical description</h2>
<div class="my-4">
<figure class="my-4">
<a
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
href="https://booru.badmanners.xyz/index.php?q=post/view/1"
target="_blank"
>
<Image
src={samRefsheet}
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"
loading="lazy"
height={512}
/>
</a>
<span class="text-base">
<figcaption class="text-base">
A reference sheet of Sam Brendan, by
<a class="text-link transition-colors" href="https://linktr.ee/Rimmi1357" target="_blank">
<span class="underline">Rimmi</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Click to view in higher quality.
</span>
</div>
</figcaption>
</figure>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
He has big, pointy, forward-facing ears, with big tufts in a light teal-to-white gradient coming out from the
inside. The rest of his head is different from a regular maned wolf's, however. Everything from the top of his
@ -67,28 +67,28 @@ import samAllStickers from "../assets/images/sam_all_stickers.webp";
</section>
<section aria-labelledby="title-personality">
<h2 id="title-personality" class="my-4 text-lg sm:my-6 sm:text-2xl">Personality</h2>
<div class="my-4">
<figure class="my-4">
<a
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
href="https://booru.badmanners.xyz/index.php?q=post/view/2"
target="_blank"
>
<Image
src={samAllStickers}
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"
loading="lazy"
height={512}
/>
</a>
<span class="text-base">
<figcaption class="text-base">
A set of stickers featuring Sam Brendan, by
<a class="text-link transition-colors" href="https://olivecow.carrd.co/" target="_blank">
<span class="underline">OliveCow</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Click to view in higher quality.
</span>
</div>
</figcaption>
</figure>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-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

View file

@ -12,7 +12,9 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
<section aria-label="Commission status">
<div class="my-2 flex items-center justify-end">
<p class="mr-1 text-sm font-normal italic">
Last update: {TOS_UPDATED_AT.toLocaleDateString("en-US", { dateStyle: "long" })}
Last update: <time datetime={TOS_UPDATED_AT.toISOString().slice(0, 10)}
>{TOS_UPDATED_AT.toLocaleDateString("en-US", { dateStyle: "long" })}</time
>
</p>
<a
class="text-link transition-colors motion-reduce:transition-none"
@ -20,8 +22,11 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
rel="alternate"
type="application/rss+xml"
target="_blank"
title="RSS feed"><IconSquareRSS width="2rem" height="2rem" class="p-1" /></a
title="RSS feed"
aria-label="RSS feed"
>
<IconSquareRSS width="2rem" height="2rem" class="p-1" />
</a>
</div>
{
TOS_COMMISSION_STATUS == "CLOSED" ? (

View file

@ -1,13 +1,13 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconBriefcase from "../components/icons/IconBriefcase.astro";
import IconEkasPortal from "../components/icons/brands/IconEkasPortal.astro";
import IconFurAffinity from "../components/icons/brands/IconFurAffinity.astro";
import IconInkbunny from "../components/icons/brands/IconInkbunny.astro";
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astro";
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconBriefcase from "../components/icons/IconBriefcase.astro";
import { TOS_COMMISSION_STATUS } from "../data/tos";
import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
@ -38,7 +38,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</a>, including exotic ones. My content is all tagged with the appropriate content warnings, so if you enjoy
safe vore, chances are that you'll find something in my gallery that is right up your alley.
</p>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
<p class="my-4 sm:mb-3 sm:mt-6">
I've also made a game called
<a
class="text-link underline transition-colors motion-reduce:transition-none"
@ -49,9 +49,9 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>, as part of Strawberry Jam 8 (a game jam hosted by eevee on Feb. 2024).
</p>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
<p class="my-4 sm:mb-3 sm:mt-6">
You can find my gallery on the following websites, which include all of my content. Aside from the first link,
my other galleries also include some of the art that I've gotten from others (commissions, gifts, etc.).
these also include some of the art that I've gotten from others (commissions, gifts, etc.).
</p>
<ul class="flex flex-col items-center">
<li class="mb-2 w-max sm:mb-1">