Merge pull request #919 from slumbering/css-for-mobile

website/.prettierrc

@@ -4,6 +4,6 @@
   "jsxBracketSameLine": true,
   "printWidth": 80,
   "proseWrap": "never",
-  "singleQuote": true,
+  "singleQuote": false,
   "trailingComma": "all"
 }

website/src/css/custom.scss

@@ -1,4 +1,25 @@
 @use "sass:meta";
+$tablet-width: 996px;
+$desktop-width: 997px;
+$desktop-xl-width: 1160px;
+
+@mixin tablet {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
+
+@mixin desktopWide {
+  @media (min-width: #{$desktop-xl-width}) {
+    @content;
+  }
+}
 
 /* stylelint-disable docusaurus/copyright-header */
 /**
@@ -52,6 +73,7 @@
 html[data-theme="dark"] {
   --ifm-background-color: var(--ifm-color-primary-dark);
   --ifm-navbar-background-color: var(--ifm-color-primary-darker);
+  --ifm-menu-color: var(--ifm-color-primary-light);
   --ifm-menu-color-active: var(--ifm-color-primary-light);
   --ifm-menu-color-background-active: var(--ifm-color-primary);
   --ifm-link-color: var(--ifm-color-primary-light);
@@ -205,8 +227,11 @@ h1[class^="h1Heading"] {
 
 /* navbar */
 .navbar__brand {
+  height: 3rem;
+  @include desktop {
     height: 4rem;
   }
+}
 
 .navbar {
   align-self: center;
@@ -220,34 +245,47 @@ h1[class^="h1Heading"] {
   padding: 1rem;
 }
 
+.navbar__logo {
+  @include tablet {
+    height: auto;
+  }
+}
+
 .react-toggle {
   margin: 0 0.75rem;
 }
 
 .header-discord-link,
 .header-github-link {
-  width: 48px;
   height: 48px;
   padding: 0;
+
+  @include desktop {
+    width: 48px;
     span {
       display: none;
     }
   }
+}
 
 .header-github-link {
-  background: url("/img/github-icon.svg");
+  background: url("/img/github-icon.svg") no-repeat;
 }
 
 .header-discord-link {
-  background: url("/img/discord-icon.svg");
+  background: url("/img/discord-icon.svg") no-repeat;
 }
 
 .navbar .button svg {
   display: none;
 }
 
+.navbar__toggle {
+  filter: brightness(19);
+}
+
 /* sidebar */
-@media (min-width: 997px) {
+@include desktop {
   aside[class^="docSidebarContainer"] {
     width: 340px;
 
@@ -352,10 +390,12 @@ button[class^="copyButton"] {
 .menu {
   padding: 0 !important;
 
+  @include desktop {
     & > ul > li:nth-child(1) > a:nth-child(1) {
       padding-top: 2rem;
       border-top: 0;
     }
+  }
 
   & > ul > li > a:nth-child(1) {
     background-color: var(--ifm-color-primary-light);
@@ -393,6 +433,16 @@ button[class^="copyButton"] {
   border-radius: 0;
   padding: 1rem;
 
+  @include tablet {
+    display: flex;
+    justify-content: center;
+    font-family: "Poppins", sans-serif;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1;
+  }
+
   & + .menu__list & {
     padding-left: 2rem;
     width: calc(100% - 1rem);
@@ -401,19 +451,16 @@ button[class^="copyButton"] {
     &.active {
       background-color: var(--ifm-color-primary-dark);
       color: var(--ifm-color-primary-light);
+    }
+
+    &.active {
       font-weight: bold;
     }
 
-    html[data-theme="dark"] &:hover,
-    html[data-theme="dark"] &.active {
-      background-color: var(--ifm-color-secondary);
-      color: var(--ifm-color-primary-dark);
-    }
-
-    &.menu__link--sublist:hover::after {
-      filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg)
-        brightness(104%) contrast(98%);
-    }
+    &:focus,
+    &:active {
+      background-color: var(--ifm-color-primary-dark);
+      color: var(--ifm-color-primary-light);
     }
 
     &--active:not(.menu__link--sublist) {
@@ -443,10 +490,14 @@ button[class^="copyButton"] {
 
     &.menu__link--sublist {
       color: var(--ifm-color-primary-dark);
-    padding-right: 2rem;
+
+      &:active,
+      &:focus {
+        background-color: var(--ifm-color-primary-light);
+      }
 
       &:hover {
-      background-color: var(--ifm-color-primary-light);
+        background-color: var(--ifm-menu-color-background-hover);
       }
 
       html[data-theme="dark"] & {
@@ -460,6 +511,7 @@ button[class^="copyButton"] {
       }
     }
   }
+}
 
 /* docsearch */
 .DocSearch-Button-Container {
@@ -473,11 +525,20 @@ button[class^="copyButton"] {
     display: block;
     width: 20px;
     height: 20px;
-
-    html[data-theme="dark"] & {
-      background-color: var(--ifm-color-primary-light);
   }
 }
+
+.DocSearch-Button {
+  margin-right: 2rem !important;
+  @include desktop {
+    width: 200px;
+  }
+  @include desktopWide {
+    width: 350px;
+  }
+  html[data-theme="dark"] & {
+    background-color: white;
+  }
 }
 
 .DocSearch-Button {