From b81aa67228a59a1d2d2ec63c1968258e71b37a12 Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Mon, 18 Mar 2024 16:50:15 +0100
Subject: [PATCH] add transparent source overlay not impacting image aspect
ratio
---
sass/_utils.scss | 10 +++-------
templates/blog/post.html | 8 ++------
2 files changed, 5 insertions(+), 13 deletions(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index f0455fc1..0886b735 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -4,11 +4,7 @@
}
.caption {
- display: flex;
- justify-content: center;
- padding: 4px 10px 4px 10px;
-}
-
-.tag.caption {
- width: 100%;
+ position: absolute;
+ opacity: 75%;
+ bottom: 0;
}
diff --git a/templates/blog/post.html b/templates/blog/post.html
index e4c673bb..025ef3eb 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -11,15 +11,11 @@
<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
- <figure>
+ <figure class="image is-4by3">
{% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%}
- <div class="image is-4by3">
<img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" />
- </div>
{% if post.extra.depiction.credits %}
- <div class="caption">
- <figcaption class="tag is-rounded caption">{{ post.extra.depiction.credits }}</figcaption>
- </div>
+ <figcaption class="tag has-text-white has-background-black is-size-7 is-italic m-1 caption">{{ post.extra.depiction.credits }}</figcaption>
{% endif %}
</figure>
</div>
--
GitLab