From 6f30a9c9883aae4ed1cf134ba6f85af46574d12e Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Mon, 18 Mar 2024 17:29:50 +0100
Subject: [PATCH] Fix too long texts overflowing source information
The overflowing content will be visible on hover
---
sass/_utils.scss | 17 +++++++++++++++++
templates/blog/post.html | 4 +++-
2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 0886b735..496758d8 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -5,6 +5,23 @@
.caption {
position: absolute;
+ width: 100%;
opacity: 75%;
+ padding: 4px 4px 4px 4px;
bottom: 0;
}
+
+.caption:hover>figcaption {
+ height: 100%;
+ text-wrap: wrap;
+}
+
+.caption>figcaption {
+ display: block;
+ margin: 0 0 0 0!important;
+ padding-top: 3px;
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ text-wrap: wrap;
+}
diff --git a/templates/blog/post.html b/templates/blog/post.html
index 025ef3eb..67132000 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -15,7 +15,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 class="tag has-text-white has-background-black is-size-7 is-italic m-1 caption">{{ 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 }} aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbb</figcaption>
+ </div>
{% endif %}
</figure>
</div>
--
GitLab