From 011d83e4ccb32f8fdba97966e97ba9b6b131e9f2 Mon Sep 17 00:00:00 2001
From: Amy Retzerau <amy.retzerau@gmail.com>
Date: Mon, 15 Sep 2025 13:29:26 +0200
Subject: [PATCH] feat: added Layout for Blog posts together with custom
 components for images

---
 src/routes/blogs/blog.svelte | 59 ++++++++++++++++++++++++++++++++----
 svelte.config.js             | 10 +++++-
 2 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/src/routes/blogs/blog.svelte b/src/routes/blogs/blog.svelte
index 4b7bd9a..5433688 100644
--- a/src/routes/blogs/blog.svelte
+++ b/src/routes/blogs/blog.svelte
@@ -9,14 +9,13 @@
 	export let desc;
 
 	let ddate = new Date(Date.parse(date));
-	import './style-blog.css';
 </script>
 
-export let alt;
-
-<h1>{title}</h1>
 <main>
-	<p class="date">Last updated {ddate.toDateString()}</p>
+	<div class="title">
+		<!-- prettier-ignore -->
+		<h1>{title}</h1><p class="date">Last updated {ddate.toDateString()}</p>
+	</div>
 	<div class="blog-text">
 		<p>{desc}</p>
 		<slot>
@@ -27,6 +26,54 @@ export let alt;
 
 <style>
 	main {
-		background-color: var(--rp-moon-surface);
+		padding: 0;
+		border-radius: 1rem;
+	}
+
+	.title {
+		padding: 0 var(--d3) 0;
+		#display: table;
+		flex-wrap: row;
+		#height: 5rem;
+		margin-bottom: -12px;
+        #white-space: nowrap;
+	}
+
+	.title h1 {
+		width: calc(100% - 15rem);
+		margin: 0;
+		vertical-align: baseline;
+		display: inline-block;
+	}
+
+	.title p {
+		width: 15rem;
+		display: inline-block;
+		text-align: right;
+		margin: 0;
+		#float: right;
+	}
+
+	@media only screen and (max-width: 700px) {
+
+        .title {
+            margin-bottom:-5.3px;
+        }
+
+        .title h1 {
+            display: block;
+            width:100%;
+        }
+
+        .title p{ 
+            width:100%;
+        }
+    }
+
+	.blog-text {
+		border-radius: var(--border-round);
+		background: var(--rp-moon-surface);
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+		padding: var(--d2) var(--d3) var(--d4);
 	}
 </style>
diff --git a/svelte.config.js b/svelte.config.js
index 471031a..d420aea 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -10,13 +10,21 @@ const __dirname = dirname(__filename);
 
 const path_to_layout = join(__dirname, './src/routes/blogs/blog.svelte');
 
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const path_to_layout = join(__dirname, './src/routes/blogs/blog.svelte');
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Consult https://svelte.dev/docs/kit/integrations
     // for more information about preprocessors
     preprocess: [vitePreprocess(), mdsvex({
         layout: {
-            blog: path_to_layout
+            _: path_to_layout
         }
     })],
     kit: {