fix: image caption being wider than image

Use `position: absolute` for `<figcaption>`, not affecting the container's width. Also rewrite `<figure>` `<figcaption>` style.

1 files changed, 13 insertions, 13 deletions

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 697c33c2..c1f2aa89 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,16 +1,16 @@
 {{- $src := .Destination -}}
 {{- $alt := .Text | default "" -}}
 {{- $caption := .Title | default "" -}}
-<figure>
-  <a href="{{ $src }}" data-fancybox data-caption="{{ $alt }}">
-    <img
-      class="lazy" loading="lazy"
-      src="{{ $src }}" alt="{{ $alt }}"
-    />
-  </a>
-  {{- if $caption }}
-  <figcaption>
-    <h4>{{ $caption | markdownify }}</h4>
-  </figcaption>
-  {{- end }}
-</figure>
+<a href="{{ $src }}" data-fancybox data-caption="{{ $caption }}">
+    <figure>
+        <img
+            class="lazy" loading="lazy"
+            src="{{ $src }}" alt="{{ $alt }}"
+        />
+        {{- if $caption }}
+        <figcaption>
+            <h4>{{ $caption | markdownify }}</h4>
+        </figcaption>
+        {{- end }}
+    </figure>
+</a>