From c5433532e8f76abe5a82b6a6eeebd116c32b5d10 Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Mon, 18 Mar 2024 17:58:41 +0100
Subject: [PATCH] Apply changes in all figcaption utilizing templates
---
sass/_utils.scss | 3 ++-
templates/blog/card.html | 4 +++-
templates/shortcodes/further.html | 4 +++-
3 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 47e564db..83de247d 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -5,7 +5,7 @@
.caption {
position: absolute;
- width: 100%;
+ max-width: 100%;
opacity: 75%;
padding: 4px 4px 4px 4px;
bottom: 0;
@@ -20,6 +20,7 @@
display: block;
margin: 0 0 0 0!important;
padding-top: 3px;
+ padding-bottom: 3px;
position: relative;
width: 100%;
text-overflow: ellipsis;
diff --git a/templates/blog/card.html b/templates/blog/card.html
index a23afb79..eebd8b6c 100644
--- a/templates/blog/card.html
+++ b/templates/blog/card.html
@@ -5,7 +5,9 @@
{% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%}
<img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" />
{% if post.extra.depiction.credits %}
- <figcaption>{{ post.extra.depiction.credits }}</figcaption>
+ <div class="caption">
+ <figcaption class="tag has-text-white has-background-black is-size-7 is-italic m-1">{{ post.extra.depiction.credits }}</figcaption>
+ </div>
{% endif %}
</figure>
</a>
diff --git a/templates/shortcodes/further.html b/templates/shortcodes/further.html
index 475c9b0b..f7e186ea 100644
--- a/templates/shortcodes/further.html
+++ b/templates/shortcodes/further.html
@@ -10,7 +10,9 @@
{% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ further.image, width=800, height=600) -%}
<img src="{{image.url}}" alt="{{further.alt}}" />
{% if further.image.credits %}
- <figcaption>{{ further.image.credits }}</figcaption>
+ <div class="caption">
+ <figcaption class="tag has-text-white has-background-black is-size-7 is-italic m-1">{{ further.image.credits }}</figcaption>
+ </div>
{% endif %}
</figure>
</a>
--
GitLab