From ae949c98ea198f2add919773fec1c3730623d369 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 6 Jan 2022 18:57:42 +0100
Subject: [PATCH] refactor: use figure components inside gallery component

---
 src/views/Anatomy.vue | 343 +++++++++++++++++++++---------------------
 1 file changed, 170 insertions(+), 173 deletions(-)

diff --git a/src/views/Anatomy.vue b/src/views/Anatomy.vue
index dbf51da..84b9969 100644
--- a/src/views/Anatomy.vue
+++ b/src/views/Anatomy.vue
@@ -15,12 +15,6 @@
   </nsfw-warning>
 
   <prose>
-    <nsfw-switch
-      id="nsfw-switch"
-      v-model="$root.nsfw"
-      @change="$root.showWarning()"
-    />
-
     <h2>Anatomy</h2>
 
     <ref-figure>
@@ -37,7 +31,13 @@
         />
       </template>
       <template #caption>
-        <label>Sebin Full Body Reference</label>
+        <nsfw-switch
+          id="nsfw-switch"
+          v-model="$root.nsfw"
+          @change="$root.showWarning()"
+        />
+
+        <div>Sebin Full Body Reference</div>
       </template>
       <template #copyright>
         <a href="https://twitter.com/draftgon">draftgon</a>
@@ -114,7 +114,7 @@
           eyebrows
         </li>
         <li>Black horns with slight curve downwards</li>
-        <li>Blue hair, different styles; short style preferred</li>
+        <li>Blue, medium long hair</li>
         <li>Long, pointy, movable ears</li>
         <li>Very sharp teeth</li>
         <li>Tongue with pointy tip</li>
@@ -152,18 +152,14 @@
       workout days for rest, switching body regions each workout day.
     </p>
 
-    <ref-figure>
+    <ref-figure polaroidBorder>
       <template #img>
-        <div>
-          <img
-            src="@/assets/refs/upper-body-ref.jpg"
-            alt="Sebin's upper body closeup"
-          />
-        </div>
-      </template>
-      <template #caption>
-        <label>Sebin's upper body closeup</label>
+        <img
+          src="@/assets/refs/upper-body-ref.jpg"
+          alt="Sebin's upper body closeup"
+        />
       </template>
+      <template #caption>Sebin's upper body closeup</template>
       <template #copyright>
         <a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
       </template>
@@ -178,236 +174,224 @@
     </p>
 
     <h3>Additional Muscle References</h3>
-    <!-- <div class="nsfw-bar" v-show="!nsfw">
-      <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="$root.nsfw"
-          @change="$root.showWarning()"
-        />
-      </div>
-    </div> -->
 
     <ref-gallery>
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img
-              src="@/assets/refs/muscle/muscle-ref12.jpg"
-              alt="Sebin flexing"
-            />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin flexing</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref12.jpg"
+            alt="Sebin flexing"
+          />
         </template>
+        <template #caption>Sebin flexing</template>
         <template #copyright>
           <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder nsfw id="nsfw-switch-grisser">
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref1.jpg" alt="Sebin beckons" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin beckons</label>
+          <img src="@/assets/refs/muscle/muscle-ref1.jpg" alt="Sebin beckons" />
         </template>
+        <template #caption>Sebin beckons</template>
         <template #copyright>
           <a href="https://twitter.com/GrisserArt">Grisser</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref2.jpg" alt="Sebin jamming out to some tunes" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin jamming out to some tunes</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref2.jpg"
+            alt="Sebin jamming out to some tunes"
+          />
         </template>
+        <template #caption>Sebin jamming out to some tunes</template>
         <template #copyright>
           <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref3.jpg" alt="Sebin flexing" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin flexing</label>
+          <img src="@/assets/refs/muscle/muscle-ref3.jpg" alt="Sebin flexing" />
         </template>
+        <template #caption>Sebin flexing</template>
         <template #copyright>
-          <a href="https://www.furaffinity.net/user/Marsel-Defender">Marsel-Defender</a>
+          <a href="https://www.furaffinity.net/user/Marsel-Defender">
+            Marsel-Defender
+          </a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref4.png" alt="Sebin giving you the bedroom eyes" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin giving you the bedroom eyes</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref4.png"
+            alt="Sebin giving you the bedroom eyes"
+          />
         </template>
