fix: navbar in front on mobile devices

Author: neowsl

src/features/navbar/components/Navbar.svelte

@@ -13,7 +13,10 @@
     };
 </script>
 
-<nav id="navbar" class="flex h-16 items-center bg-base-300 px-4">
+<nav
+    id="navbar"
+    class="sticky top-0 z-50 flex h-16 items-center bg-base-300 px-4"
+>
     <a class="font-rocket-rinder text-xl text-secondary" href="/">
         Neal Wang
     </a>

src/lib/components/Banner.svelte

@@ -4,9 +4,10 @@
     interface Props {
         title: string;
         image: string;
+        smallerText: boolean;
     }
 
-    const { title, image }: Props = $props();
+    const { title, image, smallerText }: Props = $props();
 </script>
 
 <div
@@ -18,7 +19,10 @@
     <div class="hero-content text-center text-neutral-content">
         <div class="max-w-md">
             <a href="/">
-                <h1 id="name" class="mb-4 text-5xl md:text-6xl">
+                <h1
+                    id="name"
+                    class={`mb-4 ${smallerText ? "text-4xl" : "text-5xl"} md:text-6xl`}
+                >
                     <MetallicText>{title}</MetallicText>
                 </h1>
             </a>

src/routes/experience/+page.svelte

@@ -10,7 +10,7 @@
     const works = yaml.load(worksRaw) as Work[];
 </script>
 
-<Banner title="Experience" image="gears" />
+<Banner title="Experience" image="gears" smallerText />
 
 <div class="mt-12 flex p-4 sm:p-8 md:justify-center">
     <article class="prose max-w-none md:w-2/3 lg:prose-xl">