From 19084d5cfc41a6ce5743c3939fbbdd761bc94a96 Mon Sep 17 00:00:00 2001
From: Marcus Mietz <marcus.mietz@arsmedium.com>
Date: Wed, 26 Aug 2020 19:19:41 +0200
Subject: [PATCH] refactor: :recycle: refactor ALL the things!!!

---
 src/App.vue | 1109 +++++++++++++++++++++++++++------------------------
 1 file changed, 591 insertions(+), 518 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 56470c8..e9553e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,391 +1,617 @@
 <template>
   <div id="app">
-    <label class="nsfw-switch" for="nsfw-switch">
-      <div>😇</div>
-      <div class="toggle-wrap">
-        <input v-model="nsfw" type="checkbox" name="nsfw" id="nsfw-switch" />
-        <div class="toggle"></div>
-      </div>
-      <div>😈</div>
-    </label>
-    <header>
-      <div>
-        <img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
-      </div>
-      <div>
-        <h1>{{ appName }}</h1>
-        <h2>{{ appSubtitle }}</h2>
-      </div>
-    </header>
+    <ref-header
+      mainHeading="Sebin Nyshkim"
+      subHeading="Character Reference Page"
+    />
 
-    <section>
-      <details>
-        <summary>
-          <h2>Quick info</h2>
-        </summary>
-        <data-table :dataset="getSebinData.generic"></data-table>
-      </details>
-    </section>
+    <main>
+      <section id="general">
+        <h2>General</h2>
+        <data-table class="prose" :dataset="getSebinData.generic" />
+      </section>
 
-    <section>
-      <details>
-        <summary>
-          <h2>Colors</h2>
-        </summary>
-        <data-table :dataset="getSebinData.colors"></data-table>
-      </details>
-    </section>
+      <section id="anatomy">
+        <h2>Anatomy</h2>
 
-    <section v-if="nsfw">
-      <details>
-        <summary>
-          <h2>Penis</h2>
-        </summary>
-        <data-table :dataset="getSebinData.penis"></data-table>
-      </details>
-    </section>
+        <ref-figure>
+          <template v-slot:img>
+            <div>
+              <img src="@img/fullbody-ref.jpg" alt="Sebin Full Body Ref" />
+            </div>
+          </template>
+          <template v-slot:caption>
+            <label>Sebin Full Body Reference</label>
+          </template>
+          <template v-slot:copyright>
+            <a href="https://www.furaffinity.net/user/SirBoburto">
+              SirBoburto
+            </a>
+          </template>
+        </ref-figure>
 
-    <section class="prose">
-      <details>
-        <summary>
-          <h2>Anatomy</h2>
-        </summary>
-        <rich-figure
-          imgSrc="/img/fullbody-ref.jpg"
-          caption="Sebin Full Body reference"
-          copyright="FA:SirBoburto"
-        ></rich-figure>
+        <data-table class="prose" :dataset="getSebinData.colors" />
 
-        <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 class="prose">
+          <div class="tldr">
+            <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>
+          </div>
+          <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>
 
-        <rich-figure
-          imgSrc="/img/head-ref.jpg"
-          caption="Sebin's Expressions"
-          copyright="FA:SirBoburto"
-        ></rich-figure>
+        <h3>Wings</h3>
+        <div class="prose">
+          <div class="tldr">
+            <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>
+          </div>
+          <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>
 
-        <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>
+        <h3>Head</h3>
+        <ref-figure>
+          <template v-slot:img>
+            <div>
+              <img
+                src="@img/sebin-hairstyle-short.jpg"
+                alt="Sebin with short hair"
+              />
+            </div>
+          </template>
+          <template v-slot:caption>
+            <label>Sebin with short hair</label>
+          </template>
+          <template v-slot:copyright>
+            <a href="https://twitter.com/LeoboArt">
+              LeoboArt
+            </a>
+          </template>
+        </ref-figure>
 
-        <rich-figure
-          imgSrc="/img/sebin-hairstyle-short.jpg"
-          caption="Sebin with short hair"
-          copyright="@LeoboArt"
-        ></rich-figure>
+        <div class="prose">
+          <div class="tldr">
+            <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>
+          </div>
+        </div>
 
