Adjust style for medium-sized laptop screens

strapi · Oct 14, 2024 · 1137141 · 1137141
1 parent db97da9
commit 1137141
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/docusaurus/src/scss/_mixins.scss b/docusaurus/src/scss/_mixins.scss
@@ -14,6 +14,12 @@
   }
 }
 
+@mixin medium-to-intermediate {
+  @media (min-width: 997px) and (max-width: 1298px) {
+    @content;
+  }
+}
+
 /** Mixin: Responsive */
 @mixin large-up {
   @media (min-width: 1536px) {

diff --git a/docusaurus/src/scss/custom-search-bar.scss b/docusaurus/src/scss/custom-search-bar.scss
@@ -100,6 +100,43 @@
   }
 }
 
+@include medium-to-intermediate {
+  .my-custom-search-bar {
+    max-width: 200px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    .DocSearch-Button,
+    .kapa-widget-button {
+      * {
+        font-size: 12px !important;
+      }
+    }
+
+    .kapa-widget-button {
+      position: relative;
+      top: -1px;
+      svg {
+        width: 12px;
+        margin-left: 4px;
+        // height: 10px;
+      }
+    }
+    .DocSearch-Button {
+      svg {
+        margin-right: -4px;
+        width: 12px;
+        height: 12px;
+      }
+      &-Keys {
+        position: relative;
+        top: 0;
+      }
+    }
+
+  }
+}
+
 @include dark {
   .my-custom-search-bar {
     background: var(--strapi-neutral-0);

diff --git a/docusaurus/src/scss/navbar.scss b/docusaurus/src/scss/navbar.scss
@@ -34,12 +34,12 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
   &__items {
     max-width: var(--custom-navbar-items-width);
     gap: var(--strapi-spacing-2);
+    height: 100%;
   }
 
   &__brand,
   &__logo {
     height: auto;
-    line-height: 0;
   }
 
   &__brand {
@@ -243,6 +243,28 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
   }
 }
 
+@include medium-to-intermediate {
+  .navbar__logo img {
+    width: 150px;
+    height: 23px;
+  }
+  .navbar__items {
+    padding-right: 20px;
+
+    &--right {
+      padding-right: 0;
+    }
+  }
+  .navbar__item {
+    font-size: 13px;
+    line-height: 14px;
+  }
+  [class*="oggleIcon"] { // purposedly omitting the "t" because selectors vary in production and local envs
+    width: 20px;
+    height: 20px;
+  }
+}
+
 @include dark {
   .kapa-widget-button {
     button {