diff --git a/sass/_utils.scss b/sass/_utils.scss index f0455fc13a9f609fca8a8d246b6b53c62a1ec2cc..0886b73516154743918d31bf9b0f54f22e820ecc 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 e4c673bb24e3e3c9c1c9c48f5e6cc51739934a2d..025ef3eb1916488ea7ef604e38cca8f86a090412 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>