many improvements around templates regarding articles

theme/static/css/custom.css

@@ -218,7 +218,7 @@ a {
 }
 
 /* Main content */
-#main-header hgroup,
+#main-header h1,
 #site-footer p {
   background: var(--pico-card-sectioning-background-color);
   box-shadow: var(--pico-card-box-shadow);
@@ -247,7 +247,7 @@ a {
 }
 
 /* flexitem settings for single card */
-.article-header {
+.card-header {
   flex: 0 0 3.5lh;
   /* set card header to fixed height equivalent to two lines of text */
   margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
@@ -255,6 +255,7 @@ a {
 
   /* Use overflow on card heading if it's longer than two lines of text */
   h3 {
+    color: var(--pico-primary);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
@@ -265,7 +266,7 @@ a {
   }
 }
 
-.article-body {
+.card-body {
   text-align: center;
 
   img {
@@ -274,6 +275,47 @@ a {
 }
 
 
+/* settings for articles */
+.article-body {
+  overflow: hidden;
+
+  img {
+    height: var(--card-height);
+    max-width: 270px;
+    aspect-ratio: auto;
+  }
+
+  img.article-cover {
+    float: left;
+    padding-right: var(--pico-spacing);
+    padding-bottom: var(--pico-spacing);
+  }
+
+  img:not(.article-cover) {
+    float: right;
+    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 {
+  clear: both;
+}
+
+.article-footer {
+  clear: both;
+}
+
 /* settings for slide shows on wide cards */
 /* see https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ */
 .wcard {

theme/templates/article.html

@@ -12,9 +12,25 @@ article.title }}{% endif
 {% endblock content_header %}
 
 {% block content_body %}
-<article>{{ article.content }}</article>
+<article class="article-body">
+  {% if article.content | length is eq(0) %}
+  <div class="no-content">
+    {% endif %}
+    {% if article.titelbild is defined %}<a href="{{ article.titelbild }}" title="{{ article.title }} (Bild)">
+      <img class="article-cover" src="{{ article.titelbild }}" alt="{{ article.title }} (Bild)" />
+    </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>
+</article>
 {% endblock content_body %}
-
-{% block content_footer %}
-<footer>ISBN: Bla</footer>
-{% endblock content_footer %}

theme/templates/cards.html

@@ -7,10 +7,10 @@
   {% for article in articles if article[page.card_selector_key] == selector_value %}{% do article_list.append(article) %}{% endfor %}
   {% for article in article_list | sort(attribute="order") %}
   <article class="card">
-    <header class="article-header">
+    <header class="card-header">
       <h3><a href="{{ SITEURL }}/{{ article.save_as }}" title="{{ article.title }}">{{ article.title }}</a></h3>
     </header>
-    <div class="article-body">
+    <div class="card-body">
       {% if article.titelbild %}
       <a href="{{ SITEURL }}/{{ article.save_as }}" title="{{ article.title }}"><img alt='Titelbild zu "{{ article.title }}"' src="{{ SITEURL }}/{{ article.titelbild }}" /></a>
       {% endif %}

theme/templates/page.html

@@ -5,10 +5,7 @@
 
 {% block content_header %}
 <header id="main-header">
-  <hgroup>
   <h1>{{ page.title }}</h1>
-    <p>{{ page.summary }}</p>
-  </hgroup>
 </header>
 {% endblock content_header %}