change frontpage image and toast animation

src/ui/Link.svelte

@@ -7,6 +7,9 @@
     export let alt = false;
     export let shift = false;
 
+    let classes = "";
+    export {classes as class};
+
     function click() {
         if (typeof target === 'string') {
             navigate(target);
@@ -38,6 +41,6 @@
 
 <svelte:window on:keydown={handleHotkey} />
 
-<a href="#" on:click="{click}">
+<a href="#" on:click="{click}" class={classes}>
     <slot></slot>
 </a>

src/ui/Nav.svelte

@@ -1,10 +1,12 @@
 <script>
     import Link from './Link.svelte';
     import Icon from './Icon.svelte';
+
+    export let position = "sticky";
 </script>
 
 
-<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+<nav class="{position} top-0 bg-base-100 w-full flex justify-between items-center p-2">
     <div>
         <Link target="Home">
             <button class="btn btn-square btn-ghost align-middle">
@@ -13,7 +15,11 @@
         </Link>
     </div>
 
-    <div class="justify-self-end">
+    {#if $$slots.title}
+        <slot name="title"></slot>
+    {/if}
+
+    <div>
         <Link target="Settings">
             <button class="btn btn-square btn-ghost align-middle ">
                 <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />