ZenBrowserMirrors/astro-site-test
1
0
Fork 0
mirror of https://github.com/zen-browser/astro-site-test.git synced 2025-07-08 17:59: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> <header>
<Navbar /> <Navbar />
<section> <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> <a href="/download" class="btn-base py-2 px-4">Download Zen</a>
</section> </section>
</header> </header>
@ -15,7 +15,7 @@ import Navbar from "./navbar.astro";
@tailwind base; @tailwind base;
@layer base { @layer base {
header { header {
@apply flex w-full items-center justify-between pt-lg; @apply flex w-full items-center justify-between pt-md;
} }
section { section {

9
src/components/hero.astro
View file

@ -4,16 +4,19 @@ import DownloadIcon from "./icons/download-icon.astro";
<section id="hero" class="section"> <section id="hero" class="section">
<h2>Stay focused, browse faster</h2> <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 Zen is beautifully designed, privacy-focused, and packed with features. We
care about your experience, not your data. care about your experience, not your data.
</p> </p>
<div class="center flex flex-col gap-sm"> <div class="center flex flex-col gap-sm">
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a> <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> </div>
<picture class="overflow-clip w-full grid center">
<img <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" 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" alt="Zen Logo"
class="scale-110 w-full p-3"
/> />
</picture>
</section> </section>

2
src/components/navbar.astro
View file

@ -25,7 +25,7 @@
@tailwind base; @tailwind base;
@layer base { @layer base {
nav { nav {
@apply flex justify-center text-primary; @apply flex justify-center text-primary font-semibold text-lg;
} }
ul { ul {
@apply hidden justify-center gap-4 p-4 md:flex; @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"> <div class="container flex min-h-screen flex-col items-center gap-4xl">
<CircleEffect /> <CircleEffect />
<Header /> <Header />
<main class="flex flex-col gap-4"><slot /></main> <main class="flex flex-col gap-4 w-full"><slot /></main>
</div> </div>
</body> </body>
</html> </html>

9
tailwind.config.cjs
View file

@ -6,7 +6,7 @@ module.exports = {
container: { container: {
center: true, center: true,
padding: { padding: {
DEFAULT: "1rem", DEFAULT: "2rem",
xs: "0.5rem", xs: "0.5rem",
sm: "2rem", sm: "2rem",
lg: "4rem", lg: "4rem",
@ -35,13 +35,16 @@ module.exports = {
"8xl": "10rem", "8xl": "10rem",
"9xl": "11rem", "9xl": "11rem",
}, },
fontSize: {
"scale-large": "clamp(3rem, 6vw, 4rem)",
},
}, },
}, },
plugins: [ plugins: [
plugin(({ addBase, addComponents, addUtilities, theme }) => { plugin(({ addBase, addComponents, addUtilities, theme }) => {
addBase({ addBase({
h2: { h2: {
"@apply text-7xl font-bold text-primary": {}, "@apply text-scale-large font-bold text-primary": {},
}, },
}); });
addComponents({ addComponents({
@ -55,7 +58,7 @@ module.exports = {
"@apply text-center place-items-center": {}, "@apply text-center place-items-center": {},
}, },
".btn-base": { ".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":
{}, {},
}, },
}); });