508 lines
14 KiB
Vue
508 lines
14 KiB
Vue
|
<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>
|