eliott/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www synced 2026-04-25 17:14:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Feat: update layout and styling for improved UI, enhance button functionality, and remove unused animations

Browse Source
This commit is contained in:
mr. M
2024-11-21 00:54:14 +01:00
parent 8612d6da90
commit f0b2c7a96d
5 changed files with 21 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/browser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

2
src/components/Button.astro
View File

@@ -2,7 +2,7 @@
const { class: className, isPrimary, } = Astro.props;
---
<button class:list={['px-4 py-2 rounded-full scale-100 transition-transform duration-200', className, isPrimary ? 'bg-coral/70 text-paper hover:!transform hover:!scale-105' : 'hover:bg-coral/10']}>
<button class:list={['px-4 py-2 rounded-full transition-transform duration-200', className, isPrimary ? 'bg-coral opacity-60 text-paper hover:!transform hover:!scale-105' : 'hover:bg-coral/10']}>
<slot />
</button>
<style>

2
src/components/Title.astro
View File

@@ -7,7 +7,7 @@ const { class: className } = Astro.props;
</h1>
<style>
h1 {
font-size: 2.6rem;
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: .4rem;
font-family: "Instrument Serif", serif;

7
src/layouts/Layout.astro
View File

@@ -20,9 +20,14 @@ const { title } = Astro.props;
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
</head>
<body class="bg-paper">
<body class="bg-paper/60">
<slot />
</body>
</html>
<style is:global>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>

55
src/pages/index.astro
View File

@@ -7,52 +7,23 @@ import Button from '../components/Button.astro';
<Layout title="Welcome to Zen">
<main>
<header id="header" class="h-screen w-full flex flex-col items-center justify-center absolute bg-paper gap-12">
<header id="header" class="h-[75vh] relative w-full flex flex-col items-center mt-64 gap-6 overflow-hidden">
<div class="flex flex-col items-center">
<Title class:list={["text-center"]}>The browser made for <i>you</i></Title>
<Description class:list={["text-center"]}>Beautifully designed, privacy-focused, and packed with features.<br />We care about your experience, not your data.</Description>
</div>
<Button isPrimary>Download</Button>
<div class="gap-6 flex">
<Button isPrimary>Download</Button>
<Button>mods page</Button>
</div>
<img src="/assets/browser.png" alt="Zen browser" class="absolute left-[50%] bottom-[-55%] transform translate-x-[-50%]" />
</header>
<div class="h-screen bg-dark text-paper flex gap-24 justify-center items-center p-24">
<div class:list={["w-1/3 ml-24"]}>
<Title>Designed to be distraction-free</Title>
<Description>Our browser is designed to be as minimal as possible, so you can focus on what matters most.</Description>
</div>
<img src="/assets/browser.png" alt="Zen browser" class:list={["w-1/2"]} />
</div>
</main>
</Layout>
<style is:global>
@keyframes welcomeFade {
0% {
opacity: 0;
transform: translateY(-60px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes welcomeText {
0% {
opacity: 0;
transform: translateY(40px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#header h1 {
animation: welcomeFade .7s ease-in-out forwards;
}
#header p {
opacity: 0;
animation: welcomeText .7s ease-in-out forwards;
animation-delay: .8s;
}
#header button {
opacity: 0;
animation: welcomeText .7s ease-in-out forwards;
animation-delay: 1.6s;
}
</style>