-        <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>
+        <ref-figure>
+          <template v-slot:img>
+            <div>
+              <img src="@img/head-ref.jpg" alt="Sebin's Expressions" />
+            </div>
+          </template>
+          <template v-slot:caption>
+            <label>Sebin's Expressions</label>
+          </template>
+          <template v-slot:copyright>
+            <a href="https://www.furaffinity.net/user/SirBoburto">
+              SirBoburto
+            </a>
+          </template>
+        </ref-figure>
 
-        <rich-figure
-          v-if="nsfw"
-          imgSrc="/img/penis-ref.jpg"
-          caption="Sebin's manly parts"
-          copyright="@Zodim87"
-        ></rich-figure>
+        <div class="prose">
+          <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>
 
-        <p v-if="nsfw">
-          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>
-      </details>
-    </section>
+        <h3>Upper Body</h3>
+        <div class="prose">
+          <div class="tldr">
+            <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>
+          </div>
+          <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>
 
-    <section class="prose">
-      <details>
-        <summary>
-          <h2>Muscle Reference</h2>
-        </summary>
-        <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>
+        <ref-figure>
+          <template v-slot:img>
+            <div>
+              <img
+                src="@img/upper-body-ref.png"
+                alt="Sebin's upper body closeup"
+              />
+            </div>
+          </template>
+          <template v-slot:caption>
+            <label>Sebin's upper body closeup</label>
+          </template>
+          <template v-slot:copyright>
+            <a href="https://twitter.com/NidtheDragon">
+              NidtheDragon
+            </a>
+          </template>
+        </ref-figure>
 
-        <rich-figure
-          imgSrc="/img/upper-body-ref.png"
-          caption="Sebin's upper body closeup"
-          copyright="@NidtheDragon"
-        ></rich-figure>
-
-        <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 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 References</h3>
-        <gallery :images="muscleRefs"></gallery>
-      </details>
-    </section>
-
-    <section class="prose">
-      <details>
-        <summary>
-          <h2>Personality</h2>
-        </summary>
-        <p>
-          Sebin is a warmhearted guy who cares a lot about his loved ones. He
-          has a keen sense for bad vibes and is always willing to do something
-          about it, either by listening to the problems of others or with
-          well-meant advice. Not being able to help a friend in need is the same
-          for him as abandoning them.
-        </p>
-        <p>
-          He is open and honest with his feelings and does not mince his words.
-          However, some people may find this brazen or tactless.
-        </p>
-        <p>
-          Sebin likes to laugh and is therefore easy to amuse, often up to a
-          point where he becomes utterly childish and immature. He also doesn't
-          take himself too seriously and can laugh at himself -- even if only
-          after a while. His vocabulary is rather vulgar and he rarely shies
-          away from cursing. But he knows when a more diplomatic choice of words
-          is appropriate.
-        </p>
-        <p>
-          However, if he feels that his points of view are right, his ambition
-          may well run away with him. If he gets the feeling during ongoing
-          discussions that the other side is not paying any attention to his
-          point of view, he can go from persistent to stubborn to hot-headed and
-          even become downright rude.
-        </p>
-        <p>
-          Sebin is very enthusiastic about his hobbies. If he notices even the
-          slightest overlap of interests, he may chew your ear off. Sometimes he
-          is also very impatient.
-        </p>
-        <p>
-          But above all Sebin is a very naughty hornball. He knows what he’s got
-          and enjoys the reactions when he shows it off. He is a generally
-          dominant lover who likes to have it rough. But he is not lacking in
-          tenderness. However, that doesn't mean that he doesn't let others have
-          their fun with him too from time to time. It always depends on his
-          playmates. He loves to wear bottomless jockstraps and boxer briefs to
-          direct the attention of the viewer exactly where he wants it. After
-          all he is well endowed enough to peddle it around.
-        </p>
-      </details>
-    </section>
-
-    <section>
-      <details>
-        <summary>
-          <h2>Clothing Styles</h2>
-        </summary>
-        <template v-for="(style, index) in clothingStyles">
-          <h3 :key="style.name">{{ style.name }}</h3>
-
-          <gallery :key="style.name + index" :images="clothes[index]"></gallery>
-
-          <ul :key="index">
-            <li v-for="(part, index) in style.clothes" :key="index">
-              {{ part }}
+        <gallery>
+          <ul>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref01.JPG" alt="Muscle Ref 01" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref02.JPG" alt="Muscle Ref 02" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref03.JPG" alt="Muscle Ref 03" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref04.JPG" alt="Muscle Ref 04" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref05.JPG" alt="Muscle Ref 05" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref06.JPG" alt="Muscle Ref 06" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref07.JPG" alt="Muscle Ref 07" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref08.JPG" alt="Muscle Ref 08" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref09.JPG" alt="Muscle Ref 09" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref10.JPG" alt="Muscle Ref 10" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref11.JPG" alt="Muscle Ref 11" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref12.JPG" alt="Muscle Ref 12" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref13.JPG" alt="Muscle Ref 13" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref14.JPG" alt="Muscle Ref 14" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref15.JPG" alt="Muscle Ref 15" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref16.JPG" alt="Muscle Ref 16" />
+            </li>
+            <li>
+              <img src="@img/muscle-ref/muscle-ref17.JPG" alt="Muscle Ref 17" />
             </li>
           </ul>
-        </template>
-      </details>
-    </section>
+        </gallery>
 
-    <section class="prose">
-      <details>
-        <summary>
-          <h2>Abilities</h2>
-        </summary>
-        <p>
-          Since Sebin is a fire dragon there’s a myriad of abilities he has at
-          his disposal to defend himself.
-        </p>
+        <h3 v-show="nsfw">Penis</h3>
+        <ref-figure v-show="nsfw">
+          <template v-slot:img>
+            <div>
+              <img src="@img/penis-ref.jpg" alt="Sebin's manly parts" />
+            </div>
+          </template>
+          <template v-slot:caption>
+            <label>Sebin's manly parts</label>
+          </template>
+          <template v-slot:copyright>
+            <a href="https://twitter.com/Zodim87">
+              Zodim87
+            </a>
+          </template>
+        </ref-figure>
+
+        <data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
+
+        <div class="prose" v-show="nsfw">
+          <div class="tldr">
+            <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>
+          </div>
+          <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>
+            The following photos are for illustration purposes only. The
+            clothing shown is not to be taken literally. The design may differ!
+          </p>
+        </div>
+
+        <h3>Warm Weather</h3>
+        <gallery>
+          <ul>
+            <li>
+              <img src="@img/clothes-ref/warm/tank-top.jpg" alt="Tank Top" />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/warm/shorts.jpg" alt="Shorts" />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
+            </li>
+          </ul>
+        </gallery>
+
+        <div class="prose">
+          <ul>
+            <li>Loose Tank Top</li>
+            <li>Short shorts (knee-long) with dangling bands</li>
+            <li>Sweater/Hoodie tied around waist</li>
+            <li>Sneakers (Air Jordan style)</li>
+          </ul>
+        </div>
+
+        <h3>Cold Weather</h3>
+        <gallery>
+          <ul>
+            <li>
+              <img src="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
+            </li>
+            <li>
+              <img
+                src="@img/clothes-ref/cold/scarf.jpg"
+                alt="Checkered scarf with short cords"
+              />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
+            </li>
+            <li>
+              <img
+                src="@img/clothes-ref/cold/jeans.jpg"
+                alt="Loose fit Jeans"
+              />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
+            </li>
+          </ul>
+        </gallery>
+
+        <div class="prose">
+          <ul>
+            <li>Coat</li>
+            <li>Checkered scarf with short cords</li>
+            <li>Hoodie</li>
+            <li>Loose fit Jeans</li>
+            <li>Boots</li>
+          </ul>
+        </div>
+
+        <h3>Workout</h3>
+        <gallery>
+          <ul>
+            <li>
+              <img
+                src="@img/clothes-ref/workout/hoodie.jpg"
+                alt="Sleeveless Hoodie (hood goes on)"
+              />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/workout/tank-top.jpg" alt="Tank Top" />
+            </li>
+            <li>
+              <img
+                src="@img/clothes-ref/workout/gloves.jpg"
+                alt="Fingerless Gloves"
+              />
+            </li>
+            <li>
+              <img
+                src="@img/clothes-ref/workout/apple-watch.jpg"
+                alt="Apple Watch (fitness tracking)"
+              />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/workout/shorts.jpg" alt="Shorts" />
+            </li>
+          </ul>
+        </gallery>
+
+        <div class="prose">
+          <ul>
+            <li>Sleeveless Hoodie (hood goes on) OR Tank Top</li>
+            <li>Fingerless Gloves</li>
+            <li>Apple Watch (fitness tracking)</li>
+            <li>Short Shorts</li>
+            <li>(barefoot)</li>
+          </ul>
+        </div>
+
+        <h3>"Doesn't need to leave the house today" Style</h3>
+        <gallery>
+          <ul>
+            <li>
+              <img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
+            </li>
+            <li>
+              <img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
+            </li>
+          </ul>
+        </gallery>
+
+        <div class="prose">
+          <ul>
+            <li>(topless)</li>
+            <li>tracksuit pants (optional)</li>
+            <li>Undies (jockstrap/boxer briefs)</li>
+          </ul>
+        </div>
+      </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 v-slot:img>
+            <div>
+              <img
+                src="@img/sebin-overdrive_ref-hires.jpg"
+                alt="Sebin in Overdrive"
+              />
+            </div>
+          </template>
+          <template v-slot:caption>
+            <label>Sebin in Overdrive</label>
+          </template>
+          <template v-slot:copyright>
+            <a href="https://twitter.com/CVictorrosso">
+              CVictorrosso
+            </a>
+          </template>
+        </ref-figure>
 
