791 lines
25 KiB
Vue
791 lines
25 KiB
Vue
<template>
|
||
<div id="app">
|
||
<nsfw-warning v-show="isWarn">
|
||
<template #heading>
|
||
⚠️⚠️⚠️<br />
|
||
Whoa, Nelly!
|
||
</template>
|
||
|
||
<template #message>
|
||
By enabling NSFW mode you confirm that you are of legal age to view
|
||
adult content.
|
||
</template>
|
||
|
||
<template #yes>Yes, show me the goods 👀</template>
|
||
<template #no>NO, STAHP 😱</template>
|
||
</nsfw-warning>
|
||
|
||
<ref-header
|
||
mainHeading="Sebin Nyshkim"
|
||
subHeading="Character Reference Page"
|
||
/>
|
||
|
||
<main>
|
||
<section id="general">
|
||
<h2>General</h2>
|
||
<data-table class="prose" :dataset="getSebinData.generic" />
|
||
</section>
|
||
|
||
<section id="anatomy">
|
||
<h2>Anatomy</h2>
|
||
|
||
<ref-figure>
|
||
<template #img>
|
||
<div>
|
||
<img
|
||
v-if="nsfw"
|
||
src="@img/sebin-ref-body-NSFW.png"
|
||
alt="Sebin Full Body Ref"
|
||
/>
|
||
<img
|
||
v-else
|
||
src="@img/sebin-ref-body-SFW.png"
|
||
alt="Sebin Full Body Ref"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template #caption>
|
||
<label>Sebin Full Body Reference</label>
|
||
</template>
|
||
<template #copyright>
|
||
<a href="https://twitter.com/draftgon">
|
||
draftgon
|
||
</a>
|
||
</template>
|
||
</ref-figure>
|
||
|
||
<data-table class="prose" :dataset="getSebinData.colors" />
|
||
|
||
<div class="prose">
|
||
<quick-facts>
|
||
<ul>
|
||
<li>Bipedal plantigrade</li>
|
||
<li>
|
||
Red scales, yellow chest-plates running from underneath chin,
|
||
over torso, between legs, underside of tail
|
||
</li>
|
||
<li>Athletic to body builder physique</li>
|
||
<li>Sharp, black claws on fingers and toes</li>
|
||
<li>Brown spikes running over back and top-side of tail</li>
|
||
<li>Tail about 1 meter in length</li>
|
||
</ul>
|
||
</quick-facts>
|
||
|
||
<p>
|
||
Sebin is a bipedal plantigrade. His body is mostly covered by red
|
||
scales with yellow chest plates running from below his chin over his
|
||
torso all the way down between his legs and underside of his tail.
|
||
His physique is athletic to muscular. His fingers and toes are
|
||
equipped sharp black claws. Brown spikes run along his spine down to
|
||
the tip of his tail. His tail is about one meter in length.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 id="wings">Wings</h3>
|
||
<div class="prose">
|
||
<quick-facts>
|
||
<ul>
|
||
<li>Wingspan 3-4 meters</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>
|
||
</quick-facts>
|
||
|
||
<p>
|
||
His wing span is around 3-4 meters. He has them closed when on the
|
||
ground. His wings function like a second pair of arms, at which ends
|
||
are hand-like limbs with a black talon on top and finger-like
|
||
extensions, in between which are the membranes of his wings. He can
|
||
use his wings to fly short distances. Longer distances become
|
||
difficult due to fatigue of having to carry his own weight with his
|
||
wings alone.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 id="head">Head</h3>
|
||
<ref-figure>
|
||
<template #img>
|
||
<div>
|
||
<img
|
||
src="@img/sebin-ref-expressions.png"
|
||
alt="Sebin's Expressions"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template #caption>
|
||
<label>Sebin's Expressions</label>
|
||
</template>
|
||
<template #copyright>
|
||
<a href="https://twitter.com/draftgon">
|
||
draftgon
|
||
</a>
|
||
</template>
|
||
</ref-figure>
|
||
|
||
<div class="prose">
|
||
<quick-facts>
|
||
<ul>
|
||
<li>
|
||
Round pupils, green iris. Yellow spikes on cheeks, as well as
|
||
for eyebrows
|
||
</li>
|
||
<li>Black horns with slight curve downwards</li>
|
||
<li>Blue hair, different styles; short style preferred</li>
|
||
<li>Long, pointy, movable ears</li>
|
||
<li>Very sharp teeth</li>
|
||
<li>Tongue with pointy tip</li>
|
||
</ul>
|
||
</quick-facts>
|
||
|
||
<p>
|
||
He has round pupils instead of the slit ones typical for reptilians.
|
||
He has short yellow spikes above his eyes that resemble eyebrows, as
|
||
well as spikes along the jawline of his cheeks. He has black horns
|
||
growing out of his head which are mostly straight but slightly curve
|
||
downwards. His hair is blue and he wears it in varying styles. He
|
||
has long pointy ears which he can move to determine the origin of
|
||
sounds around him. He also uses them to express emotion. His teeth
|
||
are very sharp. In his throat are glands that produce a mixture that
|
||
allows him to breathe fire. His tongue has a pointy tip.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 id="upperbody">Upper Body</h3>
|
||
<div class="prose">
|
||
<quick-facts>
|
||
<ul>
|
||
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
|
||
<li>
|
||
Any muscle mass from athletic to body builder is fine, with a
|
||
preference towards body builder
|
||
</li>
|
||
</ul>
|
||
</quick-facts>
|
||
|
||
<p>
|
||
Sebin started working out at the age of 17. Being in top shape is
|
||
very important to him. His favorite workouts are weight-lifting
|
||
(dumbbells as well as barbells), lat pulldown, leg press, straight
|
||
arm pulldown and cable pull. He works out three times a week with
|
||
one day in between workout days for rest, switching body regions
|
||
each workout day.
|
||
</p>
|
||
</div>
|
||
|
||
<ref-figure>
|
||
<template #img>
|
||
<div>
|
||
<img
|
||
src="@img/upper-body-ref.png"
|
||
alt="Sebin's upper body closeup"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template #caption>
|
||
<label>Sebin's upper body closeup</label>
|
||
</template>
|
||
<template #copyright>
|
||
<a href="https://twitter.com/NidtheDragon">
|
||
NidtheDragon
|
||
</a>
|
||
</template>
|
||
</ref-figure>
|
||
|
||
<div class="prose">
|
||
<p>
|
||
Sebin is very focused on evenly distributed muscle mass but pays
|
||
special attention to his back, chest and arms. This is so his fire
|
||
breath doesn't get weak and he can throw fire projectiles farther. A
|
||
strong back ensures his wings continue to carry him so he can stay
|
||
airbourne for extended periods of time.
|
||
</p>
|
||
</div>
|
||
|
||
<h3>Additional Muscle References</h3>
|
||
<div class="prose" v-show="!nsfw">
|
||
<div class="nsfw-bar">
|
||
<div class="nsfw-bar__content flex flex--row flex--nowrap">
|
||
<div>
|
||
<strong>
|
||
Some of these additional references are NSFW. Please enable
|
||
NSFW mode to reveal them.
|
||
</strong>
|
||
</div>
|
||
<nsfw-switch
|
||
id="nsfw-switch-muscle"
|
||
v-model="nsfw"
|
||
@change="showWarning()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ref-gallery v-show="nsfw">
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref1.png" />
|
||
<figcaption>
|
||
By <a href="https://twitter.com/GrisserArt">Grisser</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref2.png" />
|
||
<figcaption>
|
||
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref3.png" />
|
||
<figcaption>
|
||
By
|
||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||
Marsel-Defender
|
||
</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref4.png" />
|
||
<figcaption>
|
||
By
|
||
<a href="https://www.furaffinity.net/user/sirboburto">
|
||
SirBoburto
|
||
</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref5.jpeg" />
|
||
<figcaption>
|
||
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref6.png" />
|
||
<figcaption>
|
||
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref7.png" />
|
||
<figcaption>
|
||
By
|
||
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref8.jpeg" />
|
||
<figcaption>
|
||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref9.jpeg" />
|
||
<figcaption>
|
||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref10.png" />
|
||
<figcaption>
|
||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/muscle-ref/muscle-ref11.jpeg" />
|
||
<figcaption>
|
||
By
|
||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||
Marsel-Defender
|
||
</a>
|
||
</figcaption>
|
||
</figure>
|
||
</ref-gallery>
|
||
|
||
<h3 v-show="nsfw" id="penis">Penis</h3>
|
||
<ref-figure v-show="nsfw">
|
||
<template #img>
|
||
<div>
|
||
<img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
|
||
</div>
|
||
</template>
|
||
<template #caption>
|
||
<label>Sebin's manly parts</label>
|
||
</template>
|
||
<template #copyright>
|
||
<a href="https://twitter.com/draftgon">
|
||
draftgon
|
||
</a>
|
||
</template>
|
||
</ref-figure>
|
||
|
||
<data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
|
||
|
||
<div class="prose" v-show="nsfw">
|
||
<quick-facts>
|
||
<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>
|
||
</quick-facts>
|
||
|
||
<p>
|
||
Despite his majorly reptilian appearance he has nipples, a feature
|
||
of the human side of his family, which also shows with his external
|
||
testicles. Rather than a slit which houses his penis he has a
|
||
pouch-like sheath, with the tip slightly peeking out of it when not
|
||
aroused. His penis is mainly humanoid in shape but is surrounded by
|
||
several ridges. He can take it out of its pouch while it's still
|
||
soft (e.g. for passing water). When aroused his charcoal black shaft
|
||
pushes out from the sheath, its base girded by the sheath like a
|
||
ring.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="clothes">
|
||
<h2>Clothing Styles</h2>
|
||
|
||
<div class="prose">
|
||
<p>
|
||
<strong>
|
||
The following photos are for illustration purposes only. The
|
||
clothing shown is not to be taken literally. The design may
|
||
differ!
|
||
</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<h3>Casual Wear</h3>
|
||
<ref-gallery>
|
||
<figure>
|
||
<img src="@img/clothes-ref/warm/tank-top.jpg" alt="Tank Top" />
|
||
<figcaption>
|
||
<p>Loose Tank Top</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/warm/shorts.jpg" alt="Shorts" />
|
||
<figcaption>
|
||
<p>Short shorts with dangling bands</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
|
||
<figcaption>
|
||
<p>Long sleeve top tied around waist</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
|
||
<figcaption>
|
||
<p>Sneakers (Air Jordan style)</p>
|
||
</figcaption>
|
||
</figure>
|
||
</ref-gallery>
|
||
|
||
<h3>Cold Weather</h3>
|
||
<ref-gallery>
|
||
<figure>
|
||
<img src="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
|
||
<figcaption>
|
||
<p>Coat</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/cold/scarf.jpg" alt="Scarf" />
|
||
<figcaption>
|
||
<p>Checkered scarf with short cords</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
|
||
<figcaption>
|
||
<p>Hoodie</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/cold/jeans.jpg" alt="Jeans" />
|
||
<figcaption>
|
||
<p>Loose fit Jeans</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
|
||
<figcaption>
|
||
<p>Boots</p>
|
||
</figcaption>
|
||
</figure>
|
||
</ref-gallery>
|
||
|
||
<h3>Workout</h3>
|
||
<ref-gallery>
|
||
<figure>
|
||
<img src="@img/clothes-ref/workout/fullbody.png" alt="Full Body" />
|
||
<figcaption>
|
||
<p>
|
||
<strong>Full body:</strong> Snapback hat, tank top, fingerless
|
||
gloves, shorts, sneakers
|
||
</p>
|
||
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/workout/closeup.png" alt="Close-up" />
|
||
<figcaption>
|
||
<p>
|
||
<strong>Close-up:</strong> Snapback hat, headphones, tank top,
|
||
fingerless gloves, shorts, smartwatch
|
||
</p>
|
||
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
|
||
</figcaption>
|
||
</figure>
|
||
</ref-gallery>
|
||
|
||
<h3>"Doesn't need to leave the house today" Style</h3>
|
||
<ref-gallery>
|
||
<figure>
|
||
<img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
|
||
<figcaption>
|
||
<p>Tracksuit pants (optional)</p>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
|
||
<figcaption>
|
||
<p>Topless w/ jockstrap/boxer briefs</p>
|
||
</figcaption>
|
||
</figure>
|
||
</ref-gallery>
|
||
</section>
|
||
|
||
<section id="abilities">
|
||
<h2>Abilities</h2>
|
||
<div class="prose">
|
||
<p>
|
||
Since Sebin is a fire dragon there’s a myriad of abilities he has at
|
||
his disposal to defend himself.
|
||
</p>
|
||
</div>
|
||
|
||
<h3>Attacks</h3>
|
||
|
||
<div class="prose">
|
||
<table class="attacks">
|
||
<tr>
|
||
<td><strong>Fire Breath</strong></td>
|
||
<td>
|
||
Either a long breath of fire or short bursts fired directly from
|
||
Sebin's mouth.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Flame Toss</strong></td>
|
||
<td>
|
||
Sebin spits fireballs into his hands to throw them at his
|
||
opponents. His scales are fireproof and can withstand the high
|
||
temperatures. On impact these fireballs explode into a bigger
|
||
fire bursts with a diameter of 1-2 meters. He can also combine
|
||
two fireballs into a bigger one for bigger impact.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Kindled Fist</strong></td>
|
||
<td>
|
||
Besides throwing fireballs Sebin can also greatly increase the
|
||
speed of the projectiles by a strong punch or kick.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Burning Twister</strong></td>
|
||
<td>
|
||
An attack for aerial combat, Sebin can use his fire breath to
|
||
engulf his body in flames while spinning to become a fire
|
||
tornado that singes opponents.
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<h2>Overdrive Form</h2>
|
||
<ref-figure>
|
||
<template #img>
|
||
<div>
|
||
<img
|
||
src="@img/sebin-overdrive_ref-hires.jpg"
|
||
alt="Sebin in Overdrive"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template #caption>
|
||
<label>Sebin in Overdrive</label>
|
||
</template>
|
||
<template #copyright>
|
||
<a href="https://twitter.com/CVictorrosso">
|
||
CVictorrosso
|
||
</a>
|
||
</template>
|
||
</ref-figure>
|
||
|
||
<div class="prose">
|
||
<p>
|
||
Sebin can enter an Overdrive Form which greatly increases his
|
||
strength and abilities but it comes at a cost.
|
||
</p>
|
||
|
||
<p>
|
||
He enters Overdrive by engulfing himself in a pillar of flames which
|
||
transforms his exterior physique. During Overdrive transformation
|
||
his hair ignites and flickers with blue flames. The corners of his
|
||
eyes flicker with long green flames. His arms and legs become part
|
||
carbon black and are crossed by several glowing veins which pulsate
|
||
like flowing lava. Fire in this form burns several degrees hotter
|
||
than usual because his body becomes a living blast furnace, which is
|
||
why his limbs have to be of more fire-proof material to withstand
|
||
the increased heat.
|
||
</p>
|
||
|
||
<p>
|
||
To complete the transformation he inhales the flames from the pillar
|
||
surrounding him which heats up his body from within. Even if Sebin
|
||
is a fire dragon who can sustain high degrees of heat he is
|
||
essentially overheating himself from the inside. Because of this he
|
||
can't maintain this form for more than a few hours before he does
|
||
permanent damage to his own body.
|
||
</p>
|
||
|
||
<p>
|
||
Direct body contact with Sebin during overdrive causes 3rd degree
|
||
burns as he emits an extreme temperature, although less than he
|
||
keeps inside his body. His immediate surroundings are likely to burn
|
||
or melt.
|
||
</p>
|
||
</div>
|
||
|
||
<h3>Attacks</h3>
|
||
<div class="prose">
|
||
<table class="attacks">
|
||
<tr>
|
||
<td><strong>Fire Breath</strong> (improved)</td>
|
||
<td>
|
||
The reach of Sebin's Fire Breath increases as well as the
|
||
frequency at which he can fire shots from his mouth.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Flame Toss</strong> (improved)</td>
|
||
<td>
|
||
Overdrive Form eliminates the need for Sebin to spit fire into
|
||
his palms. It instead enables him to fire the shots directly
|
||
from the palm of his hands, as the firey veins crossing his arms
|
||
act as an orifice to do so. The explosion radius of the burning
|
||
projectiles that explode on impact is greatly increased.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Kindled Fist</strong> (improved)</td>
|
||
<td>
|
||
As his arms and legs are infused with fire his punches and kicks
|
||
exert trails of flames while doing so. Landing a punch or kick
|
||
sears enemies.
|
||
</td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td><strong>Searing Discus</strong></td>
|
||
<td>
|
||
Overdrive allows Sebin to form rings of fire by igniting flames
|
||
from his fingertips and swirling them in a circle motion. He can
|
||
use them for both close quarters or ranged combat.
|
||
</td>
|
||
</tr> -->
|
||
<tr>
|
||
<td><strong>Combustion Flare</strong></td>
|
||
<td>
|
||
Clinking both of his wrists against each other like flints
|
||
unleashes a devestating fire blast from both of his fire-infused
|
||
hands. A secure foothold is needed to prevent Sebin from being
|
||
thrown back by the recoil of the attack. Using this technique in
|
||
the air is therefore highly risky.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Blazing Pandemonium</strong></td>
|
||
<td>
|
||
A heavy impact into the ground from a great height with both
|
||
fists, tearing deep cracks in the ground around the impact
|
||
crater. Combined with <strong><em>Kindled Fist</em></strong>
|
||
the heat in Sebin's arms are forced through the newly created
|
||
furrows, transforming the scene into an inferno.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Scorching Edge</strong></td>
|
||
<td>
|
||
A fiery blade towering several meters into the air that Sebin
|
||
sends careening towards his enemies from his fire-infused legs
|
||
with a backflip kick, leaving a swath of destruction in its
|
||
wake. Upon impact the force of the attack is distributed
|
||
sideways.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Circling Fire Shield</strong></td>
|
||
<td>
|
||
A rather defensive technique. By spinning around with stretched
|
||
out arms Sebin creates fire balls, which he usually hurls
|
||
towards enemies, that circle around his body diagonally. They
|
||
act as a shield while he can still move his arms relatively
|
||
freely. Enemies would be well advised to keep their distance to
|
||
this spinning shield, as the fire balls will still explode on
|
||
contact.
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<ref-footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QuickFacts from "@components/QuickFacts.vue";
|
||
import DataTable from "@components/DataTable.vue";
|
||
import RefGallery from "@components/Gallery.vue";
|
||
import RefFigure from "@components/Figure.vue";
|
||
import RefHeader from "@components/Header.vue";
|
||
import RefFooter from "@components/Footer.vue";
|
||
import NsfwSwitch from "@components/NsfwSwitch.vue";
|
||
import NsfwWarning from "@components/NsfwWarning.vue";
|
||
|
||
import Sebin from "@mixins/Sebin.js";
|
||
import Helper from "@mixins/Helper.js";
|
||
|
||
export default {
|
||
name: "app",
|
||
components: {
|
||
QuickFacts,
|
||
DataTable,
|
||
RefGallery,
|
||
RefFigure,
|
||
RefHeader,
|
||
RefFooter,
|
||
NsfwSwitch,
|
||
NsfwWarning
|
||
},
|
||
data() {
|
||
return {
|
||
nsfw: false,
|
||
isWarn: false,
|
||
isConfirmedHorny: false,
|
||
version: require("../package.json").version
|
||
};
|
||
},
|
||
mixins: [Sebin, Helper],
|
||
methods: {
|
||
showWarning() {
|
||
if (!this.isConfirmedHorny) {
|
||
this.isWarn = true;
|
||
|
||
setTimeout(() => {
|
||
this.nsfw = false;
|
||
}, 1);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "@scss/base.scss";
|
||
@import "~normalize.css";
|
||
|
||
#app {
|
||
color: $copy-color;
|
||
font-size: 1.125em;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
transition: all ease-in-out 0.25s;
|
||
|
||
@media (min-width: 50em) {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
@media (min-width: 125em) {
|
||
font-size: 1.5em;
|
||
}
|
||
}
|
||
|
||
main {
|
||
h2,
|
||
h3,
|
||
p {
|
||
max-width: 45rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
|
||
@media (min-width: 125em) {
|
||
max-width: 55rem;
|
||
}
|
||
}
|
||
|
||
.prose {
|
||
max-width: 45rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
|
||
@media (min-width: 125em) {
|
||
max-width: 55rem;
|
||
}
|
||
}
|
||
|
||
@include mq-mobile {
|
||
h2,
|
||
h3,
|
||
p,
|
||
.quickfacts,
|
||
.attacks {
|
||
margin-left: 1rem;
|
||
margin-right: 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
section {
|
||
h2 {
|
||
border-bottom: 0.0625em $copy-color solid;
|
||
}
|
||
|
||
h3 {
|
||
border-bottom: 0.125em $copy-color dotted;
|
||
}
|
||
}
|
||
|
||
.attacks {
|
||
tr {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
align-items: center;
|
||
|
||
padding: 0.375em 0;
|
||
|
||
@include mq-desktop {
|
||
flex-flow: row nowrap;
|
||
}
|
||
|
||
td {
|
||
flex: 1 1 auto;
|
||
|
||
&:first-child {
|
||
@include mq-desktop {
|
||
flex: 0 0 8em;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|