736 lines
24 KiB
Vue
736 lines
24 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>Overdrive Form</h3>
|
||
<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>
|
||
|
||
<h2>Attacks</h2>
|
||
<h3>Normal Form</h3>
|
||
<div class="prose">
|
||
<p>
|
||
<strong>Fire Breath:</strong> Either a long breath of fire or short
|
||
bursts fired directly from Sebin's mouth.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Flame Toss:</strong> 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.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can
|
||
also greatly increase the speed of the projectiles by a strong punch
|
||
or kick.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Burning Twister:</strong> 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.
|
||
</p>
|
||
</div>
|
||
|
||
<h3>Attacks in Overdrive Form</h3>
|
||
<div class="prose">
|
||
<p>
|
||
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath
|
||
increases as well as the frequency at which he can fire shots from
|
||
his mouth.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Flame Toss:</strong> 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.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Searing Discus:</strong> 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.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Combustion Flare:</strong> A devastating firestorm by
|
||
combining the power of both hands from his fire-infused arms. The
|
||
impact of the two carbon-like palms against each other is like the
|
||
clash of two flints, used to ignite the attack. 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.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Blazing Pandemonium:</strong> 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
|
||
<em>Burning Twister</em>, the flames that previously surrounded
|
||
Sebin's body are forced through the newly created furrows,
|
||
transforming the scene into an inferno.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Scorching Edge:</strong> 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.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Circling Fire Shield:</strong> 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.
|
||
</p>
|
||
</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 {
|
||
margin-left: 1rem;
|
||
margin-right: 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
section {
|
||
h2 {
|
||
border-bottom: 0.0625em $copy-color solid;
|
||
}
|
||
|
||
h3 {
|
||
border-bottom: 0.125em $copy-color dotted;
|
||
}
|
||
}
|
||
</style>
|