---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconBluesky from "../components/icons/brands/IconBluesky.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 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 IconKeybase from "../components/icons/brands/IconKeybase.astro";
import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.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-4 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"
            href="https://bsky.app/profile/badmanners.xyz"
            target="_blank"
            title="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 transition-colors motion-reduce:transition-none"
            rel="me"
            href="https://x.com/BadManners__"
            target="_blank"
            title="X"
          >
            <IconTwitter 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"
            target="_blank"
            title="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 transition-colors motion-reduce:transition-none"
            rel="me"
            href="https://keybase.io/badmanners"
            target="_blank"
            title="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 transition-colors motion-reduce:transition-none"
            rel="me"
            href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
            target="_blank"
            title="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 transition-colors motion-reduce:transition-none"
            rel="me"
            href="https://subscribestar.adult/bad-manners"
            target="_blank"
            title="SubscribeStar"
          >
            <IconSubscribeStar height="1.75rem" width="1.75rem" class="inline" />
            <span class="p-nickname hidden">bad-manners</span>
          </a>
        </li>
      </ul>
    </section>
  </article>
</BaseLayout>