From fa04d4ea191c2d72efc92cb30c308befba735845 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Apr 2025 18:52:25 +0200
Subject: [PATCH] feat: :sparkles: add reference image component

---
 src/components/ref-img.webc | 46 +++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/ref-img.webc

diff --git a/src/components/ref-img.webc b/src/components/ref-img.webc
new file mode 100644
index 0000000..09c40ef
--- /dev/null
+++ b/src/components/ref-img.webc
@@ -0,0 +1,46 @@
+<figure class="ref-image">
+  <eleventy-image
+    class="image"
+    :class="(dropshadow ? 'dropshadow' : '')"
+    :src="src"
+    :alt="`${alt} by ${artist}`"
+    :width="width"
+    sizes="1000px"
+  ></eleventy-image>
+  <figcaption class="caption">
+    <template webc:nokeep @text="alt"></template>
+    &copy;
+    <a :href="href" target="_blank" @text="artist"></a>
+  </figcaption>
+</figure>
+
+<style>
+  .ref-image {
+    max-width: var(--refimage-max-width);
+    margin-block: 0;
+    margin-inline: auto;
+
+    & img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      max-height: 35rem;
+      object-fit: contain;
+    }
+
+    & .image,
+    & .caption {
+      flex: 0 0 auto;
+    }
+
+    & .dropshadow {
+      filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
+    }
+
+    & .caption {
+      text-align: center;
+      margin-block: 1rem 0;
+      margin-inline: 0;
+    }
+  }
+</style>