Some progress

src/components/header.svelte

@@ -1,7 +1,10 @@
-<div class="h-16 align-middle ">
+<script>
-	<div class="h-full w-1/4 flex flex-row flex-wrap">
+	import Button from './navbutton.svelte'
+</script>
+<div class="h-16 align-middle grid grid-cols-4">
+	<div class="h-16 col-start-1 col-span-1 flex flex-row flex-wrap">
 		<img
-			class="h-5/6 ml-20 my-auto"
+			class="h-4/5 ml-20 my-auto"
 			src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
 			alt="Icon"
 		/>
@@ -10,5 +13,11 @@
 			<p class="h-min text-xs text-slate-400">Surviving the rewriting</p>
 		</div>
 	</div>
-	<hr class="border-slate-700" />
+	<div class="col-start-2 col-end-5">
+		<nav class="h-full flex items-center gap-2 text-slate-200 text-md">
+			<Button link="/" text="Home"/>
+			<Button link="/about" text="About"/>
+		</nav>
+	</div>
+	<hr class="col-span-full border-slate-700" />
 </div>

src/components/navbutton.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let link = '';
+	export let text = '';
+</script>
+
+<button class="bg-slate-700 py-2 px-4 rounded-xl hover:ring">
+	<a href={link}>{text}</a>
+</button>

src/routes/about.svelte

@@ -2,7 +2,4 @@
 	<title>About</title>
 </svelte:head>
 
-<h1>About this website</h1>
+About page
-<p>TODO....</p>
-
-<a href="/">Home</a>

src/routes/index.svelte

@@ -1,3 +1,5 @@
 <svelte:head>
 	<title>Welcome</title>
 </svelte:head>
+
+Home page

tailwind.config.cjs

@@ -11,6 +11,9 @@ module.exports = {
     container: {
       center: true,
     },
+    minHeight: {
+      '1/2': '50%',
+    }
   },
   plugins: [],
 }