<template>
    <main>
        <div class="wrapper">
            <h1>Natty.gay</h1>
            <p>Hi, we're Natty and we are gay!</p>
            <p>
                Unless noted otherwise, all content on this site is written and
                drawn by us. Enjoy!
            </p>
            <p>
                If you are looking for our more formal site, it's at
                <a href="https://natty.sh/" rel="nofollow">natty.sh</a>.
            </p>
        </div>
    </main>
    <figure class="art">
        <figcaption>Have a foxxo:</figcaption>
        <img
            src="~/assets/illuminated-foxxo.webp"
            alt="A digital painting of a blob-like fox holding onto a table and observing light passing through a prism"
        />
    </figure>
    <section>
        <Banner class="inset-20-10" item-type="construction">
            <div class="side-content">
                <h2>This site is under construction</h2>
                <p>Please come back for more cool stuff later.</p>
            </div>
        </Banner>
        <Signature />
    </section>
</template>
<script setup>
import Signature from "@/components/signature.vue";
import Banner from "@/components/banner.vue";

useHead({
    title: "Home",
});

useServerSeoMeta({
    ogSiteName: "Natty.gay",
    ogTitle: "Natty.gay",
    ogDescription: "Natty's casual website",
});
</script>
<style lang="scss" scoped>
main {
    flex-grow: 1;
    padding-bottom: 20px;

    @media all and (max-width: 1400px) {
        border: initial;
    }
}

main,
section {
    box-sizing: border-box;
    border-left: 4px dotted $primary-surface;
    border-right: 4px dotted $primary-surface;

    @media all and (max-width: 1400px) {
        border: initial;
    }
}

main,
section,
figure.art {
    max-width: 1400px;
    align-self: center;
    width: 100vw;
    box-shadow: 0px 0px 10px $ui-hover-fg;
    background-color: $ui-surface-bg;
    box-sizing: border-box;
}

section {
    margin: 20px 0 0 0;
}

figure.art {
    display: block;
    margin: 20px 0 0 0;
    border-radius: 10px;

    figcaption {
        border-left: 3px double;
        border-top: 3px double;
        border-right: 3px double;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;

        font-style: italic;
        padding: 10px;
    }

    img {
        max-width: 100%;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: block;
    }
}

.wrapper {
    padding: 20px;
}
</style>
