From a4fadab6ad4588964b9840721fe698d30c831805 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 28 Jan 2022 23:31:47 +0100
Subject: [PATCH] feat: add dropshadow prop to figure component

---
 src/components/Figure.vue | 15 ++++++++++++---
 src/views/Anatomy.vue     |  6 +++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Figure.vue b/src/components/Figure.vue
index ca184be..4988216 100644
--- a/src/components/Figure.vue
+++ b/src/components/Figure.vue
@@ -5,7 +5,12 @@
       :class="{ 'figure__border--polaroid': polaroidBorder }"
     >
       <template v-if="!nsfw || $root.nsfw">
-        <div class="figure__image"><slot name="img"></slot></div>
+        <div
+          class="figure__image"
+          :class="{ 'figure__image--dropshadow': dropshadow }"
+        >
+          <slot name="img"></slot>
+        </div>
       </template>
 
       <template v-else>
@@ -47,6 +52,7 @@ import NsfwSwitch from "@/components/NsfwSwitch.vue";
 export default {
   props: {
     polaroidBorder: Boolean,
+    dropshadow: Boolean,
     nsfw: Boolean,
     id: String,
   },
@@ -66,7 +72,6 @@ export default {
   justify-content: center;
 
   margin: 1em auto;
-  padding: 0 1em;
   text-align: center;
 
   &__border {
@@ -104,6 +109,10 @@ export default {
       max-width: 100%;
       max-height: 35em;
     }
+
+    &--dropshadow {
+      filter: drop-shadow(0.5em 0.25em 0.375em #000);
+    }
   }
 
   &__meta {
@@ -125,7 +134,7 @@ export default {
     max-height: 70em;
     position: relative;
 
-    background-color: $bg-color-light;
+    background-color: $bg-color-lighter;
     overflow: hidden;
 
     @include mq-desktop {
diff --git a/src/views/Anatomy.vue b/src/views/Anatomy.vue
index cbf1605..ddc557a 100644
--- a/src/views/Anatomy.vue
+++ b/src/views/Anatomy.vue
@@ -17,7 +17,7 @@
   <prose>
     <h2>Anatomy</h2>
 
-    <ref-figure>
+    <ref-figure dropshadow>
       <template #img>
         <img
           v-if="$root.nsfw"
@@ -104,7 +104,7 @@
     </p>
 
     <h3>Head</h3>
-    <ref-figure>
+    <ref-figure dropshadow>
       <template #img>
         <img
           src="@/assets/refs/sebin-ref-expressions.png"
@@ -353,7 +353,7 @@
 
     <template v-if="$root.nsfw">
       <h3>Penis</h3>
-      <ref-figure>
+      <ref-figure dropshadow>
         <template #img>
           <img
             src="@/assets/refs/sebin-ref-penis.png"