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

Merge pull request #7 from TheRealMG/feat/dark-mode

Browse source 
Change color to orange
This commit is contained in:
NOCanoa 2024-11-05 21:23:26 +00:00 • committed by GitHub
commit a5545bd9c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 57 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/circle-effect.astro
View file

@ -8,42 +8,42 @@
cy="1000" cy="1000"
r="200" r="200"
fill="none" fill="none"
stroke="rgba(147, 51, 234, 0.5)" stroke="hsla(22, 96%, 60%, 0.5)"
stroke-width="1"></circle> stroke-width="1"></circle>
<circle <circle
cx="2000" cx="2000"
cy="1000" cy="1000"
r="400" r="400"
fill="none" fill="none"
stroke="rgba(147, 51, 234, 0.4)" stroke="hsla(22, 96%, 60%, 0.4)"
stroke-width="1"></circle> stroke-width="1"></circle>
<circle <circle
cx="2000" cx="2000"
cy="1000" cy="1000"
r="600" r="600"
fill="none" fill="none"
stroke="rgba(147, 51, 234, 0.3)" stroke="hsla(22, 96%, 60%, 0.3)"
stroke-width="1"></circle> stroke-width="1"></circle>
<circle <circle
cx="2000" cx="2000"
cy="1000" cy="1000"
r="800" r="800"
fill="none" fill="none"
stroke="rgba(147, 51, 234, 0.2)" stroke="hsla(22, 96%, 60%, 0.2)"
stroke-width="1"></circle> stroke-width="1"></circle>
<circle <circle
cx="2000" cx="2000"
cy="1000" cy="1000"
r="1000" r="1000"
fill="none" fill="none"
stroke="rgba(147, 51, 234, 0.2)" stroke="hsla(22, 96%, 60%, 0.2)"
stroke-width="1"></circle> stroke-width="1"></circle>
<circle <circle
cx="2000" cx="2000"
cy="1000" cy="1000"
r="1200" r="1200"
fill="none" fill="none"
stroke="rgba(147, 51, 234, 0.2)" stroke="hsla(22, 96%, 60%, 0.2)"
stroke-width="1"></circle> stroke-width="1"></circle>
<!-- <circle cx="2000" cy="1000" r="1400" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> --> <!-- <circle cx="2000" cy="1000" r="1400" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="1600" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> --> <!-- <circle cx="2000" cy="1000" r="1600" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

2
src/components/header.astro
View file

@ -7,7 +7,7 @@ import Navbar from "./navbar.astro";
<header> <header>
<Navbar /> <Navbar />
<section> <section>
<LanguageIcon class="h-7 w-7 text-primary" /> <LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
<a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a> <a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
</section> </section>
</header> </header>

38
src/components/hero.astro
View file

@ -3,22 +3,26 @@ import DownloadIcon from "./icons/download-icon.astro";
import '@fontsource/dm-sans/700.css'; import '@fontsource/dm-sans/700.css';
--- ---
<section id="hero" class="section"> <section id="hero" class="section flex flex-col md:flex-row gap-md items-center">
<h2 class="md:text-center">Stay focused, browse faster</h2> <div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
<p class="max-w-prose md:text-center text-xl text-muted"> <h2 class="md:text-center drop-shadow-md">Stay focused, browse faster</h2>
Zen is beautifully designed, privacy-focused, and packed with features. We <p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
care about your experience, not your data. Zen is beautifully designed, privacy-focused, and packed with features. We
</p> care about your experience, not your data.
<div class="center flex flex-col gap-sm"> </p>
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a> <div class="center flex flex-col gap-sm">
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p> <a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
</div>
</div> </div>
<img <div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699" <img
alt="Zen Logo" src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
class="w-full rounded-lg drop-shadow-2xl" alt="Zen Logo"
/> class="w-full rounded-lg drop-shadow-glow"
<figcaption class="text-md text-muted/95"> />
Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised. <figcaption class="text-md text-muted/95">
</figcaption> Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
</figcaption>
</div>
</section> </section>

26
src/components/navbar.astro
View file

@ -1,14 +1,18 @@
<nav> <nav>
<img <a
alt="Zen Logo" href="/"
loading="lazy" >
width="40" <img
height="40" alt="Zen Logo"
decoding="async" loading="lazy"
data-nimg="1" width="40"
srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 2x" height="40"
src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg" decoding="async"
/> data-nimg="1"
srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg 2x"
src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg"
/>
</a>
<ul> <ul>
<li><a href="/">Browser</a></li> <li><a href="/">Browser</a></li>
<li><a href="https://docs.zen-browser.app/">Resources</a></li> <li><a href="https://docs.zen-browser.app/">Resources</a></li>
@ -26,7 +30,7 @@
@apply flex justify-center gap-10 text-primary font-semibold text-lg; @apply flex justify-center gap-10 text-primary font-semibold text-lg;
} }
ul { ul {
@apply hidden items-center justify-center gap-10 md:flex; @apply hidden items-center justify-center gap-10 md:flex drop-shadow-md;
} }
} }
</style> </style>

6
src/layouts/main.astro
View file

@ -31,11 +31,11 @@ import '@fontsource/inter';
body { body {
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba(147, 51, 234, 0.1), hsla(22, 96%, 60%, 0.1),
transparent 70% transparent 70%
), ),
linear-gradient(to bottom, rgba(147, 51, 234, 0.05), transparent 50%), linear-gradient(to bottom, hsla(22, 96%, 60%, 0.05), transparent 50%),
linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%); linear-gradient(to bottom, hsla(22, 96%, 60%, 0.03), transparent 30%);
background-size: cover; background-size: cover;
} }
</style> </style>

14
tailwind.config.cjs
View file

@ -16,8 +16,8 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
primary: "hsl(258, 48%, 23%)", primary: "hsl(22, 96%, 60%)",
muted: "hsl(258, 48%, 55%)", muted: "hsl(22, 96%, 70%)",
}, },
spacing: { spacing: {
xs: "0.5rem", xs: "0.5rem",
@ -50,6 +50,12 @@ module.exports = {
], ],
dm: ["DM Sans"], dm: ["DM Sans"],
}, },
dropShadow: {
glow: [
"0 0px 5px hsla(22, 96%, 60%, 0.90)",
"0 0px 20px hsla(22, 96%, 60%, 0.75)"
]
}
}, },
}, },
plugins: [ plugins: [
@ -57,6 +63,7 @@ module.exports = {
addBase({ addBase({
h2: { h2: {
"@apply text-scale-large font-bold text-primary": {}, "@apply text-scale-large font-bold text-primary": {},
}, },
}); });
addComponents({ addComponents({
@ -71,7 +78,8 @@ 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 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300": "@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white dark:text-black":
{}, {},
}, },
}); });