Improvements to scripts and index page on text-only browser

This commit is contained in:
Bad Manners 2024-08-29 15:38:12 -03:00
parent ad03c0a6d0
commit 48fe7f041e
8 changed files with 72 additions and 71 deletions

View file

@ -52,7 +52,7 @@ import {
</Fragment>
<article class="h-card" aria-label="Homepage of Bad Manners">
<h1 id="title-home" class="pb-4 text-3xl tracking-tight sm:text-5xl">
Hi, I'm <span class="p-name font-medium">Bad Manners</span>!
Hi, I'm <b class="p-name font-medium">Bad Manners</b>!
</h1>
<section>
<img
@ -62,17 +62,13 @@ import {
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, a furry, and occasional writer.</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 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32" aria-label="Links">
{
Astro.site ? (
<li>
<a
id="permalink"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href={Astro.site}
aria-label="Permalink"
data-clipboard={Astro.site}
@ -83,6 +79,7 @@ import {
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"
/>
<p class="sr-only">https://badmanners.xyz</p>
</a>
</li>
) : null
@ -90,7 +87,7 @@ import {
<li>
<a
id="gallery"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz"
rel="me"
aria-label="Main gallery"
@ -101,15 +98,16 @@ import {
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"
/>
<p class="sr-only">Gallery on https://gallery.badmanners.xyz</p>
</a>
</li>
<li>
<a
id="pronouns"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://pronouns.cc/@BadManners"
rel="me"
aria-label="Pronouns"
aria-label="Pronouns (he/they)"
>
<IconCommentDots
height="1.75rem"
@ -117,14 +115,14 @@ import {
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"
/>
<p class="p-nickname sr-only">@BadManners on pronouns.cc</p>
<p class="p-pronoun sr-only">he/him/his/his/himself</p>
<p class="p-pronoun sr-only">they/them/their/theirs/themself</p>
<p class="p-pronoun hidden">he/him/his/his/himself</p>
<p class="p-pronoun hidden">they/them/their/theirs/themself</p>
</a>
</li>
<li>
<a
id="e-mail"
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="mailto:me@badmanners.xyz"
rel="me"
aria-label="E-mail"
@ -136,13 +134,13 @@ import {
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"
/>
<p class="sr-only">E-mail address</p>
<p class="sr-only">me@badmanners.xyz</p>
</a>
</li>
<li>
<a
id="bluesky"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://bsky.app/profile/badmanners.xyz"
rel="me"
aria-label="Bluesky"
@ -158,7 +156,7 @@ import {
<li>
<a
id="codeberg"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://codeberg.org/BadManners"
rel="me"
aria-label="Codeberg"
@ -174,7 +172,7 @@ import {
<li>
<a
id="cohost"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://cohost.org/BadManners"
rel="me"
aria-label="Cohost"
@ -190,7 +188,7 @@ import {
<li>
<button
id="discord"
class="text-link group block w-full transition-colors motion-reduce:transition-none"
class="text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
aria-label="Discord"
data-clipboard="badmanners"
data-noun="Discord username"
@ -207,7 +205,7 @@ import {
<li>
<a
id="eka-s-portal"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
rel="me"
aria-label="Eka's Portal"
@ -223,7 +221,7 @@ import {
<li>
<a
id="fur-affinity"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
rel="me"
aria-label="Fur Affinity"
@ -239,7 +237,7 @@ import {
<li>
<a
id="github"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://github.com/BadMannersXYZ"
rel="me"
aria-label="GitHub"
@ -255,7 +253,7 @@ import {
<li>
<a
id="gitlab"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://gitlab.com/Bad_Manners"
rel="me"
aria-label="GitLab"
@ -271,7 +269,7 @@ import {
<li>
<a
id="gmail"
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="mailto:badmanners.vore@gmail.com"
rel="me"
aria-label="Gmail"
@ -283,13 +281,13 @@ import {
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"
/>
<p class="sr-only">Google/Gmail address</p>
<p class="sr-only">badmanners.vore@gmail.com</p>
</a>
</li>
<li>
<a
id="inkbunny"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
rel="me"
aria-label="Inkbunny"
@ -305,7 +303,7 @@ import {
<li>
<a
id="itaku"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://itaku.ee/profile/badmanners"
rel="me"
aria-label="Itaku"
@ -321,7 +319,7 @@ import {
<li>
<a
id="itch"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://bad-manners.itch.io"
rel="me"
aria-label="Itch.io"
@ -337,7 +335,7 @@ import {
<li>
<a
id="keybase"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://keybase.io/badmanners"
rel="me"
aria-label="Keybase"
@ -353,7 +351,7 @@ import {
<li>
<a
id="keyoxide"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://keyoxide.org/aspe%3Akeyoxide.org%3AUWYBVFCBFXTVUF2U6FS6AYJHLU"
rel="me"
aria-label="Keyoxide"
@ -363,13 +361,13 @@ import {
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"
/>
<p class="u-uid hidden">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</p>
<p class="sr-only"><span class="p-uid">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</span> on Keyoxide</p>
</a>
</li>
<li>
<a
id="ko-fi"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://ko-fi.com/badmanners"
rel="me"
aria-label="Ko-fi"
@ -385,7 +383,7 @@ import {
<li>
<a
id="mastodon"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://meow.social/@BadManners"
rel="me"
aria-label="Mastodon"
@ -401,7 +399,7 @@ import {
<li>
<a
id="neocities"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://badmanners.neocities.org"
rel="me"
aria-label="Neocities"
@ -417,7 +415,7 @@ import {
<li>
<a
id="picarto"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.picarto.tv/BadManners"
rel="me"
aria-label="Picarto"
@ -433,7 +431,7 @@ import {
<li>
<a
id="reddit"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.reddit.com/user/BadManners_"
rel="me"
aria-label="Reddit"
@ -449,7 +447,7 @@ import {
<li>
<a
id="signal"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
rel="me"
aria-label="Signal"
@ -465,7 +463,7 @@ import {
<li>
<a
id="sofurry"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com"
rel="me"
aria-label="SoFurry"
@ -481,7 +479,7 @@ import {
<li>
<a
id="ssh"
class="u-key text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-key text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="/ssh.pub"
aria-label="SSH public key"
data-clipboard="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJ3QAZd3E95gxef2kiXppWa/xhcwBtnKMZJaW6s4d7Tm Bad Manners <me@badmanners.xyz>"
@ -492,12 +490,13 @@ import {
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"
/>
<p class="sr-only">SSH public key</p>
</a>
</li>
<li>
<a
id="steam"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://steamcommunity.com/id/badmanners_"
rel="me"
aria-label="Steam"
@ -513,7 +512,7 @@ import {
<li>
<a
id="subscribestar"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://subscribestar.adult/bad-manners"
rel="me"
aria-label="SubscribeStar"
@ -529,7 +528,7 @@ import {
<li>
<a
id="telegram"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://t.me/bad_manners"
rel="me"
aria-label="Telegram"
@ -545,7 +544,7 @@ import {
<li>
<a
id="tumblr"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.tumblr.com/badmannersxyz"
rel="me"
aria-label="Tumblr"
@ -561,7 +560,7 @@ import {
<li>
<a
id="twitch"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.twitch.tv/bad__manners"
rel="me"
aria-label="Twitch"
@ -577,7 +576,7 @@ import {
<li>
<a
id="weasyl"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
rel="me"
aria-label="Weasyl"
@ -593,7 +592,7 @@ import {
<li>
<a
id="x"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://x.com/BadManners__"
rel="me"
aria-label="X"
@ -609,7 +608,7 @@ import {
<li>
<a
id="youtube"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
href="https://www.youtube.com/@BadMannersXYZ"
rel="me"
aria-label="YouTube"