youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: change the look of navbar indicators

Browse source
This commit is contained in:
Youwen Wu 2024-05-12 21:45:42 -07:00
parent 04cbbe95cf
commit 9440516e0a
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/lib/components/Navbar/Navbar.svelte
View file

@ -21,9 +21,7 @@
}
}
onMount(() => {
return navigating.subscribe(updateCurrent)
})
onMount(() => navigating.subscribe(updateCurrent))
</script>
<nav class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-serif">
@ -37,22 +35,22 @@
<div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex tracking-tight">
<a
href="/"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-b-sm rounded-t-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class:selected={current === 'home'}>Home</a
>
<a
href="/about"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-b-sm rounded-t-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class:selected={current === 'about'}>About</a
>
<a
href="/portfolio"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-b-sm rounded-t-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class:selected={current === 'portfolio'}>Portfolio</a
>
<a
href="/blog"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class="text-lg border-b-4 sm:text-xl md:text-2xl font-medium text-primary px-2 py-1 rounded-b-sm rounded-t-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all duration-300 border-b-secondary"
class:selected={current === 'blog'}>Blog</a
>
<ThemePicker let:builder>
@ -69,6 +67,6 @@
<style lang="postcss">
.selected {
@apply border-b-primary;
@apply border-b-primary rounded-b-lg;
}
</style>