revamped display of single article

content/posts/romane/satinavs-auge.md

@@ -2,15 +2,22 @@
 title: Satinavs Auge
 date: 2007
 category: Romane
-tags: Fantasy
+tags: 
+  - Fantasy
+  - Das Schwarze Auge
 author: Tobias Radloff
 reihe: Das Schwarze Auge
-summary: Mantel, Degen und Magie
+verlag: Fantasy Productions
+isbn: 978-3-89064-495-0
+summary: Ein spannender Mantel-und-Degen-Roman aus der Welt des Schwarzen Auges
 lang: de
-titelbild: ../images/romane/cover-satinavs-auge.jpg
+featured_image: ../images/romane/cover-satinavs-auge.jpg
 order: 30
 klappentext: |
   Jedes Kind im Horasreich träumt davon, zur Palastgarde zu gehören und mit seinem Degen das Leben der Kaiserin von Vinsalt zu beschützen. Für Silvanessa, eine junge, ungestüme Fechterin, steht der Traum kurz vor der Erfüllung. Doch dann wird ihr Bruder vor ihren Augen ermordet. Gemeinsam mit Anconio, dem ungeschicktesten Magieschüler der Stadt, heftet Silvanessa sich dem Mörder an die Fersen. Die Jagd führt vom Kaiserpalast bis ins Armenviertel Alt-Bosparan und hoch über die Dächer hinaus. Bald schweben die beiden in höchster Gefahr – und mit ihnen eine ganze Stadt. Können sie das Geheimnis von Satinavs Auge ergründen, ehe ihre Zeit abgelaufen ist?
 ---
 
-Dieses Buch markiert das bislang einzige Mal, dass ich auf einer Lesung eine Sexszene vorgetragen habe. Das soll nicht heißen, dass die Auswahl ein Fehler war. Aber gezittert haben meine Hände hinterher trotzdem.
+Im Jahr 2008 war ich mit "Satinavs Auge" für den Deutschen Phantastik-Preis in der Kategorie "Bester Roman" nominiert. 
+
+Außerdem stand dieses Buch im Mittelpunkt der einzigen Gelegenheit, bei der ich je auf einer Lesung eine Sexszene vorgetragen habe. Ich will damit nicht sagen, dass die Szene ein Fehler war – im Gegenteil, die Szene ist mir ziemlich gut gelungen. Aber gezittert haben meine Hände trotzdem.
+

theme/static/css/custom.css

@@ -307,40 +307,43 @@ a {
 /* settings for articles */
 .article-body {
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+
+  h2 {
+    --pico-font-size: 1.25rem;
+  }
+  
+  .klappentext {
+    flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
+    min-width: 350px;
+  }
+
+  .featured-image {
+    flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
+    margin-bottom: var(--pico-block-spacing-vertical);
+  }
 
   img {
-    height: var(--card-height);
+    max-height: calc(var(--card-height) * 2);
-    max-width: 270px;
+    min-width: 350px;
+    max-width: 100%;
     aspect-ratio: auto;
+    padding: var(--pico-spacing); 
+    display: block;
+    margin: auto;
   }
 
-  img.article-cover {
+  .article-stats {
-    float: left;
+    padding-left: 0;
-    padding-right: var(--pico-spacing);
-    padding-bottom: var(--pico-spacing);
-  }
   
-  img:not(.article-cover) {
+    li {
-    float: right;
+      list-style: none;
-    padding-left: var(--pico-spacing);
+    }
-    padding-bottom: var(--pico-spacing);
-  }
-
-  .no-content {
-    display: flex;
-    justify-content: center;
   }
 }
 
-.article-content {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.klappentext,
-.article-footer {
-  clear: both;
-}
 
 /* settings for slide shows on wide cards */
 /* see https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ */
@@ -459,7 +462,7 @@ img.impr {
 
   a {
     color: var(--pico-text-color);
-    font-weight: bold;
+    font-style: italic;
   }
 }
 

theme/templates/article.html

@@ -1,9 +1,16 @@
 {% extends "base.html" %} 
-{% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}
-{% block metadesc %}{% if article.summary %}{{ article.summary|e }}{% else %}An Article in {{ SITETAG }}: {{
-article.title }}{% endif
-%}{% endblock %}
 
+{% block title %}
+{{ article.title }} - {{ SITENAME }}
+{% endblock %}
+
+{% block metadesc %}
+{% if article.summary %}
+{{ article.summary|e }}
+{% else %}
+An Article in {{ SITETAG }}: {{ article.title }}
+{% endif %}
+{% endblock %} 
 
 {% block content_header %}
 <header id="main-header">
@@ -13,24 +20,45 @@ article.title }}{% endif
 
 {% block content_body %}
 <div class="article-body">
-  {% if article.content | length is eq(0) %}
+  {% if article.featured_image is defined %}
-  <div class="no-content">
+  <div class="featured-image">
-    {% endif %}
+    <a href="{{ article.featured_image }}" title="{{ article.title }} (Bild)">
-    {% if article.titelbild is defined %}<a href="{{ article.titelbild }}" title="{{ article.title }} (Bild)">
+      <img src="{{ article.featured_image }}" alt="{{ article.title }} (Bild)" />
-      <img class="article-cover" src="{{ article.titelbild }}" alt="{{ article.title }} (Bild)" />
+    </a>
-    </a>{% endif %}
-    {% if article.content | length is not eq(0) %}<div class="article-content">
-      {{ article.content }}
-    </div>{% endif %}
-    {% if article.klappentext is defined %}
-    <details class="klappentext">
-      <summary role="button" class="contrast outline">Klappentext</summary>
-      {{ article.klappentext }}
-    </details>
-    {% endif %}
-    {% if article.content | length is eq(0) %}
   </div>
   {% endif %} 
-  <footer class="article-footer"><a href="/{{ article.save_as.split('/')[:-1] | join('/') }}/">&#8592; {{ article.category }}</a></footer>
+  {% if article.klappentext is defined %}
+  <div class="klappentext">
+    <blockquote>
+      <h2>Klappentext</h2>
+      <p>{{ article.klappentext }}</p>
+    </blockquote>
+  </div>
+  {% endif %}  
+  {% if article.content | length is not eq(0) %}
+  <div>{{ article.content }}</div>
+  {% endif %}
+  <div>
+    <hr>
+    <h2>Details</h2>
+    <ul class="article-stats">
+    {% if article.reihe is defined %}
+      <li>aus der Reihe {{ article.reihe }}</li>
+    {% endif %}
+    {% if article.tags is defined %}
+      <li>Schlagworte: {% for tag in article.tags %}<a href="/tag/{{ tag }}">{{ tag }}</a>, {% endfor %}</li>
+    {% endif %}
+    {% if article.isbn is defined %}
+      <li>ISBN: {{ article.isbn }}</li>
+    {% endif %}
+    {% if article.verlag is defined %}
+      <li>erschienen bei: {{ article.verlag }}</li>
+    {% endif %}
+    </ul>
+  </div>
 </div>
+<hr>
+<footer class="article-footer">
+  <a href="/{{ article.save_as.split('/')[:-1] | join('/') }}/">&#8592; {{ article.category }}</a>
+</footer>
 {% endblock content_body %}