feat: implement cencor functionality for individual figure elements

src/components/Figure.vue

@@ -4,18 +4,57 @@
       class="figure__border"
       :class="{ 'figure__border--polaroid': polaroidBorder }"
     >
+      <template v-if="!nsfw || $root.nsfw">
         <slot name="img"></slot>
+      </template>
+
+      <template v-else>
+        <div class="figure__cencor">
+          <div class="hazard-tape"></div>
+          <div class="hazard-tape"></div>
+          <div class="hazard-tape"></div>
+          <div class="hazard-tape"></div>
+
+          <p>🔥 Here be spicy dragons 🌶</p>
+
+          <nsfw-switch
+            :id="id"
+            v-model="$root.nsfw"
+            @change="$root.showWarning()"
+          />
+        </div>
+      </template>
+
       <figcaption class="figure__meta">
-        <slot name="caption"></slot> <slot name="copyright"></slot>
+        <template v-if="!nsfw">
+          <div class="caption">
+            <slot name="caption"></slot>
+          </div>
+
+          <div class="copyright">
+            <slot name="copyright"></slot>
+          </div>
+        </template>
+
+        <template v-else>
+          <p>😳 2 hot 4 u 🍆</p>
+        </template>
       </figcaption>
     </div>
   </figure>
 </template>
 
 <script>
+import NsfwSwitch from "@/components/NsfwSwitch.vue";
+
 export default {
   props: {
     polaroidBorder: Boolean,
+    nsfw: Boolean,
+    id: String,
+  },
+  components: {
+    NsfwSwitch,
   },
 };
 </script>
@@ -25,15 +64,22 @@ export default {
 @import "@/scss/_mixins.scss";
 
 .figure {
+  display: flex;
+  flex-flow: row nowrap;
+
   margin: 1em auto;
+  padding: 0 1em;
   text-align: center;
 
   &__border {
+    margin: auto;
+
     &--polaroid {
       margin: 1em auto;
       padding: 1em;
-      background-color: #eee;
+      background-color: #fff;
       box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
+      border-radius: 0.325em;
 
       .figure__meta {
         margin: 0.5em 0;
@@ -47,6 +93,58 @@ export default {
     }
   }
 
+  &__cencor {
+    position: relative;
+    padding: 6em 0;
+    background-color: $bg-color-light;
+    overflow: hidden;
+
+    @include mq-desktop {
+      padding: 9em 7em;
+    }
+
+    .figure__border & .nsfw-switch {
+      position: relative;
+      padding: 0;
+    }
+
+    .hazard-tape {
+      position: absolute;
+      left: -1em;
+      right: -1em;
+      top: 0;
+      transform: rotate(0deg);
+      height: 1em;
+      background-image: repeating-linear-gradient(
+        -55deg,
+        #000,
+        #000 0.75em,
+        #ffb101 0.75em,
+        #ffb101 1.5em
+      );
+
+      &:nth-child(1) {
+        top: 5%;
+        transform: rotate(5deg);
+      }
+
+      &:nth-child(2) {
+        top: 10%;
+        transform: rotate(-10deg);
+      }
+
+      &:nth-child(3) {
+        top: 75%;
+        transform: rotate(-15deg);
+      }
+
+      &:nth-child(4) {
+        top: 85%;
+        transform: translate(-3em, -2em) rotate(40deg);
+      }
+    }
+  }
+
   img {
     width: 100%;
     object-fit: contain;