From 43e4f8d49c06762fc028a2bd660b2f6fd2d53820 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Tue, 2 Apr 2024 19:56:27 -0700
Subject: [PATCH] style(navbar): usable on mobile

---
 src/lib/assets/Name.svelte              |  2 +-
 src/lib/components/Navbar/Navbar.svelte | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/assets/Name.svelte b/src/lib/assets/Name.svelte
index 8459dc2..fedc876 100644
--- a/src/lib/assets/Name.svelte
+++ b/src/lib/assets/Name.svelte
@@ -8,7 +8,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	version="1.1"
 	viewBox="0 0 2104 416"
-	class="diagram select-none"
+	class="diagram select-none hidden sm:block"
 	text-anchor="middle"
 	font-family="monospace"
 	font-size="13px"
diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index ae93d64..711e8e6 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -24,22 +24,22 @@
 </script>
 
 <nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full">
-	<div class="container mx-auto flex justify-between items-center h-full">
-		<Name height="90%" href="/" />
+	<div class="container mx-auto flex justify-between items-center h-full gap-4">
+		<Name height="100%" href="/" />
 		<div class="flex gap-14 justify-around align-middle">
 			<a
 				href="/"
-				class="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"
+				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"
 				class:selected={current === 'home'}>Home</a
 			>
 			<a
 				href="/about"
-				class="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"
+				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"
 				class:selected={current === 'about'}>About</a
 			>
 			<a
 				href="/blog"
-				class="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"
+				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"
 				class:selected={current === 'blog'}>Blog</a
 			>
 			<Button on:click={toggleMode} variant="outline" size="icon">