From df1a4c8db419ee29ab274434ef76c213fd01a261 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Fri, 24 Apr 2026 20:48:22 +0200
Subject: [PATCH] added fancy marker for latest update date in main page link
 row

---
 .../{gallery-row.svelte => link-row.svelte}   | 42 +++++++++++++++++--
 src/routes/+page.svelte                       | 17 ++++----
 2 files changed, 48 insertions(+), 11 deletions(-)
 rename src/lib/lists/{gallery-row.svelte => link-row.svelte} (68%)

diff --git a/src/lib/lists/gallery-row.svelte b/src/lib/lists/link-row.svelte
similarity index 68%
rename from src/lib/lists/gallery-row.svelte
rename to src/lib/lists/link-row.svelte
index 29a975e..4709a1f 100644
--- a/src/lib/lists/gallery-row.svelte
+++ b/src/lib/lists/link-row.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    export interface GalleryRowEntry {
+    export interface LinkRowEntry {
         title: string;
         description: string;
         img: string;
+        latestUpdate?: string;
         altText: string;
         link: string;
     }
@@ -10,7 +11,7 @@
     let {
         entries,
     }: {
-        entries: GalleryRowEntry[];
+        entries: LinkRowEntry[];
     } = $props();
 </script>
 
@@ -23,6 +24,9 @@
             <div class="row-text-container">
                 <p class="row-title">&gt; {entry.title}</p>
                 <p class="row-description">{@html entry.description}</p>
+                {#if entry.latestUpdate}
+                    <p class="row-updated">updated: <span class="row-updated-date">{entry.latestUpdate}</span></p>
+                {/if}
             </div>
         </a>
     {/each}
@@ -78,6 +82,7 @@
 
     .row-text-container {
         margin-top: 8px;
+        margin-bottom: 4px;
     }
 
     .row-title {
@@ -90,7 +95,38 @@
     .row-description {
         font-size: 1.0rem;
         line-height: 1.3rem;
-        margin: 0 0 4px 0;
+        margin: 0;
+    }
+
+    .row-updated, .row-updated-date {
+        font-size: 0.9rem;
+        line-height: 1.2rem;
+        margin: 0;
+        font-style: italic;
+        width: fit-content;
+        transition: color var(--duration-animation) var(--anim-curve),
+                    background-color var(--duration-animation) var(--anim-curve);
+    }
+
+    .row-updated {
+        margin-top: 2px;
+        padding: 4px 8px;
+        font-weight: 500;
+        background-color: var(--color-background-highlight);
+        border-radius: var(--border-radius);
+    }
+
+    .row-entry:hover .row-updated {
+        color: var(--color-text-dark);
+        background-color: var(--color-highlight);
+    }
+
+    .row-updated-date {
+        font-weight: 600;
+    }
+
+    .row-entry:hover .row-updated-date {
+        color: var(--color-text-dark);
     }
 
     @media screen and (max-width: 600px) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bdf069c..41d27fc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import Content from "$lib/viewport/content.svelte";
-    import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
+    import LinkRow, { type LinkRowEntry } from "$lib/lists/link-row.svelte";
 
     import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
     import { posts as blogPosts } from "./blog/posts";
@@ -73,8 +73,6 @@
             <p>I listen to <b>a lot</b> of music. My favourite artists are <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>, but you can <a href="/meta/music-rotation">find my current rotation here</a>. I also enjoy dabbling around in cool FOSS tools like <a href="https://godotengine.org/">Godot</a>, <a href="https://blender.org/">Blender</a>, and <a href="https://krita.org/">Krita</a> which I use under <a href="https://fedoraproject.org/">Fedora KDE</a>. If you want to know more about me and this website, <a href="/meta/about">go here</a>!</p>
 
             <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher, but between you and me; I may end up doing something else :).</p>
-
-            <p>{latestFeedDate}</p>
         </div>
 
         <div>
@@ -101,11 +99,12 @@
 
     <hr>
 
-    <GalleryRow entries={
+    <LinkRow entries={
         [
             {
                 title: "Homesick – devlog",
-                description: `my active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
+                description: `my active Godot game project about finding yourself in an unfamiliar future.`,
+                latestUpdate: latestDevlogDate,
                 img: "projects/projectn5/banner2.webp",
                 altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
                 link: "projects/projectn5",
@@ -119,18 +118,20 @@
             },
         ]} />
     
-    <GalleryRow entries={
+    <LinkRow entries={
         [
             {
                 title: "Creative Feed",
-                description: `the small things I make find a home here. <i>latest post: ${latestFeedDate}</i>`,
+                description: `the small things I make find a home here.`,
+                latestUpdate: latestFeedDate,
                 img: "feed/banner.webp",
                 altText: "A blue screen with the text 'how do you do art ? 1. face your fears 2. become your heroes'. The 'art' looks to have been edited in. The music artist Porter Robinson is standing in the bottom right corner.",
                 link: "feed",
             },
             {
                 title: "Blog",
-                description: `a place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
+                description: `a place where I write about random things.`,
+                latestUpdate: latestBlogDate,
                 img: "blog/robert.webp",
                 altText: "View at a tram bridge rising and then curving to the left.",
                 link: "blog",