feat: added first test content

src/routes/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
+	import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
 	import 'prism-rose-pine/dist/prism-rose-pine-moon.css';
 	import './style.css';
 
+	import './style.css';
+
 	let { children } = $props();
 </script>
 
@@ -11,11 +14,9 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<div class="nav">
-	<a class="nav" href="/">Home</a>
-	<a class="nav" href="/about">About</a>
-</div>
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
 
-<div class="main">
-	{@render children?.()}
-</div>
+{@render children?.()}

src/routes/+page.svelte

@@ -3,27 +3,36 @@
 	import type { SvelteComponent } from 'svelte';
 	import './style-entries.css';
 
-	const blog_entries: [string, SvelteComponent][] = Object.entries(
+	let blog_entries: [string, SvelteComponent][] = Object.entries(
 		import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
 	).map(([key, value]) => [
 		key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
 		value as MDsveXComponent
-	]);
-	console.log(blog_entries);
+	]).map(([link,val])=> 
+        typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link,val]
+    ).map(([link,val])=>{
+        if(val.metadata)
+            val.metadata.date = Date.parse(val.metadata?.date);
+        return [link,val];
+    }
+    ).sort(([link1,a],[link2,b])=>b.metadata?.date-a.metadata?.date);
+    console.log(blog_entries);
 </script>
 
 <main>
-	<h1>Welcome to SvelteKit</h1>
-	<p>
-		Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
-	</p>
+    <div class="start">
+        <h1>Welcome to SvelteKit</h1>
+        <p>
+            Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
+        </p>
+    </div>
 	{#each blog_entries as [href, page]}
 		<a {href}>
-			<div class="blog-entry" {href}>
+			<div class="blog-entry">
 				<div>
 					<h4>{page.metadata?.title}</h4>
 					<p>{page.metadata?.desc}</p>
-					<p class="date">{new Date(Date.parse(page.metadata?.date)).toDateString()}</p>
+					<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
 				</div>
 				<img src="blog-1.png" class="blog-image" />
 			</div>
@@ -32,3 +41,55 @@
 		<!-- svelte:component this={page.default} /-->
 	{/each}
 </main>
+
+<style>
+
+    .start {
+        padding: var(--d2);
+    }
+
+	.blog-entry {
+		background: var(--rp-moon-surface);
+		border-radius: var(--border-round);
+		width: 100%;
+		color: var(--rp-moon-text);
+		display: flex;
+		flex-flow: row wrap;
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
+        transition: 0.2s;
+	}
+
+	.blog-entry:hover {
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
+		background: var(--rp-moon-overlay);
+		transition: 0.2s;
+	}
+
+	.blog-entry div {
+		width: calc(100% - 15rem - var(--d2) * 2);
+		padding: var(--d2);
+	}
+
+	.blog-entry img {
+		width: 15rem;
+		object-fit: cover;
+		border-radius: 0 var(--border-round) var(--border-round) 0;
+	}
+
+	@media only screen and (max-width: 700px) {
+		.blog-entry div {
+			width: calc(100% - var(--d2) * 2);
+		}
+
+		.blog-entry img {
+			width: 100%;
+			max-height: 14rem;
+			border-radius: 0 0rem var(--border-round)  var(--border-round) ;
+		}
+	}
+
+	.blog-entry h4 {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+</style>

src/routes/blogs/0-The-Creation-of-this-Blog/+page.svx

@@ -1,6 +1,5 @@
 ---
 title: "The creation of this Blog"
-layout: blog
 date: 2025-09-12
 desc: "The goal was to create an easy to maintain blog with while the main focus relays on keeping the effort
 to write new posts minimal. This is more a ressource summery with tips, than an full tutorial."

src/routes/blogs/1-64k-Demo/+page.svx

@@ -0,0 +1,7 @@
+---
+title: "64k Demo"
+date: 2025-09-15
+desc: "Dev Diary of the Demo"
+---
+
+asd

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>

src/routes/blogs/e-FemDev-GameJam/+page.svx

@@ -1,5 +1,5 @@
 ---
-title: "FemDev GameJam - Catrastrophe"
+title: "FemDev GameJam - Catastrophe"
 date: 2024-11-10
 src: "https://elkortes.itch.io/catastrophe"
 desc: "I took part in the amazing FemDev Game and helped to creathe this little game.

src/routes/blogs/e-Flame/+page.svx

@@ -0,0 +1,6 @@
+---
+title: "Flame Demo"
+date: 2024-11-26
+src: "https://madeio.net/fox"
+desc: "A WebGL Project wich shows that deffered rendering and volumetric fog is very possible in Three.js"
+---

src/routes/style.css

@@ -1,11 +1,28 @@
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
 
+:root{
+    --d1:1.0rem;
+    --d2:1.5rem;
+    --d3:2.25rem;
+    --d4:3.375rem;
+    --d5:5.0625rem;
+    --d6:7.59375rem;
+    --d7:11.390625rem;
+    --d8:17.0859375rem;
+    --d9:25.62890625rem;
+    --d10:38.443359375rem;
+
+    --border-round:var(--d2);
+}
+
 
 body {
 	color: var(--rp-moon-text);
 	background: var(--rp-moon-base);
     padding: 0;
-    margin: 0;
+    max-width: 60rem;
+    width:100%;
+    margin: auto;
     text-align: justify;
 }
 
@@ -17,20 +34,21 @@ pre {
 a {
     color: var(--rp-moon-iris);
     text-decoration: none;
+
+    &:visited {
+        color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
+    }
 }
 
-a:visited {
-    color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
+h1,h2,h3,h4,p:first-child {
+	#margin-top: 0;
 }
 
 
-.nav { 
-    margin: auto;
+nav {
     margin-top: 1rem;
 
-    padding: 1rem;
-    max-width: 60rem;
-    width: calc(100% - 2rem);
+    padding: 0 var(--d3) 0;
 
     font-family: "Fraunces", serif;
     font-optical-sizing: auto;
@@ -42,20 +60,21 @@ a:visited {
     font-size:1.728rem;
 }
 
-a.nav{
+nav a{
     margin: 1rem;
     margin-left: 0rem;
     padding-left: 0rem;
     color: var(--rp-moon-foam);
     #text-decoration: underline;
+    &:visited {
+        color: var(--rp-moon-foam);
+    }
 }
 
 main {
-    padding: 1rem;
-    margin: auto;
-    #margin-top: 1rem;
-    max-width: 60rem;
-    width: calc(100% - 2rem);
+    #padding: 0 2rem 2rem;
+    margin-top: var(--d3);
+    width: 100%;
     #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
 }
 
@@ -86,7 +105,7 @@ h4{font-size: 1.728rem}
 }
 
 h4{
-    color: var(--rp-moon-rose);
+    color: var(--rp-moon-foam);
 }
 
 

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: {