ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 17:30:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(hero): adjust rotation for title animation for improved aesthetics

Browse source 
fix(NavBar): restructure theme switcher and download button layout for better responsiveness
This commit is contained in:
mr. M 2024-12-15 14:00:03 +01:00
parent 25d315329c
commit ed060c8e03
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
2 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Hero.astro
View file

@ -42,7 +42,7 @@ function getHeroTitleAnimation() {
<motion.span client:load {...getHeroTitleAnimation()}> <motion.span client:load {...getHeroTitleAnimation()}>
internet internet
</motion.span> </motion.span>
<motion.div className="absolute top-0 right-0 rounded-full py-1 px-4 !font-bold bg-coral text-paper text-base !rotate-8" client:load {...getHeroTitleAnimation()}> <motion.div className="absolute top-0 right-0 rounded-full py-1 px-4 !font-bold bg-coral text-paper text-base !rotate-6" client:load {...getHeroTitleAnimation()}>
beta out now! beta out now!
</motion.span> </motion.span>
</Title> </Title>

30
src/components/NavBar.astro
View file

@ -99,26 +99,28 @@ import { ThemeSwitch } from 'free-astro-components'
</div> </div>
</DropdownItems> </DropdownItems>
</Dropdown> </Dropdown>
<a class="flex items-center hidden lg:block" href="/mods"> <a class="items-center hidden lg:block" href="/mods">
<span>Mods</span> <span>Mods</span>
</a> </a>
</div> </div>
<div id="theme-switcher" class="block ml-auto lg:hidden"> <div class="flex gap-2">
<ThemeSwitch label="" class="p-2" /> <div id="theme-switcher" class="block ml-auto xl:hidden">
<ThemeSwitch label="" class="p-2" />
</div>
<Button href="/download" class="ml-auto" isPrimary>
<span class="hidden md:flex items-center gap-2">
Download
<ArrowRight class="size-4" />
</span>
<span class="md:hidden">
<Download class="size-4" />
</span>
</Button>
</div> </div>
<Button href="/download" class="ml-auto" isPrimary>
<span class="hidden md:flex items-center gap-2">
Download
<ArrowRight class="size-4" />
</span>
<span class="md:hidden">
<Download class="size-4" />
</span>
</Button>
</MenuItems> </MenuItems>
</Astronav> </Astronav>
<div id="theme-switcher" class="hidden lg:block py-0 w-fit lg:w-fit lg:rounded-full border-dark border-b-2 lg:border-2 px-2 backdrop-blur-2xl bg-paper dark:bg-paper dark:shadow-md mx-0 md:mx-4 flex gap-2 lg:gap-20 font-bold text-lg items-center"> <div id="theme-switcher" class="hidden xl:block py-0 w-fit lg:w-fit lg:rounded-full border-dark right-0 border-b-2 lg:border-2 px-4 absolute backdrop-blur-2xl bg-paper dark:bg-paper dark:shadow-md mx-0 md:mx-4 flex gap-2 lg:gap-20 font-bold text-lg items-center">
<ThemeSwitch label="Theme" class="p-2" /> <ThemeSwitch label="Theme" class="p-1" />
</div> </div>
</nav> </nav>
<style> <style>