feat: ✨ add NSFW confirm alert

src/components/NsfwWarning.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="nsfw-warning">
+    <div class="nsfw-warning__background"></div>
+    <div class="nsfw-warning__message">
+      <div>
+        <h2>⚠️ Whoa, Nelly! ⚠️</h2>
+        <p>
+          By enabling NSFW mode you confirm that you are of legal age to view
+          adult content.
+        </p>
+
+        <div class="btn-container">
+          <a href="#" class="btn positive" @click.prevent="confirmNsfw(true)">
+            Yes, show me the goods 👀
+          </a>
+          <a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
+            NO, STAHP 😱
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    confirmNsfw(input) {
+      this.$parent.nsfw = input;
+      this.$parent.isConfirmedHorny = input;
+      this.$parent.isWarn = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+@import "@scss/_mixins.scss";
+
+.nsfw-warning {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 9001;
+
+  backdrop-filter: blur(1em);
+  background-color: rgba(#000, 0.5);
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  padding: 2em;
+  text-align: center;
+
+  &__background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &__message {
+    flex: 0 1 30em;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-content: center;
+
+    margin: auto;
+    border: 0.25em solid $bg-color-warning;
+    border-radius: 1em;
+    padding: 1em;
+
+    z-index: 9002;
+
+    background-color: $bg-color-dark;
+
+    > * {
+      flex: 0 1 100%;
+    }
+  }
+}
+
+.btn-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.btn {
+  flex: 0 1 100%;
+  background-color: $bg-color-light;
+  border-radius: 0.25em;
+  font-size: 1.5em;
+  font-weight: bold;
+  padding: 0.25em 0.5em;
+  margin: 0 0 1em 0;
+  text-decoration: none;
+
+  @include mq-desktop {
+    flex: 0 1 100%;
+  }
+
+  &.positive {
+    background-color: green;
+  }
+
+  &.negative {
+    background-color: red;
+  }
+}
+</style>