From 67a91b94b07e83976a1e04f9a4d0649fe166f79d Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Wed, 3 Apr 2024 23:14:41 +0200
Subject: [PATCH] Replace inline styles with custom css
---
sass/_utils.scss | 10 ++++++++++
templates/blog/author_media.html | 10 ++++------
2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 1c27b415..62b66952 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -17,3 +17,13 @@ figure.image > figcaption {
.is-fullheight {
height: 100%
}
+
+.is-text-nowrap {
+ text-wrap: nowrap !important;
+}
+
+.author-images>figure {
+ margin-right: -1 * 20%;
+ // border: 1px solid white;
+ // border-radius: 100%;
+}
diff --git a/templates/blog/author_media.html b/templates/blog/author_media.html
index 194feb9c..0ac821c4 100644
--- a/templates/blog/author_media.html
+++ b/templates/blog/author_media.html
@@ -1,8 +1,8 @@
-<div class="columns">
- <div class="column is-two-fifths">
+<div class="columns is-vcentered">
+ <div class="column is-two-fifths author-images">
{% set authors_data = load_data(path="authors.json") -%}
{% for author in post.authors -%}
- <figure class="image is-48x48 is-inline-block" style="margin-right: -30px;">
+ <figure class="image is-48x48 is-inline-block">
{% set meta = get_image_metadata(path="authors/" ~ author ~ ".jpg", allow_missing=true) -%}
{% if meta -%}
{% set image = resize_image(path="authors/" ~ author ~ ".jpg", width=48, height=48) -%}
@@ -19,9 +19,7 @@
<ul class="column is-three-fifths">
<div class="title is-5">
{% for author in post.authors -%}
- <p class="is-inline">
- {{ authors_data[author].display_name }}{% if not loop.last %},{% endif %}
- </p>
+ <span class="is-text-nowrap">{{ authors_data[author].display_name }}</span>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
</ul>
--
GitLab