From 3e803c1fdecd2d8d669951385749a7f209a90526 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 6 Jan 2022 09:09:48 +0100
Subject: [PATCH] feat: add ability to display images as polaroid

---
 src/components/Figure.vue | 51 +++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/Figure.vue b/src/components/Figure.vue
index cd55d6b..4d87614 100644
--- a/src/components/Figure.vue
+++ b/src/components/Figure.vue
@@ -1,15 +1,23 @@
 <template>
   <figure class="figure">
-    <slot name="img"></slot>
-    <figcaption class="figure__meta">
-      <slot name="caption"></slot>
-      <slot name="copyright"></slot>
-    </figcaption>
+    <div
+      class="figure__border"
+      :class="{ 'figure__border--polaroid': polaroidBorder }"
+    >
+      <slot name="img"></slot>
+      <figcaption class="figure__meta">
+        <slot name="caption"></slot> <slot name="copyright"></slot>
+      </figcaption>
+    </div>
   </figure>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    polaroidBorder: Boolean,
+  },
+};
 </script>
 
 <style lang="scss">
@@ -20,6 +28,25 @@ export default {};
   margin: 1em auto;
   text-align: center;
 
+  &__border {
+    &--polaroid {
+      margin: 1em auto;
+      padding: 1em;
+      background-color: #eee;
+      box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
+
+      .figure__meta {
+        margin: 0.5em 0;
+        font-family: "Permanent Marker", fantasy;
+        color: $copy-color-darkgrey;
+
+        * {
+          color: inherit;
+        }
+      }
+    }
+  }
+
   img {
     width: 100%;
     object-fit: contain;
@@ -30,18 +57,6 @@ export default {};
     }
   }
 
-  label,
-  a {
-    font-size: 0.8em;
-    font-style: italic;
-    color: $copy-color;
-  }
-
-  label:after {
-    display: inline;
-    content: " ";
-  }
-
   a:before {
     display: inline;
     content: "©";