started work on wide-cards layout

content/pages/romane.md

@@ -1,9 +1,29 @@
-Title: Romane 
+---
-Author: Tobias Radloff
+title: Romane
-Summary: Übersicht über meine Romane
+author: Tobias Radloff
-Lang: de
+summary: Übersicht über meine Romane
-Category: Romane
+lang: de
-Template: cards
+category: Romane
-Card_selector_key: category
+template: cards
-Save_as: romane/index.html
+card_selector_key: category
-Url: romane/
+save_as: romane/index.html
+url: romane/
+featured_images:
+  - pic: images/romane/amoralisch.jpg
+    post: romane/amoralisch.html
+    alt: Amoralisch
+    y_offset: -500px
+  - pic: images/romane/schwarzspeicher.jpg
+    post: romane/schwarzspeicher
+    alt: Schwarzspeicher
+    y_offset: -1140px
+  - pic: images/romane/satinavs-auge.jpg
+    post: romane/satinavs-auge
+    alt: Satinavs Auge
+    y_offset: -900px
+  - 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
+---
+

content/pages/werke.md

@@ -1,15 +1,16 @@
-Title: Werke 
+---
-Date: 2025-02-04 10:20
+title: Werke 
-Author: Tobias Radloff
+date: 2025-02-04 10:20
-Summary: Übersicht über mein Werk bzw. meine Werke
+author: Tobias Radloff
-Save_as: werke/index.html
+summary: Übersicht über mein Werk bzw. meine Werke
-Url: werke/
+save_as: werke/index.html
-#Template: wide_cards
+url: werke/
-Lang: de
+template: wide-cards
-
+wide_cards: 
-Perspiciatis nam ipsam doloremque incidunt veritatis. Ducimus voluptatem eius odit eveniet voluptatibus. Laborum et quia vero necessitatibus sequi.
+  - romane
-
+  - kurzprosa
-Et vero nihil eum vel alias. Nesciunt qui repudiandae quia qui sint non. Repudiandae facilis eos inventore nisi deserunt maxime distinctio nihil. Iusto autem eveniet in fugit voluptatem. Nemo ut quo quisquam. Ducimus et et est qui aperiam ex.
+  - lyrik
-
+  - in-english
-Quibusdam omnis tempore voluptas possimus est nesciunt occaecati est. Voluptatum dignissimos excepturi et ab tempore amet. Quia necessitatibus dolor vero voluptatibus et eum. Ut vel dolor laboriosam incidunt dolorem nisi error. Delectus at expedita eaque architecto. Expedita quae reprehenderit quisquam hic ut exercitationem.
+lang: de
+---
 

theme/static/css/custom.css

@@ -285,6 +285,92 @@ a {
   }
 }
 
+
+/* settings for slide shows on wide cards */
+/* see https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ */
+.wcard-gallery {
+  height: 270px;
+  position: relative;
+  overflow: visible;
+
+  .wcard-gallery-mask {
+    height: 270px;
+    overflow: hidden;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  li.wcard-image {
+    position: absolute;
+    list-style: none;
+    height: 270px;
+    width: 100%;
+
+    animation: image-slide 20s ease-in-out infinite;
+    left: -100%;
+    opacity: 0;
+    z-index: 0;
+
+    img {
+      width: 100%;
+      position: relative;
+    }
+
+    .wcard-tooltip {
+      background: rgba(0, 0, 0, 0.7);
+      /*       width: 300px; */
+      max-width: 100%;
+      /*       height: 60px; */
+      position: absolute;
+      top: -75px;
+      left: 20px;
+      transition: top 0.3s ease-in-out;
+
+      p {
+        color: var(--pico-tooltip-color);
+        font-size: var(--pico-font-size);
+        /*         font-weight: var(--pico-font-weight); */
+        /*         line-height: var(--pico-line-height); */
+        padding: var(--pico-nav-element-spacing-horizontal);
+        margin: 0;
+      }
+    }
+
+  }
+
+  li.wcard-image:hover .wcard-tooltip {
+    top: 20px;
+  }
+
+}
+
+@keyframes image-slide {
+
+  0%,
+  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;
+  }
+}
+
 /*
 .article-footer {
   margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);

theme/templates/wide-cards.html

@@ -0,0 +1,33 @@
+{% extends "page.html" %}
+
+{% block content_body %}
+{% for wcard in pages|selectattr("slug", "in", page.wide_cards)|list %}
+{# {% for wide_card in page.wide_cards %} #}
+<article class="wcard">
+  <header>
+    <h3><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h3>
+  </header>
+  <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">
+          <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 %} />
+          </a>
+          <div class="wcard-tooltip">
+            <p>{{ image.alt }}</p>
+          </div>
+        </li>
+        {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+</article>
+{% endfor %}
+{% endblock content_body %}
+
+{% block content_footer %}
+{% endblock content_footer %}