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

Better progressive enhancement and ARIA

Browse source
This commit is contained in:
Bad Manners 2024-08-16 21:52:01 -03:00
parent e84900a652
commit ed22306c34
13 changed files with 210 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/NavHeader.astro
View file

@ -22,7 +22,7 @@ const isCurrentRoute = (navRoute: NavRoute) => Astro.url.pathname == navRoute.pa
<a
href={route.path}
class:list={[
"rounded border px-6 py-2 uppercase transition-colors hover:underline focus:underline sm:px-8 sm:py-3",
"rounded border px-6 py-2 uppercase transition-colors hover:underline focus:underline motion-reduce:transition-none sm:px-8 sm:py-3",
isCurrentRoute(route)
? "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",

4
src/components/icons/IconEllipsis.astro
View file

@ -9,5 +9,7 @@ type Props = {
---
<SVGIcon {...Astro.props} viewBox="0 0 448 512">
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>
<path
d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"
></path>
</SVGIcon>

3
src/components/icons/brands/IconNeocities.astro
View file

File diff suppressed because one or more lines are too long

4
src/components/icons/brands/IconPicarto.astro
View file

@ -9,5 +9,7 @@ type Props = {
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0zM7.08 4.182h2.781c.233 0 .42.21.42.47v14.696c0 .26-.187.47-.42.47h-2.78c-.233 0-.42-.21-.42-.47V4.652c0-.26.187-.47.42-.47zm4.664 0a.624.624 0 0 1 .326.091c.355.209 7.451 4.42 8.057 4.78a.604.604 0 0 1 0 1.039c-.436.264-7.558 4.495-8.074 4.789a.577.577 0 0 1-.873-.512v-1.812c0-1.712 2.962-2.201 3.398-2.465a.604.604 0 0 0 0-1.04c-.605-.36-3.398-.746-3.398-2.452V4.79c0-.334.251-.605.564-.61z"/>
<path
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0zM7.08 4.182h2.781c.233 0 .42.21.42.47v14.696c0 .26-.187.47-.42.47h-2.78c-.233 0-.42-.21-.42-.47V4.652c0-.26.187-.47.42-.47zm4.664 0a.624.624 0 0 1 .326.091c.355.209 7.451 4.42 8.057 4.78a.604.604 0 0 1 0 1.039c-.436.264-7.558 4.495-8.074 4.789a.577.577 0 0 1-.873-.512v-1.812c0-1.712 2.962-2.201 3.398-2.465a.604.604 0 0 0 0-1.04c-.605-.36-3.398-.746-3.398-2.452V4.79c0-.334.251-.605.564-.61z"
></path>
</SVGIcon>

4
src/components/icons/brands/IconTwitch.astro
View file

@ -9,5 +9,7 @@ type Props = {
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>
<path
d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"
></path>
</SVGIcon>

49
src/pages/contact.astro
View file

@ -25,12 +25,15 @@ import IconTelegram from "../components/icons/brands/IconTelegram.astro";
<li class="mb-2 w-max sm:mb-1">
<button
id="discord"
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="text-link group mx-1 select-none transition-colors aria-disabled:cursor-default aria-disabled:select-text aria-disabled:text-stone-700 motion-reduce:transition-none dark:aria-disabled:text-zinc-50"
aria-label="Copy my Discord username to clipboard"
aria-disabled="true"
>
<IconDiscord width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="p-nickname underline">badmanners</span>
<IconClone width="0.75rem" height="0.75rem" class="inline" />
<span class="p-nickname underline group-aria-disabled:cursor-text group-aria-disabled:no-underline"
>badmanners</span
>
<IconClone width="0.75rem" height="0.75rem" class="inline group-aria-disabled:hidden" />
</button>
</li>
<li class="h-card mb-2 w-max sm:mb-1">
@ -88,13 +91,17 @@ import IconTelegram from "../components/icons/brands/IconTelegram.astro";
<li class="mb-2 w-max sm:mb-1">
<button
id="email"
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="text-link group mx-1 transition-colors aria-disabled:cursor-not-allowed aria-disabled:text-stone-700 motion-reduce:transition-none dark:aria-disabled:text-zinc-50"
aria-label="Copy my e-mail address to clipboard"
aria-disabled="true"
>
<IconEnvelope width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="underline" data-user="em" data-website="zyx.srennamdab" aria-label="Obfuscated e-mail address"
></span>
<IconClone width="0.75rem" height="0.75rem" class="inline" />
<span
class="underline group-aria-disabled:no-underline"
data-user="em"
data-website="zyx.srennamdab"
aria-label="Obfuscated e-mail address"></span>
<IconClone width="0.75rem" height="0.75rem" class="inline group-aria-disabled:hidden" />
</button>
</li>
</ul>
@ -111,7 +118,7 @@ import IconTelegram from "../components/icons/brands/IconTelegram.astro";
</style>
<script>
import tippy from "tippy.js";
import tippy, { hideAll } from "tippy.js";
import "tippy.js/dist/tippy.css";
(function () {
@ -132,40 +139,52 @@ import IconTelegram from "../components/icons/brands/IconTelegram.astro";
discordButton.addEventListener("click", (ev) => {
ev.preventDefault();
tooltipTimeout && clearTimeout(tooltipTimeout);
discordTooltip.hide();
emailTooltip.hide();
hideAll();
const text = discordButton.querySelector("span")!.innerText;
navigator.clipboard
.writeText(text)
.then(() => {
discordTooltip.setContent("Username copied to clipboard!");
discordTooltip.show();
tooltipTimeout = setTimeout(() => {
discordTooltip.hide();
}, 2000);
})
.catch((e) => {
console.error("Unable to copy text to clipboard", e);
console.error("Unable to copy Discord username to clipboard", e);
discordTooltip.setContent("Unable to copy username!");
discordTooltip.show();
tooltipTimeout = setTimeout(() => {
discordTooltip.hide();
}, 2000);
});
});
discordButton.setAttribute("aria-disabled", "false");
emailButton.addEventListener("click", (ev) => {
ev.preventDefault();
tooltipTimeout && clearTimeout(tooltipTimeout);
discordTooltip.hide();
emailTooltip.hide();
hideAll();
const emailData = emailButton.querySelector("span")!;
const text = `${emailData.dataset.user!.split("").reverse().join("")}@${emailData.dataset.website!.split("").reverse().join("")}`;
const text = `${emailData.dataset.website!}@${emailData.dataset.user!}`.split("").reverse().join("");
navigator.clipboard
.writeText(text)
.then(() => {
emailTooltip.setContent("E-mail address copied to clipboard!");
emailTooltip.show();
tooltipTimeout = setTimeout(() => {
emailTooltip.hide();
}, 2000);
})
.catch((e) => {
console.error("Unable to copy text to clipboard", e);
console.error("Unable to copy e-mail address to clipboard", e);
emailTooltip.setContent("Unable to copy e-mail address!");
emailTooltip.show();
tooltipTimeout = setTimeout(() => {
emailTooltip.hide();
}, 2000);
});
});
emailButton.setAttribute("aria-disabled", "false");
})();
</script>

141
src/pages/index.astro
View file

@ -42,7 +42,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
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 id="links" 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" aria-label="Links">
<ul
id="links"
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"
aria-label="Links"
>
<li>
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
@ -51,7 +55,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Bluesky"
>
<IconBluesky height="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" />
<IconBluesky
height="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"
/>
<span class="p-nickname hidden">@badmanners.xyz on Bluesky</span>
</a>
</li>
@ -63,7 +71,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Codeberg"
>
<IconCodeberg height="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" />
<IconCodeberg
height="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"
/>
<span class="p-nickname hidden">BadManners on Codeberg</span>
</a>
</li>
@ -75,7 +87,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Eka's Portal"
>
<IconEkasPortal height="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" />
<IconEkasPortal
height="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"
/>
<span class="p-nickname hidden">BadManners on Eka's Portal</span>
</a>
</li>
@ -87,7 +103,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Fur Affinity"
>
<IconFurAffinity height="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" />
<IconFurAffinity
height="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"
/>
<span class="p-nickname hidden">BadManners on Fur Affinity</span>
</a>
</li>
@ -99,7 +119,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="GitHub"
>
<IconGitHub height="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" />
<IconGitHub
height="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"
/>
<span class="p-nickname hidden">BadMannersXYZ on GitHub</span>
</a>
</li>
@ -111,7 +135,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="GitLab"
>
<IconGitLab height="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" />
<IconGitLab
height="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"
/>
<span class="p-nickname hidden">Bad_Manners on GitLab</span>
</a>
</li>
@ -123,7 +151,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Inkbunny"
>
<IconInkbunny height="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" />
<IconInkbunny
height="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"
/>
<span class="p-nickname hidden">BadManners on Inkbunny</span>
</a>
</li>
@ -135,7 +167,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Itaku"
>
<IconItaku height="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" />
<IconItaku
height="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"
/>
<span class="p-nickname hidden">badmanners on Itaku</span>
</a>
</li>
@ -147,7 +183,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Itch.io"
>
<IconItchIO height="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" />
<IconItchIO
height="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"
/>
<span class="p-nickname hidden">Bad Manners on Itch.io</span>
</a>
</li>
@ -159,7 +199,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Keybase"
>
<IconKeybase height="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" />
<IconKeybase
height="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"
/>
<span class="p-nickname hidden">badmanners on Keybase</span>
</a>
</li>
@ -171,7 +215,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Mastodon"
>
<IconMastodon height="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" />
<IconMastodon
height="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"
/>
<span class="p-nickname hidden">@BadManners@meow.social on Mastodon</span>
</a>
</li>
@ -183,7 +231,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Neocities"
>
<IconNeocities height="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" />
<IconNeocities
height="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"
/>
<span class="p-nickname hidden">badmanners.neocities.org on Neocities</span>
</a>
</li>
@ -195,7 +247,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Picarto"
>
<IconPicarto height="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" />
<IconPicarto
height="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"
/>
<span class="p-nickname hidden">BadManners on Picarto</span>
</a>
</li>
@ -207,7 +263,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Signal"
>
<IconSignal height="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" />
<IconSignal
height="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"
/>
<span class="p-nickname hidden">badmanners.10 on Signal</span>
</a>
</li>
@ -219,7 +279,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="SoFurry"
>
<IconSoFurry height="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" />
<IconSoFurry
height="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"
/>
<span class="p-nickname hidden">Bad Manners on SoFurry</span>
</a>
</li>
@ -231,7 +295,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Steam"
>
<IconSteam height="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" />
<IconSteam
height="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"
/>
<span class="p-nickname hidden">badmanners_ on Steam</span>
</a>
</li>
@ -243,7 +311,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="SubscribeStar"
>
<IconSubscribeStar height="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" />
<IconSubscribeStar
height="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"
/>
<span class="p-nickname hidden">Bad Manners on SubscribeStar</span>
</a>
</li>
@ -255,7 +327,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Telegram"
>
<IconTelegram height="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" />
<IconTelegram
height="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"
/>
<span class="p-nickname hidden">@bad_manners on Telegram</span>
</a>
</li>
@ -267,7 +343,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Twitch"
>
<IconTwitch height="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" />
<IconTwitch
height="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"
/>
<span class="p-nickname hidden">bad__manners on Twitch</span>
</a>
</li>
@ -279,7 +359,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="Weasyl"
>
<IconWeasyl height="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" />
<IconWeasyl
height="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"
/>
<span class="p-nickname hidden">BadManners on Weasyl</span>
</a>
</li>
@ -291,7 +375,11 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
rel="me"
aria-label="X"
>
<IconX height="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" />
<IconX
height="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"
/>
<span class="p-nickname hidden">@BadManners__ on X</span>
</a>
</li>
@ -299,9 +387,13 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="/contact"
aria-label="More options..."
aria-label="More socials..."
>
<IconEllipsis height="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" />
<IconEllipsis
height="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"
/>
</a>
</li>
</ul>
@ -320,4 +412,3 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
});
})();
</script>

14
src/pages/sam_brendan.astro
View file

@ -29,13 +29,17 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
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"
loading="eager"
height={512}
/>
</a>
<figcaption class="text-base">
A reference sheet of Sam Brendan, by
<a class="text-link transition-colors" href="https://linktr.ee/Rimmi1357" target="_blank">
<a
class="text-link transition-colors motion-reduce:transition-none"
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 a high quality version.
@ -83,7 +87,11 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
</a>
<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">
<a
class="text-link transition-colors motion-reduce:transition-none"
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 a high quality version.

53
src/pages/work.astro
View file

@ -24,28 +24,25 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/stories/1"
target="_blank"
>
<span class="underline">safe vore stories</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>. Since there's a lot in furry endosoma that I enjoy, my stories tend to
><span class="underline">safe vore stories</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Since there's a lot in furry endosoma that I enjoy, my stories tend to
<a
class="text-link underline transition-colors motion-reduce:transition-none"
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/tags"
target="_blank"
>
<span class="underline">have all sorts of themes and scenarios</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</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.
><span class="underline">have all sorts of themes and scenarios</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></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="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"
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/games/crossing-over"
target="_blank"
>
<span>"Crossing Over"</span>
><span class="underline">"Crossing Over"</span>
<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>
@ -53,10 +50,10 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
You can find my gallery on the following websites, which include all of my content. Aside from the first link,
these also include some of the art that I've gotten from others (commissions, gifts, etc.).
</p>
<ul class="flex flex-col items-center">
<ul class="h-card flex flex-col items-center">
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/"
target="_blank"
>
@ -67,7 +64,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
target="_blank"
rel="me"
@ -79,7 +76,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
target="_blank"
rel="me"
@ -91,7 +88,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
target="_blank"
rel="me"
@ -103,7 +100,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com/"
target="_blank"
rel="me"
@ -115,7 +112,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
target="_blank"
rel="me"
@ -140,36 +137,36 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
</p>
) : TOS_COMMISSION_STATUS == "OPEN" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently open! Feel free to
My story commissions are currently open! Feel free to{" "}
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
</a>{" "}
if interested.
</p>
) : TOS_COMMISSION_STATUS == "SEMI_OPEN" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently semi-open, meaning that I may take some commissions, but might reject or
postpone them more easily. Feel free to
postpone them more easily. Feel free to{" "}
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
</a>{" "}
if interested.
</p>
) : TOS_COMMISSION_STATUS == "PRIVATE" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently private, meaning that I'm not offering slots publicly, but I may still
work on commissions for specific clients. Regardless of whether this applies to you or not, feel free to
work on commissions for specific clients. Regardless of whether this applies to you or not, feel free to{" "}
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
</a>{" "}
if interested.
</p>
) : (
<p class="mb-6 mt-2 sm:mt-3">
Feel free to
Feel free to{" "}
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
</a>{" "}
if interested.
</p>
)