wip

.gitea/workflows/build.yaml

@@ -1,61 +0,0 @@
-
-
-name: Gitea Actions Demo
-run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  Build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out repository code
-        uses: actions/checkout@v5
-      - name: Setup Node v20
-        uses: actions/setup-node@v5
-        with:
-          node-version: 20 
-      - name: Install dependencies
-        run: |
-          cd ${{ gitea.workspace }}
-          npm ci
-      - name: Build
-        run: npm run build
-      - name: Save Build Artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: build-artifact
-          path: ${{ gitea.workspace }}/build/*
-          include-hidden-files: true
-
-  Upload:
-    runs-on: ubuntu-latest
-    needs: Build
-    steps:
-      - name: Download artifact
-        uses: actions/download-artifact@v3
-        with:
-          name: build-artifact
-          path: ${{ gitea.workspace }}/build
-      - name: setup ssh
-        run: |
-          mkdir -p ~/.ssh/
-          echo "$SSH_PRIVATE_KEY" > ../private.key
-          sudo chmod 600 ../private.key
-          echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts 
-        shell: bash
-        env:
-          SSH_PRIVATE_KEY: ${{secrets.SSH_KEY}}
-          SSH_KNOWN_HOSTS: ${{secrets.SSH_KNOWN_HOSTS}}
-      - name: upload to web
-        run: |
-          scp -r -i ${{ gitea.workspace }}/../private.key -P ${{ secrets.BLOG_PORT }} build blog@madeio.net:/var/www/html/
-          ssh -i ${{ gitea.workspace }}/../private.key -p ${{ secrets.BLOG_PORT }} blog@madeio.net "$PERM_COPY"
-        env:
-          PERM_COPY: chmod -R 775 /var/www/html/build; cp -r /var/www/html/build/* /var/www/html/; rm -r /var/www/html/build
-      - name: cleanup ssh
-        run: |
-          rm ${{ gitea.workspace }}/../private.key
-          rm ~/.ssh/known_hosts

2

@@ -0,0 +1,135 @@
+@import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
+
+.fraunces-me {
+ }
+
+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: 2rem;
+    max-width: 60rem;
+    width: calc(100%-4rem);
+
+    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-text);
+}
+
+.main {
+    background: var(--rp-moon-surface);
+    padding: 1rem;
+    margin: auto;
+    margin-top: 1rem;
+    max-width: 60rem;
+    width: calc(100%-4rem);
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+    border-radius: 0.5rem;
+}
+
+hr {
+    color: var(--rp-moon-muted);
+}
+
+
+
+.blog-entry{
+    background: var(--rp-moon-overlay);
+    padding-left: 0.5rem;
+    border-radius: 0.5rem;
+    #display: block;
+    #height:10rem;
+    width:100%;
+    color: var(--rp-moon-text) !important;
+    text-decoration : none !important;
+    display: flex;
+}
+
+
+
+.blog-entry:hover{
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-surface) h s calc(l * 0.85));
+    transition: 0.15s;
+}
+
+.blog-entry div {
+    width: calc(100% - 15rem);
+    min-width: 20rem;
+}
+
+
+
+.blog-entry img{
+    #height:100%;
+    width:15rem;
+    object-fit: cover;
+    border-radius: 0 0.5rem 0.5rem 0;
+}
+
+@media only screen and (max-width: 600px) {
+    .blog-entry div {
+        width: 100%;
+    }
+
+    .blog-entry img {
+        width: 100%;
+    }
+}
+
+.blog-entry h4{
+    margin-top:1rem;
+}
+
+
+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;
+}
+
+

src/routes/+layout.svelte

@@ -1,63 +1,21 @@
 <script lang="ts">
-	import favicon from '/favicon.png';
+	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>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
-	<meta property="og:type" content="website" />
 </svelte:head>
 
-<nav class="media-margin">
+<div class="nav">
-	<a href="/">Home</a>
+	<a class="nav" href="/">Home</a>
-	<a href="/about">About</a>
+	<a class="nav" href="/about">About</a>
-	<a
+</div>
-		href="https://bsky.app/profile/amyt3a.bsky.social"
-		aria-label="Link to my Bluesky account"
-		target="_blank"
-		><svg fill="none" class="bsky" viewBox="0 0 64 57"
-			><path
-				fill="var(--rp-moon-pine)"
-				d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
-			></path></svg
-		></a
-	>
-</nav>
-{@render children?.()}
 
-<style>
+<div class="main">
-	nav {
+	{@render children?.()}
-		font-family: 'Fraunces', serif;
+</div>
-		font-optical-sizing: auto;
-		font-weight: 400;
-		font-style: normal;
-		font-variation-settings:
-			'SOFT' 0,
-			'WONK' 0;
-		font-size: 1.728rem;
-	}
-
-	.bsky {
-		display: block;
-		height: 2rem;
-		float: right;
-	}
-
-	nav a {
-		margin: 1rem;
-		margin-left: 0rem;
-		padding-left: 0rem;
-		#border-bottom: solid var(--rp-moon-foam);
-		color: var(--rp-moon-foam);
-		&:visited {
-			color: var(--rp-moon-foam);
-		}
-	}
-</style>

src/routes/+page.server.ts

@@ -1,45 +0,0 @@
-import type { SvelteComponent } from 'svelte';
-import type { MDsveXComponent } from '$lib/types';
-
-export interface BlogEntry {
-    title: string;
-    src: string;
-    src_target: string;
-    img: string;
-    scale: string;
-    date: string;
-    desc: string;
-}
-
-
-export function load() {
-    const blog_entries: BlogEntry[] =
-        Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
-            .map(([key, value]) => {
-                return {
-                    src: key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
-                    metadata: (value as MDsveXComponent).metadata
-                } as Record<string, any>
-            })
-            .filter(entry => entry.metadata.listed)
-            .map(entry => {
-                entry.src = (entry.metadata.src ?? entry.src) as string;
-                entry.title = entry.metadata.title as string ?? "Needs Title!!";
-                entry.desc = entry.metadata.desc as string ?? "Needs Description!!";
-                entry.date = Date.parse(entry.metadata.date as string ?? "");
-                entry.src_target = (entry.src.includes('https://') || entry.src.includes('http://')) ? '_blank' : '';
-                [entry.img, entry.scale = ""] = (entry.metadata?.img_cov as string ?? "blog-1.png").split('|');
-                entry.img_bg = entry.metadata.img_bg == "dark" ? "var(--rp-moon-base" : "var(--rp-moon-text)";
-                entry.scale = (entry.scale == "") ? "" : "transform: scale(" + entry.scale + "); height:auto;border-radius:0;";
-
-                return entry;
-            })
-            .sort((a, b) => b.date - a.date)
-            .map((entry) => {
-                entry.date = new Date(entry.date).toDateString();
-                return entry as BlogEntry;
-            })
-    return {
-        blogs: blog_entries
-    };
-}

src/routes/+page.svelte

@@ -1,110 +1,34 @@
 <script lang="ts">
+	import type { MDsveXComponent } from '$lib/types';
+	import type { SvelteComponent } from 'svelte';
 	import './style-entries.css';
-	import type { BlogEntry } from './+page.server.ts';
 
-	let { data } = $props();
+	const blog_entries: [string, SvelteComponent][] = Object.entries(
-	let blogs = data.blogs as BlogEntry[];
+		import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
-	let desc =
+	).map(([key, value]) => [
-		"This is a collection of things I've set up and created that I think might interest others.";
+		key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
+		value as MDsveXComponent
+	]);
+	console.log(blog_entries);
 </script>
 
-<svelte:head>
-	<title>Home - Amys Blog</title>
-	<meta property="og:title" content="Home - Amys Blog" />
-	<meta property="og:description" content={desc} />
-	<meta property="og:image" content="https://madeio.net/blog-covers/flame.jpg" />
-</svelte:head>
-
 <main>
-	<div class="media-margin">
+	<h1>Welcome to SvelteKit</h1>
-		<h1>Hi, I'm Amy</h1>
+	<p>
-		<p>{desc}</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>
-	{#each blogs as blog (blog.src)}
+				<img src="blog-1.png" class="blog-image" />
-		<a href={blog.src} target={blog.src_target} class="blog-entry">
-			<div class="blog-text">
-				<h4>{blog.title}</h4>
-				<p>{blog.desc}</p>
-				<p class="date">{blog.date}</p>
-			</div>
-			<div class="blog-img" style={'background-color:' + blog.img_bg}>
-				<span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img
-					src={'/blog-covers/' + blog.img}
-					alt="Preview of the described article"
-					style={blog.scale}
-				/>
-				<!---->
 			</div>
 		</a>
+		<br />
 		<!-- svelte:component this={page.default} /-->
 	{/each}
 </main>
-
-<style>
-	.blog-entry {
-		display: block;
-		margin: var(--d3) 0;
-		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.55));
-		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-text {
-		width: calc(100% - 15rem - var(--d3) * 2);
-		padding: var(--d3);
-	}
-
-	.blog-img {
-		width: 15rem;
-		margin: 0;
-		padding: 0;
-		background-color: var(--rp-moon-text);
-		border-radius: 0 calc(var(--border-round) + 3px) calc(var(--border-round) + 3px) 0;
-	}
-
-	.blog-entry img {
-		width: 15rem;
-		display: inline-block;
-		vertical-align: middle;
-		height: 100%;
-		object-fit: cover;
-		border-radius: 0 var(--border-round) var(--border-round) 0;
-	}
-
-	@media only screen and (max-width: 700px) {
-		.blog-text {
-			width: calc(100% - var(--d1) * 2);
-			padding: var(--d1);
-		}
-
-		.blog-img {
-			border-radius: 0 0rem var(--border-round) var(--border-round);
-			max-height: 10rem;
-		}
-
-		.blog-img {
-			width: 100%;
-		}
-
-		.blog-entry img {
-			width: 100%;
-			border-radius: 0 0rem var(--border-round) var(--border-round);
-		}
-	}
-
-	.blog-entry h4 {
-		margin-top: 0.5rem;
-		margin-bottom: 0.5rem;
-	}
-</style>

src/routes/about/+page.svelte

@@ -1,14 +0,0 @@
-<svelte:head>
-	<title>About - Amys Blog</title>
-	<meta property="og:title" content="About - Amys Blog" />
-</svelte:head>
-
-<main>
-	<div class="media-margin">
-		<h1>About</h1>
-		<p>
-			Hi, I'm Amy Retzerau! I'm a computer science student who wants to share my hobby in the hope
-			of helping like-minded people.
-		</p>
-	</div>
-</main>

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

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

src/routes/blogs/2-gitea-runner-on-podman-in-lxc/+page.svx

@@ -1,137 +0,0 @@
----
-title: Setup up Gitea Runner with Podman in LXC
-desc: "Using CLIs is very helpful, but setting up gitea actions in an LXC and using rootless Podman is not as straight forward as expected."
-date: 2025-09-17
-img_cov: gitea-logo.jpg
-listed: true
----
-
-# Setup PVE
-
-
-Setup Proxmox, so podman can run in unpreviliged container.
-Podman uses high user ids for it's containers, so we need to extend the range that is usable by LXCs.
-
-
-It is also required to change the limit explictly in the containers config, and we need to add a kernel module.
-Those ranges are defined in `/etc/subuid` for user ids and  `/etc/subgid` for group ids,
-in the from of `<usr>:<start_uid>:<count>`.
-You could change them manually or change them with
-
-(the first number defines the start and the secound the end of ids)
-
-```bash
-usermod --add-subuids 100000-300000 --add-subgids 100000-300000 root
-```
-
-So `/etc/subuid` should contains `root:100000:200000`.
-
-We also need to edit the LXC config `/etc/pve/lxc/<VMID>.conf`.
-
-```yaml
-# <container_uid> <host_uid> <count>
-lxc.idmap: u 0 100000 165536 # uids 0..165536 (container) -> 100000..265536 (host)
-lxc.idmap: g 0 100000 165536 # gids
-lxc.cgroup2.devices.allow: c 10:200 rwm  # cgroup2 for PVE >= 7.0
-lxc.mount.entry: /dev/net dev/net none bind,create=dir
-```
-
-I got the information from [here](https://forum.proxmox.com/threads/podman-in-rootless-mode-on-lxc-container.141790/)
-together with infos from the [official docu](https://github.com/containers/podman/blob/main/docs/tutorials/rootless_tutorial.md#etcsubuid-and-etcsubgid-configuration).
-
-
-# Setup LXC
-
-As we want to run podman as an unpreviliged user, lets create on:
-```bash
-useradd -U <USER_NAME>
-```
-
-```bash
-apt install podman
-systemctl --user -M act@ enable podman.socket
-```
-
-First, since we wanna run this rootless, we need a new unpreviliged user.
-
-The binary is [here available](https://dl.gitea.com/act_runner/).
-I placed it there `/usr/local/bin/act_runner` and made it executable by the new created user.
-```bash
-cd /usr/local/bin
-curl https://dl.gitea.com/act_runner/0.2.13/act_runner-0.2.13-linux-amd64 > act_runner
-chmod +x act_runner
-chown act:act act_runner
-```
-
-A config that references the regrister file and the podman socket is needed, I placed it in
-`/etc/act_runner/config.yaml`
-
-``` bash
-mkdir /etc/act_runner
-chown -R act:act /etc/act_runner
-```
-
-
-```yaml
-# config.yaml
-runner:
-  file: /etc/act_runner/.runner
-  envs:
-    XDG_RUNTIME_DIR directory: "/run/user/1000"
-
-container:
-  docker_host: "unix:///run/user/<USER_ID>/podman/docker.sock"
-
-cache:
-  # Enable cache server to use actions/cache.
-  enabled: true
-  # The directory to store the cache data.
-  # If it's empty, the cache data will be stored in $HOME/.cache/actcache.
-  dir: "/etc/act_runner/cache"
-```
-
-And last but not least, we need to regristrate the runner, wich will create the runner file:
-The token is accsasible through `Settings -> Actions -> Runners -> Create new Runner`. 
-
-(I'd recommend running the regristration as the unpreviliged user.)
-```bash
-/usr/local/bin/act_runner register -c /etc/act_runner/config.yaml \
-    --instance <GITEA ADRESS> --token <TOKEN>
-    --no-interactive
-```
-
-### Create Act Runner User Service
-Create a user service in in the following file: `/usr/lib/systemd/user/act_runner.servic`
-```ini
-Description=Gitea Actions runner
-Documentation=https://gitea.com/gitea/act_runner
-After=podman.socket
-
-[Service]
-ExecStart=/usr/local/bin/act_runner daemon -c /etc/act_runner/config.yaml
-Delegate=true
-Type=simple
-
-[Install]
-WantedBy=default.target
-```
-
-## Auto start user Services
-
-To start the user services, you can add a drop-in and add the Install, by running:
-
-```bash
-systemctl edit user@1001 --drop-in=start_act_runner
-```
-
-and inserting
-
-```ini
-[Install]
-WantedBy=multi-user.target
-```
-
-In the end, all left to do is, enable the user:
-```bash
-systemctl enable --now user@<USER_ID>
-```

src/routes/blogs/a.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	export let href;
-
-	let target = href.includes('https://') || href.includes('http://') ? '_blank' : '';
-</script>
-
-<a {href} {target}><slot /></a>

src/routes/blogs/blog.svelte

@@ -1,35 +1,23 @@
 <script context="module">
 	import img from './img.svelte';
-	import a from './a.svelte';
+	export { img };
-	import h1 from './h1.svelte';
-	import h2 from './h2.svelte';
-	import h3 from './h3.svelte';
-	export { img, a, h1, h2, h3 };
 </script>
 
 <script>
 	export let title;
 	export let date;
 	export let desc;
-	export let img_cov;
 
-	let ogImgage = 'https://madeio.net/blog-covers/' + (img_cov ?? 'flame.png').split('|')[0];
+	let ddate = new Date(Date.parse(date));
-	let ddate = new Date(Date.parse(date)).toDateString();
+	import './style-blog.css';
 </script>
 
-<svelte:head>
+export let alt;
-	<title>{title} - Amys Blog</title>
-	<meta property="og:title" content={title} />
-	<meta property="og:description" content={desc} />
-	<meta property="og:image" content={ogImgage} />
-</svelte:head>
 
+<h1>{title}</h1>
 <main>
-	<div class="title media-margin">
+	<p class="date">Last updated {ddate.toDateString()}</p>
-		<!-- prettier-ignore -->
+	<div class="blog-text">
-		<h1>{title}</h1><p class="date">Last updated {ddate}</p>
-	</div>
-	<div class="blog-text media-margin">
 		<p>{desc}</p>
 		<slot>
 			<!-- the mdsvex content will be slotted in here -->
@@ -39,42 +27,6 @@
 
 <style>
 	main {
-		padding: 0;
+		background-color: var(--rp-moon-surface);
-		border-radius: 1rem;
-	}
-
-	.title h1 {
-		width: calc(100% - 15rem);
-		vertical-align: baseline;
-		display: inline-block;
-	}
-
-	.title p {
-		width: 15rem;
-		display: inline-block;
-		text-align: right;
-		margin: 0;
-		#float: right;
-	}
-
-	.blog-text {
-		border-radius: var(--border-round);
-		#background: var(--rp-moon-surface);
-		#box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
-	}
-
-	@media only screen and (max-width: 700px) {
-		.title {
-			margin-bottom: -5.3px;
-		}
-
-		.title h1 {
-			display: block;
-			width: 100%;
-		}
-
-		.title p {
-			width: 100%;
-		}
 	}
 </style>

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

@@ -1,9 +0,0 @@
----
-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"
-listed: true
-img_cov: flame.jpg
-img_bg: dark
----

src/routes/blogs/h1.svelte

@@ -1 +0,0 @@
-<h2><slot /></h2>

src/routes/blogs/h2.svelte

@@ -1 +0,0 @@
-<h3><slot /></h3>

src/routes/blogs/h3.svelte

@@ -1 +0,0 @@
-<h4><slot /></h4>

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,14 +1,13 @@
 ---
 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."
-listed: true
-img_cov: blog-1.jpg
 ---
 
 
-# Static side generation
+## Static side generation
 The stack consists of:
 - [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction)
 - [mdsvex](https://mdsvex.pngwn.io/) 
@@ -16,9 +15,9 @@ The stack consists of:
 
 The core functionallity provides which allow you to combine svelte and markdown.
 
-![Tasd|20rem](/blog-covers/blog-1.png)
+![Tasd|20rem](/blog-1.png)
 
-# Image sizing
+## 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)`.
@@ -48,7 +47,7 @@ And then needs to be imported in the mdsvex layout:
 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
+## 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.

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

@@ -1,9 +1,7 @@
 ---
-title: "FemDev GameJam - Catastrophe"
+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"
-listed: true
-img_cov: catastrophe.png
 ---

src/routes/style.css

@@ -1,90 +1,67 @@
-@font-face {
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
-    font-family: 'fira';
-    font-style: normal;
-    font-weight: 500;
-    src: url('/fonts/FiraCode-Regular.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Fraunces';
-    font-style: normal;
-    font-weight: 100 900;
-    src: url('/fonts/Fraunces.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    src: url('/fonts/Inter.ttf') format('truetype');
-}
-
-: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;
-    max-width: 60rem;
+    margin: 0;
-    width:100%;
-    margin: auto;
     text-align: justify; 
-    font-family: Inter;
-}
-
-code {
-    background: var(--rp-moon-surface) !important;
-    padding: 3px;
-    border-radius: 0.5rem;
-    font-family: fira;
 }
 
 pre {
-    background: var(--rp-moon-surface) !important;
+    background: var(--rp-moon-base);
     border-radius: 0.5rem;
 }
 
-pre code{
-    padding:0px;
-}
-
 a {
     color: var(--rp-moon-iris);
     text-decoration: none;
+}
 
-    &:visited {
+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;
+    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 {
-    width: 100%;
+    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);
+    color: var(--rp-moon-subtle)
-    font-family: Fraunces;
 }
 
 hr {
@@ -109,17 +86,7 @@ h4{font-size: 1.728rem}
 }
 
 h4{
-    color: var(--rp-moon-foam);
+    color: var(--rp-moon-rose);
-}
-
-.media-margin{
-    margin: var(--d3);
-}
-
-@media only screen and (max-width: 700px) {
-    .media-margin{ 
-        margin: var(--d3) var(--d1);
-    }
 }
 
 

svelte.config.js

@@ -10,15 +10,13 @@ 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: {
-            _: path_to_layout
+            blog: path_to_layout
         }
     })],
     kit: {