Initial commit

This commit is contained in:
Natty 2024-04-13 20:39:32 +02:00
commit 49caed6d35
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
60 changed files with 8224 additions and 0 deletions

29
.gitignore vendored Normal file
View File

@ -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

17
.prettierrc Normal file
View File

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

75
README.md Normal file
View File

@ -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.

19
app.vue Normal file
View File

@ -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>

BIN
assets/88x31/blobfox.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

17
assets/_defs.scss Normal file
View File

@ -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;
}
}

BIN
assets/alya-mark.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets/black-hole.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
assets/button-border.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
assets/eli-mark.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/flag-ace.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/flag-lesbian.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/flag-nonbinary.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/flag-pansexual.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/flag-trans.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
assets/icon-angel-wing.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
assets/icon-cat-face.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
assets/icon-crown.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
assets/icon-robot.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 331 KiB

BIN
assets/magic-fox.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/nav-icon-fox.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/nav-icon-home.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/nav-icon-pencil.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/pola-mark.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/princess-witch.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 KiB

BIN
assets/signature-natty.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/sky-mark.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/sky.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 KiB

BIN
assets/star-animated-1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 706 B

BIN
assets/star-animated-2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

BIN
assets/star-bg.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/star_orange.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

64
components/banner.vue Normal file
View File

@ -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>

96
components/footer.vue Normal file
View File

@ -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>

200
components/navigation.vue Normal file
View File

@ -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>

14
components/signature.vue Normal file
View File

@ -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>

35
layouts/default.vue Normal file
View File

@ -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>

13
nuxt.config.ts Normal file
View File

@ -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 *;',
},
},
},
},
});

18
package.json Normal file
View File

@ -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"
}
}

507
pages/about.vue Normal file
View File

@ -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>

53
pages/blog.vue Normal file
View File

@ -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>

110
pages/index.vue Normal file
View File

@ -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>

180
pages/work.vue Normal file
View File

@ -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>

6770
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load Diff

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

3
server/tsconfig.json Normal file
View File

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

4
tsconfig.json Normal file
View File

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