-        <rich-figure
-          imgSrc="/img/sebin-overdrive_ref-hires.jpg"
-          caption="Sebin in Overdrive"
-          copyright="@CVictorrosso"
-        ></rich-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>
-          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>
-          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>
-          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>
+          <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>
-        <p>
-          <strong>Fire Breath:</strong> Either a long breath of fire or short
-          bursts fired directly from Sebin's mouth.
-        </p>
+        <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>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>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>
+          <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>
-        <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>
+        <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>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>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>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>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>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>
-      </details>
-    </section>
+          <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>
 
-    <footer>
-      © 2020 Sebin Nyshkim
-    </footer>
+    <ref-footer />
   </div>
 </template>
 
 <script>
-import DataTable from "./components/DataTable.vue";
-import Gallery from "./components/Gallery.vue";
-import RichFigure from "./components/RichFigure.vue";
+import DataTable from "@components/DataTable.vue";
+import Gallery from "@components/Gallery.vue";
+import RefFigure from "@components/Figure.vue";
+import RefHeader from "@components/Header.vue";
+import RefFooter from "@components/Footer.vue";
 
-import Sebin from "./mixins/Sebin.js";
-import Helper from "./mixins/Helper.js";
+import Sebin from "@mixins/Sebin.js";
+import Helper from "@mixins/Helper.js";
 
 export default {
   name: "app",
   components: {
     DataTable,
     Gallery,
-    RichFigure
+    RefFigure,
+    RefHeader,
+    RefFooter
   },
   data() {
     return {
-      appName: "Sebin Nyshkim",
-      appSubtitle: "Character Reference Page",
-      muscleRefs: this.getMuscleRefPics(17),
-      kittens: this.getKittens(17),
-      clothes: this.getClothesPics(),
-      nsfw: false
+      nsfw: true
     };
   },
   mixins: [Sebin, Helper]
@@ -393,20 +619,14 @@ export default {
 </script>
 
 <style lang="scss">
-@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
-
-:root {
-  font-family: "Fira Sans Extra Condensed", sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-}
+@import "@scss/base.scss";
+@import "~normalize.css";
 
 #app {
+  color: $copy-color;
   font-size: 1.125em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  max-width: 40em;
-  margin: auto;
   transition: all ease-in-out 0.25s;
 
   @media (min-width: 50em) {
@@ -418,199 +638,52 @@ export default {
   }
 }
 
-.nsfw-switch {
-  font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
-    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
-    "segoe ui symbol";
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  background-color: #fff;
-  border-radius: 0.5em;
-  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
-  padding: 0.5em;
-  margin: 0.5em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-
-  > div {
-    flex: 0 1 33%;
-    align-self: center;
-    line-height: 1;
-    text-align: center;
+main {
+  h2,
+  h3,
+  p {
+    max-width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .toggle-wrap {
-    margin: 0 0.5em;
+  .prose {
+    max-width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .toggle {
-    position: relative;
-    display: inline-block;
-    width: 46px;
-    height: 26px;
-    background-color: #e6e6e6;
-    border-radius: 23px;
-    vertical-align: text-bottom;
-    transition: all 0.3s linear;
-
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      width: 42px;
-      height: 22px;
-      background-color: #fff;
-      border-radius: 11px;
-      transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
-      transition: all 0.25s linear;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      width: 22px;
-      height: 22px;
-      background-color: #fff;
-      border-radius: 11px;
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
-      transform: translate3d(2px, 2px, 0);
-      transition: all 0.2s ease-in-out;
+  @include mq-mobile {
+    h2,
+    h3,
+    p {
+      margin-left: 1rem;
+      margin-right: 1rem;
     }
   }
-
-  &:active {
-    .toggle::after {
-      width: 28px;
-      transform: translate3d(2px, 2px, 0);
-    }
-
-    input {
-      &:checked + .toggle::after {
-        transform: translate3d(16px, 2px, 0);
-      }
-    }
-  }
-
-  input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-
-    &:checked + .toggle {
-      background-color: #4bd763;
-
-      &::before {
-        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
-      }
-
-      &::after {
-        transform: translate3d(22px, 2px, 0);
-      }
-    }
-  }
-}
-
-header {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-items: center;
-
-  @media (min-width: 35em) {
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-  }
-
-  div {
-    flex: 0 1 100%;
-
-    &:first-child {
-      flex: 0 1 50%;
-
-      @media (min-width: 35em) {
-        flex: 0 1 30%;
-      }
-    }
-
-    img {
-      width: 100%;
-      border-radius: 50%;
-      border: 0.375em solid #fff;
-      box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
-    }
-  }
-
-  h1,
-  h2 {
-    font-family: "Exo", sans-serif;
-    margin: 0;
-    text-align: center;
-  }
-
-  h1 {
-    font-size: 2.125em;
-    font-weight: 900;
-    font-style: italic;
-
-    @media (min-width: 35em) {
-      font-size: 2.75em;
-    }
-  }
-
-  h2 {
-    font-size: 1em;
-    font-weight: 300;
-    font-style: italic;
-  }
-}
-
-.prose {
-  text-align: justify;
-  hyphens: auto;
 }
 
 section {
-  margin: 2em 0;
-  padding: 1em;
-  box-shadow: 0 0 2em rgba(#000, 0.3), 0 0 2em rgba(#000, 0.1) inset;
-  background-color: #fff;
-
   h2 {
-    border-bottom: 0.0625em #000 solid;
+    border-bottom: 0.0625em $copy-color solid;
   }
 
   h3 {
-    border-bottom: 0.125em #000 dotted;
+    border-bottom: 0.125em $copy-color dotted;
   }
 }
 
-summary h2 {
-  display: inline;
-  border-bottom: none;
-}
+.tldr {
+  font-style: italic;
+  background-color: rgba($bg-color-light, 0.25);
+  margin: 1em auto;
+  border-left: 0.25em solid $bg-color-light;
+  padding: 1em;
 
-footer {
-  margin: 2em 0;
-  text-align: center;
-}
-
-.float {
-  max-width: 15em;
-
-  &.left {
-    float: left;
-    margin: 0 1em 1em 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0 0 1em 1em;
+  &:before {
+    display: block;
+    content: "tl;dr";
+    margin-bottom: 1em;
   }
 }
 </style>