Initial commit

.gitignore

@@ -0,0 +1,29 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Image autosaves and krita files 
+*.webp~
+*.kra
+*.kra~
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.prettierrc

@@ -0,0 +1,17 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "singleQuote": false,
+    "vueIndentScriptAndStyle": false,
+    "plugins": [
+        "vue"
+    ],
+    "overrides": [
+        {
+            "files": "*.vue",
+            "options": {
+                "parser": "vue"
+            }
+        }
+    ]
+}

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,19 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
+<style lang="scss">
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: sans-serif;
+    color: $primary-text;
+}
+</style>

assets/_defs.scss

@@ -0,0 +1,17 @@
+$primary-surface: #ccbbdd;
+$glass-surface: #8836ff4a;
+$primary-text: #000000;
+$ui-surface-bg: #ffffff;
+$ui-hover-fg: #220251;
+$ui-hover-bg: #d2b6e8;
+$ui-visited-fg: #670eea;
+$ui-active-bg: #ff9ca0;
+$ui-active-fg: #600707;
+
+.inset-20-10 {
+    margin: 20px;
+
+    @media all and (max-width: 400px) {
+        margin: 10px;
+    }
+}

components/banner.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="side-by-side">
+        <img
+            v-if="itemType === 'construction'"
+            src="~/assets/osha-certified-fox.webp"
+            alt="A blob-like fox with a hard hat"
+            class="side-image"
+        />
+        <div class="side-content">
+            <slot> </slot>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+defineProps<{
+    itemType: "construction";
+}>();
+</script>
+<style lang="scss" scoped>
+.side-by-side {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    &:not(:first-child) {
+        border-top: 1px solid $primary-surface;
+    }
+
+    &:not(:last-child) {
+        border-bottom: 1px solid $primary-surface;
+    }
+
+    & .side-image {
+        width: 160px;
+        height: 160px;
+    }
+
+    & .side-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    @media all and (max-width: 500px) {
+        gap: 0;
+        display: grid;
+        grid-template-columns: auto;
+
+        & .side-image {
+            width: 120px;
+            height: 120px;
+            justify-self: center;
+        }
+
+        & .side-content {
+            h2 {
+                margin-top: 0;
+            }
+        }
+    }
+}
+</style>

components/footer.vue

@@ -0,0 +1,96 @@
+<template>
+    <footer>
+        <div class="separator">
+            Made by Natty &middot; See us on Fedi:
+            <a href="https://astolfo.social/@natty" target="_blank">
+                @natty@astolfo.social
+            </a>
+        </div>
+        <div class="content">
+            <div>
+                <div></div>
+            </div>
+            <div class="footer-section">
+                <div class="banners">
+                    <img
+                        src="~/assets/88x31/blobfox.png"
+                        alt="A banner of a stylized fox looking like a fluffy blob"
+                    />
+                </div>
+            </div>
+            <div class="footer-section">
+                <h2>See also:</h2>
+                <div>(Message us and we'll add your banner)</div>
+                <div class="banners">
+                    <a href="https://lunareclipse.zone" target="_blank">
+                        <img
+                            src="~/assets/88x31/lunar-eclipse-zone.gif"
+                            alt="A banner of a crimson-red moon captioned Lunar Eclipse Zone"
+                        />
+                    </a>
+                </div>
+            </div>
+            <div class="footer-section">
+                <h2>Webrings</h2>
+                <div>[not yet]</div>
+            </div>
+        </div>
+    </footer>
+</template>
+<style lang="scss" scoped>
+footer {
+    margin-top: 20px;
+
+    .separator {
+        background-color: $glass-surface;
+        border-top-right-radius: 5px;
+        border-top-left-radius: 5px;
+        backdrop-filter: blur(2px);
+        padding: 10px;
+        color: $ui-surface-bg;
+        border-top: 3px double $glass-surface;
+        border-left: 3px double $glass-surface;
+        border-right: 3px double $glass-surface;
+
+        & a {
+            &:link,
+            &:hover,
+            &:visited {
+                color: $ui-surface-bg;
+            }
+        }
+    }
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    max-width: 1400px;
+    align-self: center;
+    width: 100vw;
+    box-shadow: 0px 0px 10px $ui-hover-fg;
+
+    .content {
+        background-color: $ui-surface-bg;
+        padding: 5px 5px 20px 5px;
+        box-sizing: border-box;
+        border-left: 3px double $primary-surface;
+        border-right: 3px double $primary-surface;
+
+        & .footer-section {
+            h2 {
+                margin: 0;
+            }
+
+            & .banners {
+                display: flex;
+                flex-direction: row;
+                gap: 4px;
+                margin: 4px 0px;
+
+                & img {
+                    display: inline-block;
+                    height: 31px;
+                }
+            }
+        }
+    }
+}
+</style>

components/navigation.vue

@@ -0,0 +1,200 @@
+<template>
+    <Link rel="preload" :href="borderHover" as="image" />
+    <Link rel="preload" :href="borderActive" as="image" />
+    <header>
+        <nav>
+            <ul>
+                <li>
+                    <NuxtLink to="/">
+                        <img
+                            src="~/assets/nav-icon-home.webp"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                        Home
+                    </NuxtLink>
+                </li>
+                <li class="deco">&nbsp;</li>
+                <li data-icon="nav-about">
+                    <NuxtLink to="/about">
+                        <img
+                            src="~/assets/nav-icon-butterfly.webp"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                        Who we are
+                    </NuxtLink>
+                </li>
+                <li class="deco">
+                    <img
+                        src="~/assets/star-animated-1.webp"
+                        class="star-1"
+                        aria-hidden="true"
+                    />
+                </li>
+                <li data-icon="nav-work">
+                    <NuxtLink to="/work">
+                        <img
+                            src="~/assets/nav-icon-fox.webp"
+                            alt=""
+                            aria-hidden="true"
+                        />
+
+                        What we make
+                    </NuxtLink>
+                </li>
+                <li class="deco">&nbsp;</li>
+                <li data-icon="nav-work">
+                    <NuxtLink to="/blog">
+                        <img
+                            src="~/assets/nav-icon-pencil.webp"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                        Blog
+                    </NuxtLink>
+                </li>
+                <li class="deco">&nbsp;</li>
+                <li class="deco">
+                    <img
+                        src="~/assets/star-animated-2.webp"
+                        class="star-2"
+                        aria-hidden="true"
+                    />
+                </li>
+            </ul>
+        </nav>
+    </header>
+</template>
+<script setup>
+import borderHover from "~/assets/button-border-hover.webp";
+import borderActive from "~/assets/button-border-active.webp";
+</script>
+<style lang="scss" scoped>
+header {
+    margin: 12px 0;
+    background-image: url("~/assets/black-hole.webp");
+    background-position: center;
+    background-size: auto 150%;
+    background-repeat: no-repeat;
+}
+
+ul,
+li {
+    padding: 0;
+    margin: 0;
+}
+
+ul {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    justify-items: center;
+    justify-content: center;
+    gap: 1em;
+    padding: 0.5em;
+
+    @media (max-width: 640px) {
+        grid-template-columns: repeat(2, auto);
+
+        & .deco {
+            display: none;
+        }
+    }
+
+    @media (max-width: 400px) {
+        grid-template-columns: auto;
+    }
+
+    & li {
+        list-style-type: none;
+
+        & .star-1 {
+            width: 24px;
+            height: 24px;
+
+            @media (prefers-reduced-motion) {
+                visibility: hidden;
+            }
+        }
+
+        & .star-2 {
+            @media (prefers-reduced-motion) {
+                visibility: hidden;
+            }
+        }
+
+        & a {
+            padding: 4px 8px;
+            display: inline-flex;
+            border-radius: 4px;
+            text-decoration: none;
+            border: 6px solid transparent;
+            border-image: url("~/assets/button-border.webp") 50 / 10px / 2px;
+            line-height: 1em;
+            align-items: center;
+            background-color: $ui-surface-bg;
+
+            & img {
+                width: 1.5em;
+                height: 1.5em;
+                margin-right: 0.4em;
+                mix-blend-mode: color-burn;
+            }
+
+            &:not(:hover):not(:active) {
+                &:link img {
+                    filter: contrast(2);
+                    mix-blend-mode: multiply;
+                }
+            }
+
+            &:link {
+                color: inherit;
+            }
+
+            &:visited {
+                color: $ui-visited-fg;
+            }
+
+            &:hover {
+                color: $ui-hover-fg;
+                background-color: $ui-hover-bg;
+                border-image: url("~/assets/button-border-hover.webp") 50 / 10px /
+                    2px;
+
+                @media (prefers-reduced-motion) {
+                    &:not(:active) {
+                        box-shadow: 1px 1px 2px $ui-hover-fg;
+                    }
+                }
+            }
+
+            @media not (prefers-reduced-motion) {
+                & {
+                    transition: box-shadow 0.25s ease-in-out;
+                    box-shadow:
+                        0px 0px 32px #cfafff00,
+                        0px 0px 16px #cfafff00,
+                        0px 0px 8px #cfafff00,
+                        0px 0px 4px #cfafff00;
+                }
+
+                &:hover {
+                    box-shadow:
+                        0px 0px 32px #cfafff,
+                        0px 0px 16px #cfafff,
+                        0px 0px 8px #cfafff,
+                        0px 0px 4px #cfafff;
+                }
+            }
+
+            &:active {
+                color: $ui-active-fg;
+                background-color: $ui-active-bg;
+                border-image: url("~/assets/button-border-active.webp") 50 /
+                    10px / 2px;
+            }
+        }
+    }
+}
+</style>

components/signature.vue

@@ -0,0 +1,14 @@
+<template>
+    <img
+        src="~/assets/signature-natty.webp"
+        class="signature"
+        alt="signed by Natty"
+    />
+</template>
+<style lang="scss" scoped>
+.signature {
+    float: right;
+    clear: both;
+    height: 4em;
+}
+</style>

layouts/default.vue

@@ -0,0 +1,35 @@
+<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>

nuxt.config.ts

@@ -0,0 +1,13 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    devtools: { enabled: true },
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: '@use "~/assets/_defs.scss" as *;',
+                },
+            },
+        },
+    },
+});

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "natty-gay",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.11.2",
+    "sass": "^1.74.1",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  }
+}

