Add animations

src/lib/islands/overlay-island.svelte

@@ -1,8 +1,10 @@
 <script>
+	import { fade } from "svelte/transition";
+
     export let variables = {title:""}
 </script>
 
-<div>
+<div in:fade={{duration: 150}} out:fade={{duration: 150}}>
     <span>{variables.title}</span>
     <slot />
 </div>

src/lib/navigation/header.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { fade } from "svelte/transition";
+
     export let title = 'title'
 </script>
 
@@ -9,7 +11,7 @@
           <img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo">
         </picture>
     </a>
-    <header>{title}</header>
+    <header in:fade={{duration: 150}} out:fade={{duration: 150}}>{title}</header>
 </div>
 <div class="headerBlock">
  <!-- This exists to prevent the headerBar overlapping anything below it -->

src/lib/navigation/loading.svelte

@@ -1,4 +1,8 @@
-<div id="container">
+<script>
+    import { fade } from "svelte/transition";
+</script>
+
+<div id="container" in:fade={{delay: 150, duration: 250}} out:fade={{duration: 250}}>
     <div class="spinner"></div>
     <p>Loading...</p>
 </div>