111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<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>
|