feat: added rose pine theme from prism syntax

src/routes/+layout.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
+	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';
 
 	let { children } = $props();
 </script>
@@ -8,4 +11,11 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children?.()}
+<div class="nav">
+	<a class="nav" href="/">Home</a>
+	<a class="nav" href="/about">About</a>
+</div>
+
+<div class="main">
+	{@render children?.()}
+</div>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { MDsveXComponent } from '$lib/types';
 	import type { SvelteComponent } from 'svelte';
+	import './style-entries.css';
 
 	const blog_entries: [string, SvelteComponent][] = Object.entries(
 		import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
@@ -11,9 +12,23 @@
 	console.log(blog_entries);
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
-{#each blog_entries as [href, page]}
-	<a {href}>{page.metadata?.title}</a><br />
-	<svelte:component this={page.default} />
-{/each}
+<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>
+	{#each blog_entries as [href, page]}
+		<a {href}>
+			<div class="blog-entry" {href}>
+				<div>
+					<h4>{page.metadata?.title}</h4>
+					<p>{page.metadata?.desc}</p>
+					<p class="date">{new Date(Date.parse(page.metadata?.date)).toDateString()}</p>
+				</div>
+				<img src="blog-1.png" class="blog-image" />
+			</div>
+		</a>
+		<br />
+		<!-- svelte:component this={page.default} /-->
+	{/each}
+</main>

src/routes/blogs/blog.svelte

@@ -0,0 +1,32 @@
+<script context="module">
+	import img from './img.svelte';
+	export { img };
+</script>
+
+<script>
+	export let title;
+	export let date;
+	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="blog-text">
+		<p>{desc}</p>
+		<slot>
+			<!-- the mdsvex content will be slotted in here -->
+		</slot>
+	</div>
+</main>
+
+<style>
+	main {
+		background-color: var(--rp-moon-surface);
+	}
+</style>

src/routes/blogs/img.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let src;
+	export let alt;
+
+	let width;
+	[alt, width = '20rem'] = alt.split('|');
+</script>
+
+<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />

src/routes/blogs/style-blog.css

@@ -0,0 +1,10 @@
+.blog-text{
+    border-radius: 0.5rem;
+    background: var(--rp-moon-surface);
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+    margin: -1rem;
+    padding: 1rem;
+}
+
+
+

src/routes/blogs/test/+page.svx

@@ -1,18 +1,55 @@
 ---
-title: "Blog Entry #1"
+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."
 ---
 
-# Title
 
----
+## Static side generation
+The stack consists of:
+- [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction)
+- [mdsvex](https://mdsvex.pngwn.io/) 
+- [static adapter](https://svelte.dev/docs/kit/adapter-static)
 
-1. asd
-2. asd
-3. asd
+The core functionallity provides which allow you to combine svelte and markdown.
 
-```js
-{..., lib}:
-{
-    "hello" = "world";
-}
-```
+![Tasd|20rem](/blog-1.png)
+
+## Image sizing
+
+I want to be able to rezise an image in markdown without using HTML,
+just like in obsidian, by declaring the width after the alt text `![some alt text|<width>](/some-image.png)`.
+To archive that I replace every img that that mdsvex creates with some new written `img` component:
+
+```ts
+//img.svelte
+<script lang="ts">
+	export let src;
+	export let alt;
+
+	let width;
+	[alt, width = '20rem'] = alt.split('|');
+</script>
+
+<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />
+```
+
+And then needs to be imported in the mdsvex layout:
+```ts
+<script context="module">
+	import img from './img.svelte';
+	export { img };
+</script>
+```
+
+This is desctibed in furhter details by the [mdsvex docs](https://mdsvex.pngwn.io/docs#custom-components)
+and this [issue](https://github.com/pngwn/MDsveX/discussions/292).
+
+## Colors
+
+I love the [rose pine](https://rosepinetheme.com/) color palette. I use it privatly for some applications,
+and think it improves this blog too.
+Both the [prism theme](https://github.com/rose-pine/prism) and [color palette](https://github.com/rose-pine/rose-pine-palette)
+can be added as npm package and used without compications.

src/routes/blogs/test2/+page.svx

@@ -0,0 +1,7 @@
+---
+title: "FemDev GameJam - Catrastrophe"
+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.
+My work are the animations, 3d Models and some texturing"
+---

src/routes/style-entries.css

@@ -0,0 +1,47 @@
+
+.blog-entry{
+    background: var(--rp-moon-surface);
+    border-radius: 0.5rem; 
+    width:100%;
+    color: var(--rp-moon-text) !important;
+    text-decoration : none !important;
+    display: flex;
+    flex-flow: row wrap;
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+}
+
+
+
+.blog-entry:hover{
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
+    background: var(--rp-moon-overlay);
+    transition: 0.2s;
+}
+
+.blog-entry div {
+    width: calc(100% - 17rem);
+    padding: 1rem;
+}
+
+.blog-entry img{
+    width:15rem;
+    object-fit: cover;
+    border-radius: 0 0.5rem 0.5rem 0;
+}
+
+@media only screen and (max-width: 700px) {
+    .blog-entry div {
+        width: calc( 100% - 2rem);
+    }
+
+    .blog-entry img {
+        width: 100%;
+        max-height: 15rem;
+        border-radius: 0 0rem 0.5rem 0.5rem;
+    }
+}
+
+.blog-entry h4{
+    margin-top:0.5rem;
+    margin-bottom: 0.5rem;
+}

src/routes/style.css

@@ -0,0 +1,92 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
+
+
+body {
+	color: var(--rp-moon-text);
+	background: var(--rp-moon-base);
+    padding: 0;
+    margin: 0;
+    text-align: justify; 
+}
+
+pre {
+    background: var(--rp-moon-base);
+    border-radius: 0.5rem;
+}
+
+a {
+    color: var(--rp-moon-iris);
+    text-decoration: none;
+}
+
+a:visited {
+    color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
+}
+
+
+.nav { 
+    margin: auto;
+    margin-top: 1rem;
+
+    padding: 1rem;
+    max-width: 60rem;
+    width: calc(100% - 2rem);
+
+    font-family: "Fraunces", serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings:
+        "SOFT" 0,
+        "WONK" 0;
+    font-size:1.728rem;
+}
+
+a.nav{
+    margin: 1rem;
+    margin-left: 0rem;
+    padding-left: 0rem;
+    color: var(--rp-moon-foam);
+    #text-decoration: underline;
+}
+
+main {
+    padding: 1rem;
+    margin: auto;
+    #margin-top: 1rem;
+    max-width: 60rem;
+    width: calc(100% - 2rem);
+    #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+}
+
+.date{
+    text-align: right;
+    color: var(--rp-moon-subtle)
+}
+
+hr {
+    color: var(--rp-moon-muted);
+}
+
+
+h1{font-size: 2.986rem}
+h2{font-size: 2.488rem}
+h3{font-size: 2.074rem}
+h4{font-size: 1.728rem}
+
+ h1, h2, h3, h4{
+    font-family: "Fraunces", serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    text-align: left;
+    font-variation-settings:
+        "SOFT" 0,
+        "WONK" 0;
+}
+
+h4{
+    color: var(--rp-moon-rose);
+}
+
+