feat: ✨ Move search button to sidebar

Author: bcamarneiro

docs/index.md

@@ -9,13 +9,13 @@ description: Welcome to the documentation site for Fleek Network, the decentrali
 category: Documentation
 keywords: [introduction, documentation, getting started]
 tags:
-- Edge Platform
-- Guide
-- Learn
-- Fleek Network
+  - Edge Platform
+  - Guide
+  - Learn
+  - Fleek Network
 ---
 
-import ImgBannerDocs from '@site/static/img/banner-docs.png?202309041511';
+import ImgBannerDocs from '@site/static/img/banner-docs.webp?202309041511';
 
 <img className="banner" src={ImgBannerDocs} />
 

docs/node/index.md

@@ -15,7 +15,8 @@ This section provides instructions to help you build a **Fleek Network Node**, i
 To participate in the [alpha Testnet](/docs/roadmap), you can begin by setting up and running nodes. Check the [requirements](/docs/node/requirements) and find the [onboarding instructions](/docs/node/testnet-onboarding) to enable you to [install](/docs/node/install) a network node successfully.
 :::
 
-# Node operator {#node-operator}
+## Node operator {#node-operator}
+
 ---
 
 A **Node Operator** is represented as a system administrator who builds, installs or maintains one or many nodes in a server or more.

guides/index.md

@@ -3,12 +3,12 @@ title: About guides
 hide_title: true
 sidebar_position: 1
 tags:
-- Guides
-- Help
-- Fleek Network
+  - Guides
+  - Help
+  - Fleek Network
 ---
 
-import ImgBannerGuides from '@site/static/img/banner-guides.png?202309041511';
+import ImgBannerGuides from '@site/static/img/banner-guides.webp?202309041511';
 
 <img className="banner" src={ImgBannerGuides} />
 

package-lock.json

@@ -3,11 +3,11 @@ title: About references
 hide_title: true
 sidebar_position: 1
 tags:
-- References
-- Help
+  - References
+  - Help
 ---
 
-import ImgBannerReferences from '@site/static/img/banner-references.png?202309041511';
+import ImgBannerReferences from '@site/static/img/banner-references.webp?202309041511';
 
 <img className="banner" src={ImgBannerReferences} />
 

references/index.md

