<template>
    <main>
        <div class="wrapper">
            <h1>Our Blog</h1>
            <p>
                Our blog is currently hosted on our
                <a href="https://natty.sh/blog">other site</a>.
            </p>
        </div>
        <Banner class="inset-20-10" item-type="construction">
            <div class="side-content">
                <h2>This section is work-in-progress</h2>
                <p>
                    We plan to post here directly, but we don't have the tech
                    for it yet.
                </p>
            </div>
        </Banner>
        <Signature />
    </main>
</template>
<script setup>
useHead({
    title: "Blog",
});

useServerSeoMeta({
    ogSiteName: "Natty.gay",
    ogTitle: "Blog",
    ogDescription: "Natty's personal blog",
});
</script>
<style lang="scss" scoped>
main {
    flex-grow: 1;
    max-width: 1400px;
    align-self: center;
    width: 100vw;
    box-shadow: 0px 0px 10px $ui-hover-fg;
    background-color: $ui-surface-bg;
    border-left: 4px dotted $primary-surface;
    border-right: 4px dotted $primary-surface;
}

main,
article {
    box-sizing: border-box;
}

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