pages/about.vue

@@ -0,0 +1,507 @@
+<template>
+    <main>
+        <div class="heading">
+            <h1>About Us</h1>
+            <p>
+                We're a 25 year old plural system of various people and
+                non-people, representing the well-known ones here.
+            </p>
+            <p>
+                In generally, we tend to collectively represent ourselves as a
+                transfem foxgirl (sufficiently, although not fully). Pola is
+                usually our fronter and the creature in charge, with Eli
+                sometimes taking over.
+            </p>
+            <p>We have ADHD and are likely autistic.</p>
+        </div>
+    </main>
+    <section class="member-card" data-member="pola">
+        <div>
+            <img
+                src="~/assets/pola-mark.webp"
+                class="name-tag"
+                alt="Pola's name tag"
+            />
+            <div class="info-box">
+                <h2 id="pola">Pola</h2>
+                <p>Angel-like fox creature, the most active one.</p>
+                <p>
+                    Likes butterflies and sometimes enjoys casually reading
+                    about astronomy.
+                </p>
+                <h3>Pronouns</h3>
+                <ul>
+                    <li>she/her</li>
+                    <li>it/its</li>
+                </ul>
+                <h3>Traits</h3>
+                <ul class="traits">
+                    <li>
+                        <img
+                            src="~/assets/flag-lesbian.webp"
+                            alt="Lesbian flag"
+                            title="Lesbian flag"
+                        />
+                        Lesbian
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/flag-trans.webp"
+                            alt="Trans flag"
+                            title="Trans flag"
+                        />
+                        Trans
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/icon-angel-wing.webp"
+                            alt="Drawing of an angel wing"
+                            title="Angel wing"
+                        />
+                        Angel
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/nav-icon-fox.webp"
+                            alt="Drawing of a fox"
+                            title="Fox"
+                        />
+                        Fox
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/icon-angel-wing-left.webp"
+                            alt="Left angel wing"
+                            title="Angel wing"
+                        />
+                        <img
+                            src="~/assets/nav-icon-fox.webp"
+                            alt="Fox"
+                            title="Fox"
+                        />
+                        <img
+                            src="~/assets/icon-angel-wing.webp"
+                            alt="Right angel wing"
+                            title="Angel wing"
+                        />
+                        Sometimes an angel fox
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <img
+            src="~/assets/butterfly-constellation.webp"
+            class="graphic"
+            alt="A drawing of a butterfly-shaped star constellation"
+        />
+    </section>
+    <section class="member-card" data-member="eli">
+        <img
+            src="~/assets/princess-witch.webp"
+            class="backdrop"
+            alt="A scene of Princess from the game Slay the Princess in her witch form"
+        />
+        <div>
+            <img
+                src="~/assets/eli-mark.webp"
+                class="name-tag"
+                alt="Eli's name tag"
+            />
+            <div class="info-box">
+                <h2 id="eli">Eli</h2>
+                <p>
+                    Energetic but shy girl, somewhat dissociative and less
+                    affectionate. Younger than Pola.
+                </p>
+                <h3>Pronouns</h3>
+                <ul>
+                    <li>she/her</li>
+                </ul>
+                <h3>Traits</h3>
+                <ul class="traits">
+                    <li>
+                        <img
+                            src="~/assets/flag-lesbian.webp"
+                            alt="Lesbian flag"
+                            title="Lesbian flag"
+                        />
+                        Lesbian
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/flag-trans.webp"
+                            alt="Trans flag"
+                            title="Trans flag"
+                        />
+                        Trans
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/flag-ace.webp"
+                            alt="Asexual flag"
+                            title="Asexual flag"
+                        />
+                        Demisexual
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/icon-crown.webp"
+                            alt="A crown"
+                            title="A crown"
+                        />
+                        Princess <span aria-label="cat face smile">:3</span>
+                        <small>(not the monarch one)</small>
+                    </li>
+                </ul>
+                <h3>Image credit</h3>
+                <p>
+                    The background image is the Princess from the game Slay the
+                    Princess by Black Tabby Games
+                </p>
+            </div>
+        </div>
+    </section>
+    <section class="member-card" data-member="alya">
+        <img
+            src="~/assets/magic-fox.webp"
+            class="backdrop"
+            alt="A drawing of a Minecraft fox plushie performing magic"
+        />
+        <div>
+            <img
+                src="~/assets/alya-mark.webp"
+                class="name-tag"
+                alt="Alya's name tag"
+            />
+            <div class="info-box">
+                <h2 id="alya">Alya</h2>
+                <p>
+                    We currently don't know much about her as she is very
+                    similar to Pola. Kinda anxious.
+                </p>
+                <h3>Pronouns</h3>
+                <ul>
+                    <li>she/her</li>
+                    <li>it/its</li>
+                    <li>they/them</li>
+                </ul>
+                <h3>Traits</h3>
+                <ul class="traits">
+                    <li>
+                        <img
+                            src="~/assets/flag-pansexual.webp"
+                            alt="Pan flag"
+                            title="Pan flag"
+                        />
+                        Lesbian
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/flag-nonbinary.webp"
+                            alt="Non-binary flag"
+                            title="Non-binary flag"
+                        />
+                        Non-binary
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/nav-icon-fox.webp"
+                            alt="Drawing of a fox"
+                            title="Fox"
+                        />
+                        Fox
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    <section class="member-card" data-member="sky">
+        <div>
+            <img
+                src="~/assets/sky-mark.webp"
+                class="name-tag"
+                alt="Sky's name tag"
+            />
+            <div class="info-box">
+                <h2 id="sky">Sky</h2>
+                <p>
+                    Humanoid robot foxgirl, appears rarely and is somewhat
+                    emotionally distant, but very caring.
+                </p>
+                <h3>Pronouns</h3>
+                <ul>
+                    <li>it/its</li>
+                </ul>
+                <h3>Traits</h3>
+                <ul class="traits">
+                    <li>
+                        <img
+                            src="~/assets/flag-lesbian.webp"
+                            alt="Lesbian flag"
+                            title="Lesbian flag"
+                        />
+                        Lesbian
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/flag-trans.webp"
+                            alt="Trans flag"
+                            title="Trans flag"
+                        />
+                        Trans
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/nav-icon-fox.webp"
+                            alt="Drawing of a fox"
+                            title="Fox"
+                        />
+                        Fox
+                    </li>
+                    <li>
+                        <img
+                            src="~/assets/icon-robot.webp"
+                            alt="A USB-like icon"
+                            title="Robot"
+                        />
+                        Robot
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <img
+            src="~/assets/sky.webp"
+            class="graphic"
+            alt="A drawing of a robot girl with animals ears and heterochromatic pixelated eyes"
+        />
+    </section>
+</template>
+<script setup>
+useHead({
+    title: "About Us",
+});
+
+useServerSeoMeta({
+    ogSiteName: "Natty.gay",
+    ogTitle: "About Us",
+    ogDescription:
+        "We're a plural system consisting of (at least) Pola, Alya, Eli, and Sky.",
+});
+</script>
+<style lang="scss" scoped>
+main {
+    max-width: 1400px;
+    align-self: center;
+    width: 100vw;
+    box-shadow: 0px 0px 10px $ui-hover-fg;
+    background-color: $ui-surface-bg;
+    padding-bottom: 20px;
+    border-left: 4px dotted $primary-surface;
+    border-right: 4px dotted $primary-surface;
+    box-sizing: border-box;
+}
+
+.heading {
+    padding: 20px;
+}
+
+.member-card {
+    max-width: 1400px;
+    align-self: center;
+    width: 100vw;
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    position: relative;
+
+    .info-box {
+        background-color: $ui-surface-bg;
+        margin: 20px;
+        padding: 15px;
+        border-radius: 4px;
+        width: 400px;
+
+        @media all and (max-width: 600px) {
+            width: initial;
+        }
+
+        border-image: url("~/assets/button-border.webp") 50 / 10px / 2px;
+        filter: drop-shadow(5px 5px 5px black);
+
+        & h2 {
+            line-height: 1.5em;
+            font-size: 1.5em;
+            font-style: italic;
+
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 1.5em;
+                height: 1.5em;
+                background-size: contain;
+                margin-right: 0.25em;
+                vertical-align: bottom;
+            }
+        }
+
+        ul.traits {
+            padding-left: 1em;
+
+            & li {
+                list-style-type: none;
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                & img {
+                    width: 2em;
+                    height: 2em;
+                }
+
+                & img + img {
+                    margin-left: -5px;
+                }
+            }
+        }
+    }
+
+    .backdrop {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        overflow: hidden;
+    }
+
+    .graphic {
+        max-width: clamp(200px, 95vw, 600px);
+    }
+
+    &[data-member="pola"] {
+        background-color: #170a2baa;
+
+        & .name-tag {
+            transform: rotate(-12deg);
+            filter: drop-shadow(5px 5px 5px black);
+        }
+
+        & .name-tag:hover {
+            filter: drop-shadow(5px 5px 10px 5px black);
+        }
+
+        & .info-box {
+            & h2 {
+                color: #885800;
+
+                &::before {
+                    background-image: url("~/assets/star_orange.webp");
+                }
+            }
+        }
+    }
+
+    &[data-member="eli"] {
+        background-color: #ccc;
+
+        & .name-tag {
+            transform: rotate(-5deg);
+            filter: drop-shadow(3px 3px 5px #00000077);
+        }
+
+        & .backdrop {
+            height: 900px;
+            mask-image: linear-gradient(
+                to bottom,
+                #ccccccff 80%,
+                transparent 100%
+            );
+
+            @media all and (max-width: 1400px) {
+                object-position: 0vw;
+            }
+
+            @media all and (max-width: 950px) {
+                object-position: 0vw;
+                min-height: 600px;
+                max-height: 700px;
+            }
+
+            @media all and (max-width: 700px) {
+                min-height: 0px;
+                max-height: 600px;
+                object-position: -200px 0px;
+            }
+
+            @media all and (max-width: 400px) {
+                object-position: -300px 0px;
+            }
+        }
+
+        & .info-box {
+            @media all and (max-width: 700px) {
+                margin-top: 300px;
+            }
+
+            & h2 {
+                color: #088;
+
+                &::before {
+                    background-image: url("~/assets/icon-cat-face.webp");
+                }
+            }
+        }
+    }
+
+    &[data-member="alya"] {
+        background-color: #342d35;
+
+        & .name-tag {
+            transform: rotate(-8deg);
+            filter: drop-shadow(5px 5px 5px black);
+        }
+
+        & .info-box {
+            & h2 {
+                color: #3e0088;
+
+                &::before {
+                    background-image: url("~/assets/icon-purple-heart.webp");
+                }
+            }
+        }
+    }
+
+    &[data-member="sky"] {
+        background-color: skyblue;
+
+        & .name-tag {
+            transform: rotate(-2deg);
+            filter: drop-shadow(5px 5px 5px black);
+        }
+
+        & .info-box {
+            & h2 {
+                color: #002888;
+
+                &::before {
+                    background-image: url("~/assets/icon-high-voltage.webp");
+                }
+            }
+        }
+    }
+
+    @media not (prefers-reduced-motion) {
+        & .name-tag {
+            transition: all 0.3s ease-in-out;
+        }
+
+        & .name-tag:hover {
+            transform: scale(1.2) rotate(10deg);
+        }
+    }
+}
+</style>

