Merge branch 'make_figcaption_visible' into 'master'

Make figcaption visible

See merge request !37

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%;
+}

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>

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>

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>