improved wide-cards layout

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%
 ---
 

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 {

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>