pages/blog.vue

@@ -0,0 +1,53 @@
+<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>

pages/index.vue

@@ -0,0 +1,110 @@
+<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>

pages/work.vue

@@ -0,0 +1,180 @@
+<template>
+    <main>
+        <div class="wrapper">
+            <h1>Our Stuff</h1>
+            <p>This section is partially work-in-progress.</p>
+            <p>
+                We got into programming roughly when we were 12, starting with
+                website development and later Minecraft mods. and We're a big
+                fan of the Rust programming language and use it for many of our
+                projects. Our first serious programming language was Java, but
+                we barely use it nowadays.Generally, we have quite a wide range
+                of interests (partially because we have ADHD), but we generally
+                stick to website development, space, and various science stuff.
+                We're also trying to learn to draw.
+            </p>
+            <p>
+                We also sometimes do a little computer graphics, usually for
+                games or fun experiments.
+            </p>
+            <p>
+                We know and primarily use Java, JavaScript, TypeScript, Rust,
+                C++, and also some C and Go. Haskell is fun but not something we
+                regularly use.
+            </p>
+            <p>
+                We self host a number of services, such as our personal
+                <a href="https://git.astolfo.cool/natty">Gitea</a>, a
+                <a href="https://astolfo.social/@natty">Magnetar</a>
+                Fediverse instance,
+                <a href="https://awawa.gay">awawa.gay</a> Misskey instance, as
+                well as a personal Matrix server.
+            </p>
+            <p>
+                <a href="https://git.astolfo.cool/natty">See our Git</a> or
+                <a href="https://github.com/AMNatty" rel="noreferrer nofollow"
+                    >our GitHub account</a
+                >
+                for our recent projects.
+            </p>
+        </div>
+    </main>
+    <section class="wrapper">
+        <h2>Magnetar</h2>
+        <p>
+            We have a toy project called
+            <a href="https://git.astolfo.cool/natty/magnetar">Magnetar</a>. It
+            is a work-in-progress implementation of a
+            <a
+                href="https://en.wikipedia.org/wiki/Fediverse"
+                rel="noreferrer nofollow"
+                >Fediverse</a
+            >
+            server written in Rust.
+        </p>
+        <p>
+            We plan to write articles about the architecture and design of it
+            soon!
+        </p>
+    </section>
+
+    <section class="wrapper">
+        <h2>Other recent mini-projects</h2>
+        <ul class="mini-projects">
+            <li>
+                <a
+                    href="https://github.com/AMNatty/wleave"
+                    rel="nofollow noreferrer"
+                    >AMNatty/wleave</a
+                >
+                <span
+                    >A rewrite of wlogout, a Wayland-native logout script
+                    written in Gtk3</span
+                >
+            </li>
+            <li>
+                <a href="https://git.astolfo.cool/natty/mag-markov"
+                    >mag-markov</a
+                >
+                <span>
+                    Magnetar-compatible Markov chain random sentence generator
+                </span>
+            </li>
+            <li>
+                <a href="https://git.astolfo.cool/natty/dfmd">dfmd</a>
+                <span
+                    >A small utility daemon to handle
+                    <q>open containing folder</q> activities in various software
+                </span>
+            </li>
+            <li>
+                <a href="https://git.astolfo.cool/natty/tsp">tsp</a>
+                <span>
+                    A visualizer for the Travelling Salesman Problem, with the
+                    ability to define a custom algorithm
+                </span>
+            </li>
+        </ul>
+    </section>
+    <section>
+        <div class="wrapper">
+            Email us (<tt>natty.sh.git [at] gmail [dot] com</tt>) or message us
+            on Matrix (<tt>@natty:mx.astolfo.social</tt>) (or even DM us on
+            fedi) if you are curious about any of these projects and would like
+            to know more or have some ideas or contributions.
+        </div>
+        <Signature />
+    </section>
+</template>
+<script setup>
+import Signature from "@/components/signature.vue";
+
+useHead({
+    title: "Our Stuff",
+});
+
+useServerSeoMeta({
+    ogSiteName: "Natty.gay",
+    ogTitle: "Our Stuff",
+    ogDescription:
+        "We work on a bunch of different projects, including Magnetar, a fediverse server partially written in Rust, as well as...",
+});
+</script>
+<style lang="scss" scoped>
+main {
+    flex-grow: 1;
+}
+
+main,
+section {
+    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 {
+        font-style: italic;
+        padding: 10px;
+    }
+
+    img {
+        max-width: 100%;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        display: block;
+    }
+}
+
+.wrapper {
+    padding: 20px;
+}
+
+.mini-projects {
+    li :nth-child(2)::before {
+        content: " — ";
+    }
+}
+</style>

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}