updated naavbar styling colors.

cashubtc · Dec 12, 2024 · da3510f · da3510f
1 parent 43a6227
commit da3510f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -70,13 +70,13 @@ const config: Config = {
         },
       ],
     },
-    // announcementBar: {
-    //   id: "wip",
-    //   content: "These docs are a WORK IN PROGRESS.",
-    //   backgroundColor: "#18181b",
-    //   textColor: "#fafafa",
-    //   isCloseable: false,
-    // },
+    announcementBar: {
+      id: "wip",
+      content: "We’re actively building these docs—check back for updates.",
+      backgroundColor: "#18181b",
+      textColor: "#fafafa",
+      isCloseable: false,
+    },
     prism: {
       theme: prismThemes.oneLight,
       darkTheme: prismThemes.oneDark,

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -16,6 +16,10 @@
   --ifm-color-primary-lightest: #c084fc;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-navbar-background-color: #ffffff;
+  --ifm-navbar-link-color: #581c87;
+  --ifm-navbar-link-hover-color: #9333ea;
+  --ifm-navbar-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -28,6 +32,28 @@
   --ifm-color-primary-lighter: #e879f9;
   --ifm-color-primary-lightest: #e879f9;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-navbar-background-color: #1e1b4b;
+  --ifm-navbar-link-color: #FFFFFF;
+  --ifm-navbar-link-hover-color: #c026d3;
 }
 
 /* Keep any non-navbar related utility classes you need */
+
+/* Add custom navbar styling */
+.navbar {
+  border-bottom: 1px solid rgba(147, 51, 234, 0.1);
+}
+
+[data-theme="dark"] .navbar {
+  border-bottom: 1px solid rgba(232, 121, 249, 0.1);
+}
+
+.navbar__link {
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.navbar__link--active {
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,6 +8,7 @@ import tsLogo from '@site/static/img/tslogo.png';
 import npubcashLogo from '@site/static/img/npubcash.png';
 import bwcLogo from '@site/static/img/bwc.png';
 import vpnstrLogo from '@site/static/img/vpnstr.png';
+import ndklogo from '@site/static/img/ndk.png';
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
@@ -339,7 +340,7 @@ export default function Home(): JSX.Element {
                     Made with Cashu TS
                   </span>
                   <span className="text-2xl text-zinc-400 block max-w-3xl mx-auto">
-                  Simplifying the process of building Cashuapps.
+                  Simplifying the process of building Cashu applications.
                   </span>
                 </h2>
 
@@ -386,7 +387,7 @@ export default function Home(): JSX.Element {
                   >
                     <div className="flex items-center gap-4 mb-4">
                       <div className="w-10 h-10 flex items-center justify-center">
-                        <img src={cashuLogo} alt="NDK logo" className="w-8 h-8 object-contain" />
+                        <img src={ndklogo} alt="NDK logo" className="w-8 h-8 object-contain" />
                       </div>
                       <h3 className="text-xl font-semibold text-white">NostrDevKit (NDK)</h3>
                     </div>