<template>
    <div class="container">
        <Navigation />
        <slot />
        <Footer />
    </div>
</template>
<script setup>
import Navigation from "../components/navigation.vue";
import Footer from "../components/footer.vue";
import blackHoleSmall from "~/assets/black-hole-small.webp";

useHead({
    titleTemplate: (t) => `${t} - Natty.gay`,
    htmlAttrs: {
        lang: "en",
    },
});

useServerSeoMeta({
    ogImage: {
        url: blackHoleSmall,
        alt: "A drawing of a black hole",
    },
});
</script>
<style lang="scss" scoped>
.container {
    background-color: navy;
    background-image: url("~/assets/star-bg.webp");
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
}
</style>
