mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-07 22:49:57 +02:00
rudimentary dark mode
This commit is contained in:
parent
aaf9e96446
commit
0baef9ac7f
5 changed files with 20 additions and 6 deletions
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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":
|
||||
|
||||
{},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue