More space between nav brand and actual navigation

src/lib/mainpage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { Heading, Li, List } from "flowbite-svelte";
+	
+	export let meData: { sectionTitle: string, sectionItems: { content: string }[] }[] = [];
+	
+</script>
+{#each meData as mdt}
+	<Heading>{mdt.sectionTitle}</Heading>
+	<List>
+	{#each mdt.sectionItems as sectItems}
+		<Li>{sectItems.content}</Li>
+	{:else}
+		<Li>No items</Li>
+	{/each}
+	</List>
+{:else}
+	<h5 class="text-center">No data about me (yet!)</h5>
+{/each}

src/lib/navbar.svelte

@@ -5,7 +5,7 @@
 	export let pageTitle: string = "Default Title";
 	export let toggleDarkModeButton: boolean = true;
 </script>
-<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-around items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
+<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-between items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
 	<NavBrand href="/">
     	<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
 			{ pageTitle.toUpperCase() }

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script>
+    import Mainpage from "$lib/mainpage.svelte";
+
 </script>
 
 <div class="p-8">
-<p>I Like trains</p>
+<Mainpage />
 </div>