From 3bc6fc630fdce919a65d6456bf767bd6c78d7716 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 7 Jan 2022 21:26:32 +0100
Subject: [PATCH] feat: update button component

---
 src/components/Figure.vue  | 80 ++++++++++++++++++++++----------------
 src/components/Gallery.vue | 42 +++++++++-----------
 2 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/src/components/Figure.vue b/src/components/Figure.vue
index 1fbf6ca..ca184be 100644
--- a/src/components/Figure.vue
+++ b/src/components/Figure.vue
@@ -5,7 +5,7 @@
       :class="{ 'figure__border--polaroid': polaroidBorder }"
     >
       <template v-if="!nsfw || $root.nsfw">
-        <slot name="img"></slot>
+        <div class="figure__image"><slot name="img"></slot></div>
       </template>
 
       <template v-else>
@@ -15,25 +15,22 @@
           <div class="hazard-tape"></div>
           <div class="hazard-tape"></div>
 
-          <p>🔥 Here be spicy dragons 🌶</p>
+          <div class="figure__reveal">
+            <p>🔥 Here be spicy dragons 🌶</p>
 
-          <nsfw-switch
-            :id="id"
-            v-model="$root.nsfw"
-            @change="$root.showWarning()"
-          />
+            <nsfw-switch
+              :id="id"
+              v-model="$root.nsfw"
+              @change="$root.showWarning()"
+            />
+          </div>
         </div>
       </template>
 
       <figcaption class="figure__meta">
         <template v-if="!nsfw || $root.nsfw">
-          <div class="caption">
-            <slot name="caption"></slot>
-          </div>
-
-          <div class="copyright">
-            <slot name="copyright"></slot>
-          </div>
+          <div class="caption"><slot name="caption"></slot></div>
+          <div class="copyright">© <slot name="copyright"></slot></div>
         </template>
 
         <template v-else>
@@ -66,6 +63,7 @@ export default {
 .figure {
   display: flex;
   flex-flow: row nowrap;
+  justify-content: center;
 
   margin: 1em auto;
   padding: 0 1em;
@@ -81,10 +79,12 @@ export default {
     &--polaroid {
       margin: 1em auto;
       padding: 1em;
-      background-color: #fff;
+
       box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
       border-radius: 0.325em;
 
+      background-color: #fff;
+
       .figure__meta {
         margin: 0.5em 0;
         font-family: "Permanent Marker", fantasy;
@@ -97,14 +97,40 @@ export default {
     }
   }
 
+  &__image {
+    flex: 1 0 auto;
+
+    img {
+      max-width: 100%;
+      max-height: 35em;
+    }
+  }
+
+  &__meta {
+    flex: 0 0 auto;
+  }
+
   &__cencor {
+    flex: 1 0 auto;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0;
+    width: 50vw;
+    height: 35vh;
+    max-width: 35em;
+    max-height: 70em;
     position: relative;
-    padding: 6em 0;
+
     background-color: $bg-color-light;
     overflow: hidden;
 
     @include mq-desktop {
-      padding: 9em 7em;
+      width: 20em;
+      height: 20em;
     }
 
     .figure__border & .nsfw-switch {
@@ -128,12 +154,12 @@ export default {
       );
 
       &:nth-child(1) {
-        top: 5%;
+        top: 10%;
         transform: rotate(5deg);
       }
 
       &:nth-child(2) {
-        top: 10%;
+        top: 15%;
         transform: rotate(-10deg);
       }
 
@@ -144,23 +170,9 @@ export default {
 
       &:nth-child(4) {
         top: 85%;
-        transform: translate(-3em, -2em) rotate(40deg);
+        transform: translate(-5em, -2em) rotate(40deg);
       }
     }
   }
-
-  img {
-    max-width: 100%;
-    object-fit: contain;
-
-    @include mq-desktop {
-      max-height: 60vh;
-    }
-  }
-
-  a:before {
-    display: inline;
-    content: "©";
-  }
 }
 </style>
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index a938e85..5151448 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -99,13 +99,21 @@ export default {
   }
 
   &__prev {
-    left: 1em;
+    left: 1.5em;
     transform: rotate(-135deg);
+
+    @include mq-desktop {
+      left: 2em;
+    }
   }
 
   &__next {
-    right: 1em;
+    right: 1.5em;
     transform: rotate(45deg);
+
+    @include mq-desktop {
+      right: 2em;
+    }
   }
 
   &__images {
@@ -122,32 +130,18 @@ export default {
     height: 100%;
 
     transition: 0.3s all ease-in-out;
+  }
 
-    figure {
-      flex: 0 0 100%;
+  .figure {
+    margin: 0;
+    padding: 0 3em;
+    flex: 1 0 100%;
 
-      display: flex;
-      flex-flow: column nowrap;
-      justify-content: center;
-
-      width: 100vw;
-      height: 100%;
-      margin: 0;
-      padding: 0 2em;
-
-      @include mq-desktop {
-        padding: 0 2.5em;
-      }
+    @include mq-desktop {
+      padding: 0 3.5em;
     }
 
-    picture {
-      flex: 0 1 auto;
-      text-align: center;
-      max-height: 80%;
-    }
-
-    figcaption {
-      flex: 0 0 100%;
+    &__meta {
       text-align: center;
 
       p {