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

refactor(components): remove translate-y-20 class for improved layout consistency

Browse source
This commit is contained in:
taroj1205 2025-06-06 00:30:46 +12:00
parent 9f78e8e817
commit 64e904d405
No known key found for this signature in database
GPG key ID: 0FCB6CFFE0981AB7
4 changed files with 29 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Community.astro
View file

@ -23,28 +23,28 @@ const {
{ {
community.title.map(title => community.title.map(title =>
title !== '\n' ? ( title !== '\n' ? (
<span class="translate-y-20 opacity-0 blur-sm">{title}</span> <span class="opacity-0 blur-sm">{title}</span>
) : ( ) : (
<br class="hidden md:block" /> <br class="hidden md:block" />
) )
) )
} }
</h2> </h2>
<p class="translate-y-20 text-base opacity-80 blur-sm lg:w-1/2 lg:px-0"> <p class="text-base opacity-80 blur-sm lg:w-1/2 lg:px-0">
{community.description} {community.description}
</p> </p>
<div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center"> <div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
<span class="community__button translate-y-20 opacity-0 blur-sm"> <span class="community__button opacity-0 blur-sm">
<Button class:list={['px-4']} href="https://github.com/zen-browser"> <Button class:list={['px-4']} href="https://github.com/zen-browser">
<GitHubIcon class="size-4" /> <GitHubIcon class="size-4" />
<span>{community.lists.freeAndOpenSource.title}</span> <span>{community.lists.freeAndOpenSource.title}</span>
</Button> </Button>
</span> </span>
<div class="community__button flex translate-y-20 items-center gap-4 opacity-0 blur-sm"> <div class="community__button flex items-center gap-4 opacity-0 blur-sm">
<CheckIcon class="size-4" /> <CheckIcon class="size-4" />
<span>{community.lists.simpleYetPowerful.title}</span> <span>{community.lists.simpleYetPowerful.title}</span>
</div> </div>
<div class="community__button flex translate-y-20 items-center gap-4 opacity-0 blur-sm"> <div class="community__button flex items-center gap-4 opacity-0 blur-sm">
<CheckIcon class="size-4" /> <CheckIcon class="size-4" />
<span>{community.lists.privateAndAlwaysUpToDate.title}</span> <span>{community.lists.privateAndAlwaysUpToDate.title}</span>
</div> </div>
@ -53,7 +53,7 @@ const {
<Image <Image
src={ComImage} src={ComImage}
alt={community.images.community.alt} alt={community.images.community.alt}
class="translate-y-20 rounded-3xl opacity-0 shadow-md blur-sm lg:mx-auto dark:opacity-80" class="rounded-3xl opacity-0 shadow-md blur-sm lg:mx-auto dark:opacity-80"
/> />
</span> </span>
</section> </section>

10
src/components/Features.astro
View file

@ -57,12 +57,12 @@ const featureList = [
case '\n': case '\n':
return <br class="hidden md:block" /> return <br class="hidden md:block" />
default: default:
return <span class="translate-y-20 opacity-0 blur-sm">{title}</span> return <span class="opacity-0 blur-sm">{title}</span>
} }
}) })
} }
</h2> </h2>
<p class="max-w-2xl translate-y-20 text-base opacity-80 blur-sm sm:text-lg"> <p class="max-w-2xl text-base opacity-80 blur-sm sm:text-lg">
{features.description} {features.description}
</p> </p>
</div> </div>
@ -75,15 +75,15 @@ const featureList = [
class={`flex w-full flex-col items-center gap-6 xl:gap-12 ${index % 2 === 0 ? 'xl:flex-row-reverse' : 'xl:flex-row'}`} class={`flex w-full flex-col items-center gap-6 xl:gap-12 ${index % 2 === 0 ? 'xl:flex-row-reverse' : 'xl:flex-row'}`}
> >
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<h3 class="translate-y-20 text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl"> <h3 class="text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl">
{feature.title} {feature.title}
</h3> </h3>
<p class="translate-y-20 text-base leading-relaxed opacity-80 blur-sm sm:text-lg"> <p class="text-base leading-relaxed opacity-80 blur-sm sm:text-lg">
{feature.description} {feature.description}
</p> </p>
</div> </div>
<Video <Video
class="max-h-[450px] w-[800px] translate-y-20 rounded-xl border-2 border-dark object-cover opacity-0 shadow-lg blur-sm" class="max-h-[450px] w-[800px] rounded-xl border-2 border-dark object-cover opacity-0 shadow-lg blur-sm"
name={feature.video} name={feature.video}
autoplay autoplay
loop loop

32
src/components/Hero.astro
View file

@ -26,12 +26,7 @@ const {
{ {
hero.title.map(title => hero.title.map(title =>
title.text !== '\n' ? ( title.text !== '\n' ? (
<span <span class:list={['opacity-0 blur-sm', title.highlight && 'italic text-coral']}>
class:list={[
'translate-y-20 opacity-0 blur-sm',
title.highlight && 'italic text-coral',
]}
>
{title.text} {title.text}
</span> </span>
) : ( ) : (
@ -40,28 +35,31 @@ const {
) )
} }
</Title> </Title>
<p class="translate-y-20 px-12 text-center opacity-0 blur-sm lg:px-0"> <p class="px-12 text-center opacity-0 blur-sm lg:px-0">
{hero.description[0]} {hero.description[0]}
<br class="hidden sm:inline" /> <br class="hidden sm:inline" />
{hero.description[1]} {hero.description[1]}
</p> </p>
</div> </div>
<div <div
class="hero__link-group flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row" class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
> >
<Button <Button
class="w-fit translate-y-20 opacity-0 blur-sm" class="hero__link-group_button w-fit opacity-0 blur-sm"
href={getLocalePath('/download')} href={getLocalePath('/download')}
isPrimary isPrimary
> >
{hero.buttons.beta} {hero.buttons.beta}
<ArrowRightIcon class="size-4" /> <ArrowRightIcon class="size-4" />
</Button> </Button>
<Button href={getLocalePath('/donate')} class="w-fit translate-y-20 opacity-0 blur-sm"> <Button
href={getLocalePath('/donate')}
class="hero__link-group_button w-fit opacity-0 blur-sm"
>
{hero.buttons.support} {hero.buttons.support}
</Button> </Button>
</div> </div>
<SocialMediaStrip class="translate-y-20 blur-sm" opacity={0} /> <SocialMediaStrip class="blur-sm" opacity={0} />
</div> </div>
<Video <Video
name="hero-video" name="hero-video"
@ -70,7 +68,7 @@ const {
muted muted
playsinline playsinline
preload="none" preload="none"
class="translate-y-20 rounded-xl opacity-0 blur-sm" class="rounded-xl opacity-0 blur-sm"
/> />
</header> </header>
@ -81,7 +79,7 @@ const {
const debug = false const debug = false
const elements = document.querySelectorAll( const elements = document.querySelectorAll(
'#header h1 span, #header p, #header .hero__link-group a, #header video, #header ul' '#header h1 span, #header p, #header .hero__link-group_button, #header video, #header ul'
) )
animate(elements, { animate(elements, {
@ -89,12 +87,12 @@ const {
opacity: element => { opacity: element => {
// if ul is the element, return 0.8 // if ul is the element, return 0.8
if (element.tagName === 'UL') { if (element.tagName === 'UL') {
return 0.8 return { from: 0.001, to: 0.8 }
} }
return 1 return { from: 0.001, to: 1 }
}, },
translateY: 0, translateY: { from: 20, to: 0 },
filter: 'blur(0px)', filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300, duration: 300,
delay: stagger(150), delay: stagger(150),
easing: 'easeOutQuart', easing: 'easeOutQuart',

10
src/components/Sponsors.astro
View file

@ -18,16 +18,12 @@ const {
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}> <section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
<div class="flex flex-col items-center gap-6 text-center"> <div class="flex flex-col items-center gap-6 text-center">
<h3 class="translate-y-20 text-4xl font-bold opacity-0 blur-sm sm:text-6xl"> <h3 class="text-4xl font-bold opacity-0 blur-sm sm:text-6xl">
{sponsors.title} {sponsors.title}
</h3> </h3>
<p class="translate-y-20 text-base opacity-80 blur-sm" set:html={sponsors.description} /> <p class="text-base opacity-80 blur-sm" set:html={sponsors.description} />
<div class="sponsors__sponsor relative mt-8 flex items-center justify-center"> <div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
<a <a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit opacity-0 blur-sm">
href={sponsors.sponsors['tuta'].url}
target="_blank"
class="w-fit translate-y-20 opacity-0 blur-sm"
>
<Image <Image
src={tutaLogo} src={tutaLogo}
alt={sponsors.sponsors['tuta'].name} alt={sponsors.sponsors['tuta'].name}