diff --git a/content/pages/index.md b/content/pages/index.md index 9680f43..d7d557d 100644 --- a/content/pages/index.md +++ b/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\"" diff --git a/theme/static/css/custom.css b/theme/static/css/custom.css index 1de4e6b..448e0f0 100644 --- a/theme/static/css/custom.css +++ b/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); diff --git a/theme/templates/index.html b/theme/templates/index.html index 7903774..2e300e5 100644 --- a/theme/templates/index.html +++ b/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 %} -