From 49aeb6e4af1c975f777e991fb54a9eb6bdd1e41d Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Mon, 25 Nov 2024 14:52:04 +0100
Subject: [PATCH] Improve looks of figcaptions

---
 themes/maik-blog/assets/scss/_main.scss       | 20 ++++++++++-
 .../maik-blog/layouts/shortcodes/figure.html  | 36 ++++++++++++-------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 1e15793..57c4ea5 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -186,8 +186,12 @@ figure {
         font-size: 1.125rem;
         line-height: 1.3;
         margin-top: 0.4em;
-        font-weight: bold;
         opacity: 0.8;
+        vertical-align: middle;
+
+        span {
+            vertical-align: middle;
+        }
 
         &.left {
             text-align: left;
@@ -200,6 +204,20 @@ figure {
         &.right {
             text-align: right;
         }
+
+        .figcaption {
+            &__title {
+                font-weight: bold;
+            }
+
+            &__attr {
+                font-size: 0.7em;
+
+                svg {
+                    margin-right: 0.3em;
+                }
+            }
+        }
     }
 
     &.small {
diff --git a/themes/maik-blog/layouts/shortcodes/figure.html b/themes/maik-blog/layouts/shortcodes/figure.html
index 96e8a02..c67a91b 100644
--- a/themes/maik-blog/layouts/shortcodes/figure.html
+++ b/themes/maik-blog/layouts/shortcodes/figure.html
@@ -14,22 +14,32 @@
     {{- if .Get "link" }}</a>{{ end -}}
   {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
   <figcaption>
-    {{- if or (.Get "caption") (.Get "attr") -}}
-    {{- with (.Get "title") -}}
-    <h4>{{ . }}</h4>
+    {{- with .Get "title" -}}
+    <span class="figcaption__title">{{ . }}</span>
+    {{- end }}
+    {{- if and (.Get "title") (.Get "caption") }}
+    <span>{{" - "}}</span>
+    {{- end }}
+    {{- with .Get "caption" }}
+    <span class="figcaption__caption">
+      {{- . | markdownify -}}
+    </span>
     {{- end -}}
-    <p>
-      {{- .Get "caption" | markdownify -}}
+    {{- if .Get "attr" }}
+    {{- if or (.Get "title") (.Get "caption") }}
+    <span>{{" - "}}</span>
+    {{- end }}
+    <span class="figcaption__attr">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+        <circle cx="12" cy="7" r="4"></circle>
+      </svg>
       {{- with .Get "attrlink" }}
       <a href="{{ . }}">
-        {{- end -}}
-        {{- .Get "attr" | markdownify -}}
-        {{- if .Get "attrlink" }}</a>{{ end }}
-    </p>
-    {{- else -}}
-    {{- with (.Get "title") -}}
-    {{ . }}
-    {{- end -}}
+      {{- end -}}
+      {{- .Get "attr" | markdownify -}}
+      {{- if .Get "attrlink" }}</a>{{ end }}
+    </span>
     {{- end -}}
   </figcaption>
   {{- end }}