From 88297536d30ecb709503b0c70370de83b9eee906 Mon Sep 17 00:00:00 2001
From: gribse <achille.toupin@gadz.org>
Date: Fri, 18 Apr 2025 13:29:26 +0200
Subject: [PATCH] Refactor post display layout to enhance styling and improve
 cover image presentation

---
 layouts/partials/posts-defile.html | 42 +++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/posts-defile.html b/layouts/partials/posts-defile.html
index 3554884..4af780e 100644
--- a/layouts/partials/posts-defile.html
+++ b/layouts/partials/posts-defile.html
@@ -8,7 +8,11 @@
       {{- range (sort $pages "Date" "desc") -}}
       <a href="{{ .RelPermalink }}" class="scrolling-posts-item">
         <span class="section-badge">{{ .Section }}</span>
-        <span>{{ .Title }} ({{ .Date.Format "2006-01-02" }})</span>
+        <h2>{{ .Title }}</h2>
+        <div class="scrolling-posts-cover" style="height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
+            <img src="{{ .Permalink }}{{ .Params.cover.image }}" alt="{{ .Title }} cover image" style="width: 100%; height: 40px; object-fit: cover;">
+        </div>
+        <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
       </a>
       {{- end -}}
     </div>
@@ -17,7 +21,11 @@
       {{- range (sort $pages "Date" "desc") -}}
       <a href="{{ .RelPermalink }}" class="scrolling-posts-item">
         <span class="section-badge">{{ .Section }}</span>
-        <span>{{ .Title }} ({{ .Date.Format "2006-01-02" }})</span>
+        <h2>{{ .Title }}</h2>
+        <div class="scrolling-posts-cover" style="height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
+          <img src="{{ .Params.cover.image }}" alt="{{ .Title }} cover image" style="height: 100%; object-fit: cover;">
+        </div>
+        <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
       </a>
       {{- end -}}
     </div>
@@ -25,6 +33,7 @@
 </div>
 
 <style>
+
 .scrolling-posts-container {
   width: 100%;
   border: none;
@@ -53,6 +62,27 @@
 .scrolling-posts-item {
   padding: 10px;
   border: solid 1px #ccc;
+  background: var(--entry);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+
+.scrolling-posts-item h2 {
+  font-size: 1em;
+  margin: 0;
+  color: var(--text);
+  font-weight: 400;
+  line-height: 1.5em;
+  text-decoration: none;
+  text-align: left;
+  overflow: hidden;
+}
+
+.scrolling-posts-date {
+  font-size: 0.8em;
+  color: var(--text);
+  margin: 0;
+  text-align: left;
 }
 
 .section-badge {
@@ -60,17 +90,17 @@
   font-size: 0.8em;
   padding: 2px 6px;
   margin-right: 5px;
-  background-color: #f0f0f0;
+  background: var(--theme);
   border-radius: 3px;
-  color: #666;
+  color: var(--primary);
 }
 
 .up-scroll {
-  animation: scrollUp 10s linear infinite;
+  animation: scrollUp 50s linear infinite;
 }
 
 .down-scroll {
-  animation: scrollDown 10s linear infinite;
+  animation: scrollDown 50s linear infinite;
 }
 
 @keyframes scrollUp {