ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 09:20:00 +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()}>
internet
</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!
</motion.span>
</Title>

10
src/components/NavBar.astro
View file

@ -99,11 +99,12 @@ import { ThemeSwitch } from 'free-astro-components'
</div>
</DropdownItems>
</Dropdown>
<a class="flex items-center hidden lg:block" href="/mods">
<a class="items-center hidden lg:block" href="/mods">
<span>Mods</span>
</a>
</div>
<div id="theme-switcher" class="block ml-auto lg:hidden">
<div class="flex gap-2">
<div id="theme-switcher" class="block ml-auto xl:hidden">
<ThemeSwitch label="" class="p-2" />
</div>
<Button href="/download" class="ml-auto" isPrimary>
@ -115,10 +116,11 @@ import { ThemeSwitch } from 'free-astro-components'
<Download class="size-4" />
</span>
</Button>
</div>
</MenuItems>
</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">
<ThemeSwitch label="Theme" class="p-2" />
<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-1" />
</div>
</nav>
<style>