From f932793b62f0c7a2eb4847722ad04610bfe3a90c Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Thu, 2 Apr 2026 15:50:30 +0200
Subject: [PATCH] main page shenanigans; added dateUpdate attribute to blog
 posts; updated banner to display them

---
 src/lib/banner2.svelte                     |  50 +++++++---
 src/routes/+layout.svelte                  |   2 +-
 src/routes/+page.svelte                    | 107 ++++++++++-----------
 src/routes/blog/[year]/[date]/+page.svelte |   3 +-
 src/routes/blog/[year]/[date]/+page.ts     |   2 +
 src/routes/blog/posts.ts                   |   4 +
 6 files changed, 97 insertions(+), 71 deletions(-)

diff --git a/src/lib/banner2.svelte b/src/lib/banner2.svelte
index 9d5a97e..4e8bf7f 100644
--- a/src/lib/banner2.svelte
+++ b/src/lib/banner2.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     let {
         title,
-        date = "",
+        date = "", // date posted
+        dateUpdated = "",
         subtitle = "",
         banner = "",
         bannerAlt = "",
@@ -9,6 +10,7 @@
     }: {
         title: string;
         date?: string;
+        dateUpdated?: string;
         subtitle?: string;
         banner?: string;
         bannerAlt?: string;
@@ -19,14 +21,21 @@
 
 {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
 	<div class="title-container">
-        <h1 class="title">{title}</h1>
-        {#if subtitle}
-            <p class="subtitle">[ {subtitle} ]</p>
+        <div class="title-text-container">
+            <h1 class="title">{title}</h1>
+            {#if subtitle}
+                <p class="subtitle">[ {subtitle} ]</p>
+            {/if}
+        </div>
+        {#if date}
+            <div class="date-container">
+                <p class="date">posted :: {date}</p>
+                {#if dateUpdated}
+                    <p class="date">last updated :: {dateUpdated}</p>
+                {/if}
+            </div>
         {/if}
     </div>
-	{#if date}
-		<p class="date">» {date}</p>
-	{/if}
 {/snippet}
 
 <div class="container">
@@ -55,8 +64,8 @@
     .title-container {
         display: flex;
         flex-direction: row;
-        align-items: flex-end;
-        gap: 12px;
+        /* align-items: flex-end; */
+        gap: 16px;
         margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
     }
 
@@ -65,6 +74,19 @@
         margin-top: 16px;
     }
 
+    .title-text-container {
+        width: fit-content;
+        flex: 1;
+    }
+
+    .date-container {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        margin-bottom: 12px;
+    }
+
     .title {
         box-sizing: border-box;
         height: fit-content;
@@ -72,14 +94,18 @@
     }
 
     .date {
-        font-weight:700;
-        font-size: 1.3rem;
-        margin-top: 0;
+        font-weight: 500;
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        line-height: 1.4rem;
+        font-style: italic;
+        margin: 0;
         color: var(--color-highlight);
     }
 
     .subtitle {
         font-family: var(--font-mono);
+        /* width: fit-content; */
         font-weight: 500;
         font-size: 1.0rem;
         margin: 0;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7ab9585..f608d7b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -148,7 +148,7 @@
 
             --font-lightyears: 'LIGHTYEARS', sans-serif;
 
-            --font-size-h1: 2.0rem;
+            --font-size-h1: 2.2rem;
             --font-size-h2: 1.5rem;
             --font-size-h3: 1.3rem;
             --font-size-h4: 1.2rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3dbf575..650ebf0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -98,39 +98,43 @@
 
     <hr>
 
-    <div>
+    <div class="split-intro-container">
+        <div>
+            <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
 
-        <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
+            <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
+            <p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
+            <p>I listen to A LOT of music (fav artists: <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>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a> and <a href="https://blender.org/">Blender</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
+            <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
+        </div>
 
-        <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
-        <p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
-        <p>I listen to A LOT of music (fav artists: <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>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a> and <a href="https://blender.org/">Blender</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
-        <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
-    </div>
-
-    <div class="split-container">
-        <div class="meta-vertical-container">
-            <div class="meta-container info-container">
-                <a class="status-header-link" href="/"><h4 class="update-header">latest status</h4></a>
-                <p class="status-content">{latestStatusContent}</p>
-                <span class="status-timestamp">:: {latestStatusTimestamp}</span>
-            </div>
-            <div class="meta-container info-container">
-                <h4 class="update-header">heads-up</h4>
+        <div>
+            <div class="sidebox-container">
+                <h4 class="sidebox-header">heads-up</h4>
                 <p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
+
+                <hr>
+
+                <a class="sidebox-header-link" href="/"><h4 class="sidebox-header">latest status</h4></a>
+                <p class="status-content">"{latestStatusContent}"</p>
+                <span class="status-timestamp">:: {latestStatusTimestamp}</span>
+        
+                <!-- <hr>
+
+                <a class="sidebox-header-link" href="/meta/updates"><h4 class="sidebox-header">website updates <span class="small-supertext">(new!)</span></h4></a>
+                {#each updateEntriesTrimmed as entry}
+                    <UpdateEntry {entry} />
+                {/each} -->
             </div>
         </div>
-        
-        <div class="meta-container update-container">
-            <a class="update-header-link" href="/meta/updates"><h4 class="update-header">website updates <span class="small-supertext">(new!)</span></h4></a>
-            {#each updateEntriesTrimmed as entry}
-                <UpdateEntry {entry} />
-            {/each}
-        </div>
     </div>
 
+    <hr>
+
     <GalleryRow entries={galleryTopRow} />
     <GalleryRow entries={galleryBottomRow} />
+    
+    <hr>
 
     <div class="split-container">
         <div class="webring-container">
@@ -174,6 +178,11 @@
 </Content>
 
 <style>
+    .split-intro-container {
+        display: grid;
+        grid-template-columns: 3fr 1fr;   
+    }
+
     .split-container {
         width: 100%;
         display: flex;
@@ -219,36 +228,24 @@
         margin-right: 12px;
     }
 
-    .meta-vertical-container {
-        flex: 3;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .meta-container {
+    .sidebox-container {
         padding: 8px 24px;
         backdrop-filter: blur(var(--blur-radius-background));
         border-width: var(--border-dash-size);
         border-style: var(--border-style);
+        border-color: var(--color-highlight-alt);
         /* transition: border-radius var(--duration-animation) var(--anim-curve); */
         /* border-radius: var(--border-radius); */
     }
 
-    .info-container {
+    .sidebox-container hr {
         border-color: var(--color-highlight-alt);
-    }
-    .info-container p, .info-container a {
-        font-size: 1.0rem;
-        line-height: 1.4rem;
-    }
-    .info-container > h4 {
-        color: var(--color-highlight-alt);
+        margin: 16px 0;
     }
 
-    .update-container {
-        border-color: var(--color-highlight);
-        flex: 4;
+    .sidebox-container p, .sidebox-container a {
+        font-size: 0.9rem;
+        line-height: 1.3rem;
     }
 
     .status-content {
@@ -278,29 +275,25 @@
         padding-bottom: 16px;
     }
 
-    .update-header-link, .status-header-link {
+    .sidebox-header {
+        font-size: 1.0rem;
+        line-height: 1.0rem;
+        margin-top: 8px;
+        color: var(--color-highlight-alt);
+    }
+
+    .sidebox-header-link {
         text-decoration: none;
     }
-    .update-header-link:hover {
-        text-decoration-color: var(--color-highlight);
-    }
-    .status-header-link:hover {
+    .sidebox-header-link:hover {
         text-decoration-color: var(--color-highlight-alt);
     }
-    .update-header-link:hover, .status-header-link:hover {
+    .sidebox-header-link:hover {
         text-decoration-line: underline;
         text-decoration-style: dashed;
         text-decoration-thickness: var(--border-dash-size);
     }
 
-    .status-header-link .update-header {
-        color: var(--color-highlight-alt);
-    }
-    
-    .update-header {
-        margin-top: 8px;
-    }
-
     .gradient-title {
         background: linear-gradient(
             90deg,
diff --git a/src/routes/blog/[year]/[date]/+page.svelte b/src/routes/blog/[year]/[date]/+page.svelte
index 1613e13..8564896 100644
--- a/src/routes/blog/[year]/[date]/+page.svelte
+++ b/src/routes/blog/[year]/[date]/+page.svelte
@@ -15,7 +15,8 @@
 <Content>
     <Banner2
         title="{data.title}"
-        date="{data.date}, {data.time}"
+        date="{data.date}"
+        dateUpdated="{data.dateUpdated}"
         banner="{data.banner}"
         bannerAlt="Banner for blog post '{data.title}'" />
 
diff --git a/src/routes/blog/[year]/[date]/+page.ts b/src/routes/blog/[year]/[date]/+page.ts
index 6363e1c..5e70e98 100644
--- a/src/routes/blog/[year]/[date]/+page.ts
+++ b/src/routes/blog/[year]/[date]/+page.ts
@@ -8,6 +8,7 @@ export async function load({ params }) {
 	const content = post.default;
 	const title: string = postValues?.title ?? "";
 	const date: string = postValues?.date ?? "";
+	const dateUpdated: string = postValues?.dateUpdated ?? "";
 	const time: string = postValues?.time ?? "";
 	const banner: string = postValues?.banner ?? "";
 	const description: string = postValues?.description ?? "";
@@ -17,6 +18,7 @@ export async function load({ params }) {
 		title,
 		banner,
 		date,
+		dateUpdated,
 		time,
 		tag,
 		description,
diff --git a/src/routes/blog/posts.ts b/src/routes/blog/posts.ts
index 828cef4..aff52ba 100644
--- a/src/routes/blog/posts.ts
+++ b/src/routes/blog/posts.ts
@@ -4,6 +4,8 @@ export interface BlogPostDetails {
 	// Format: HH:mm
 	time: string;
 
+	dateUpdated?: string;
+
 	// Banner image title. If empty, defaults to banner.webp
 	banner: string;
 	bannerAlt: string;
@@ -67,6 +69,7 @@ export const posts: BlogPostLink[] = [
 		post: {
 			date: "2026-03-17",
 			time: "17:00",
+			dateUpdated: "2026-03-25",
 			banner: "banner.webp",
 			bannerAlt: "A Microsoft Surface Pro 8 displaying a Blue Screen of Death.",
 			title: "How To: Set Up SvelteKit Frontend + PostgreSQL Backend",
@@ -110,6 +113,7 @@ export const posts: BlogPostLink[] = [
 		post: {
 			date: "2026-02-05",
 			time: "22:55",
+			dateUpdated: "2026-03-05",
 			banner: "banner.webp",
 			bannerAlt: "A Leuchtturm-branded notebook with a copper-coloured cover. An eraser, a pencil sharpener, and a Faber-Castell pencil are lying on top.",
 			title: "Drawing Challenge",