feat: ✨ introduce quick facts component

src/App.vue

@@ -17,8 +17,16 @@
         <ref-figure>
           <template v-slot:img>
             <div>
-              <img v-if="!nsfw" src="@img/fullbody-ref-SFW.jpg" alt="Sebin Full Body Ref" />
+              <img
-              <img v-if="nsfw" src="@img/fullbody-ref-NSFW.jpg" alt="Sebin Full Body Ref" />
+                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 v-slot:caption>
@@ -34,7 +42,7 @@
         <data-table class="prose" :dataset="getSebinData.colors" />
 
         <div class="prose">
-          <div class="tldr">
+          <quick-facts>
             <ul>
               <li>Bipedal plantigrade</li>
               <li>
@@ -46,7 +54,8 @@
               <li>Brown spikes running over back and top-side of tail</li>
               <li>Tail about 1 meter in length</li>
             </ul>
-          </div>
+          </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
@@ -59,14 +68,15 @@
 
         <h3 id="wings">Wings</h3>
         <div class="prose">
-          <div class="tldr">
+          <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>
-          </div>
+          </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
@@ -83,43 +93,11 @@
           <template v-slot:img>
             <div>
               <img
-                src="@img/sebin-hairstyle-short.jpg"
+                src="@img/sebin-ref-expressions.png"
-                alt="Sebin with short hair"
+                alt="Sebin's Expressions"
               />
             </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>
-
-        <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>
-
-        <ref-figure>
-          <template v-slot:img>
-            <div>
-              <img src="@img/expressions-ref.jpg" alt="Sebin's Expressions" />
-            </div>
-          </template>
           <template v-slot:caption>
             <label>Sebin's Expressions</label>
           </template>
@@ -131,6 +109,20 @@
         </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
@@ -146,7 +138,7 @@
 
         <h3 id="upperbody">Upper Body</h3>
         <div class="prose">
-          <div class="tldr">
+          <quick-facts>
             <ul>
               <li>Strong upper body, lush pecs, defined abs, black nipples</li>
               <li>
@@ -154,7 +146,8 @@
                 preference towards body builder
               </li>
             </ul>
-          </div>
+          </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
@@ -197,9 +190,11 @@
         <h3>Additional Muscle References</h3>
         <div class="prose" v-show="!nsfw">
           <p class="nsfw-bar">
-            Some of these additional references are NSFW. Click
+            <strong>
-            <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
+              Some of these additional references are NSFW. Click
-            mode.
+              <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
+              mode.
+            </strong>
           </p>
         </div>
         <gallery v-show="nsfw">
@@ -288,7 +283,7 @@
         <ref-figure v-show="nsfw">
           <template v-slot:img>
             <div>
-              <img src="@img/penis-ref.jpg" alt="Sebin's manly parts" />
+              <img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
             </div>
           </template>
           <template v-slot:caption>
@@ -304,7 +299,7 @@
         <data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
 
         <div class="prose" v-show="nsfw">
-          <div class="tldr">
+          <quick-facts>
             <ul>
               <li>Human-shaped with ridges</li>
               <li>Ring-like sheath surrounding shaft</li>
@@ -314,7 +309,8 @@
               </li>
               <li>External balls</li>
             </ul>
-          </div>
+          </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
@@ -626,6 +622,7 @@
 </template>
 
 <script>
+import QuickFacts from "@components/QuickFacts.vue";
 import DataTable from "@components/DataTable.vue";
 import Gallery from "@components/Gallery.vue";
 import RefFigure from "@components/Figure.vue";
@@ -638,6 +635,7 @@ import Helper from "@mixins/Helper.js";
 export default {
   name: "app",
   components: {
+    QuickFacts,
     DataTable,
     Gallery,
     RefFigure,
@@ -699,7 +697,8 @@ main {
   @include mq-mobile {
     h2,
     h3,
-    p {
+    p,
+    .quickfacts {
       margin-left: 1rem;
       margin-right: 1rem;
     }
@@ -715,18 +714,4 @@ section {
     border-bottom: 0.125em $copy-color dotted;
   }
 }
-
-.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;
-
-  &:before {
-    display: block;
-    content: "tl;dr";
-    margin-bottom: 1em;
-  }
-}
 </style>

src/components/QuickFacts.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="quickfacts" :class="{ open: isExpanded }">
+    <h3 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h3>
+
+    <div class="quickfacts__list">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isExpanded: false
+    };
+  },
+  methods: {
+    toggle() {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/base.scss";
+
+.quickfacts {
+  border-radius: 1em;
+  overflow: hidden;
+  margin: 1em 0;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    content: "";
+    display: block;
+
+    top: 1em;
+    right: 1em;
+
+    transform: rotate(180deg);
+    transition: 0.3s all ease-in-out;
+
+    border: {
+      right: 0.75em solid transparent;
+      bottom: 0.75em solid #fff;
+      left: 0.75em solid transparent;
+    }
+  }
+
+  &.open {
+    .quickfacts__head {
+      background-color: $bg-color-light;
+    }
+
+    .quickfacts__list {
+      max-height: 17em;
+      padding: 1.5rem;
+    }
+
+    &:before {
+      transform: rotate(0deg);
+    }
+  }
+
+  &__head {
+    background-color: $bg-color-dark;
+    margin: 0;
+    border: 0;
+    padding: 0.75rem 1.5rem;
+    transition: 0.3s all ease-in-out;
+    cursor: pointer;
+  }
+
+  &__list {
+    background-color: rgba($bg-color-dark, 0.5);
+    max-height: 0em;
+    padding: 0 1.5rem;
+    transition: 0.3s all ease-in-out;
+
+    ul {
+      margin: 0;
+      padding-left: 1.25em;
+    }
+  }
+}
+</style>