sebin-reference/src/views/AnatomyView.vue
2023-04-03 00:55:28 +02:00

842 lines
33 KiB
Vue

<script setup lang="ts">
import { inject } from 'vue'
import { nsfwKey, showModalKey } from '@/keys'
import type { ColorDict } from '@/interfaces'
import { tailLength, wingspan, penis, colors } from '@/sebin'
import { toImperial, toFahrenheit } from '@/helpers'
import RefToggle from '@/components/RefToggle.vue'
import RefGallery from '@/components/RefGallery.vue'
import RefFigure from '@/components/RefFigure.vue'
import ColorTable from '@/components/ColorTable.vue'
import DataTable from '@/components/DataTable.vue'
import QuickFacts from '@/components/QuickFacts.vue'
const sebinColors: ColorDict[] = [
{ name: 'Scales', value: colors.scalesPrimary },
{ name: 'Chest, Wings (front)', value: colors.scalesSecondary },
{ name: 'Hair', value: colors.hairPrimary },
{ name: 'Hair Streaks (optional)', value: colors.hairSecondary },
{ name: 'Eyes', value: colors.eyes },
{ name: 'Facial Spikes', value: colors.eyebrows },
{ name: 'Horns/Claws/Nipples', value: colors.horns },
{ name: 'Tail Spikes', value: colors.tailspikes }
]
const sebinPenisHeadings = ['Key', 'Value']
const sebinPenisData = [
['Shape', penis.shape],
['Type', penis.type],
['Special Traits', penis.special],
['Color', colors.penis],
['Length', `${penis.size} cm (${toImperial(penis.size)})`],
['Girth', `${penis.girth} cm (${toImperial(penis.girth)})`]
]
const isNsfw = inject<boolean>(nsfwKey, false)
const showModal = inject<Function>(showModalKey, Function)
</script>
<template>
<section>
<h1>{{ $route.name }}</h1>
</section>
<RefFigure id="sebin-fullbody-ref" dropshadow>
<!-- max 3360px -->
<template #img>
<picture v-if="isNsfw">
<source
srcset="
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
alt="Sebin Full Body Ref"
loading="lazy"
/>
</picture>
<picture v-else>
<source
srcset="
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
alt="Sebin Full Body Ref"
loading="lazy"
/>
</picture>
</template>
<template #caption>
<RefToggle id="sebin-fullbody-ref" v-model="isNsfw" @click.prevent="showModal()">
<template #off>😇</template>
<template #on>😈</template>
</RefToggle>
<div>Sebin Full Body Reference</div>
</template>
<template #copyright>
<a href="https://twitter.com/Sr_Draftgon">draftgon</a>
</template>
</RefFigure>
<section>
<ColorTable :colors="sebinColors" />
<QuickFacts :cols="2">
<ul>
<li>Bipedal plantigrade</li>
<li>Red and yellow scales</li>
<li>Yellow scales under chin, torso, underside of tail</li>
<li>Athletic to body builder physique</li>
<li>Sharp, black claws on fingers and toes</li>
<li>Brown blunt spikes running over back and top-side of tail</li>
<li>Tail about {{ tailLength / 100 }} meter ({{ toImperial(tailLength) }}) in length</li>
</ul>
</QuickFacts>
<p>
As the offspring of a union between human and dragon, Sebin is a bipedal plantigrade. The
majority of his body is covered in red scales. A strip of yellow scales runs from the
underside of his jaw, extending down his chest through his legs to the underside of the tip of
his tail. The scales on his chest are characterized by a special toughness to better protect
vital organs. He also has an athletic to muscular physique that he continuously tends to keep
in shape. Finger and toe tips are armed with sharp, black claws, which serve him equally as
tools and weapons. Brown spines run from head to spine to tip of tail, though they are too
blunt to pose a risk of injury. His tail is about
{{ tailLength / 100 }} meters ({{ toImperial(tailLength) }}) in length.
</p>
</section>
<section>
<h2>Wings</h2>
<QuickFacts :cols="2">
<ul>
<li>Wingspan {{ wingspan / 100 }} meters ({{ toImperial(wingspan) }})</li>
<li>Closed when on the ground</li>
<li>Function like a second pair of arms</li>
<li>Pointy talon on end of "hand"</li>
</ul>
</QuickFacts>
<p>
Sebin's wings have a span of about {{ wingspan / 100 }} meters ({{ toImperial(wingspan) }}).
They function very much like a second pair of arms: two interconnected limbs that form a
bendable arm, at the end of which sits a hand-like structure, adorned with a talon in exchange
for a thumb, with a sturdy membrane stretched between its long fingers. On solid ground, he
keeps his wings closed so as not to accidentally bump into anything with them. Sebin also pays
a lot of attention to his wings when working out, so that they can keep carrying him reliably
through the air. Though, he only travels short to medium distances through the air before he
has to take a rest - as long as the airspace in the area has been declared open for wing
bearers.
</p>
</section>
<section>
<h2>Head</h2>
</section>
<RefFigure id="sebin-expressions" dropshadow>
<!-- max 2702px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 2240px,
(min-width: 100em) 1920px,
(min-width: 90em) 1600px,
(min-width: 80em) 1440px,
(min-width: 67.5em) 1280px,
(min-width: 45em) 1080px,
(min-width: 30em) 720px,
480px"
alt="Sebin's Expressions"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin's Expressions</template>
<template #copyright>
<a href="https://twitter.com/Sr_Draftgon">draftgon</a>
</template>
</RefFigure>
<section>
<QuickFacts :cols="2">
<ul>
<li>Round pupils, green iris</li>
<li>Yellow spikes for eyebrows</li>
<li>Yellow spikes on cheeks</li>
<li>Black horns with slight curve downwards</li>
<li>Blue, medium long hair</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</QuickFacts>
<p>
Despite what one might expect with reptilians, Sebin's pupils are rounded instead of
slit-shaped. Yellow spikes running above his eyelids serve as eyebrows. These spikes are also
found along his jaw bone. Two pointed, slightly curved, black horns protrude from his head. He
usually wears his medium-length, blue hair loose. His long, pointed ears are very flexible,
allowing him to hear sounds around him without having to turn his head. They are also used for
non-verbal communication, to express emotions through body language. His hearing perceives a
wider range of frequencies, making it superior to that of a human. His jaws are equipped with
razor-sharp teeth that effortlessly sink into anything he manages to bite, be it nourishment
or adversaries. Embedded between them lies his tongue, which is typically pointed for
reptilians. Glands in his throat produce a mixture which he uses to spit fire, which can reach
up to around 100 °C ({{ toFahrenheit(100) }} °F).
</p>
</section>
<section>
<h2>Upper Body</h2>
<QuickFacts :cols="2">
<ul>
<li>Strong upper body</li>
<li>Big pecs</li>
<li>Defined abs</li>
<li>Black nipples</li>
<li>
Any muscle mass from athletic to body builder is fine, with a preference towards body
builder
</li>
</ul>
</QuickFacts>
<p>
At the age of 17, Sebin gradually began to keep his body in shape on a regular basis. His
favorite exercises include weightlifting (with both dumbbells and barbells), lat pulldown, leg
press and cable curls. He works out three days a week with one day off between training days,
rotating the body regions he trains each day.
</p>
</section>
<RefFigure id="sebin-upper-body-ref" polaroidBorder>
<!-- max 3617px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin's upper body closeup"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin's upper body closeup</template>
<template #copyright>
<a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
</template>
</RefFigure>
<section>
<p>
Sebin is very concerned with an even distribution of muscle mass, but pays particular
attention to his back, chest and arms. A strong chest with strong arms helps to throw fire
projectiles as far as possible. A strong back guarantees a longer stay in the air.
</p>
</section>
<section>
<h2>Additional Muscle References</h2>
</section>
<RefGallery>
<RefFigure id="sebin-muscle-ref12" polaroidBorder>
<!-- max 1964px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
alt="Sebin flexing"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin flexing</template>
<template #copyright>
<a href="https://twitter.com/KidRhinoBoy">Chirros</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref1" polaroidBorder nsfw>
<!-- max 2480px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin beckons"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin beckons</template>
<template #copyright>
<a href="https://twitter.com/GrisserArt">Grisser</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref2" polaroidBorder>
<!-- max 2953px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
alt="Sebin jamming out to some tunes"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin jamming out to some tunes</template>
<template #copyright>
<a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref3" polaroidBorder>
<!-- max 4961px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
alt="Sebin flexing"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin flexing</template>
<template #copyright>
<a href="https://www.furaffinity.net/user/Marsel-Defender"> Marsel-Defender </a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref4" polaroidBorder nsfw>
<!-- max 3000px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
alt="Sebin soaping up"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin soaping up</template>
<template #copyright>
<a href="https://twitter.com/O_reowoof">(o)reo</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref5" polaroidBorder nsfw>
<!-- max 2000px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
alt="Sebin bulging out"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin bulging out</template>
<template #copyright>
<a href="https://www.furaffinity.net/user/sexmuffin">SexMuffin</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref6" polaroidBorder nsfw>
<!-- max 1500px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
alt="Sebin showing you his rings"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin showing you his rings</template>
<template #copyright>
<a href="https://twitter.com/tehknuxlight">Knuxlight</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref7" polaroidBorder>
<!-- max 1240px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 995px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
alt="Sebin ready to throw down"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin ready to throw down</template>
<template #copyright>
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref8" polaroidBorder>
<!-- max 1245px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
alt="Sebin looking aloof (but chill)"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin looking aloof (but chill)</template>
<template #copyright>
<a href="https://twitter.com/UsurpThem">Usurp</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref9" polaroidBorder>
<!-- max 2550px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
alt="Sebin getting out of the pool"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin getting out of the pool</template>
<template #copyright>
<a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref10" polaroidBorder nsfw>
<!-- max 2421px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
alt="Sebin getting frisky on the train"
loading="lazy"
/>
</picture>
</template>
<template #caption> Sebin getting frisky on the train </template>
<template #copyright>
<a href="https://twitter.com/Wintech3112">Winty</a>
</template>
</RefFigure>
<RefFigure id="sebin-muscle-ref11" polaroidBorder>
<!-- max 3184px -->
<template #img>
<picture>
<source
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/avif"
/>
<source
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
type="image/webp"
/>
<img
srcset="
@/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&png&withoutEnlargement&srcset
"
sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
alt="Sebin getting ready to lift"
loading="lazy"
/>
</picture>
</template>
<template #caption>Sebin getting ready to lift</template>
<template #copyright>
<a href="https://twitter.com/EdaMonstr"> Eda </a>
</template>
</RefFigure>
</RefGallery>
<template v-if="isNsfw">
<section>
<h2>Penis</h2>
</section>
<RefFigure id="sebin-penis-ref" dropshadow>
<!-- max 1155px -->
<template #img>
<picture>
<source
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&avif&quality=75&srcset"
sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
type="image/avif"
/>
<source
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&webp&quality=100&srcset"
sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
type="image/webp"
/>
<img
srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&png&srcset"
sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
alt="Sebin's manly parts"
loading="lazy"
/>
</picture>
</template>
<template #caption>
<label>Sebin's manly parts</label>
</template>
<template #copyright>
<a href="https://twitter.com/Sr_Draftgon">draftgon</a>
</template>
</RefFigure>
<section>
<DataTable :headings="sebinPenisHeadings" :data="sebinPenisData" />
<QuickFacts :cols="2">
<ul>
<li>Human-shaped with ridges</li>
<li>Ring-like sheath surrounding shaft</li>
<li>Extends from sheath when erect, lives inside sheath when not erect</li>
<li>External balls</li>
</ul>
</QuickFacts>
<p>
Despite his reptilian appearance, Sebin has nipples, a feature of the human side of his
family. Furthermore, his external testicles represent another humanized feature. Where
relatives of his ilk possess a slit in which the penis lies protectively, Sebin possesses a
pouch-like sheath from which the tip of the penis protrudes slightly. The shape of his shaft
is predominantly humanoid, but it is surrounded by ridges and has no equivalent of a
foreskin. When aroused, the coal-black shaft swells and pushes out of the sheath until fully
erect, the sheath wrapping around the root of the shaft like a ring. However, he can also
push it out in a flaccid state, e.g. when needing to pass water.
</p>
</section>
</template>
<template v-else>
<section>
<h2>But, wait! There's more...</h2>
<p>
Sebin like you haven't seen him yet! Flip the switch to reveal his naughty secrets. If you
dare...! Don't say I didn't warn you!!
</p>
<p>
<RefToggle id="sebin-manly-bits" v-model="isNsfw" @click.prevent="showModal()">
<template #off>😇</template>
<template #on>😈</template>
</RefToggle>
</p>
</section>
</template>
</template>
<style lang="scss"></style>