diff --git a/sass/_utils.scss b/sass/_utils.scss index 62b66952ff8e8d983ffbf2c0ddcc813f50f86c8b..e9ae153f8211e2cdef26cc9063c63a1316f530de 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 0ac821c46d63ff39e24ab4c89a0abe98b3800b2f..df132594f53689f7a3c0b3281ddf2491fc1b94dd 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 f8bfc49a60d81b713191291a7d31950ca88f7d55..fca0916863779f1354b08ad59d3d3e43ab800148 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>