major work on landing page

content/pages/index.md

@@ -0,0 +1,26 @@
+---
+title: Index
+date: 2025-02-25
+template: index
+elements:
+  - pic: images/kurzprosa/mockup-aw-phantastische-geschichten-2.png 
+    link: kurzprosa/andere-welten-phantastische-geschichten-2.html
+    text: Phantastik, Belletristik, Lyrik & mehr
+    more: meine Bücher
+    more_link: werke/
+  - pic: images/tr/live-microphone.jpg
+    credit: Annette Flemig (?)
+    link: termine/
+    text: Lesungen und Lesereihen  
+    more: Termine
+  - pic: images/news/news-coffee.jpg
+    link: neues/
+    text: Neuerscheinungen, Ankündigungen etc.
+    more: Neues 
+  - pic: images/tr/portrait-tr-cutout.png
+    link: ueber-mich/
+    text: "\"ich bin Autor / und ich heiß' Tobias Radloff / untenrum Cargohosen / obenrum 'nen Kahlkopf\""
+    more: über mich
+---
+
+

theme/static/css/custom.css

@@ -247,6 +247,37 @@ a {
   text-align: center;
 }
 
+
+/* Index page */
+
+.index {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+  row-gap: 1rem;
+  margin-bottom: 3lh;
+
+  img {
+    flex: 0 0 auto;
+    max-height: calc(var(--card-height) * 2);
+    aspect-ratio: auto;
+  }
+
+  p {
+    flex: 0 1 350px;
+    font-size: 2em;
+  }
+}
+
+.index-link { 
+  font-size: 1rem;
+}
+
+.index-link::after {
+  content: "\00a0\02192";
+}
+
 /* grid settings for event list */
 .events {}
 

theme/templates/index.html

@@ -1,7 +1,25 @@
-{% extends "base.html" %}
+{% extends "base.html" %} 
 
 {% block content_body %}
-<article>
+{% for p in pages %}
+{% if p.title == "Index" %}
+{% set lr = cycler("row", "row-reverse") %}
+{% if p.featured is defined %}
+<div class="index-featured">
+</div>
+{% endif %}
+{% for e in p.elements %}
+<div class="index" style="flex-direction: {{ lr.next() }};">
+  <figure>
+    <a href="{{ e.link }}" alt="{{ e.text }}"><img src="{{ e.pic }}" /></a>
+    {% if e.credit is defined %}<figcaption>Bild: {{ e.credit }}</figcaption>{% endif %}
+  </figure>
+  <p>{{ e.text }}<br>
+    <span class="index-link"><a href="{% if e.more_link is defined %}{{ e.more_link }}{% else %}{{ e.link }}{% endif %}">{{ e.more }}</a></span>
+  </p>
+</div>
+{% endfor %}
 
-</article>
+{% endif %}
-{% endblock content_body %}
+{% endfor %}
+{% endblock content_body %}