feat(docs): enhance website style, faq page content

codybrom · Jan 14, 2025 · 639d7a6 · 639d7a6
1 parent 4fc94cf
commit 639d7a6
Show file tree

Hide file tree

Showing 9 changed files with 690 additions and 228 deletions.
diff --git a/AppCommands.swift b/AppCommands.swift
@@ -65,7 +65,7 @@ struct AppCommands: Commands {
     // Add Help menu command
     CommandGroup(replacing: .help) {
       Button("Blankie Help") {
-        if let url = URL(string: "https://blankie.rest/usage") {
+        if let url = URL(string: "https://blankie.rest/faq") {
           NSWorkspace.shared.open(url)
         }
       }

diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
@@ -3,14 +3,14 @@
 ---
 
 <footer
-  class="bg-gray-100 dark:bg-gray-900 py-10 text-gray-500 dark:text-gray-300 text-center"
+  class="bg-gray-100 dark:bg-gray-900 py-10 text-gray-500 dark:text-gray-300 text-center px-2"
 >
   <div class="flex flex-col sm:flex-row justify-center gap-x-5 gap-y-2 mb-5">
     <p class="order-first sm:order-last">
       Created by
       <a
         href="https://github.com/codybrom"
-        class="hover:text-primary-blue transition-colors duration-300 font-bold underline"
+        class="hover:text-yellow-500 transition-colors duration-300 font-bold underline"
         >Cody Bromley</a
       >
     </p>
@@ -19,7 +19,7 @@
       Inspired by
       <a
         href="https://apps.gnome.org/Blanket/"
-        class="hover:text-primary-blue transition-colors duration-300 font-bold underline"
+        class="hover:text-yellow-500 transition-colors duration-300 font-bold underline"
         >Blanket</a
       >
       for Linux
@@ -28,14 +28,14 @@
   <p class="mb-4">
     <a
       href="https://github.com/codybrom/blankie"
-      class="hover:text-primary-blue transition-colors duration-300 underline"
-      >Completely free and open source on Github</a
+      class="hover:text-yellow-500 transition-colors duration-300 underline"
+      >Open Source on GitHub</a
     >
   </p>
   <p>
     © 2025 Cody Bromley. All rights reserved.
     <a
-      class="hover:text-primary-blue transition-colors duration-300 underline"
+      class="hover:text-yellow-500 transition-colors duration-300 underline"
       href="https://opensource.org/license/mit">MIT License</a
     >.
   </p>

diff --git a/docs/src/components/Nav.astro b/docs/src/components/Nav.astro
@@ -24,16 +24,19 @@ const currentPath = Astro.url.pathname;
           class="h-10 w-10 object-contain"
           style={{ aspectRatio: "802/666" }}
         />
-        <span class="text-2xl font-semibold tracking-tight">Blankie</span>
+        <div class="flex items-baseline">
+          <span class="text-2xl font-semibold tracking-tight">Blankie</span>
+          <span class="ml-3 text-xs tracking-tight">for macOS</span>
+        </div>
       </a>
-
       <!-- Mobile menu button with hamburger icon -->
       <button
-        id="mobile-menu-button"
+        id="
+          mobile-menu-button"
         aria-label="Toggle navigation menu"
         aria-expanded="false"
         aria-controls="mobile-menu"
-        class="md:hidden text-white hover:text-primary-blue transition-colors duration-200 p-2"
+        class="md:hidden text-white hover:text-yellow-500 transition-colors duration-200 p-2"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -57,28 +60,28 @@ const currentPath = Astro.url.pathname;
       <!-- Desktop Navigation -->
       <div class="hidden md:flex items-center gap-x-10">
         <a
-          href="/usage"
+          href="/faq"
           class:list={[
-            "text-white text-sm hover:text-primary-blue transition-colors duration-200",
-            { "text-primary-blue": currentPath === "/usage" },
+            "text-white text-sm hover:text-yellow-500 transition-colors duration-200",
+            { "text-yellow-500": currentPath === "/faq" },
           ]}
         >
-          How to Use
+          FAQ
         </a>
         <a
           href="/privacy"
           class:list={[
-            "text-white text-sm hover:text-primary-blue transition-colors duration-200",
-            { "text-primary-blue": currentPath === "/privacy" },
+            "text-white text-sm hover:text-yellow-500 transition-colors duration-200",
+            { "text-yellow-500": currentPath === "/privacy" },
           ]}
         >
           Privacy
         </a>
         <a
           href="/credits"
           class:list={[
-            "text-white text-sm hover:text-primary-blue transition-colors duration-200",
-            { "text-primary-blue": currentPath === "/credits" },
+            "text-white text-sm hover:text-yellow-500 transition-colors duration-200",
+            { "text-yellow-500": currentPath === "/credits" },
           ]}
         >
           Credits
@@ -97,28 +100,28 @@ const currentPath = Astro.url.pathname;
     <div id="mobile-menu" class="hidden md:hidden">
       <div class="flex flex-col gap-y-4 pt-4 pb-6">
         <a
-          href="/usage"
+          href="/faq"
           class:list={[
-            "text-white text-sm hover:text-primary-blue transition-colors duration-200",
-            { "text-primary-blue": currentPath === "/usage" },
+            "text-white text-sm hover:text-yellow-500 transition-colors duration-200",
+            { "text-yellow-500": currentPath === "/faq" },
           ]}
         >
-          How to Use
+          FAQ
         </a>
         <a
           href="/privacy"
           class:list={[
-            "text-white text-sm hover:text-primary-blue transition-colors duration-200",
-            { "text-primary-blue": currentPath === "/privacy" },
+            "text-white text-sm hover:text-yellow-500 transition-colors duration-200",
+            { "text-yellow-500": currentPath === "/privacy" },
           ]}
         >
           Privacy
         </a>
         <a
           href="/credits"
           class:list={[
-            "text-white text-sm hover:text-primary-blue transition-colors duration-200",
-            { "text-primary-blue": currentPath === "/credits" },
+            "text-white text-sm hover:text-yellow-500 transition-colors duration-200",
+            { "text-yellow-500": currentPath === "/credits" },
           ]}
         >
           Credits

diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -23,7 +23,10 @@ const description = "Ambient sound mixer for macOS.";
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
 
     <meta
       http-equiv="Content-Security-Policy"