From 4441d41750c15c9f59d5090fb657f83df7628fe9 Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Thu, 4 Apr 2024 21:17:09 +0200
Subject: [PATCH] align footer at bottom of card
---
sass/_utils.scss | 16 +++++++++++++---
templates/blog/author_media.html | 2 +-
templates/blog/card.html | 22 +++++++++++-----------
3 files changed, 25 insertions(+), 15 deletions(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 62b66952..e9ae153f 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -23,7 +23,17 @@ figure.image > figcaption {
}
.author-images>figure {
- margin-right: -1 * 20%;
- // border: 1px solid white;
- // border-radius: 100%;
+ // FIXME: Use percentages, reason not yet fixed: responsiveness broken
+ // margin-right: -1 * 20%;
+ margin-right: -30px;
+}
+.blog-card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content:space-between;
+ gap: 0;
+}
+.blog-card>.card-content {
+ height: 100%;
}
diff --git a/templates/blog/author_media.html b/templates/blog/author_media.html
index 0ac821c4..df132594 100644
--- a/templates/blog/author_media.html
+++ b/templates/blog/author_media.html
@@ -8,7 +8,7 @@
{% set image = resize_image(path="authors/" ~ author ~ ".jpg", width=48, height=48) -%}
<img class="is-rounded" src="{{ image.url }}" alt="Benutzerbild von {{ authors_data[post.authors.0].display_name }}" />
{% else -%}
- <span class="fa-stack fa-lg">
+ <span class="fa-stack fa-lg is-block">
<i class="fa-solid fa-circle fa-stack-2x"></i>
<i class="fa-solid fa-{{ author | truncate(length=1, end="") | lower() }} fa-stack-1x fa-inverse"></i>
</span>
diff --git a/templates/blog/card.html b/templates/blog/card.html
index f8bfc49a..fca09168 100644
--- a/templates/blog/card.html
+++ b/templates/blog/card.html
@@ -1,4 +1,4 @@
- <div class="card">
+ <div class="card blog-card">
<div class="card-image">
<a href="{{ post.permalink }}">
<figure class="image is-4by3">
@@ -11,16 +11,16 @@
</a>
</div>
<div class="card-content">
- <a href="{{ post.permalink }}"><h3 class="title is-4">{{ post.title }}</h3></a>
- <div class="content">
- {% include "blog/meta_line.html" -%}
- {{ post.summary | safe }}
- </div>
- <div class="card-footer">
- <div class="card-footer-item">
- <div class="is-fullwidth">
- {% include "blog/author_media.html" -%}
- </div>
+ <a href="{{ post.permalink }}"><h3 class="title is-4">{{ post.title }}</h3></a>
+ <div class="content">
+ {% include "blog/meta_line.html" -%}
+ {{ post.summary | safe }}
+ </div>
+ </div>
+ <div class="card-footer blog-card-authors">
+ <div class="card-footer-item">
+ <div class="is-fullwidth">
+ {% include "blog/author_media.html" -%}
</div>
</div>
</div>
--
GitLab