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(() => { onMount(() => navigating.subscribe(updateCurrent))
return navigating.subscribe(updateCurrent)
})
</script> </script>
<nav class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-serif"> <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"> <div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex tracking-tight">
<a <a
href="/" 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 class:selected={current === 'home'}>Home</a
> >
<a <a
href="/about" 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 class:selected={current === 'about'}>About</a
> >
<a <a
href="/portfolio" 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 class:selected={current === 'portfolio'}>Portfolio</a
> >
<a <a
href="/blog" 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 class:selected={current === 'blog'}>Blog</a
> >
<ThemePicker let:builder> <ThemePicker let:builder>
@ -69,6 +67,6 @@
<style lang="postcss"> <style lang="postcss">
.selected { .selected {
@apply border-b-primary; @apply border-b-primary rounded-b-lg;
} }
</style> </style>