fix: katex formatting and logo styles

src/lib/app.css

@@ -34,6 +34,8 @@
 		--ring: 240 10% 3.9%;
 
 		--radius: 0.5rem;
+
+		--cursor-color: theme('colors.foreground');
 	}
 
 	.dark {
@@ -75,7 +77,22 @@
 	body {
 		@apply bg-background text-foreground;
 	}
-	.text-link {
+}
+
+@layer components {
+	.dots-background {
+		--dot-bg: theme('colors.background');
+		--dot-color: theme('colors.foreground');
+		--dot-size: 1px;
+		--dot-space: 22px;
+		background:
+			linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
+				center / var(--dot-space) var(--dot-space),
+			linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
+				var(--dot-space) var(--dot-space),
+			var(--dot-color);
+	}
+	.link {
 		@apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
 	}
 }

src/lib/assets/Coredump.svelte

@@ -253,7 +253,8 @@
 
 <style lang="postcss">
 	.opendot {
-		@apply stroke-zinc-400 dark:stroke-zinc-400 fill-none;
+		/* @apply stroke-zinc-400 dark:stroke-zinc-400 fill-none; */
+		@apply stroke-zinc-400 dark:stroke-zinc-300 fill-none stroke-2;
 	}
 	.logo {
 		& .text {

src/lib/components/Footer.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { GithubLogo } from 'svelte-radix';
 	import Separator from './ui/separator/separator.svelte';
 	import Socials from './Socials.svelte';
 </script>

src/lib/components/Socials.svelte

@@ -61,14 +61,14 @@
 		</Popover.Trigger>
 		<Popover.Content>
 			<p>
-				You can reach my Gmail at <a class="text-link" href="mailto:youwenw@gmail.com"
+				You can reach my Gmail at <a class="link" href="mailto:youwenw@gmail.com"
 					>youwenw@gmail.com</a
 				>
 			</p>
 			<br />
 			<p>
 				Or, if you prefer, you can securely email me on Protonmail at <a
-					class="text-link"
+					class="link"
 					href="mailto:youwenw@protonmail.com">youwenw@protonmail.com</a
 				>
 			</p>

src/lib/components/UnderConstruction.svelte

@@ -1,4 +1,4 @@
-<main class="background w-full h-screen">
+<main class="dots-background w-full h-screen">
 	<div class="container max-w-3xl mx-auto p-10">
 		<h1 class="text-4xl md:text-5xl font-bold text-center tracking-tight mt-20">
 			🚧 Under Construction 🚧

src/routes/+page.svelte

@@ -13,10 +13,10 @@
 	<meta name="author" content="Youwen Wu" />
 </svelte:head>
 
-<main class="background px-4">
+<main class="dots-background px-4">
 	<div class="container max-w-4xl 2xl:max-w-5xl mx-auto p-10">
 		<Typewriter mode="scramble" scrambleDuration={750}>
-			<h1 class="text-5xl sm:text-6xl font-bold text-center tracking-tight mt-20">
+			<h1 class="text-5xl sm:text-6xl font-bold text-center tracking-tight mt-14 sm:mt-20">
 				👋 Hi, I'm Youwen,
 			</h1>
 		</Typewriter>
@@ -66,13 +66,12 @@
 					I'm currently working on:
 					<ul class="list-disc ml-4">
 						<li>
-							<a class="text-link" href="https://github.com/couscousdude/discard" target="_blank"
+							<a class="link" href="https://github.com/couscousdude/discard" target="_blank"
 								>discard</a
 							>, a lightweight self-generating flashcards app.
 						</li>
 						<li>
-							<a class="text-link" href="https://github.com/couscousdude/aural" target="_blank"
+							<a class="link" href="https://github.com/couscousdude/aural" target="_blank">aural</a
-								>aural</a
 							>, a no-frills Ollama client for interfacing with local LLMs using voice-to-text,
 							without any internet.
 						</li>
@@ -108,18 +107,4 @@
 </main>
 
 <style lang="postcss">
-	.background {
-		--dot-bg: theme('colors.background');
-		--dot-color: theme('colors.foreground');
-		--dot-size: 1px;
-		--dot-space: 22px;
-		background:
-			linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
-				center / var(--dot-space) var(--dot-space),
-			linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
-				var(--dot-space) var(--dot-space),
-			var(--dot-color);
-
-		--cursor-color: theme('colors.foreground');
-	}
 </style>