feat: added rose pine theme from prism syntax

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"
+---