added animated latest news line on himepage

content/pages/index.md

@@ -3,19 +3,24 @@ title: Index
 date: 2025-02-25
 template: index
 save_as: index.html
-url: 
+url: /
+featured_news:
+  text: "Aktuell: Meine neue Webseite ist live"
+  link: /neues/meine-neue-webseite-ist-live.html
 index_cards:
   - pic: images/kurzprosa/mockup-aw-phantastische-geschichten-2.png
     link: werke/
     alt: Phantastik, Belletristik, Lyrik & mehr
-  - pic: images/tr/live-microphone-2.jpg
+  - pic: images/tr/live-microphone-2.png
     credit: Matthew Jungling | unsplash.com
     credit_link: https://unsplash.com/@matthewjungling
     link: termine/
     alt: Lesungen und Lesereihen   
-  - pic: images/neues/motif-coffee.jpg
+  - pic: images/tr/motif-newsletter.png
     link: neues/
     alt: Aktuelles und Neuigkeiten
+    credit: Markus Winkler | unsplash.com
+    credit_link: https://unsplash.com/@markuswinkler
   - pic: images/tr/portrait-tr-cutout.png
     link: ueber-mich/
     alt: "\"ich bin Schriftsteller / und heiß' Tobias Radloff / untenrum Cargohosen / obenrum 'nen Kahlkopf\""

theme/static/css/custom.css

@@ -349,6 +349,54 @@ article form {
   }
 }
 
+/* featured news line on start page*/
+/* animation source: https://codepen.io/alvarotrigo/pen/RwOrwro */
+.index-featured-news {
+  margin-bottom: calc(var(--pico-block-spacing-vertical) * 2.5);
+  position: relative;
+  box-sizing: border-box;
+
+  h3 {
+    text-align: center;
+    animation: clip-path-reveal-1 3s ease;
+    box-sizing: border-box;
+  }
+
+  h3:before, h3:after {
+    box-sizing: border-box;
+  }
+}
+
+.index-featured-news:before {
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: calc( 100% - 2px );
+  width: 100%;
+  height: 4px;
+  background-color: #cf0000;
+  transform-origin: center center;
+  transform: scaleX( 0 );
+  animation: line-animation 3s ease;
+}
+
+.index-featured-news::after {
+  box-sizing: border-box;
+}
+
+@keyframes line-animation {
+  0% { transform: scaleX(0); }
+  15% { transform: scaleX(0); }
+  20%, 25% { transform: scaleX(1); top: calc(100% - 2px); }
+  50% { transform: scaleX(1); top: 0px; }
+  70%, 90% { transform: scaleX(0.2); top: 0px; }
+  100% { transform: scaleX(0); top: 0px; }
+}
+
+@keyframes clip-path-reveal-1 {
+  0%, 25% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
+  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
+}
 
 .events .tr-muted {
   color: var(--pico-muted-color);

theme/templates/index.html

@@ -3,11 +3,14 @@
 {% block content_header %}
 {% endblock content_header %}
 
-{% block content_body %} 
+{% block content_all %} 
 {% for p in pages if p.title == "Index" %} 
 
-{% if p.featured %}
-  <div class="index-featured">not implemented yet</div>
+{% if p.featured_news %}
+  {% set fn = p.featured_news %}
+  <section class="index-featured-news">
+    <h3><a href="{{ fn.link }}">+++ {{ fn.text}} +++</a></h3>
+  </section>
 {% endif %} 
 
 {% set lr = cycler("row-reverse", "row") %} 
@@ -22,4 +25,4 @@
 
 {% include "includes/subscribe_form.html" %} 
 
-{% endblock content_body %}
+{% endblock content_all %}