From 14c7854aa834fe23cd46ff08e4b81a1062d09408 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Wed, 3 Apr 2024 02:44:24 -0700
Subject: [PATCH] style: Refactor SVG classes and add copy button for Discord
 username

---
 src/lib/assets/Coredump.svelte          |  2 +-
 src/lib/assets/Name.svelte              |  2 +-
 src/lib/components/Navbar/Navbar.svelte |  4 ++--
 src/lib/components/Socials.svelte       | 20 +++++++++++++++++---
 src/routes/+page.svelte                 |  4 +---
 src/routes/blog/+page.svelte            |  4 ++--
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/lib/assets/Coredump.svelte b/src/lib/assets/Coredump.svelte
index 8e72441..a343ea1 100644
--- a/src/lib/assets/Coredump.svelte
+++ b/src/lib/assets/Coredump.svelte
@@ -10,7 +10,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	version="1.1"
 	viewBox="0 0 2048 416"
-	class="diagram select-none font-mono hidden sm:block"
+	class="diagram select-none font-mono"
 	text-anchor="middle"
 	font-size="13px"
 	stroke-linecap="round"
diff --git a/src/lib/assets/Name.svelte b/src/lib/assets/Name.svelte
index 976a6f0..c2a2405 100644
--- a/src/lib/assets/Name.svelte
+++ b/src/lib/assets/Name.svelte
@@ -10,7 +10,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	version="1.1"
 	viewBox="0 0 2104 416"
-	class="diagram select-none hidden sm:block font-mono"
+	class="diagram select-none font-mono"
 	text-anchor="middle"
 	font-size="13px"
 	stroke-linecap="round"
diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index ed40e86..45a0498 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -26,13 +26,13 @@
 </script>
 
 <nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-50">
-	<div class="container mx-auto flex justify-between items-center h-full gap-4">
+	<div class="container mx-auto flex justify-between items-center h-full gap-4 overflow-x-auto">
 		{#if current === 'blog'}
 			<Coredump height="95%" href="/blog" />
 		{:else}
 			<Name height="100%" href="/" />
 		{/if}
-		<div class="flex gap-1 sm:gap-2 md:gap-4 lg:gap-14 justify-around align-middle">
+		<div class="flex gap-4 lg:gap-14 justify-around align-middle">
 			<a
 				href="/"
 				class="text-md sm:text-lg md:text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
diff --git a/src/lib/components/Socials.svelte b/src/lib/components/Socials.svelte
index b805f72..95fa97b 100644
--- a/src/lib/components/Socials.svelte
+++ b/src/lib/components/Socials.svelte
@@ -5,17 +5,28 @@
 		GithubLogo,
 		LinkedinLogo,
 		DiscordLogo,
-		EnvelopeClosed
+		EnvelopeClosed,
+		ClipboardCopy
 	} from 'svelte-radix';
 	import * as Popover from '$lib/components/ui/popover';
 
 	export let center = false;
 
 	import Button from './ui/button/button.svelte';
-	import PopoverContent from './ui/popover/popover-content.svelte';
+	import { toast } from 'svelte-sonner';
+
+	const copyDiscord = async () => {
+		try {
+			await navigator.clipboard.writeText('couscousdude');
+			toast('Copied Discord username to clipboard');
+		} catch (e) {
+			console.error(e);
+			toast('Failed to copy Discord username to clipboard');
+		}
+	};
 </script>
 
-<div class="flex gap-2 mt-2" class:justify-center={center}>
+<div class="flex gap-2 mt-2 flex-wrap" class:justify-center={center}>
 	<Button variant="ghost" size="icon" href="https://github.com/couscousdude">
 		<GithubLogo />
 	</Button>
@@ -37,6 +48,9 @@
 		<Popover.Content>
 			Discord (for some reason) doesn't support direct links to profiles. You can find me on discord
 			with my username, <strong>@couscousdude</strong>.
+			<Button variant="outline" size="icon" on:click={copyDiscord} class="mt-2"
+				><ClipboardCopy /></Button
+			>
 		</Popover.Content>
 	</Popover.Root>
 	<Popover.Root>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c6685e9..1caefc8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,9 +16,7 @@
 <main class="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-4xl md:text-6xl font-bold text-center tracking-tight mt-20">
-				👋 Hi, I'm Youwen,
-			</h1>
+			<h1 class="text-6xl font-bold text-center tracking-tight mt-20">👋 Hi, I'm Youwen,</h1>
 		</Typewriter>
 		<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
 			<Typewriter cursor mode="loop">
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 42bf4f0..72a6b11 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -22,8 +22,8 @@
 	<meta name="author" content="Youwen Wu" />
 </svelte:head>
 
-<main class="container max-w-5xl mx-auto my-8">
-	<div class="mx-auto w-full min-w-0 mb-4">
+<main class="max-w-4xl my-8 mx-4 md:mx-auto">
+	<div class="w-full min-w-0 mb-4">
 		<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
 			<div class="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
 			<ChevronRight class="h-4 w-4" />