ZenBrowserMirrors/astro-site-test
1
0
Fork 0
mirror of https://github.com/zen-browser/astro-site-test.git synced 2025-07-08 01:29:57 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(styles): made slight improvement to styling

Browse source
This commit is contained in:
taroj1205 2024-11-04 15:21:04 +13:00
parent dc70cfc7e9
commit 4e81c59679
5 changed files with 19 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/header.astro
View file

@ -6,7 +6,7 @@ import Navbar from "./navbar.astro";
<header>
<Navbar />
<section>
<LanguageIcon class="h-6 w-6 text-primary" />
<LanguageIcon class="h-7 w-7 text-primary" />
<a href="/download" class="btn-base py-2 px-4">Download Zen</a>
</section>
</header>
@ -15,7 +15,7 @@ import Navbar from "./navbar.astro";
@tailwind base;
@layer base {
header {
@apply flex w-full items-center justify-between pt-lg;
@apply flex w-full items-center justify-between pt-md;
}
section {

15
src/components/hero.astro
View file

@ -4,16 +4,19 @@ import DownloadIcon from "./icons/download-icon.astro";
<section id="hero" class="section">
<h2>Stay focused, browse faster</h2>
<p class="max-w-prose text-lg text-muted">
<p class="max-w-prose text-xl text-muted">
Zen is beautifully designed, privacy-focused, and packed with features. We
care about your experience, not your data.
</p>
<div class="center flex flex-col gap-sm">
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
<p class="text-sm text-muted/95">Available on Windows, Mac, and Linux</p>
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
</div>
<img
src="https://media.discordapp.net/attachments/1302453497651925082/1302664349655240825/nI0zVqK.png?ex=6728f037&is=67279eb7&hm=a307a77de19d56eb9165f3333a22ba5ea40e0ebb43fa1f03ecb11204ddc7e218&=&format=webp&quality=lossless&width=809&height=698"
alt="Zen Logo"
/>
<picture class="overflow-clip w-full grid center">
<img
src="https://media.discordapp.net/attachments/1302453497651925082/1302454819532963951/KaeiM8z.png?ex=6728d5d3&is=67278453&hm=5d1cfa80d2cc8a13be869d5f0eddfc7da55da17878eebad44cca2533bc0a5e3b&=&format=webp&quality=lossless&width=809&height=698"
alt="Zen Logo"
class="scale-110 w-full p-3"
/>
</picture>
</section>

2
src/components/navbar.astro
View file

@ -25,7 +25,7 @@
@tailwind base;
@layer base {
nav {
@apply flex justify-center text-primary;
@apply flex justify-center text-primary font-semibold text-lg;
}
ul {
@apply hidden justify-center gap-4 p-4 md:flex;

2
src/layouts/main.astro
View file

@ -22,7 +22,7 @@ const { title } = Astro.props;
<div class="container flex min-h-screen flex-col items-center gap-4xl">
<CircleEffect />
<Header />
<main class="flex flex-col gap-4"><slot /></main>
<main class="flex flex-col gap-4 w-full"><slot /></main>
</div>
</body>
</html>

9
tailwind.config.cjs
View file

@ -6,7 +6,7 @@ module.exports = {
container: {
center: true,
padding: {
DEFAULT: "1rem",
DEFAULT: "2rem",
xs: "0.5rem",
sm: "2rem",
lg: "4rem",
@ -35,13 +35,16 @@ module.exports = {
"8xl": "10rem",
"9xl": "11rem",
},
fontSize: {
"scale-large": "clamp(3rem, 6vw, 4rem)",
},
},
},
plugins: [
plugin(({ addBase, addComponents, addUtilities, theme }) => {
addBase({
h2: {
"@apply text-7xl font-bold text-primary": {},
"@apply text-scale-large font-bold text-primary": {},
},
});
addComponents({
@ -55,7 +58,7 @@ module.exports = {
"@apply text-center place-items-center": {},
},
".btn-base": {
"@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2":
"@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg":
{},
},
});