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

rudimentary dark mode

Browse source
This commit is contained in:
TheRealMG 2024-11-04 13:57:14 -06:00
parent aaf9e96446
commit 0baef9ac7f
5 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/header.astro
View file

@ -7,7 +7,7 @@ import Navbar from "./navbar.astro";
<header>
<Navbar />
<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>
</section>
</header>

4
src/components/hero.astro
View file

@ -5,7 +5,7 @@ import '@fontsource/dm-sans/700.css';
<section id="hero" class="section">
<h2 class="md:text-center">Stay focused, browse faster</h2>
<p class="max-w-prose md:text-center text-xl text-muted">
<p class="max-w-prose md:text-center text-xl text-muted dark:text-muted-dark">
Zen is beautifully designed, privacy-focused, and packed with features. We
care about your experience, not your data.
</p>
@ -16,7 +16,7 @@ import '@fontsource/dm-sans/700.css';
<img
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"
alt="Zen Logo"
class="w-full rounded-lg drop-shadow-2xl"
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.

2
src/components/navbar.astro
View file

@ -23,7 +23,7 @@
@tailwind base;
@layer base {
nav {
@apply flex justify-center gap-10 text-primary font-semibold text-lg;
@apply flex justify-center gap-10 text-primary font-semibold text-lg dark:text-primary-dark;
}
ul {
@apply hidden items-center justify-center gap-10 md:flex;

4
src/layouts/main.astro
View file

@ -38,4 +38,8 @@ import '@fontsource/inter';
linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%);
background-size: cover;
}
html {
@apply dark:bg-black;
}
</style>

14
tailwind.config.cjs
View file

@ -17,7 +17,9 @@ module.exports = {
extend: {
colors: {
primary: "hsl(258, 48%, 23%)",
"primary-dark": "hsl(258, 48%, 65%)",
muted: "hsl(258, 48%, 55%)",
"muted-dark": "hsl(258, 48%, 85%)",
},
spacing: {
xs: "0.5rem",
@ -50,13 +52,20 @@ module.exports = {
],
dm: ["DM Sans"],
},
dropShadow: {
glow: [
"0 0px 5px hsla(258, 48%, 23%, 0.90)",
"0 0px 20px hsla(258, 48%, 23%, 0.75)"
]
}
},
},
plugins: [
plugin(({ addBase, addComponents, addUtilities, theme }) => {
addBase({
h2: {
"@apply text-scale-large font-bold text-primary": {},
"@apply text-scale-large font-bold text-primary dark:text-primary-dark": {},
},
});
addComponents({
@ -71,7 +80,8 @@ 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 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":
{},
},
});