rework this messy website partially

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+pnpm-lock.yaml

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -12,30 +12,31 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@iconify/json": "^2.2.8",
+		"@iconify/json": "^2.2.27",
-		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/adapter-auto": "^1.0.3",
-		"@sveltejs/kit": "^1.0.0",
+		"@sveltejs/adapter-static": "^2.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@sveltejs/kit": "^1.8.3",
-		"@typescript-eslint/parser": "^5.45.0",
+		"@typescript-eslint/eslint-plugin": "^5.53.0",
-		"@unocss/preset-icons": "^0.48.4",
+		"@typescript-eslint/parser": "^5.53.0",
-		"@unocss/preset-web-fonts": "^0.48.4",
+		"@unocss/preset-icons": "^0.48.5",
-		"eslint": "^8.28.0",
+		"@unocss/preset-web-fonts": "^0.48.5",
-		"eslint-config-prettier": "^8.5.0",
+		"eslint": "^8.34.0",
+		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
+		"prettier": "^2.8.4",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-svelte": "^2.9.0",
-		"svelte": "^3.54.0",
+		"svelte": "^3.55.1",
-		"svelte-check": "^3.0.1",
+		"svelte-check": "^3.0.4",
 		"svelte-dark-mode": "^2.1.0",
 		"svelte-time": "^0.7.1",
-		"tslib": "^2.4.1",
+		"tslib": "^2.5.0",
-		"typescript": "^4.9.3",
+		"typescript": "^4.9.5",
-		"unocss": "^0.48.4",
+		"unocss": "^0.48.5",
-		"vite": "^4.0.0"
+		"vite": "^4.1.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@unocss/reset": "^0.48.4",
+		"@unocss/reset": "^0.48.5",
 		"dayjs": "^1.11.7"
 	}
 }

src/lib/ThemeToggle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { afterUpdate } from "svelte";
+	import DarkMode from "svelte-dark-mode";
+
+	let theme: "dark" | "light";
+
+	afterUpdate(() => {
+		document.documentElement.className = theme;
+	});
+
+	let toggle = () => {
+		theme = theme === "dark" ? "light" : "dark";
+	};
+</script>
+
+<DarkMode bind:theme />
+
+<button
+	on:click={toggle}
+	class="cursor-pointer float-right flex items-center bg-transparent border-0 font-primary">
+	<div class="i-ic:{theme === 'dark' ? 'outline-light-mode' : 'outline-dark-mode'} text-black dark:text-white hover:text-blue-700 text-3xl md:text-4xl dark:hover:text-indigo-5" />
+	
+</button>

src/lib/foote.svelte

@@ -0,0 +1,11 @@
+<script>
+    import { fly } from 'svelte/transition';
+</script>
+
+<footer class="flex dark:bg-black bg-gray-300 flex-col text-xl fixed bottom-0 w-screen">
+	<div
+		class="flex flex-col justify-center sm:flex-row text-black dark:text-white gap-1 border-t border-t-solid border-t-grey p-3 text-sm"
+		>
+		<span class="flex flex-row items-center gap-1">Made with <div class="i-simple-icons:svelte text-[#FF3E00]" />SvelteKit</span>
+	</div>
+</footer>

