diff --git a/sass/_utils.scss b/sass/_utils.scss index 47e564db10c571eb2f67f52ac159543249d25edd..83de247db3300cf257388977c34a458080457318 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -5,7 +5,7 @@ .caption { position: absolute; - width: 100%; + max-width: 100%; opacity: 75%; padding: 4px 4px 4px 4px; bottom: 0; @@ -20,6 +20,7 @@ display: block; margin: 0 0 0 0!important; padding-top: 3px; + padding-bottom: 3px; position: relative; width: 100%; text-overflow: ellipsis; diff --git a/templates/blog/card.html b/templates/blog/card.html index a23afb798621b6f19171c5441c658ad698578173..eebd8b6c8228c3ffb58df6002b6d2633815b3716 100644 --- a/templates/blog/card.html +++ b/templates/blog/card.html @@ -5,7 +5,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>{{ 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 }}</figcaption> + </div> {% endif %} </figure> </a> diff --git a/templates/shortcodes/further.html b/templates/shortcodes/further.html index 475c9b0b1a71ef0714d6b90f6673cfbfce911b38..f7e186ea792dfb77652ae0e7c0aff30b265b35f6 100644 --- a/templates/shortcodes/further.html +++ b/templates/shortcodes/further.html @@ -10,7 +10,9 @@ {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ further.image, width=800, height=600) -%} <img src="{{image.url}}" alt="{{further.alt}}" /> {% if further.image.credits %} - <figcaption>{{ further.image.credits }}</figcaption> + <div class="caption"> + <figcaption class="tag has-text-white has-background-black is-size-7 is-italic m-1">{{ further.image.credits }}</figcaption> + </div> {% endif %} </figure> </a>