feat: moveup fab

src/components/MoveUpButton.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { mdiChevronDoubleUp } from '@mdi/js';
+	import Icon from 'mdi-svelte';
+	let y: number = 0;
+
+	$: enabled = y > 100;
+
+	function onClick() {
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+	}
+</script>
+
+<svelte:window bind:scrollY={y} />
+
+{#if enabled}
+	<button on:click={onClick}><Icon path={mdiChevronDoubleUp} /></button>
+{/if}
+
+<style>
+	button:focus {
+		box-shadow: 0 0 5px var(--special-shadow-color);
+	}
+	button {
+		border-radius: 35px;
+		width: 48px;
+		height: 48px;
+		position: fixed;
+		bottom: 32px;
+		right: 32px;
+		color: var(--text-soft-color);
+		border: 2px solid var(--border-color);
+		background-color: var(--light-color);
+	}
+	button:hover {
+		color: var(--special-color);
+		border: 4px solid var(--border-color);
+	}
+</style>

src/modules.d.ts

@@ -0,0 +1,14 @@
+declare module 'mdi-svelte' {
+	import { SvelteComponentTyped } from 'svelte';
+
+	export interface IconProps {
+		path: string;
+		size?: number | string;
+		color?: string;
+		flip?: boolean | string;
+		rotate?: number;
+		spin?: number | boolean;
+		title?: string;
+	}
+	export default class Icon extends SvelteComponentTyped<IconProps> {}
+}

src/routes/__layout.svelte

@@ -9,6 +9,7 @@
 	import Icon from 'mdi-svelte';
 	import '@fontsource/ubuntu-mono/400.css';
 	import Link from '../components/Link.svelte';
+	import MoveUpButton from '../components/MoveUpButton.svelte';
 
 	const NAV_ITEMS = [
 		{ href: '/blog', label: 'Blog' },
@@ -46,6 +47,7 @@
 		<slot />
 	</div>
 </div>
+<MoveUpButton />
 <footer>
 	<div class="container">
 		<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>