feat: add back to top button on /blog

src/lib/components/BackToTop.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import Button from './ui/button/button.svelte';
+	import { ChevronUp } from 'svelte-radix';
+
+	let showButton = false;
+
+	function handleScroll() {
+		const threshold = 400;
+
+		showButton = window.scrollY > threshold;
+	}
+
+	function scrollToTop() {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth'
+		});
+	}
+</script>
+
+<svelte:window on:scroll={handleScroll} />
+
+{#if showButton}
+	<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
+		<Button size="icon" on:click={scrollToTop}><ChevronUp /></Button>
+	</div>
+{/if}

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '$lib/app.css';
+	import '$lib/app.pcss';
 	import Navbar from '$lib/components/Navbar/Navbar.svelte';
 	import { ModeWatcher } from 'mode-watcher';
 	import '@fontsource/geist-sans/latin.css';

src/routes/blog/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import BackToTop from '$lib/components/BackToTop.svelte';
 	import '$lib/styles/katex.css';
 	import '$lib/styles/markdown.css';
 </script>
 
+<BackToTop />
 <slot />

src/routes/blog/+page.svelte

@@ -43,7 +43,7 @@
 		{#if loaded}
 			<Coredump width="100%" height="auto" transition="vertical" />
 			<p
-				class="text-lg sm:text-xl md:text-2xl text-muted-foreground font-mono"
+				class="text-lg sm:text-xl md:text-2xl text-muted-foreground font-mono text-center sm:text-left"
 				in:fly={{ duration: 300, y: -50, delay: 200 }}
 			>
 				my blog on computer science, math, games, art, and more.