Merge pull request #624 from slumbering/590-docs-website-design

fix responsiveness

website/docusaurus.config.js

@@ -17,7 +17,7 @@ module.exports = {
     "https://fonts.googleapis.com/css2?family=Karla&family=Poppins:wght@700&display=swap",
   ],
   themeConfig: {
-    sidebarCollapsible: false,
+    sidebarCollapsible: true,
     prism: {
       theme: require("prism-react-renderer/themes/okaidia"),
     },

website/src/css/custom.scss

@@ -33,8 +33,8 @@
   --ifm-code-font-size: 100%;
   --ifm-code-border-radius: 2rem;
   --ifm-code-color: var(--ifm-color-primary-light);
-  --ifm-code-padding-vertical: 0.125rem;
-  --ifm-code-padding-horizontal: 0.3rem;
+  --ifm-code-padding-vertical: 0.1rem;
+  --ifm-code-padding-horizontal: 0.2rem;
   --ifm-h2-font-size: 2rem;
   --ifm-menu-color-background-active: var(--ifm-color-primary);
   --ifm-menu-color-active: var(--ifm-color-primary-light);
@@ -46,6 +46,7 @@
   --ifm-link-hover-color: var(--ifm-color-primary);
   --ifm-pre-padding: 2rem;
   --ifm-pagination-nav-border-radius: 0;
+  --doc-sidebar-width: 250px;
 }
 
 html[data-theme="dark"] {
@@ -111,25 +112,28 @@ a[class*="menuLinkExternal"]:after {
 }
 
 .navbar {
-  max-width: 1620px;
+  max-width: 1366px;
   align-self: center;
   box-shadow: none;
 }
 
 // sidebar
-
-div[class^="docSidebarContainer"] {
-  width: 250px;
-  margin-right: 3rem;
-
-  div[class^="sidebar"] {
+@media (min-width: 997px) {
+  div[class^="docSidebarContainer"] {
     width: 250px;
+    margin-right: 3rem;
+
+    div[class^="sidebar"] {
+      width: 250px;
+    }
   }
 }
 
 /* main */
 .main-wrapper {
+  max-width: 1366px;
   align-self: center;
+  width: 100%;
 }
 
 main[class^="docMainContainer"] {
@@ -169,9 +173,8 @@ html[data-theme="dark"] .table-of-contents__link {
 // tabs
 
 /* codeBlock */
-div[class^="codeBlock"] {
+div[class^="codeBlockContainer"] {
   border-radius: var(--ifm-code-border-radius);
-  background-color: var(--ifm-color-primary-dark) !important;
   margin-bottom: 2.5rem;
 
   div[class^="codeBlockTitle"] {
@@ -181,6 +184,7 @@ div[class^="codeBlock"] {
 }
 
 div[class^="codeBlockLines"] {
+  background-color: var(--ifm-color-primary-dark) !important;
   margin-bottom: 0;
   .token-line {
     color: var(--ifm-color-primary-light) !important;
@@ -222,12 +226,9 @@ button[class^="copyButton"] {
 .menu__link {
   border-radius: 0;
 
-  &:focus {
-    background-color: var(--ifm-color-primary-dark);
-    color: var(--ifm-color-primary-light);
-  }
+  &:focus,
   &:active {
-    background-color: var(--ifm-color-primary);
+    background-color: var(--ifm-color-primary-dark);
     color: var(--ifm-color-primary-light);
   }
 
@@ -255,6 +256,27 @@ button[class^="copyButton"] {
     background-color: var(--ifm-color-primary-light);
     color: var(--ifm-color-primary-dark);
   }
+
+  &.menu__link--sublist {
+    color: var(--ifm-color-primary-dark);
+    &:active,
+    &:focus {
+      background-color: var(--ifm-color-primary-light);
+    }
+    html[data-theme="dark"] & {
+      color: var(--ifm-color-primary-light);
+    }
+    html[data-theme="dark"] &:active,
+    html[data-theme="dark"] &:focus,
+    html[data-theme="dark"] &:hover {
+      color: var(--ifm-color-primary-dark);
+    }
+    html[data-theme="dark"] &:active:after,
+    html[data-theme="dark"] &:focus:after,
+    html[data-theme="dark"] &:hover:after {
+      filter: none;
+    }
+  }
 }
 
 /* docsearch */
@@ -273,6 +295,10 @@ button[class^="copyButton"] {
 /* pagination */
 .pagination-nav__label svg {
   vertical-align: middle;
+
+  html[data-theme="dark"] & path {
+    fill: var(--ifm-color-primary-light);
+  }
 }
 
 /* admonition */