diff --git a/sass/_utils.scss b/sass/_utils.scss index e014bd9800fb348928b3563a1760f0ad096e5ca4..d7d28d8b94120bdc472c1b85d271ef98cbdd4f2b 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -2,3 +2,10 @@ width: 70%; height: 70%; } + +.card > .card-image figure.image > figcaption { + position: absolute; + bottom: 0; + width: 100%; + opacity: 75%; +} diff --git a/templates/blog/card.html b/templates/blog/card.html index a23afb798621b6f19171c5441c658ad698578173..1f482b3b6418491976a6e816b3fa177c64544ce8 100644 --- a/templates/blog/card.html +++ b/templates/blog/card.html @@ -5,7 +5,7 @@ {% 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> + <figcaption class="-1 has-text-white has-background-black is-size-7 is-italic">{{ post.extra.depiction.credits }}</figcaption> {% endif %} </figure> </a> diff --git a/templates/blog/post.html b/templates/blog/post.html index 243e6b9259cc5c1f40b3702ded881cbbf703ffd7..02943f819ad0c5a9f0a6ca74da3b96cfaf211b5a 100644 --- a/templates/blog/post.html +++ b/templates/blog/post.html @@ -13,9 +13,9 @@ <div class="card-image"> <figure class="image is-4by3"> {% 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 }}" /> + <img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" /> {% if post.extra.depiction.credits %} - <figcaption>{{ post.extra.depiction.credits }}</figcaption> + <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ post.extra.depiction.credits }}</figcaption> {% endif %} </figure> </div> diff --git a/templates/shortcodes/further.html b/templates/shortcodes/further.html index 475c9b0b1a71ef0714d6b90f6673cfbfce911b38..238c8863a75fbeb732528fbc476a784ba16486d5 100644 --- a/templates/shortcodes/further.html +++ b/templates/shortcodes/further.html @@ -10,7 +10,7 @@ {% 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> + <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ further.image.credits }}</figcaption> {% endif %} </figure> </a>