feat: remove announcement bar and make navbar inherit page background (…

…#274) Signed-off-by: David Dal Busco <[email protected]>
junobuild · Jan 19, 2025 · 72aac9d · 72aac9d
1 parent b8eedf2
commit 72aac9d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 170 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -262,14 +262,6 @@ const config: Config = {
       },
       feedOptions: {
         limit: false
-      },
-      announcementBar: {
-        id: "support_us",
-        content:
-          '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="currentColor" style="vertical-align: text-bottom; margin: 0 0.25rem;"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm126 18L314-169q-11 7-23 6t-21-8q-9-7-14-17.5t-2-23.5l44-189-147-127q-10-9-12.5-20.5T140-571q4-11 12-18t22-9l194-17 75-178q5-12 15.5-18t21.5-6q11 0 21.5 6t15.5 18l75 178 194 17q14 2 22 9t12 18q4 11 1.5 22.5T809-528L662-401l44 189q3 13-2 23.5T690-171q-9 7-21 8t-23-6L480-269Zm0-201Z"/></svg>If you like Juno, <a target="_blank" rel="noopener noreferrer" href="https://github.com/junobuild/juno">star it on GitHub</a>',
-        backgroundColor: "var(--ifm-navbar-background-color)",
-        textColor: "var(--ifm-menu-color)",
-        isCloseable: true
       }
     }
 };

diff --git a/src/css/colors.scss b/src/css/colors.scss
@@ -23,7 +23,7 @@
 html[data-theme="dark"] {
   --ifm-background-color: #000;
   --ifm-font-color-base: #fff;
-  --ifm-navbar-background-color: #1c1c1c;
+  --ifm-navbar-background-color: #000000;
   --ifm-heading-color: var(--ifm-color-primary);
   --ifm-button-background-color: #000;
   --ifm-button-color: #fff;

diff --git a/src/css/docusaurus.scss b/src/css/docusaurus.scss
@@ -129,3 +129,9 @@ a.card {
     }
   }
 }
+
+// Logo when page of documentation is scrolled
+
+.theme-doc-sidebar-container a img {
+  height: 25px;
+}
diff --git a/src/css/navbar.scss b/src/css/navbar.scss
@@ -1,27 +1,13 @@
-div[class*="announcementBar_"][role="banner"] {
-  border: none;
-
-  font-size: 14px;
-
-  @media screen and (min-width: 960px) {
-    font-size: inherit;
-    padding-top: 0.45rem;
-  }
-
-  a {
-    color: var(--button-shadow-color);
-  }
-
-  button.close {
-    svg {
-      width: 12px;
+:root {
+  &.docs-wrapper {
+    .navbar {
+      border-bottom: 1px solid var(--ifm-toc-border-color);
     }
   }
 }
 
 .navbar {
-  height: 75px;
-  border-bottom: 1px solid var(--button-shadow-color);
+  height: 68px;
 
   @media screen and (min-width: 1280px) {
     padding-inline: 3rem;

diff --git a/src/theme/AnnouncementBar/index.tsx b/src/theme/AnnouncementBar/index.tsx
diff --git a/src/theme/AnnouncementBar/styles.module.css b/src/theme/AnnouncementBar/styles.module.css