introduce overlapping author images

templates/blog/author_media.html

+<div class="columns">
+  <div class="column">
 {% set authors_data = load_data(path="authors.json") -%}
 {% for author in post.authors -%}
-<div class="media">
-  <div class="media-left">
-    <figure class="image is-48x48">
+    <figure class="image is-48x48 is-inline-block" style="margin-right:  -30px;">
       {% set meta = get_image_metadata(path="authors/" ~ author ~ ".jpg", allow_missing=true) -%}
       {% if meta -%}
         {% set image = resize_image(path="authors/" ~ author ~ ".jpg", width=48, height=48) -%}
@@ -14,11 +14,13 @@
         </span>
       {% endif -%}
     </figure>
+{% endfor %}
   </div>
-  <div class="media-content">
-    <p class="title is-4">
+  <ul class="column is-three-fifths">
+{% for author in post.authors -%}
+    <li class="title is-5 is-inline mr-3">
       {{ authors_data[author].display_name }}
-    </p>
-  </div>
-</div>
+    </li>
 {% endfor %}
+  </ul>
+</div>

templates/blog/card.html

@@ -18,7 +18,7 @@
               </div>
               <div class="card-footer">
                 <div class="card-footer-item">
-                  <div class="">
+                  <div class="is-fullwidth">
                     {% include "blog/author_media.html" -%}
                   </div>
                 </div>