mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-08 06:29:58 +02:00
Merge pull request #7 from TheRealMG/feat/dark-mode
Change color to orange
This commit is contained in:
commit
a5545bd9c5
6 changed files with 57 additions and 41 deletions
|
@ -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" /> -->
|
||||||
|
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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":
|
||||||
|
|
||||||
{},
|
{},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue