revamped page layout; added new pictures; lots of small work on parameter names, image credits etc

content/pages/error.md

@@ -9,7 +9,8 @@ save_as: error.html
 featured_image: 
   - pic: ../images/motif-error.jpg
     alt: eine Frau vor einem Laptop stützt geknickt den Kopf in die Hände
-    credit: Elisa Ventur on Unsplash.com 
+    credit: Elisa Ventur | unsplash.com
+    credit_link: https://unsplash.com/@elisa_ventur
 ---
 
 Verflixt, es ist ein Fehler bei der Newsletter-Verwaltung aufgetreten. Vielleicht hilft dir die Fehlermeldung weiter? 

content/pages/index.md

@@ -5,21 +5,18 @@ template: index
 index_cards:
   - pic: images/kurzprosa/mockup-aw-phantastische-geschichten-2.png 
     link: werke/
-    text: Phantastik, Belletristik, Lyrik & mehr
-    more: Bücher
-  - pic: images/tr/live-microphone.jpg
-    credit: Annette Flemig (?)
+    alt: Phantastik, Belletristik, Lyrik & mehr
+  - pic: images/tr/live-microphone-2.jpg
+    credit: Matthew Jungling | unsplash.com
+    credit_link: https://unsplash.com/@matthewjungling
     link: termine/
-    text: Lesungen und Lesereihen  
-    more: Termine
+    alt: Lesungen und Lesereihen  
   - pic: images/news/news-coffee.jpg
     link: neues/
-    text: Neuerscheinungen, Ankündigungen etc.
-    more: Neues 
+    alt: Neuerscheinungen, Ankündigungen etc.
   - pic: images/tr/portrait-tr-cutout.png
     link: ueber-mich/
-    text: "\"ich bin Schriftsteller / und heiß' Tobias Radloff / untenrum Cargohosen / obenrum 'nen Kahlkopf\""
-    more: über mich
+    alt: "\"ich bin Schriftsteller / und heiß' Tobias Radloff / untenrum Cargohosen / obenrum 'nen Kahlkopf\""
 ---
 
 

content/pages/kurzprosa.md

@@ -8,19 +8,19 @@ template: cards
 card_selector_key: category
 card_images:
   - pic: images/kurzprosa/cover-the-blue-nib-39.jpg
-    post: kurzprosa/person-of-the-year.html
+    link: kurzprosa/person-of-the-year.html
     alt: Person of the Year
     y_offset: 85%
   - pic: images/kurzprosa/cover-blinde-flecken-ct.jpg
-    post: kurzprosa/blinde-flecken.html
+    link: kurzprosa/blinde-flecken.html
     alt: Blinde Flecken
     y_offset: 65%
   - pic: images/kurzprosa/cover-neolith-9-namenlos.jpg
-    post: kurzprosa/die-unsichtbare-katze.html
+    link: kurzprosa/die-unsichtbare-katze.html
     alt: Die unsichtbare Katze
     y_offset: 50%
   - pic: images/kurzprosa/cover-aw-phantastische-geschichten-1.jpg
-    post: kurzprosa/aw-phantastische-geschichten-1.html
+    link: kurzprosa/aw-phantastische-geschichten-1.html
     alt: "Andere Welten: Phantastische Geschichten, Ausgabe 1"
     y_offset: 20%
 ---

content/pages/lyrik.md

@@ -12,19 +12,19 @@ card_selector_key: category
 card_selector_value: Lyrik
 card_images:
   - pic: images/lyrik/cover-haunted-are-these-houses.jpg
-    post: lyrik/haunted-are-these-houses.html
+    link: lyrik/haunted-are-these-houses.html
     alt: Haunted are these Houses
     y_offset: 30%
   - pic: images/lyrik/cover-the-bangor-literary-journal-issue-3.jpg
-    post: lyrik/the-bangor-literary-journal.html
+    link: lyrik/the-bangor-literary-journal.html
     alt: The Bangor Literary Journal
     y_offset: 0%
   - pic: images/lyrik/cover-slam-poetry-aus-brandenburg.jpg
-    post: lyrik/slam-poetry-aus-brandenburg.html
+    link: lyrik/slam-poetry-aus-brandenburg.html
     alt: Resonance
     y_offset: 0%
   - pic: images/lyrik/motif-turning.jpg
-    post: lyrik/turning.html
+    link: lyrik/turning.html
     alt: Turning
     y_offset: 20%
 ---

content/pages/romane.md

@@ -8,19 +8,19 @@ template: cards
 card_selector_key: category
 card_images:
   - pic: images/romane/cover-amoralisch-divan.jpg
-    post: romane/amoralisch.html
+    link: romane/amoralisch.html
     alt: Amoralisch
     y_offset: 50%
   - pic: images/romane/cover-schwarzspeicher.jpg
-    post: romane/schwarzspeicher.html
+    link: romane/schwarzspeicher.html
     alt: Schwarzspeicher
     y_offset: 65%
   - pic: images/romane/cover-satinavs-auge.jpg
-    post: romane/satinavs-auge.html
+    link: romane/satinavs-auge.html
     alt: Satinavs Auge
     y_offset: 8%
   - pic: images/romane/cover-das-geheimnis-der-lady-luck.jpg
-    post: romane/das-geheimnis-der-lady-luck.html
+    link: romane/das-geheimnis-der-lady-luck.html
     alt: Das Geheimnis der Lady Luck
     y_offset: 55%
 ---

content/pages/sonstiges.md

@@ -11,19 +11,19 @@ save_as: sonstiges/index.html
 url: sonstiges/
 card_images:
   - pic: images/sonstiges/cover-klar-zum-entern.jpg
-    post: sonstiges/klar-zum-entern.html
+    link: sonstiges/klar-zum-entern.html
     alt: Klar zum Entern
     y_offset: 0%
   - pic: images/sonstiges/cover-cthulhu-mittelalter.jpg
-    post: sonstiges/rpg-spielhilfen.html
+    link: sonstiges/rpg-spielhilfen.html
     alt: "Cthulhu Mittelalter: Die dunklen Jahre"
     y_offset: 20%
   - pic: images/sonstiges/cover-myranische-meere.jpg
-    post: sonstiges/rpg-spielhilfen.html
+    link: sonstiges/rpg-spielhilfen.html
     alt: Myranische Meere
     y_offset: 0%
   - pic: images/sonstiges/cover-leicht-verdientes-gold.jpg
-    post: sonstiges/leicht-verdientes-gold.html
+    link: sonstiges/leicht-verdientes-gold.html
     alt: Leicht verdientes Gold
     y_offset: 0%  
 ---

content/pages/success.md

@@ -9,7 +9,8 @@ save_as: success.html
 featured_image: 
   - pic: ../images/motif-success.jpg
     alt: ein Mann sitzt auf einem Berggipfel über den Wolken und reckt die Faust in die Höhe
-    credit: Ian Stauffer on Unsplash.com 
+    credit: Ian Stauffer | unsplash.com 
+    credit_link: https://unsplash.com/@ianstauffer
 ---
 
 <script src="{static}/js/Message.js"></script>

content/pages/termine.md.metadata

@@ -7,3 +7,8 @@ category: Termine
 slug: termine
 url: termine/
 save_as: termine/index.html
+featured_image:
+  - pic: ../images/tr/motif-termine-towfiqu-barbhuiya-unsplash.jpg
+    alt: in einem Kalender stecken rote Reißzwecken und ein Tag ist rot eingekringelt
+    credit: Towfiqu barbhuiya | unsplash.com
+    credit_link: https://unsplash.com/@towfiqu999999 

theme/static/css/custom.css

@@ -282,7 +282,6 @@ a {
 /* Main content */
 #main-header h1,
 #site-footer p {
-  background: var(--pico-card-sectioning-background-color);
   box-shadow: var(--pico-card-box-shadow);
   padding: calc(var(--pico-block-spacing-horizontal) * 0.5) calc(var(--pico-block-spacing-vertical) * 0.5);
   text-align: center;
@@ -293,9 +292,19 @@ pre {
   min-width: var(--tr-smallest-width);
   margin-left: auto;
   margin-right: auto;
-  white-space: pre-wrap;
 }
 
+.featured-image {
+  text-align: center;
+}
+figcaption {
+  text-align: center;
+  font-size: 0.8em;
+
+  a { font-size: 0.85m;}
+}
+
+
 /* Index page */
 
 .index {
@@ -316,15 +325,12 @@ pre {
     flex: 0 1 var(--tr-smallest-width);
     font-size: 1.2rem;
   }
+
+  .index-link::after {
+    content: "\00a0\02192"; /* arrow to the right */
+  }
 }
 
-.index-link { 
-  font-size: 1rem;
-}
-
-.index-link::after {
-  content: "\00a0\02192";
-}
 
 /* event list */
 .event-info {
@@ -387,28 +393,36 @@ pre {
   overflow: hidden;
   display: flex;
   justify-content: space-between;
-  flex-flow: row wrap;
+  flex-flow: row wrap-reverse;
+
+  .body-column-text {
+    flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
+    min-width: var(--tr-smallest-width);
+    margin-bottom: var(--pico-block-spacing-vertical);
+  }
+
+  .body-column-img {
+    flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
+    min-width: var(--tr-smallest-width);
+    margin-bottom: var(--pico-block-spacing-vertical);
+    
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+  }
 
   h2 {
     --pico-font-size: 1.25rem;
   }
 
-  .klappentext, p {
-    flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
-    min-width: var(--tr-smallest-width);
-    margin-bottom: var(--pico-block-spacing-vertical);
-    
-    blockquote {
-      margin-top: 0px;
-      padding-top: 0px;
-      margin-bottom: 0px;
-      padding-bottom: 0px;
-    }
+  blockquote {
+    margin-top: 0px;
+    padding-top: 0px;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
   }
 
   .featured-image {
-    flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
-    margin-bottom: var(--pico-block-spacing-vertical);
   }
 
   img {
@@ -420,10 +434,6 @@ pre {
     margin: auto;
   }
 
-  figcaption {
-    text-align: center;
-  }
-
   .article-stats {
     padding-left: 0;
   

theme/templates/page.html

@@ -10,14 +10,17 @@
 {% endblock content_header %}
 
 {% block content_body %}
-<div id="page-body">
+<article id="page-body">
+  <div class="body-column-text">
+    {{ page.content }}
+  </div>
+  <div class="body-column-image">
   {% if page.featured_image is defined %}
     {% from 'includes/macros.html' import fi %}
     {% set i = page.featured_image[0] %}
     {{ fi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}
   {% endif %} 
-  
-  {{ page.content }}
+  </div>  
 </div>
 {% endblock content_body %}
 

theme/templates/termine.html

@@ -4,6 +4,12 @@
 {% set date_format = "%d.%m." %}
 {% set time_format = "%H:%M" %}
 {% block content_body %}
+  {% if page.featured_image is defined %}
+    {% from 'includes/macros.html' import fi %}
+    {% set i = page.featured_image[0] %}
+    {{ fi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}
+  {% endif %} 
+<article id="page-body">
   <table class="events">
     <thead>
       <tr>
@@ -24,6 +30,7 @@
       {% endfor %}
     </body>
   </table>
+</article>
 {% endblock content_body %}
 
 {% if page.written_at is defined %}