@@ -24,6 +24,7 @@ const sidebars = {
       label: 'Learn',
       collapsed: true,
       collapsible: true,
+      link: {type: 'doc', id: 'learn/index'},
       items: [
         'learn/index',
         'learn/the-network',
@@ -38,6 +39,7 @@ const sidebars = {
       label: 'Node',
       collapsed: true,
       collapsible: true,
+      link: {type: 'doc', id: 'node/index'},
       items: [
         'node/index',
         'node/requirements',
@@ -71,6 +73,7 @@ const sidebars = {
       label: 'Open-source',
       collapsed: true,
       collapsible: true,
+      link: {type: 'doc', id: 'Open-source/code-of-conduct'},
       items: [
         'Open-source/code-of-conduct',
         'Open-source/contributing',

sidebars.js

@@ -5,18 +5,56 @@
  */
 
 /* You can override the default Infima variables here. */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
+@font-face {
+  font-family: "IBMPlexMono";
+  src: url("/fonts/IBMPlexMono-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBMPlexMono";
+  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
 @font-face {
-  font-family: 'Atyp';
-  src: url('/fonts/AtypDisplay-Regular.woff2') format('woff2') font-weight 400;
-  src: url('/fonts/AtypDisplay-Medium.woff2') format('woff2') font-weight 500;
-  src: url('/fonts/AtypDisplay-Semibold.woff2') format('woff2') font-weight 600;
-  src: url('/fonts/AtypDisplay-Bold.woff2') format('woff2') font-weight 700;
+  font-family: "IBMPlexMono";
+  src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBMPlexMono";
+  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBMPlexMono";
+  src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Atyp";
+  src: url("/fonts/AtypDisplay-Regular.woff2") format("woff2") font-weight 400;
+  src: url("/fonts/AtypDisplay-Medium.woff2") format("woff2") font-weight 500;
+  src: url("/fonts/AtypDisplay-Semibold.woff2") format("woff2") font-weight 600;
+  src: url("/fonts/AtypDisplay-Bold.woff2") format("woff2") font-weight 700;
 }
 
 :root {
-  --ifm-font-family-base: 'IBM Plex Mono', sans-serif;  /* Set the default font to IBM Plex Sans */
+  --ifm-font-family-base: "IBMPlexMono", serif, sans-serif; /* Set the default font to IBM Plex Sans */
   --ifm-color-primary: #000;
   --ifm-color-primary-dark: #000033;
   --ifm-color-primary-darkest: #0048f8;
@@ -29,16 +67,19 @@
   /* NEw COLORS */
   --background-color: #fff;
   --text-color: #202020;
-  --link-active: #9E6C00;
+  --link-active: #9e6c00;
+  --neutral-3: #f0f0f0;
   --neutral-6: #d9d9d9;
-  
+  --neutral-7: #cecece;
+  --neutral-11: #646464;
+
   --ifm-navbar-background-color: var(--background-color);
   --ifm-navbar-link-color: var(--text-color);
   --ifm-navbar-link-hover-color: var(--link-active);
 
   --ifm-menu-color: var(--text-color);
   --sidebar-menu-item_border: #d9d9d9;
-  
+
   --ifm-color-primary-darker: var(--link-active);
 
   --ifm-footer-link-color: var(--text-color);
@@ -49,10 +90,22 @@
   --ifm-pagination-nav-color-hover: var(--link-active);
   --ifm-font-weight-base: var(--ifm-font-weight-light);
   --ifm-heading-color: var(--text-color);
+  --docsearch-searchbox-focus-background: var(--background-color) !important;
+  --docsearch-modal-background: var(--background-color) !important;
+  --docsearch-hit-background: var(--neutral-6) !important;
+  --docsearch-hit-active-color: var(--link-active) !important;
+  --docsearch-highlight-color: var(--text-color) !important;
+  --docsearch-text-color: var(--text-color) !important;
+  --docsearch-hit-color: var(--text-color) !important;
+  --docsearch-muted-color: var(--text-color) !important;
+
+  --ifm-link-color: var(--text-color);
+  --ifm-color-content-secondary: var(--text-color) !important;
+  --docsearch-primary-color: var(--text-color) !important;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #fff;
   --ifm-color-primary-dark: #98beff;
   --ifm-color-primary-darkest: #0048f8;
@@ -63,18 +116,13 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
-@import url('./navbar.css');
-@import url('./sidebar.css');
-@import url('./tags.css');
-@import url('./pagination-nav.css');
-@import url('./breadcrumbs.css');
-@import url('./typography.css');
-@import url('./toc.css');
-
-:root {
-  --docsearch-modal-background: #000 !important;
-  --custom-color-gray-blue: rgb(62 72 105 / 37.5%);
-}
+@import url("./navbar.css");
+@import url("./sidebar.css");
+@import url("./tags.css");
+@import url("./pagination-nav.css");
+@import url("./breadcrumbs.css");
+@import url("./typography.css");
+@import url("./toc.css");
 
 .main-wrapper a,
 .main-wrapper span,
@@ -92,16 +140,22 @@
   z-index: -1;
 }
 
-html[data-theme='dark'] {
+html[data-theme="dark"] {
   background: var(--background-color);
   color: var(--text-color);
 }
 
-[data-theme='dark'] .footer {
+[data-theme="dark"] .footer {
   background: transparent;
   border-top: 1px solid var(--neutral-6);
 }
 
+div[class*="docRoot_node_modules-@docusaurus-theme-classic-lib-theme-DocRoot-Layout-styles-module"] {
+  max-width: 1440px;
+  margin: 0 auto;
+  width: 100%;
+}
+
 .alert {
   background: transparent;
   border: 1px solid var(--sidebar-menu-item_border);
@@ -135,10 +189,6 @@ div[class*=" searchLogoColumn"],
   display: none;
 }
 
-div[class*="docItemContainer"] {
-  padding: 20px;
-}
-
 @media (min-width: 996px) {
   .footer .container {
     padding: 0;
@@ -156,8 +206,8 @@ div[class*="docItemContainer"] {
 
 @media (max-width: 996px) {
   .footer__col {
-      margin-bottom: 0;
-      flex-basis: 0;
+    margin-bottom: 0;
+    flex-basis: 0;
   }
 
   .footer__links {
@@ -166,11 +216,9 @@ div[class*="docItemContainer"] {
     padding-left: 4rem;
   }
 
-
   .footer__title {
     display: none;
   }
-
 }
 
 /* Main wrapper */
@@ -207,8 +255,7 @@ main > .container > .row {
 .DocSearch-Button:hover svg {
   opacity: 1;
 }
-§
-.DocSearch-Container > .DocSearch-Modal,
+§ .DocSearch-Container > .DocSearch-Modal,
 .DocSearch-Modal .DocSearch-Form {
   box-shadow: none;
   border: 1px solid var(--ifm-toc-border-color);
@@ -218,6 +265,10 @@ main > .container > .row {
   font-size: 1em;
 }
 
+.DocSearch-Hit[aria-selected="true"] a {
+  background: var(--neutral-3) !important;
+}
+
 input[class^="searchQueryInput_"] {
   border: 1px solid var(--ifm-toc-border-color);
   max-width: 480px;
@@ -269,9 +320,7 @@ article h1,
   border-left-style: dashed;
 }
 
-.markdown img
-
-.table-of-contents li a:hover {
+.markdown img .table-of-contents li a:hover {
   text-decoration: underline;
 }
 
@@ -293,8 +342,7 @@ article h1,
   text-transform: capitalize;
 }
 
-
-.youtube-player iframe { 
+.youtube-player iframe {
   width: 100%;
   aspect-ratio: 16 / 9;
 }
@@ -305,4 +353,4 @@ article h1,
 
 aside.theme-doc-sidebar-container {
   border-right: none;
-}
+}

src/css/custom.css

@@ -1,7 +1,9 @@
 .navbar {
   box-shadow: none;
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  padding: 3rem 0.5rem;
+  max-width: 1440px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .DocSearch-Modal .DocSearch-Footer,
@@ -11,22 +13,32 @@
 
 .DocSearch-Button,
 .DocSearch-Button:hover {
+  height: 34px;
   border-radius: 0px;
   color: var(--text-color);
   border: 1px solid var(--text-color);
   background: var(--background-color);
+  box-shadow: none !important;
 
   .DocSearch-Search-Icon {
     color: var(--text-color);
   }
 }
 
 @media (max-width: 996px) {
-  .navbar__toggle+.navbar__brand {
+  .navbar {
+    padding: 1.5rem 1rem;
+  }
+
+  .navbar__toggle + .navbar__brand {
     display: none;
   }
 
-  .navbar__items>div:nth-child(2) {
+  .navbar__toggle {
+    margin-right: 0;
+  }
+
+  .navbar__items > div:nth-child(2) {
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
@@ -40,8 +52,9 @@
 
 @media (min-width: 996px) {
   .navbar__items {
-    justify-content: space-between;
+    justify-content: center;
     height: 100%;
+    gap: 18px;
   }
 
   .navbar__items div:nth-child(1) {
@@ -52,4 +65,4 @@
   .navbar__items .DocSearch-Button {
     justify-content: flex-start;
   }
-}
+}