feat: add RefImage component

2022-09-26 17:26:04 +02:00 · 2022-09-26 17:26:04 +02:00 · b9b70d403f
commit b9b70d403f
parent 9229202881
1 changed files with 30 additions and 0 deletions
--- a/src/components/RefImage.vue
+++ b/src/components/RefImage.vue
@ -0,0 +1,30 @@
+<template>
+  <figure class="figure">
+    <picture class="figure__image">
+      <slot></slot>
+    </picture>
+
+    <figcaption class="figure__caption">
+      <slot name="caption"></slot>
+    </figcaption>
+  </figure>
+</template>
+
+<style lang="scss">
+.figure {
+  max-width: var(--container-width-images);
+  margin: 0 auto;
+
+  &__image {
+    filter: drop-shadow(0.5rem 0.25rem 0.375rem #000);
+  }
+
+  &__caption {
+    text-align: center;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+</style>