wide cards in odd/even rows are now displayed differently

content/pages/kurzprosa.md

@@ -1,11 +1,16 @@
 ---
 title: Kurzprosa 
 author: Tobias Radloff
-summary: Meine Kurzgeschichten und Erzählungen
+summary: Kurzgeschichten und Erzählungen
 lang: de
 category: Kurzprosa
 template: cards
 card_selector_key: category
 save_as: kurzprosa/index.html
 url: kurzprosa/
+featured_images:
+  - pic: images/kurzprosa/blinde-flecken.jpg
+    post: kurzprosa/blinde-flecken.html
+    alt: Blinde Flecken
+    y_offset: 65%
 ---

theme/static/css/custom.css

@@ -277,7 +277,7 @@ a {
 /* see https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ */
 .wcard {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: wrap;
   column-gap: calc(var(--pico-nav-element-spacing-horizontal) * 2);
 
   .wcard-gallery {
@@ -318,7 +318,6 @@ a {
     animation: image-slide 20s ease-in-out infinite;
     left: -100%;
     opacity: 0;
-    z-index: 0;
 
     a {
       display: block;
@@ -363,20 +362,17 @@ a {
   31% {
     left: -100%;
     opacity: 0;
-    z-index: 0;
   }
 
   5%,
   25% {
     left: 0px;
     opacity: 1;
-    z-index: 1;
   }
 
   30% {
     left: 100%;
     opacity: 0;
-    z-index: 0;
   }
 }
 

theme/templates/wide-cards.html

@@ -8,20 +8,20 @@ original order #}
 {% 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 corcect pages #}
-{% for wcard in wcards %}
-<article class="wcard">
+{# now we can finally iterate over the correct pages (max. 4 pages) #}
+{% for wcard in wcards[:4] %}
+<article class="wcard" style="flex-direction: {{ loop.cycle('row', 'row-reverse') }};">
   <div class="wcard-title">
-    <h2><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h2>
+    <h2><a href="{{ SITEURL }}/{{ wcard.title|lower }}/" title="{{ wcard.summary | striptags }}"> {{- wcard.title }}</a></h2>
   </div>
   <div class="wcard-gallery">
     {% if wcard.featured_images is defined %}
     <div class="wcard-gallery-mask">
       <ul>
         {% for image in wcard.featured_images %}
-        <li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s">
+        <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="bottom: {{ 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>