feat: add nsfw toggle

src/App.vue

@@ -1,5 +1,14 @@
 <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>
       <img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
       <div>
@@ -17,7 +26,8 @@
       <h2>Colors</h2>
       <data-table :dataset="getSebinData.colors"></data-table>
     </section>
-    <section>
+
+    <section v-if="nsfw">
       <h2>Penis</h2>
       <data-table :dataset="getSebinData.penis"></data-table>
     </section>
@@ -65,11 +75,12 @@
       </p>
 
       <rich-figure
-        imgSrc="/img/upper-body-ref.png"
-        caption="Sebin's upper body closeup"
+        v-if="nsfw"
+        imgSrc="/img/penis-ref.jpg"
+        caption="Sebin's manly parts"
       ></rich-figure>
 
-      <p>
+      <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
@@ -79,11 +90,6 @@
         water). When aroused his charcoal black shaft pushes out from the
         sheath, its base girded by the sheath like a ring.
       </p>
-
-      <rich-figure
-        imgSrc="/img/penis-ref.jpg"
-        caption="Sebin's manly parts"
-      ></rich-figure>
     </section>
 
     <section class="prose">
@@ -95,6 +101,12 @@
         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>
+
+      <rich-figure
+        imgSrc="/img/upper-body-ref.png"
+        caption="Sebin's upper body closeup"
+      ></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
@@ -102,6 +114,8 @@
         back ensures his wings continue to carry him so he can stay airbourne
         for extended periods of time.
       </p>
+
+      <h3>Additional References</h3>
       <gallery :images="muscleRefs"></gallery>
     </section>
 
@@ -307,7 +321,8 @@ export default {
       appSubtitle: "Character Reference Page",
       muscleRefs: this.getMuscleRefPics(17),
       kittens: this.getKittens(17),
-      clothes: this.getClothesPics()
+      clothes: this.getClothesPics(),
+      nsfw: false
     };
   },
   mixins: [Sebin, Helper],
@@ -351,6 +366,101 @@ export default {
   }
 }
 
+.nsfw-switch {
+  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;
+  }
+
+  .toggle-wrap {
+    margin: 0 0.5em;
+  }
+
+  .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;
+    }
+  }
+
+  &: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;