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

style: improve layout and responsiveness of Hero, HomeExtras, and NavBar components

Browse source
This commit is contained in:
mr. M 2024-12-11 18:53:27 +01:00
parent aa5c4f6ad0
commit 3023e4c60e
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
3 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/HomeExtras.astro
View file

@ -12,11 +12,11 @@ import { ArrowRight } from 'lucide-astro';
<section
id="customization"
class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative"
class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative overflow-y-hidden"
>
<div>
<Title>Customizable to<br />the last pixel</Title>
<Description class="px-4 lg:px-0 lg:w-1/2">
<Title>Customizable<br class="md:hidden" /> to <br class="hidden md:block" />the last pixel</Title>
<Description class="lg:px-0 lg:w-1/2">
Zen Browser is designed to be customizable. You can change every aspect of the browser to suit your needs. Literally, your imagination is the limit.
</Description>
<div class="flex mt-4">
@ -26,7 +26,7 @@ import { ArrowRight } from 'lucide-astro';
</Button>
</div>
</div>
<div class="relative w-1/2 flex hidden lg:block" id="browser-images">
<div class="relative ml-16 h-32 lg:mx-0 lg:w-1/2 flex" id="browser-images">
<Image src={browserCollapsed} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[5%] left-[65%] -translate-x-1/2" />
<Image src={browseMultiToolbar} alt="Zen browser" class="w-2/3 rounded-md mx-auto absolute top-1/2 left-1/2 transform -translate-x-1/2" />
<Image src={browserSingleToolbar} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[15%] left-[10%] z-10 -translate-x-1/2" />
@ -51,5 +51,19 @@ import { ArrowRight } from 'lucide-astro';
transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
}
}
@media (max-width: 1000px) {
& img:nth-child(1) {
transform: rotate(5deg) scale(1.05) translateX(-52%) translateY(-10%);
}
& img:nth-child(2) {
transform: rotate(2deg) scale(1.05) translateX(-50%) translateY(10%);
}
& img:nth-child(3) {
transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
}
}
}
</style>