[WIP] Restyle blog post page

content/blog/2024/03/2024-03-13_glt-2024/index.md

 +++
 title = "Einladung zu den Grazer Linux-Tagen 2024"
-authors = ["Nik"]
+authors = ["nik"]
 
 [taxonomies]
 categories = ["AAA"]

templates/blog/post.html

 {% extends "page.html" %}
 
 {% block content %}
-  <div class="content">
-    <img src="{{ page.extra.depiction.image | safe }}" alt="{{ page.extra.depiction.alt }}" />
-    {{ page.content }}
+  <div class="columns">
+    <div class="column is-three-quarters">
+      <div class="content">
+        {{ page.content | safe }}
+      </div>
+    </div>
+    <div class="column is-one-quarter">
+      <div class="card">
+        <div class="card-image">
+          <figure class="image is-4by3">
+            {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ page.extra.depiction.image, width=800, height=600) -%}
+            <img src="{{ image.url }}" alt="{{ page.extra.depiction.alt }}" />
+            {% if page.extra.depiction.credits %}
+              <figcaption>{{ page.extra.depiction.credits }}</figcaption>
+            {% endif %}
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="media">
+            <div class="media-left">
+              <figure class="image is-48x48">
+                {% set image = resize_image(path="authors/" ~ page.authors.0 ~ ".jpg", width=48, height=48) -%}
+                <img class="is-rounded" src="{{ image.url }}" alt="Benutzerbild von {{ page.authors.0 }}" />
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">{{ page.authors.0 }}</p>
+              <p class="subtitle is-6">{{ page.authors.0 }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
   </div>
 {% endblock %}