---
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <div
      class="w-full min-h-screen bg-repeat bg-pink-300"
      style="background-image: url('/images/bg-img.webp');"
    >
      <div class="container mx-auto p-4">
        <div class="flex flex-col gap-2">
          <div class="bg-pink-200 border-purple-400 border-4 rounded-md">
            <img src="/images/header.webp" class="p-2 rounded-xl" />
            <!-- add pink hr -->
            <hr class="border-purple-400 border-2" />
            <div
              class="grid grid-flow-col auto-cols-max gap-2 px-4 pb-2 pt-2 text-pink-500 justify-center font-bold"
            >
              <div><a href="/">Home</a></div>
              <div><a href="/shrines/">Shrines</a></div>
              <div><a href="/blog/">Ramblings</a></div>
              <div><a href="/hobbies/">Hobbies</a></div>
            </div>
          </div>
          <div class="bg-pink-200 border-purple-400 border-4 rounded-md p-4">
            <div class="p-4 rounded border-2 border-dashed border-purple-400">
              <slot />
            </div>
          </div>
          <div
            class="bg-pink-200 border-purple-400 border-4 rounded-md p-2 text-center"
          >
            <tt>Find Me Other Places</tt>
            <div
              class="grid grid-cols-2 sm:flex sm:flex-wrap gap-2 p-2 justify-center items-center"
            >
              <div>
                <a href="https://github.com/hack13" target="_blank"
                  ><img src="/images/buttons/github-check.gif" /></a
                >
              </div>
              <div>
                <a href="https://cyberfurz.social/@hack13" target="_blank"
                  ><img src="/images/buttons/mastodon.gif" /></a
                >
              </div>
              <div>
                <a href="https://bsky.app/profile/hack13.one" target="_blank"
                  ><img src="/images/buttons/bluesky.gif" /></a
                >
              </div>
            </div>
            <tt>Friends Sites</tt>
            <div
              class="grid grid-cols-2 sm:flex sm:flex-wrap gap-2 p-2 justify-center items-center"
            >
              <div>
                <a href="https://arch.dog/" target="_blank"
                  ><img src="/images/buttons/arch-dog.png" /></a
                >
              </div>
              <div>
                <a href="https://brodokk.space/" target="_blank"
                  ><img src="/images/buttons/brodokk-space.webp" /></a
                >
              </div>
              <div>
                <a href="https://david.garden/" target="_blank"
                  ><img src="/images/buttons/david-garden.webp" /></a
                >
              </div>
              <div>
                <a href="https://steffo.dev/" target="_blank"
                  ><img src="/images/buttons/steffo.webp" /></a
                >
              </div>
            </div>
            <tt>Some Buttons I Like</tt>
            <div
              class="grid grid-cols-3 sm:flex sm:flex-wrap gap-2 p-2 justify-center items-center"
            >
              <div><img src="/images/buttons/anybrowser.webp" /></div>
              <div>
                <a href="https://archlinux.org/" target="_blank"
                  ><img src="/images/buttons/Arch.png" /></a
                >
              </div>
              <div><img src="/images/buttons/dothack.png" /></div>
              <div><img src="/images/buttons/dragons.jpg" /></div>
              <div>
                <a
                  href="https://en.wikipedia.org/wiki/Non-binary_gender"
                  target="_blank"><img src="/images/buttons/enby.png" /></a
                >
              </div>
              <div>
                <a
                  href="https://jointhefediverse.net/?lang=en-us"
                  target="_blank"><img src="/images/buttons/fediverse.gif" /></a
                >
              </div>
              <div><img src="/images/buttons/xeniatrans_now.webp" /></div>
              <div><img src="/images/buttons/twopaws.webp" /></div>
              <div><img src="/images/buttons/madewith_macos.webp" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
