From d16d5a4b236f80c3b1f563a5f727d71b578049c5 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Wed, 12 Feb 2025 10:21:52 +0100
Subject: [PATCH] improved wide-cards layout

---
 content/pages/romane.md         |  9 +++++----
 theme/static/css/custom.css     | 29 +++++++++++++++++++++++++++--
 theme/templates/wide-cards.html | 13 ++++++-------
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/content/pages/romane.md b/content/pages/romane.md
index 2141090..d9491c1 100644
--- a/content/pages/romane.md
+++ b/content/pages/romane.md
@@ -1,5 +1,6 @@
 ---
 title: Romane
+summary: Fantasy, SF, Krimi, Kinder- und Jugendbuch, …
 author: Tobias Radloff
 lang: de
 category: Romane
@@ -11,18 +12,18 @@ featured_images:
   - pic: images/romane/amoralisch.jpg
     post: romane/amoralisch.html
     alt: Amoralisch
-    y_offset: -500px
+    y_offset: 50%
   - pic: images/romane/schwarzspeicher.jpg
     post: romane/schwarzspeicher
     alt: Schwarzspeicher
-    y_offset: -1140px
+    y_offset: 65%
   - pic: images/romane/satinavs-auge.jpg
     post: romane/satinavs-auge
     alt: Satinavs Auge
-    y_offset: -900px
+    y_offset: 8%
   - pic: images/romane/das-geheimnis-der-lady-luck.jpg
     post: romane/das-geheimnis-der-lady-luck
     alt: Das Geheimnis der Lady Luck
-    y_offset: -300px
+    y_offset: 55%
 ---
 
diff --git a/theme/static/css/custom.css b/theme/static/css/custom.css
index 92649e9..68e3dbf 100644
--- a/theme/static/css/custom.css
+++ b/theme/static/css/custom.css
@@ -275,6 +275,25 @@ a {
 
 /* settings for slide shows on wide cards */
 /* see https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ */
+.wcard {
+  display: flex;
+  flex-flow: row wrap;
+  column-gap: calc(var(--pico-nav-element-spacing-horizontal) * 2);
+
+  .wcard-gallery {
+    flex: 1 0 calc((100% - (2 * var(--pico-nav-element-spacing-horizontal))) * 0.618);
+    min-width: 300px;
+  }
+
+  .wcard-title {
+    flex: 1 0 calc((100% - (2 * var(--pico-nav-element-spacing-horizontal))) * 0.382);
+    min-width: 185px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .wcard-gallery {
   height: var(--card-height);
   position: relative;
@@ -296,13 +315,20 @@ a {
     list-style: none;
     height: var(--card-height);
     width: 100%;
-
     animation: image-slide 20s ease-in-out infinite;
     left: -100%;
     opacity: 0;
     z-index: 0;
 
+    a {
+      display: block;
+      position: absolute;
+      overflow-y: visible;
+      height: 100%;
+    }
+
     img {
+      bottom: 0%;
       width: 100%;
       position: relative;
     }
@@ -329,7 +355,6 @@ a {
   li.wcard-image:hover .wcard-tooltip {
     opacity: 1;
   }
-
 }
 
 @keyframes image-slide {
diff --git a/theme/templates/wide-cards.html b/theme/templates/wide-cards.html
index fc5ae0b..d491547 100644
--- a/theme/templates/wide-cards.html
+++ b/theme/templates/wide-cards.html
@@ -1,19 +1,19 @@
 {% extends "page.html" %}
 
 {% block content_body %}
-{# build list of pages where the slugs correspond to an entries in page.wide_cards; some hackiness required to keep the
+{# build list of pages where the slugs correspond to an entry in page.wide_cards; some hackiness required to keep the
 original order #}
 {% set wcards = [] %}
 {% for wide_card in page.wide_cards %}
 {% do wcards.append(pages | selectattr("slug", "==", wide_card) | list | first) if pages | selectattr("slug", "==",
 wide_card) | list | first is defined %}
 {% endfor %}
-{# now we can finally iterate over the pages listed in page.wide_cards #}
+{# now we can finally iterate over the corcect pages #}
 {% for wcard in wcards %}
 <article class="wcard">
-  <header>
-    <h3><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h3>
-  </header>
+  <div class="wcard-title">
+    <h2><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h2>
+  </div>
   <div class="wcard-gallery">
     {% if wcard.featured_images is defined %}
     <div class="wcard-gallery-mask">
@@ -21,8 +21,7 @@ wide_card) | list | first is defined %}
         {% for image in wcard.featured_images %}
         <li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s">
           <a href="{{ SITEURL }}/{{ image.post }}">
-            <img src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {% if image.y_offset is defined %}
-              style="top: {{ image.y_offset }};" {% endif %} />
+            <img src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {% if image.y_offset is defined %}style="bottom: {{ image.y_offset }};" {% endif %} />
           </a>
           <div class="wcard-tooltip">
             <p>{{ image.alt }}</p>