Moved components to lib folder; slide animation for announcement bar

frontend/src/lib/components/announcement.svelte

@@ -0,0 +1,44 @@
+<!--
+    announcement.svelte
+
+    used to display a short announcement at the top of the site
+-->
+
+<script>
+    import { slide } from 'svelte/transition';
+    export let message;
+    export let color = 'red';
+    let noderef;
+
+    let visible = true;
+</script>
+
+{#if visible}
+    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
+        <span>{message}</span>
+        <input class="close-button" type="button" value="" on:click={() => visible = false}>
+    </div>
+{/if}
+
+<style>
+    .announcement {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 36px;
+        font-size: 18px;
+        color: white;
+    }
+
+    .close-button {
+        cursor: pointer;
+        background-color: white;
+        object-fit: contain;
+        -webkit-mask-image: url('$lib/images/icons/ui/cross.svg');
+        mask-image: url('$lib/images/icons/ui/cross.svg');
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        height: 20px;
+        width: 20px;
+    }
+</style>