---
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 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>
  <meta
    slot="head-description"
    property="og:description"
    content="Safe vore enthusiast, mimic hybrid, and occasional writer."
  />
  <article class="h-card" aria-labelledby="title-home">
    <h1 id="title-home" class="pb-4 text-3xl tracking-tight sm:text-5xl">
      Hi, I'm <span class="p-name">Bad Manners</span>!
    </h1>
    <section>
      <img
        loading="eager"
        src="/logo.webp"
        alt="Logo for Bad Manners"
        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-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 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>
          </a>
        </li>
        <li>
          <a
            class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
            href="https://codeberg.org/BadManners"
            target="_blank"
            rel="me"
            title="Codeberg"
            aria-label="Codeberg"
          >
            <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 p-2 transition-colors motion-reduce:transition-none"
            href="https://aryion.com/g4/user/BadManners"
            target="_blank"
            rel="me"
            title="Eka's Portal"
            aria-label="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 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>
          </a>
        </li>
        <li>
          <a
            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>
          </a>
        </li>
        <li>
          <a
            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>
</BaseLayout>