Initial commit
|
@ -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
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": false,
|
||||
"singleQuote": false,
|
||||
"vueIndentScriptAndStyle": false,
|
||||
"plugins": [
|
||||
"vue"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.vue",
|
||||
"options": {
|
||||
"parser": "vue"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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.
|
|
@ -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>
|
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 2.0 KiB |
|
@ -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;
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 211 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 9.6 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 331 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 9.8 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 473 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 446 KiB |
After Width: | Height: | Size: 706 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 15 KiB |
|
@ -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>
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<footer>
|
||||
<div class="separator">
|
||||
Made by Natty · 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>
|
|
@ -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"> </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"> </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"> </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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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 *;',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
After Width: | Height: | Size: 17 KiB |
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|