Add 'Now' page and update navigation; refine styles and metadata

src/layouts/BaseLayout.astro

@@ -54,8 +54,18 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
             name="keywords"
             content="self-hosted, privacy, open-source, furry, developer, cozy, hidden den"
         />
-        <meta name="theme-color" content="#cba6f7" />
-        <meta name="color-scheme" content="dark" />
+        <meta name="theme-color" content="#1e1e2e" />
+        <meta
+            name="theme-color"
+            media="(prefers-color-scheme: dark)"
+            content="#1e1e2e"
+        />
+        <meta
+            name="theme-color"
+            media="(prefers-color-scheme: light)"
+            content="#f6efe6"
+        />
+        <meta name="color-scheme" content="dark light" />
 
         <!-- Favicons -->
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -101,6 +111,9 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
         --color-blue: #89b4fa;
         --color-green: #a6e3a1;
         --color-peach: #fab387;
+        --color-glass: rgba(30, 30, 46, 0.8);
+        --color-glass-nav: rgba(30, 30, 46, 0.85);
+        color-scheme: dark;
 
         /* Spacing */
         --space-xs: 0.5rem;
@@ -113,6 +126,25 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
         --font-body: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
     }
 
+    @media (prefers-color-scheme: light) {
+        :root {
+            --color-bg: #f6efe6;
+            --color-bg-light: #efe1cf;
+            --color-surface: #d8c2a8;
+            --color-text: #35251a;
+            --color-text-dim: #6b5442;
+            --color-accent: #8b5e3c;
+            --color-accent-bright: #a16c45;
+            --color-warm: #b6794f;
+            --color-blue: #326b8f;
+            --color-green: #3f7c47;
+            --color-peach: #b5693e;
+            --color-glass: rgba(246, 239, 230, 0.82);
+            --color-glass-nav: rgba(246, 239, 230, 0.88);
+            color-scheme: light;
+        }
+    }
+
     * {
         margin: 0;
         padding: 0;