src/lib/navi.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import ThemeToggle from '$lib/ThemeToggle.svelte';
+    import { fade, fly, slide } from 'svelte/transition';
+
+
+    // Menu
+    let showMenu = false;
+    
+    function toggleNav() {
+    showMenu = !showMenu;
+    }
+
+</script>
+
+<hader>
+<div class="dark:bg-gray-900 bg-neutral-100 shadow-md w-screen top-0 z-50">
+    <div class="flex grid">
+        <div>
+            <div class="flex flex-row">
+                <h1 class="mx-4 md:mt-3 hidden md:block"><a  class="text-black dark:text-white visited:dark:text-white visited:text-black md:text-4xl " href="/"><strong>Home</strong></h1>
+                    <ul class="flex md:flex-row flex-col md:flex md:gap-2 list-none md:justify-center md:place-content-center">
+                        <div class="flex my-3 gap-3 md:flex-row">
+                            <div class="ml-5 md:hidden flex text-4xl i-material-symbols-home-outline-rounded"><a href="/" class="text-black bg-black cursor-pointer dark:bg-white dark:text-white dark:hover:bg-indigo-5 hover:text-blue-700 hover:bg-blue-700 dark:hover:bg-indigo-5 dark:hover:text-indigo-5 ">Home</a></div>
+                                <div class="md:hidden flex md:text-5xl text-4xl i-ic-round-menu">
+                                    <button class="text-black bg-black cursor-pointer dark:bg-white dark:text-white dark:hover:bg-indigo-5 dark:hover:text-indigo-5 hover:bg-blue-700 hover:text-blue-700 " on:click="{toggleNav}"  >Menu</button>
+                                </div>
+                            </div>
+                        <div class="md:flex-row md:flex {showMenu ? 'flex' : 'hidden'} flex-col md:place-content-center md:justify-center flex-1 ml-6 gap-3 md:gap-4">
+                            <div><li class="{showMenu ? 'flex' : 'hidden'} md:mt-0 md:flex rounded-b-xl shrink place-items-center grid  hover:md:bg-gray-100 hover:shadow-lg hover:pt-2 dark:hover:md:shadow-sky-500/50 dark:md:hover:bg-sky-600 hover:duration-100"><div class="md:hidden i-ri-information-line bg-black dark:bg-white text-3xl px-1"></div><a href="/about"class="text-black dark:text-white visited:text-black text-center pt-5 w-20 pb-2 dark:visited:text-white">About</a></li></div>
+                            <div><li class="{showMenu ? 'flex' : 'hidden'} md:flex rounded-b-xl shrink place-items-center grid columns-3 hover:md:bg-gray-100 hover:shadow-lg hover:pt-2 dark:hover:md:shadow-sky-500/50 dark:md:hover:bg-sky-600 hover:duration-100"><div class="md:hidden i-mdi-briefcase-outline bg-black dark:bg-white text-3xl px-1"></div><a href="/projects" class="text-black dark:text-white visited:text-black text-center w-20 pb-2 pt-5 dark:visited:text-white">Projects</a></li></div>
+                            <!--<div><li class="{showMenu ? 'flex' : 'hidden'} md:flex rounded-b-xl shrink place-items-center grid columns-3 hover:md:bg-gray-100 hover:shadow-lg hover:pt-2 dark:hover:md:shadow-sky-500/50 dark:md:hover:bg-sky-600 hover:duration-100 mb-2 md:mb-0 "><div class="md:hidden i-mingcute-pen-2-line bg-black dark:bg-white text-3xl px-1"></div><a href="/blog" class="text-black dark:text-white visited:text-black text-center w-20 pb-2 pt-5 dark:visited:text-white">Blog</a></li></div>-->
+                        </div>
+                </ul>
+            </div>
+        </div>
+        <div class="flex-1 justify-center content-center float-right mr-6 my-4 h-7 w-7 md:my-5">
+        <ThemeToggle/> 
+        </div>
+    </div>
+</div>
+</hader>

src/lib/project.json

@@ -0,0 +1,18 @@
+[
+{
+    "name" : "Project Segfault",
+    "date" : "Sometime in 2022",
+    "desc" : "Open source development and hosted services.",
+    "url" : "https://projectsegfau.lt",
+    "image" : "https://github.com/ProjectSegfault/Logo/raw/main/png/logo_semi_transparent.png",
+    "imdes" : ""
+},
+{
+    "name" : "Mario Kart Wii 3DS",
+    "date" : "Sometime in 2018",
+    "desc" : "A mod that aims to port mario kart wii tracks and functions to mario kart 3DS.",
+    "url" : "https://github.com/orgs/MKW3DS/repositories",
+    "image" : "https://github.com/Midou36O/MKW3DS-Launcher/raw/master/BootNTR/romfs/sprites/topBackground.png",
+    "imdes" : ""
+}
+]

src/routes/+layout.svelte

@@ -3,13 +3,15 @@
     import "$lib/style.css";
     import Foote from "$lib/foote.svelte";
     import "@unocss/reset/tailwind.css";
+	import Navi from "$lib/navi.svelte";
+    export const prerender = true;
 </script>
 
 <style>
 </style>   
 
+
+
 <main class="dark:bg-black bg-gray-300">
    <slot />
 </main>
-
-<Foote/>

src/routes/+page.svelte

@@ -1,22 +1,24 @@
 <script>
     import data from '$lib/data.json';
-	import Navi from '$lib/navi.svelte';
+    import { fly } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
 </script>
-    <Navi/>
+    <body class="dark:bg-black bg-gray-300 text-black dark:text-white font-sans" id="content">
-    <body class="dark:bg-black bg-gray-300 font-sans min-h-screen" id="content">
         <div class="text-center">
-            <div class="justify-center flex items-center m-auto shrink overflow-hidden h-screen">
+            <div class="justify-center flex items-center m-auto shrink overflow-hidden h-screen ">
                 <div class="items-center justify-center">
-                    <div class="text-black dark:text-white text-4xl"><h1>{data.name}</h1></div>
+                    <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 400, x: -50, easing: quintOut}} >
-                    <div class="text-black dark:text-white my-3"><p id="" style="margin-top: -15px;">{@html data.description}</p></div>
+                    <div class="text-4xl"><h1>{data.name}</h1></div>
-                    <div>
+                    <div class="my-3"><p id="" style="margin-top: -15px;">{@html data.description}</p></div>
-                    <hr class="text-black bg-black dark:bg-white dark:text-white text-center justify-center m-auto my-2" style="width:60%;text-align:center;"/>
+                    </div>
-                </div>
+                    <hr in:fly={{ delay: 300,  duration: 300, x: 0, easing: quintOut}} out:fly={{ duration: 400, x: 0, easing: quintOut}} class="border-black dark:border-white w-100%"/>
-                    <div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-yellow-500">
+                    <div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 400, x: 50, easing: quintOut}} >
-                    <div><a class="text-black dark:text-white i-carbon-logo-github" href="{data.github}{data.gh} " title="Midou's GitHub" >G</a></div>
+                    <div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-black hover:dark:text-white">
-                    <div><a class="text-black dark:text-white i-simple-icons-matrix" href="{data.matrix}{data.mtx}"title="Midou's Matrix">M</a></div>
+                    <div><a class="i-carbon-logo-github" href="{data.github}{data.gh}" title="Midou's GitHub">G</a></div>
-                    <div><a class="text-black dark:text-white i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
+                    <div><a class="i-simple-icons-matrix" href="{data.matrix}{data.mtx}" title="Midou's Matrix">M</a></div>
-                    <div><a class="text-black dark:text-white i-ph-currency-circle-dollar-bold text-4xl" href="{data.github}sponsors/{data.donate}" title="Donate to Midou.">D</a></div>
+                    <div><a class="i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
+                    <div><a class="i-ph-currency-circle-dollar-bold text-4xl" href="/donate" title="Donate to Midou.">D</a></div>
+                    </div>
                     </div>
                     </div>
                 <br>

src/routes/about/+page.svelte

@@ -1,7 +1,4 @@
 <script>
-    import {blur} from 'svelte/transition';
-	import Navi from '$lib/navi.svelte';
-    import Time from "svelte-time";
     import dayjs from "dayjs";
     import relativeTime from "dayjs/plugin/relativeTime";
     // DayJS
@@ -12,9 +9,8 @@
 
 </script>
 
-<Navi/>
 <div class="min-h-screen">
-    <div class="flex place-content-center content-center place-items-center gap-3 rounded-2xl mx-7 md:mx-30 my-6 outline outline-offset-0 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
+    <div class="mt-70px md:mt-100px flex place-content-center content-center place-items-center gap-3 rounded-2xl mx-7 md:mx-30 my-6 outline outline-offset-0 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
         <div class="flex flex-row gap-2 my-4">
             <div class="i-zondicons-information-solid m-1 text-stone-700 dark:text-indigo-300 text-4xl"></div>
             <h1 class="text-stone-700 dark:text-indigo-400 text-4xl">About</h1>
@@ -26,7 +22,7 @@
             <h2 class="text-5xl text-black dark:text-white ">Who i am</h2>
         </div>
         </div>
-        <div class="text-xl pt-2 px-5 md:px-40 md:text-left text-black dark:text-white ">
+        <div class="text-xl pt-2 px-5 md:px-40 md:text-left mb-50px text-black dark:text-white ">
             <p>I'm a passionate programmer who has nothing to do with his life other than to just live in front of a computer and that's it. 
                 However i also have other passions and such. 
                 Well this is just temporary, don't really expect me to add something useful in it.
@@ -38,4 +34,4 @@
             
             </p>
         </div>
-</div>
+</div>

src/routes/blog/+page.js

@@ -0,0 +1,12 @@
+export async function load( { data, fetch } ) {
+   
+    const endpoint = "http://127.0.0.1:8055/items/Data";
+
+       	const res = await fetch(endpoint);
+        const content = await res.json();
+        console.log(content.data);
+    return {
+      content: content 
+    }
+    
+}

src/routes/blog/+page.svelte

@@ -0,0 +1,25 @@
+<script>
+
+  export let content; 
+  const posts = { content };
+  console.log(content);
+
+</script>
+<div class="mt-70px md:mt-80px mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 mt-4 gap-3 mx-4 grid-cols-1 ">
+    {#each content as data (data.id) }
+        <div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">
+            <div class="md:flex"> 
+                <div class="md:shrink-0">
+                    <img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-full md:w-45 w-screen object-cover h-48" src="{data.img}" alt="e">
+                </div>
+                <div class="pb-20 pt-5 px-8 md:py-2 md:px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-full">
+                    <div><h3 class="text-3xl dark:text-white text-black text-center">{data.name}</h3></div>
+                    <div class="text-sm dark:text-white text-black text-center">{data.date}</div>                    
+                    <div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="eee">Check it out</a></div>
+                </div>
+            </div> 
+        </div>
+        {:else}
+        <p>Ayo wait a second</p> 
+    {/each}
+</div>

src/routes/donate/+page.svelte

@@ -0,0 +1,29 @@
+<script>                                    
+  import { fly } from 'svelte/transition';  
+  import { quintOut } from 'svelte/easing'; 
+</script>                                   
+                                            
+<body class="dark:bg-black bg-gray-300 font-sans" id="content">
+  <div class="text-center">
+    <div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen "> 
+    <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} > 
+    <h1 class="text-black dark:text-white text-4xl">Donate</h1>
+    <p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
+    </div>
+      <hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black w-1/6"/>
+      <div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} >
+      <a href="https://github.com/sponsors/midou36o">
+        <div class="flex flex-row pt-5">
+          <div class="i-carbon-logo-github text-black text-2xl"></div><p class="text-1xl text-black pl-2">GitHub Sponsors</p>
+        </div>  
+      </a> 
+       <a href="/donate/monero">
+        <div class="flex flex-row">
+          <div class="i-tabler-coin-monero pl-3 text-black text-2xl"></div><p class="text-1xl text-black pl-2">Monero</p>
+        </div>  
+      </a> 
+      </div>
+   </div> 
+  </div>
+
+</body>

src/routes/donate/monero/+page.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+</script>
+
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
+  <div class="text-center">
+   <div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
+      <div in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: 50, easing: quintOut}} class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl"></div>
+      <h1  in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: 50, easing: quintOut}} class="text-black dark:text-white text-4xl md:pr-2">Monero</h1>
+      <div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}   out:fly={{ duration: 300, y: 0, easing: quintOut}}  class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md"></div>
+      <div in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}  out:fly={{ duration: 300, y: -50, easing: quintOut}} class="flex flex-col md:px-2 text-center md:text-left">
+        <h1 class="text-3xl pb-3">QR code:</h1>
+        <img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-10% md:h-1.5/4 w-80% text-center items-center h-auto"/>
+        <h1 class="underline-offset-auto hover:underline text-3xl"><a href="monero:44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe"> Monero wallet:</a></h1>
+        <p><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
+      </div>
+  </div>                                                                                                                  
+</body>                                                                                                                   

src/routes/projects/+page.svelte

@@ -1,22 +1,20 @@
 <script>
-    import Navi from '$lib/navi.svelte';
     import proj from '$lib/project.json'; 
 </script>
-<Navi/>
+<div class="mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 gap-3 mx-4 grid-cols-1">
-<div class="min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 mt-4 gap-3 mx-4 grid-cols-1 ">
     {#each proj as { name, date, desc, url, image, imdes }}
         <div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">
             <div class="md:flex"> 
                 <div class="md:shrink-0">
-                    <img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-full md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}">
+                    <img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-50 md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}">
                 </div>
-                <div class="pb-20 pt-5 px-8 md:py-2 md:px-8 md:rounded-r-lg md:rounded-none rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-full">
+                <div class="pb-20 pt-5 px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-50">
                     <div><h3 class="text-3xl dark:text-white text-black text-center">{name}</h3></div>
                     <div class="text-sm dark:text-white text-black text-center">{date}</div>                    
                     <div><p class="dark:text-white text-black text-sm">{desc}</p></div>
-                    <div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Access the project</a></div>
+                    <div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Check it out</a></div>
                 </div>
             </div> 
         </div>
-    {/each}
+    {/each}    
-</div>
+</div>

svelte.config.js

@@ -1,4 +1,5 @@
-import adapter from '@sveltejs/adapter-auto';
+// import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -8,7 +9,15 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(
+			{
+				pages: 'build',
+				assets: 'build',
+				fallback: 'index.html',
+				precompress: false,
+				strict: true
+			}
+		)
 	}
 };
 

unocss.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
 		presetWebFonts({
 			provider: 'bunny',
 			fonts: {
-				sans: 'Outfit',
+				sans: ['Outfit', 'Comic Sans MS'],
 				mono: ['Fira Code'],
 
 			}