Better layout

src/components/alert-header.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let text = '';
+</script>
+<div class="w-full h-min bg-red-500">
+	<span class="ml-5">{text}</span>
+	<hr class="w-full">
+</div>

src/components/header.svelte

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

src/components/maincontent.svelte

@@ -0,0 +1,3 @@
+<div class="h-full w-full grid grid-cols-7 gap-3">
+	<slot/>
+</div>

src/components/navbutton.svelte

@@ -4,7 +4,33 @@
 </script>
 
 <a href="{link}">
-<button class="bg-slate-700 py-2 px-4 rounded-xl hover:ring">
+<button class="text-slate-50 py-2 px-4 font-montserrat font-light link-underline">
 	{text}
 </button>
 </a>
+
+<style>
+	.link-underline {
+		display: inline-block;
+		position: relative;
+	}
+
+	.link-underline:after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		transform: scaleX(0);
+		height: 2px;
+		bottom: 0;
+		left: 0;
+		background-color: #5EECBE;
+		transform-origin: bottom right;
+		transition: transform 0.25s ease-out;
+	}
+
+	.link-underline:hover:after {
+		transform: scaleX(1);
+		transform-origin: bottom left;
+		background-color: #638CF6;
+	}
+</style>

src/routes/__layout.svelte

@@ -1,17 +1,21 @@
 <script>
 	import '../app.css';
-  import Header from '../components/header.svelte'
+	import Header from '../components/header.svelte';
+  import AlertHeader from '../components/alert-header.svelte';
 </script>
 
-<div class="bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen text-slate-100">
-  <!-- Header -->
-  <Header/>
-	<slot />
+<div class="flex flex-col bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen text-slate-100">
+  <!-- Possible alert header -->
+  <!--<AlertHeader text='ALERT'/>-->
+	<!-- Header -->
+	<Header />
+  <!-- Main content -->
+		<slot />
 </div>
 
 <!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 
 https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
 -->
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&display=swap');
 </style>

src/routes/index.svelte

@@ -1,5 +1,9 @@
+<script>
+	import Maincontent from "../components/maincontent.svelte";
+</script>
 <svelte:head>
 	<title>Welcome</title>
 </svelte:head>
 
-Home page
+<Maincontent>
+</Maincontent>

tailwind.config.cjs

@@ -6,6 +6,13 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
+        montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans]
+      },
+      gridTemplateRows: {
+        '12': 'repeat(12, minmax(0, 1fr))',
+      },
+      gridRow: {
+        'span-11': 'span 11 / span 11',
       }
     },
     container: {