From d8cd9f9b7f3310e5482497b607c2f7a27ebba681 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 14 Jul 2025 09:47:48 +0200
Subject: [PATCH] added post numbers to devlogs; matched project n5 page style
 to entire website

---
 src/routes/+layout.svelte                     | 22 ++++++-
 .../projects/projectn5/devlog/+layout.svelte  | 28 --------
 .../projects/projectn5/devlog/+page.svelte    | 66 ++++++++++++++++---
 3 files changed, 76 insertions(+), 40 deletions(-)
 delete mode 100644 src/routes/projects/projectn5/devlog/+layout.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fc0de80..8433b74 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,8 +13,6 @@
 <Footer />
 
 <style>
-    /* @import url('https://fonts.upset.dev/css2?family=Reddit+Mono:wght@200..900&family=Reddit+Sans+Condensed:wght@200..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
-    
     @import url('https://fonts.upset.dev/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Michroma&family=Space+Grotesk:wght@300..700&display=swap');
 
     @font-face {
@@ -77,7 +75,7 @@
             --color-text: #d0d0d0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
-            --color-highlight: #72b175;
+            --color-highlight: #DB7072 !important;
 
             --color-background: #1b1b1b;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
@@ -156,18 +154,36 @@
             font-size: 3.5rem;
             line-height: 4rem;
         }
+
         h2 {
             font-size: 2rem;
             line-height: 2.2rem;
         }
+        h2::before {
+            letter-spacing: -0.5rem;
+            content: '› ';
+            margin-right: 15px;
+        }
+
         h3 {
             font-size: 1.4rem;
             line-height: 1.5rem;
         }
+        h3::before {
+            letter-spacing: -0.3rem;
+            content: '›› ';
+            margin-right: 10px;
+        }
+
         h4, h5, h6 {
             font-size: 1.2rem;
             line-height: 1.3rem;
         }
+        h4::before {
+            letter-spacing: -0.26rem;
+            content: '››› ';
+            margin-right: 6px;
+        }
 
         h1, h2, h3, h4, h5, h6 {
             font-weight: 700;
diff --git a/src/routes/projects/projectn5/devlog/+layout.svelte b/src/routes/projects/projectn5/devlog/+layout.svelte
deleted file mode 100644
index 781ece9..0000000
--- a/src/routes/projects/projectn5/devlog/+layout.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	let { children } = $props();
-</script>
-
-{@render children()}
-
-<style>
-    :root {
-        --color-highlight: #C76668 !important;
-    }
-    :global {
-        h2::before {
-            letter-spacing: -0.5rem;
-            content: '› ';
-            margin-right: 15px;
-        }
-        h3::before {
-            letter-spacing: -0.3rem;
-            content: '›› ';
-            margin-right: 10px;
-        }
-        h4::before {
-            letter-spacing: -0.26rem;
-            content: '››› ';
-            margin-right: 6px;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/src/routes/projects/projectn5/devlog/+page.svelte b/src/routes/projects/projectn5/devlog/+page.svelte
index f4b1f64..65ccdbf 100644
--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/+page.svelte
@@ -12,20 +12,23 @@
 <Content>
     <BannerTitle title="Project N5; Development Log" banner="/projects/projectn5/devlog/2024/0323/unity_overview.webp" />
 
-    <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game heavily 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 <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>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy achievements in a more collected format.</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">
-        {#each posts as post}
-        {@render devlogPost({post})}
+        {#each posts as post, index}
+        {@render devlogPost({post, index})}
         {/each}
     </div>
 </Content>
 
-{#snippet devlogPost({post}: {post: DevlogPost})}
+{#snippet devlogPost({post, index}: {post: DevlogPost, index: number})}
 <a href="/projects/projectn5/devlog/{post.date}/" class="post">
-    <img class="post-img notched" src="/projects/projectn5/devlog/previews/{post.date}.webp">
+    <div class="post-img-container">
+        <img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
+        <p class="post-number">#{posts.length - index}</p>
+    </div>
     <div class="post-text-container">
         <p class="post-date">{post.subtitle}</p>
         <p class="post-title">{post.title}</p>
@@ -55,7 +58,7 @@
         transition: background-color 0.16s ease-in-out;
         margin: 4px;
         
-        --notch-size-devlog: 40px;
+        --notch-size-devlog: 36px;
         clip-path: polygon(
             0% var(--notch-size-devlog), 
             var(--notch-size-devlog) 0%, 
@@ -71,15 +74,49 @@
         background-color: var(--color-background-highlight-hover);
     }
 
-    .post:hover .post-title, .post:hover .post-date {
+    .post:hover .post-title, .post:hover .post-date, .post-number {
         color: var(--color-text-dark);
     }
 
+    .post:hover .post-img-container {
+        background-color: transparent;
+    }
+
+    .post-img-container {
+        position: relative;
+        height: fit-content;
+        width: fit-content;
+        background-color: var(--color-background-highlight-hover);
+        
+        transition: background-color 0.16s ease-in-out;
+        clip-path: polygon(
+            0% var(--notch-size-devlog), 
+            var(--notch-size-devlog) 0%, 
+            calc(100% - var(--notch-size-devlog)) 0%, 
+            100% var(--notch-size-devlog), 
+            100% calc(100% - var(--notch-size-devlog)), 
+            100% 100%, 
+            var(--notch-size-devlog) 100%, 
+            0% calc(100% - var(--notch-size-devlog))
+        );
+    }
+
     .post-img {
         width: 150px;
         height: 120px;
         margin: 0;
         object-fit: cover;
+        
+        clip-path: polygon(
+            0% 0%, 
+            100% 0%, 
+            100% 0%, 
+            100% 0%, 
+            100% calc(100% - var(--notch-size-devlog)), 
+            calc(100% - var(--notch-size-devlog)) 100%, 
+            0% 100%, 
+            0% 100%
+        );
     }
 
     .post-text-container {
@@ -89,7 +126,7 @@
         justify-content: center;
     }
 
-    .post-date, .post-title {
+    .post-date, .post-title, .post-number {
         font-family: 'Space Mono', monospace;
         margin: 4px 0;
         transition: color 0.16s ease-in-out;
@@ -104,4 +141,15 @@
         font-size: 1.3rem;
         font-weight: 700;
     }
+
+    .post-number {
+        font-size: 0.77rem;
+        font-weight: 700;
+        position: absolute;
+        right: 2px;
+        bottom: 1px;
+        margin: 0;
+        padding: 0;
+        line-height: 1rem;
+    }
 </style>
\ No newline at end of file