feat: ♻️ refactor ALL THE THINGS!!! (again)
Update to Vue 3 and employ Vue Router, additional design changes and navigation changes
This commit is contained in:
sebin.nyshkim@icloud.com
parent
e9f29b655d
commit
ae5d4d2633
59 changed files with 2768 additions and 1381 deletions
847
src/App.vue
847
src/App.vue
|
|
@ -1,711 +1,43 @@
|
|||
<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"
|
||||
<header>
|
||||
<img
|
||||
class="nav-logo"
|
||||
src="@/assets/sebin-smug-icon.png"
|
||||
alt="Sebin Avatar"
|
||||
/>
|
||||
|
||||
<main>
|
||||
<section id="general">
|
||||
<h2>General</h2>
|
||||
<data-table class="prose" :dataset="getSebinData.generic" />
|
||||
</section>
|
||||
<navigation :routes="routes" />
|
||||
</header>
|
||||
|
||||
<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.jpg"
|
||||
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-ref12.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref1.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/GrisserArt">Grisser</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref2.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref3.jpg" />
|
||||
<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.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref6.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref7.jpg" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref8.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref9.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref10.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref11.jpg" />
|
||||
<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/casual/fullbody.png" alt="Full Body" />
|
||||
<figcaption>
|
||||
<p>
|
||||
Black tank top, flannell shirt, shorts (w/ dangling bands),
|
||||
sneakers
|
||||
</p>
|
||||
<p>
|
||||
By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ref-gallery>
|
||||
|
||||
<h3>Cold Weather</h3>
|
||||
<ref-gallery>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/fullbody.png" alt="Full Body" />
|
||||
<figcaption>
|
||||
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
|
||||
<p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></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.jpg" 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="attacks">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-fire_breath-hires.png"
|
||||
alt="Sebin Fire Breath"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Fire Breath</strong></p>
|
||||
<p>
|
||||
Like most fire dragons, Sebin can breathe fire. In order to do
|
||||
this, he takes a deep breath to enrich the oxygen in his lungs
|
||||
with gases, which, together with special glands in his mouth,
|
||||
produce a combustible mixture. The resulting jet of fire,
|
||||
reaching several hundred degrees Celsius, spreads out on its way
|
||||
to its target, scorching everything in its path.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-flame_toss-hires.png"
|
||||
alt="Sebin Flame Toss"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Flame Toss</strong></p>
|
||||
<p>
|
||||
By spitting fire into his hands, Sebin can form it into a ball
|
||||
and use it as a projectile. His scales are fireproof and can
|
||||
withstand the high temperatures. Due to their high
|
||||
concentration, the projectiles explode upon impact. By combining
|
||||
two fireballs the explosion radius increases dramatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-kindled_fist-hires.png"
|
||||
alt="Sebin Kindled Fist"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Kindled Fist</strong></p>
|
||||
<p>
|
||||
Apart from throwing projectiles, Sebin can also use the
|
||||
fireballs to wrap his fists in fire. This allows him to inflict
|
||||
severe burns on his opponent with each blow. In addition, he can
|
||||
release the fire from his fists with aimed blows and hurl it at
|
||||
his opponents.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-burning_twister-hires.png"
|
||||
alt="Sebin Burning Twister"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Burning Twister</strong></p>
|
||||
<p>
|
||||
A technique used in aerial combat, Sebin uses his fire breath to
|
||||
engulf his body in flames while spinning to become a fire
|
||||
tornado that singes opponents.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<router-view />
|
||||
</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";
|
||||
import Navigation from "@/components/Navigation.vue";
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
QuickFacts,
|
||||
DataTable,
|
||||
RefGallery,
|
||||
RefFigure,
|
||||
RefHeader,
|
||||
RefFooter,
|
||||
NsfwSwitch,
|
||||
NsfwWarning,
|
||||
},
|
||||
components: { Navigation },
|
||||
data() {
|
||||
return {
|
||||
nsfw: false,
|
||||
isWarn: false,
|
||||
isConfirmedHorny: false,
|
||||
version: require("../package.json").version,
|
||||
routes: [
|
||||
{ path: "/", name: "Home" },
|
||||
{ path: "/general", name: "General" },
|
||||
{ path: "/anatomy", name: "Anatomy" },
|
||||
{ path: "/clothing", name: "Clothing" },
|
||||
{ path: "/abilities", name: "Abilities" },
|
||||
{ path: "/overdrive", name: "Overdrive" },
|
||||
],
|
||||
};
|
||||
},
|
||||
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 "@/scss/base.scss";
|
||||
@import "~normalize.css";
|
||||
|
||||
#app {
|
||||
margin: 6em 0 2em 0;
|
||||
color: $copy-color;
|
||||
font-size: 1.125em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -721,127 +53,38 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
h2 {
|
||||
border-bottom: 0.0625em $copy-color solid;
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 0.125em $copy-color dotted;
|
||||
}
|
||||
}
|
||||
|
||||
.attacks {
|
||||
header {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
@include mq-desktop {
|
||||
max-width: 45rem;
|
||||
}
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: 70em) {
|
||||
max-width: 70em;
|
||||
}
|
||||
max-width: 70em;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||
|
||||
.row {
|
||||
flex: 0 1 100%;
|
||||
background-color: darken($bg-color-dark, 5%);
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.375em 0;
|
||||
|
||||
@include mq-desktop {
|
||||
flex-flow: row nowrap;
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: right;
|
||||
|
||||
.col {
|
||||
&:first-child {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 70em) {
|
||||
text-align: left;
|
||||
flex: 0 1 50%;
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: left;
|
||||
|
||||
.col {
|
||||
&:first-child {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@include mq-desktop {
|
||||
flex: 0 0 15em;
|
||||
height: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include mq-desktop {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 90em) {
|
||||
margin: 1em auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: block;
|
||||
margin: 0 0 0 0.25em;
|
||||
height: 2em;
|
||||
border: 0.125em solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue