Moved components to lib folder; slide animation for announcement bar

frontend/src/lib/components/announcement.svelte

@@ -5,15 +5,20 @@
 -->
 
 <script>
+    import { slide } from 'svelte/transition';
     export let message;
     export let color = 'red';
     let noderef;
+
+    let visible = true;
 </script>
 
-<div bind:this={noderef} class="announcement" style="background-color: {color};">
+{#if visible}
-    <span>{message}</span>
+    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
-    <input class="close-button" type="button" value="" on:click={() => noderef.parentNode.removeChild(noderef)}>
+        <span>{message}</span>
-</div>
+        <input class="close-button" type="button" value="" on:click={() => visible = false}>
+    </div>
+{/if}
 
 <style>
     .announcement {

frontend/src/routes/+layout.svelte

@@ -6,7 +6,10 @@
     import '$lib/css/fonts.css';
     import '$lib/css/colors.css';
     import '$lib/css/anims.css';
+
+    import Announcement from '$lib/components/announcement.svelte';
     
 </script>
 
+<Announcement message="This is an announcement" color="var(--col_accent)"/>
 <slot></slot>

frontend/src/routes/+page.svelte

@@ -1,9 +1,7 @@
 <script>
-	import Announcement from "../components/announcement.svelte";
+	import Announcement from "../lib/components/announcement.svelte";
 
 </script>
 
-<Announcement message="This is an announcement" color="blue"/>
-
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> <i>(SvelteKit)</i> to read the <b>SvelteKit</b> documentation</p>