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

Finish up new index page and improve accessibility

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/components/DarkModeScript.astro
View file

@ -12,7 +12,7 @@
}
document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
button.classList.remove("hidden");
button.removeAttribute("aria-hidden");
button.setAttribute("aria-hidden", "false");
button.addEventListener("click", (e) => {
e.preventDefault();
if (colorScheme === "dark") {

2
src/components/NavHeader.astro
View file

@ -27,7 +27,7 @@ const isCurrentRoute = (navRoute: NavRoute) => Astro.url.pathname == navRoute.pa
? "border-bm-500 text-bm-500 dark:border-bm-400 dark:text-bm-400"
: "border-stone-600 text-stone-600 hover:border-bm-500 hover:text-bm-500 focus:border-bm-500 focus:text-bm-500 dark:border-zinc-300 dark:text-zinc-300 dark:hover:border-bm-400 dark:hover:text-bm-400 dark:focus:border-bm-400 dark:focus:text-bm-400",
]}
aria-current-value={isCurrentRoute(route).toString()}
aria-current={isCurrentRoute(route) ? "page" : undefined}
>
{route.name}
</a>

15
src/components/icons/IconChevronLeft.astro
View file

@ -1,15 +0,0 @@
---
import SVGIcon from "./SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 320 512">
<path
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
></path>
</SVGIcon>

15
src/components/icons/IconChevronRight.astro
View file

@ -1,15 +0,0 @@
---
import SVGIcon from "./SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 320 512">
<path
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
></path>
</SVGIcon>

15
src/components/icons/IconCross.astro
View file

@ -1,15 +0,0 @@
---
import SVGIcon from "./SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 384 512">
<path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
></path>
</SVGIcon>

2
src/components/icons/SVGIcon.astro
View file

@ -11,6 +11,6 @@ type Props = {
const { width, height, class: className, fill = "currentColor", viewBox } = Astro.props;
---
<svg style={{ width, height, fill }} class={className} viewBox={viewBox} aria-hidden>
<svg style={{ width, height, fill }} class={className} viewBox={viewBox} aria-hidden="true">
<slot />
</svg>

15
src/components/icons/brands/IconCodeberg.astro Normal file
View file

@ -0,0 +1,15 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path
d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467l4.416 16.553a12 12 0 0 0 5.137-4.213z"
></path>
</SVGIcon>

15
src/components/icons/brands/IconGitHub.astro Normal file
View file

@ -0,0 +1,15 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
></path>
</SVGIcon>

15
src/components/icons/brands/IconGitLab.astro Normal file
View file

@ -0,0 +1,15 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path
d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"
></path>
</SVGIcon>

15
src/components/icons/brands/IconItchIO.astro Normal file
View file

@ -0,0 +1,15 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path
d="M3.13 1.338C2.08 1.96.02 4.328 0 4.95v1.03c0 1.303 1.22 2.45 2.325 2.45 1.33 0 2.436-1.102 2.436-2.41 0 1.308 1.07 2.41 2.4 2.41 1.328 0 2.362-1.102 2.362-2.41 0 1.308 1.137 2.41 2.466 2.41h.024c1.33 0 2.466-1.102 2.466-2.41 0 1.308 1.034 2.41 2.363 2.41 1.33 0 2.4-1.102 2.4-2.41 0 1.308 1.106 2.41 2.435 2.41C22.78 8.43 24 7.282 24 5.98V4.95c-.02-.62-2.082-2.99-3.13-3.612-3.253-.114-5.508-.134-8.87-.133-3.362 0-7.945.053-8.87.133zm6.376 6.477a2.74 2.74 0 0 1-.468.602c-.5.49-1.19.795-1.947.795a2.786 2.786 0 0 1-1.95-.795c-.182-.178-.32-.37-.446-.59-.127.222-.303.412-.486.59a2.788 2.788 0 0 1-1.95.795c-.092 0-.187-.025-.264-.052-.107 1.113-.152 2.176-.168 2.95v.005l-.006 1.167c.02 2.334-.23 7.564 1.03 8.85 1.952.454 5.545.662 9.15.663 3.605 0 7.198-.21 9.15-.664 1.26-1.284 1.01-6.514 1.03-8.848l-.006-1.167v-.004c-.016-.775-.06-1.838-.168-2.95-.077.026-.172.052-.263.052a2.788 2.788 0 0 1-1.95-.795c-.184-.178-.36-.368-.486-.59-.127.22-.265.412-.447.59a2.786 2.786 0 0 1-1.95.794c-.76 0-1.446-.303-1.948-.793a2.74 2.74 0 0 1-.468-.602 2.738 2.738 0 0 1-.463.602 2.787 2.787 0 0 1-1.95.794h-.16a2.787 2.787 0 0 1-1.95-.793 2.738 2.738 0 0 1-.464-.602zm-2.004 2.59v.002c.795.002 1.5 0 2.373.953.687-.072 1.406-.108 2.125-.107.72 0 1.438.035 2.125.107.873-.953 1.578-.95 2.372-.953.376 0 1.876 0 2.92 2.934l1.123 4.028c.832 2.995-.266 3.068-1.636 3.07-2.03-.075-3.156-1.55-3.156-3.025-1.124.184-2.436.276-3.748.277-1.312 0-2.624-.093-3.748-.277 0 1.475-1.125 2.95-3.156 3.026-1.37-.004-2.468-.077-1.636-3.072l1.122-4.027c1.045-2.934 2.545-2.934 2.92-2.934zM12 12.714c-.002.002-2.14 1.964-2.523 2.662l1.4-.056v1.22c0 .056.56.033 1.123.007.562.026 1.124.05 1.124-.008v-1.22l1.4.055C14.138 14.677 12 12.713 12 12.713z"
></path>
</SVGIcon>

15
src/components/icons/brands/IconSteam.astro Normal file
View file

@ -0,0 +1,15 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path
d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.455-.397.957-1.497 1.41-2.454 1.012H7.54zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.663 0 3.015-1.35 3.015-3.015zm-5.273-.005c0-1.252 1.013-2.266 2.265-2.266 1.249 0 2.266 1.014 2.266 2.266 0 1.251-1.017 2.265-2.266 2.265-1.253 0-2.265-1.014-2.265-2.265z"
></path>
</SVGIcon>

0
src/components/icons/brands/IconTwitter.astro → src/components/icons/brands/IconX.astro
View file

12
src/layouts/BaseLayout.astro
View file

@ -50,7 +50,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<div
id="bg"
class="fixed h-screen w-screen bg-radial from-bm-300 to-bm-500 dark:from-green-800 dark:to-green-950 print:hidden"
aria-hidden
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">
@ -64,8 +64,12 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
class="sm:text-md flex flex-col items-center pt-9 text-sm font-normal tracking-wide text-black dark:text-white"
>
<div class="flex items-center">
<span id="copyright">&copy; 2023&ndash;{new Date().getFullYear()} Bad Manners</span>
<span class="print:hidden" aria-hidden>&nbsp;|&nbsp;</span>
<span id="copyright"
>&copy; <time datetime="2023">2023</time>&ndash;<time datetime={new Date().getFullYear().toString()}
>{new Date().getFullYear()}</time
> Bad Manners</span
>
<span class="print:hidden" aria-hidden="true">&nbsp;|&nbsp;</span>
<a
href="/licenses.txt"
target="_blank"
@ -78,7 +82,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
><button
data-dark-mode
aria-labelledby="label-toggle-dark-mode"
aria-hidden
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" />

18
src/pages/about.astro
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>

6
src/pages/contact.astro
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">

274
src/pages/index.astro
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>

24
src/pages/sam_brendan.astro
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

9
src/pages/terms_of_service.astro
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" ? (

10
src/pages/work.astro
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">