+        <template #caption>Sebin giving you the bedroom eyes</template>
         <template #copyright>
           <a href="https://www.furaffinity.net/user/sirboburto">SirBoburto</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref5.jpg" alt="Sebin bulging out" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin bulging out</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref5.jpg"
+            alt="Sebin bulging out"
+          />
         </template>
+        <template #caption>Sebin bulging out</template>
         <template #copyright>
           <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder nsfw id="nsfw-switch-knuxlight">
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref6.jpg" alt="Sebin showing you his rings" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin showing you his rings</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref6.jpg"
+            alt="Sebin showing you his rings"
+          />
         </template>
+        <template #caption>Sebin showing you his rings</template>
         <template #copyright>
           <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref7.jpg" alt="Sebin ready to throw down" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin ready to throw down</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref7.jpg"
+            alt="Sebin ready to throw down"
+          />
         </template>
+        <template #caption>Sebin ready to throw down</template>
         <template #copyright>
           <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref8.jpg" alt="Sebin being high and mighty" />
-          </div>
+          <img
+            src="@/assets/refs/muscle/muscle-ref8.jpg"
+            alt="Sebin being high and mighty"
+          />
+        </template>
+        <template #caption>Sebin being high and mighty</template>
+        <template #copyright>
+          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
+        </template>
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img>
+          <img
+            src="@/assets/refs/muscle/muscle-ref9.jpg"
+            alt="Sebin getting out of the pool"
+          />
+        </template>
+        <template #caption>Sebin getting out of the pool</template>
+        <template #copyright>
+          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
+        </template>
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img>
+          <img
+            src="@/assets/refs/muscle/muscle-ref10.jpg"
+            alt="Sebin sporting the construction worker look"
+          />
         </template>
         <template #caption>
-          <label>Sebin being high and mighty</label>
+          Sebin sporting the construction worker look
         </template>
         <template #copyright>
           <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
         </template>
       </ref-figure>
 
-      <ref-figure>
+      <ref-figure polaroidBorder>
         <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref9.jpg" alt="Sebin getting out of the pool" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin getting out of the pool</label>
+          <img
+            src="@/assets/refs/muscle/muscle-ref11.jpg"
+            alt="Sebin lifting weights"
+          />
         </template>
+        <template #caption>Sebin lifting weights</template>
         <template #copyright>
-          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure>
-        <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref10.jpg" alt="Sebin sporting the construction worker look" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin sporting the construction worker look</label>
-        </template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure>
-        <template #img>
-          <div>
-            <img src="@/assets/refs/muscle/muscle-ref11.jpg" alt="Sebin lifting weights" />
-          </div>
-        </template>
-        <template #caption>
-          <label>Sebin lifting weights</label>
-        </template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/Marsel-Defender">Marsel-Defender</a>
+          <a href="https://www.furaffinity.net/user/Marsel-Defender">
+            Marsel-Defender
+          </a>
         </template>
       </ref-figure>
     </ref-gallery>
 
-    <h3>Penis</h3>
-    <ref-figure>
-      <template #img>
-        <div>
-          <img
-            src="@/assets/refs/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>
+    <template v-if="nsfw">
+      <h3>Penis</h3>
+      <ref-figure>
+        <template #img>
+          <div>
+            <img
+              src="@/assets/refs/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 :dataset="getSebinData.penis" />
+      <data-table :dataset="getSebinData.penis" />
 
-    <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>
+      <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>
+      <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>
+    </template>
+
+    <template v-else>
+      <h3>But, wait! There's more...</h3>
+
+      <p>
+        Sebin like you haven't seen him yet! Flip the switch to reveal his
+        naughty secrets. If you dare...! Don't say I didn't warn you!!
+      </p>
+
+      <nsfw-switch
+        class="flex flex--row flex--nowrap flex--center"
+        id="nsfw-switch-manlybits"
+        v-model="$root.nsfw"
+        @change="$root.showWarning()"
+      />
+    </template>
   </prose>
 </template>
 
@@ -437,4 +421,17 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss">
+@import "@/scss/_variables.scss";
+
+.figure {
+  &__border {
+    position: relative;
+  }
+
+  .nsfw-switch {
+    font-size: 1em;
+    font-style: normal;
+  }
+}
+</style>