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

Change color to orange

src/components/circle-effect.astro

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

src/components/header.astro

@@ -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>

src/components/hero.astro

@@ -3,9 +3,10 @@ import DownloadIcon from "./icons/download-icon.astro";
 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>
+    <p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
       Zen is beautifully designed, privacy-focused, and packed with features. We
       care about your experience, not your data.
     </p>
@@ -13,12 +14,15 @@ import '@fontsource/dm-sans/700.css';
       <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 class="flex-1 md:max-w-1/2 flex flex-col gap-4">
       <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.
       </figcaption>
+    </div>
 </section>

src/components/navbar.astro

@@ -1,4 +1,7 @@
 <nav>
+  <a
+    href="/"  
+  >
     <img
       alt="Zen Logo"
       loading="lazy"
@@ -6,9 +9,10 @@
       height="40"
       decoding="async"
       data-nimg="1"
-    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"
+      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-black.svg"
+      src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg"
     />
+  </a>
   <ul>
     <li><a href="/">Browser</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;
     }
     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>

src/layouts/main.astro

@@ -31,11 +31,11 @@ import '@fontsource/inter';
   body {
     background: linear-gradient(
         to bottom,
-        rgba(147, 51, 234, 0.1),
+        hsla(22, 96%, 60%, 0.1),
         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;
   }
 </style>

tailwind.config.cjs

@@ -16,8 +16,8 @@ module.exports = {
     },
     extend: {
       colors: {
-        primary: "hsl(258, 48%, 23%)",
+        primary: "hsl(22, 96%, 60%)",
-        muted: "hsl(258, 48%, 55%)",
+        muted: "hsl(22, 96%, 70%)",
       },
       spacing: {
         xs: "0.5rem",
@@ -50,6 +50,12 @@ module.exports = {
         ],
         dm: ["DM Sans"],
       },
+      dropShadow: {
+        glow: [
+          "0 0px 5px hsla(22, 96%, 60%, 0.90)",
+          "0 0px 20px hsla(22, 96%, 60%, 0.75)"
+        ]
+      }
     },
   },
   plugins: [
@@ -57,6 +63,7 @@ module.exports = {
       addBase({
         h2: {
           "@apply text-scale-large font-bold text-primary": {},
+
         },
       });
       addComponents({
@@ -71,7 +78,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":
+
             {},
         },
       });