Website/responsive navbar + change font

website/src/components/CustomBanner/StandWithUkraine.js

@@ -6,7 +6,7 @@ const StandWithUkraine = (props) => {
   return (
     <div className={styles.banner}>
       <Link to="https://stand-with-ukraine.pp.ua" className={styles.link}>
-        🇺🇦 This project is created with substantial contributions from our Ukrainian colleagues.{' '}
+        <span className={styles.uaFlag}></span> This project is created with substantial contributions from our Ukrainian colleagues.{' '}
         <span className={styles.hashtag}>#StandWithUkraine</span>
       </Link>
     </div>

website/src/components/CustomBanner/StandWithUkraine.module.scss

@@ -17,6 +17,15 @@
   text-decoration: none;
 }
 
+.uaFlag {
+  background-image: url(@site/static/img/homepage/flag_of_ukraine_with_waves.svg);
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: 13px;
+  width: 18px;
+}
+
+
 .hashtag {
   color: #ffd600;
 }
@@ -25,4 +34,4 @@
   .banner {
     height: 56px;
   }
-}
+}

website/src/css/_navbar.scss

@@ -1,9 +1,16 @@
+@import '@site/src/css/fonts';
+
 [data-theme='dark'] .navbar {
   background-color: #12161b;
 }
 
+.navbar__title {
+  @include t2b;
+  font-weight: 700;
+}
+
 .navbar__link {
-  margin-right: 10px;
+  margin-right: 20px;
   font-weight: 300;
 }
 
@@ -18,6 +25,10 @@
   font-weight: 300;
 }
 
+.navbar__brand {
+  margin-right: 30px;
+}
+
 [data-theme='dark'] .navbar__item {
   padding: 5px;
   font-weight: 300;
@@ -28,7 +39,7 @@
 /* Restyle logo & hamburger button */
 
 .navbar {
-  height: 70px;
+  height: 60px;
 
   &__items {
     &--right {
@@ -38,7 +49,7 @@
 
   &__logo {
     height: 26px;
-    margin: 0 10px 0 8px;
+    margin: 0 10px 0 0;
   }
 
   &__toggle {
@@ -55,32 +66,29 @@
   }
 }
 
+@media (max-width: 996px) {
+  .navbar__toggle {
+    display: none;
+  }
+}
+
+
 @media (max-width: 768px) {
   .navbar__toggle {
+    display: inherit;
     position: absolute;
     margin: 0;
-    top: 15px;
+    top: 10px;
     right: 25px;
   }
 }
 
 /* Restyle search button */
 
-@media (max-width: 768px) {
-  button.DocSearch-Button {
-    background-color: var(--detox-color-a3);
-    height: 40px;
-    border-radius: 10px;
-    padding: 0 10px;
-  }
-
-  .DocSearch-Search-Icon {
-    opacity: 0.6;
-  }
+.DocSearch-Button {
+  font-family: inherit;
 }
 
-/* Restyle search button */
-
 @media (max-width: 768px) {
   button.DocSearch-Button {
     background-color: var(--detox-color-a3);

website/src/css/_root.scss

@@ -31,6 +31,8 @@
 
     --ifm-button-background-color: #fff;
     --ifm-color-gray-900: #12161B;
+
+    --ifm-font-family-base: 'Nunito Sans', sans-serif;
   }
 
   &[data-theme='light'] {
@@ -46,4 +48,9 @@
     --ifm-footer-background-color: var(--detox-color-a1);
     --ifm-heading-color: #fff;
   }
-}
+}
+
+html {
+  -webkit-font-smoothing: initial;
+  text-rendering: initial;
+}