youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-28 10:53:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(navbar): usable on mobile

Browse source
This commit is contained in:
Youwen Wu 2024-04-02 19:56:27 -07:00
parent 2d7171eeb8
commit 43e4f8d49c
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/assets/Name.svelte
View file

@ -8,7 +8,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
version="1.1" version="1.1"
viewBox="0 0 2104 416" viewBox="0 0 2104 416"
class="diagram select-none" class="diagram select-none hidden sm:block"
text-anchor="middle" text-anchor="middle"
font-family="monospace" font-family="monospace"
font-size="13px" font-size="13px"

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

@ -24,22 +24,22 @@
</script> </script>
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full"> <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"> <div class="container mx-auto flex justify-between items-center h-full gap-4">
<Name height="90%" href="/" /> <Name height="100%" href="/" />
<div class="flex gap-14 justify-around align-middle"> <div class="flex gap-14 justify-around align-middle">
<a <a
href="/" 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 class:selected={current === 'home'}>Home</a
> >
<a <a
href="/about" 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 class:selected={current === 'about'}>About</a
> >
<a <a
href="/blog" 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 class:selected={current === 'blog'}>Blog</a
> >
<Button on:click={toggleMode} variant="outline" size="icon"> <Button on:click={toggleMode} variant="outline" size="icon">