From 7e5130783fc94cd13ca24121022e11c798c2b3ed Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Wed, 21 Jan 2026 21:25:25 +0100
Subject: [PATCH] updated devlog link styling

---
 .../projects/projectn5/devlog/+page.svelte    | 96 ++++++++++++++-----
 1 file changed, 74 insertions(+), 22 deletions(-)

diff --git a/src/routes/projects/projectn5/devlog/+page.svelte b/src/routes/projects/projectn5/devlog/+page.svelte
index 848d759..6ba0dcd 100644
--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/+page.svelte
@@ -24,50 +24,102 @@
         title="Project N5; Development Log"
         banner="/projects/projectn5/banner2.webp" />
 
-    <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
+    <p>This is the development log for my game <b>Project N5</b>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
 
     <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
 
-    <div class="post-container">
+    <div class="post-list">
         {#each posts.entries() as [key, post], index}
-        {@render devlogPost({key, post, index})}
+            {@render devlogPost2({key, post, index})}
         {/each}
     </div>
 </Content>
 
-{#snippet devlogPost({key, post, index}: {key: string, post: DevlogPost, index: number})}
-<div class="post-supercontainer">
-    <a href="/projects/projectn5/devlog/{key}/" class="post">
-        <div class="post-img-container">
-            <img class="post-img" src="/projects/projectn5/devlog/{key}/preview.webp" alt="Preview image for devlog {post.title}">
-        </div>
-        <div class="post-text-container">
-            <p class="post-date">#{posts.size - index} // {post.date}</p>
-            <p class="post-title">{post.title}</p>
+{#snippet devlogPost2({key, post, index}: {key: string, post: DevlogPost, index: number})}
+    <a class="post2-container" href="/projects/projectn5/devlog/{key}/">
+        <img class="post2-img" src="/projects/projectn5/devlog/{key}/preview.webp" alt="Preview image for devlog {post.title}">
+        <div class="post2-text-container">
+            <p class="post2-date"><span class="post2-number">#{posts.size - index}</span> // {post.date}</p>
+            <p class="post2-title">{post.title}</p>
         </div>
     </a>
-</div>
 {/snippet}
 
+
 <style>
     :root {
         --color-laura: #C76668CC;
         --color-laura-darker: #A55051CC;
     }
 
-    /* Post list */
-    .post-supercontainer {
-        width: 32%;
-    }
-
-    .post-container {
+    .post-list {
         max-width: 1600px;
         margin-left: auto;
         margin-right: auto;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
+    }
 
+    .post2-container {
+        box-sizing: content-box;
+        height: 80px;
+        display: flex;
+        flex-direction: row;
+        text-decoration: none;
+        align-items: center;
+        margin: 6px 0;
+        /* gap: 16px; */
+    }
+
+    .post2-img {
+        width: 145px;
+        height: 100%;
+        margin: 0;
+        object-fit: cover;
+        filter: grayscale(60%);
+        transition: filter 0.1s ease-out;
+    }
+
+    .post2-text-container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        height: 100%;
+        padding-left: 16px;
+        border-style: dashed;
+        justify-content: center;
+        border-color: transparent;
+        border-width: 2px;
+        border-left: none;
+        transition: border-color 0.1s ease-out;
+    }
+
+    .post2-date, .post2-title, .post2-number {
+        margin: 0;
+        transition: color 0.1s ease-out;
+    }
+
+    .post2-date, .post2-number {
+        font-size: 1.0rem;
+    }
+
+    .post2-number {
+        color: var(--color-highlight);
+        font-weight: 700;
+    }
+
+    .post2-title {
+        font-family: var(--font-mono);
+        font-weight: 700;
+    }
+
+    .post2-container:hover .post2-text-container {
+        /* background-color: var(--color-background-highlight-hover); */
+        border-color: var(--color-highlight);
+    }
+    .post2-container:hover .post2-img {
+        filter: grayscale(0%);
+    }
+    .post2-container:hover p{/*}, .post2-container:hover .post2-number {*/
+        color: var(--color-highlight);
     }
 
     .post {