diff --git a/src/css/custom.css b/src/css/custom.css
index 6abee423dc..94b80c05d9 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -21,17 +21,48 @@
background-color: var(--ifm-navbar-link-hover-color);
}
.menu {
- font-family: Inter, sans-serif;
- padding-top: 0px !important;
- padding-left: 32px !important;
- margin-left: -14px !important;
- scrollbar-width: auto;
+ @media (min-width: 996px) {
+ font-family: Inter, sans-serif;
+ padding-top: 0px !important;
+ padding-left: 32px !important;
+ margin-left: -14px !important;
+ scrollbar-width: auto;
+ }
}
.theme-doc-sidebar-container {
border-right: none !important;
}
+.navbar-sidebar__items:not(.navbar-sidebar__items--show-secondary) .menu__list {
+ @media (max-width: 996px) {
+ border: none;
+ }
+}
+
+.navbar-sidebar__items:not(.navbar-sidebar__items--show-secondary) .menu__link--active {
+ @media (max-width: 996px) {
+ text-align: left;
+ margin-left: 0;
+ background: var(--navbar-tab-bg);
+ display: inline-block;
+ padding: 8px;
+ border-radius: 4px;
+ }
+}
+
+.navbar-sidebar__items:not(.navbar-sidebar__items--show-secondary) .menu__link:not(.menu__link--active) {
+ @media (max-width: 996px) {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ margin-left: 8px;
+ line-height: 18px;
+ letter-spacing: 0em;
+ text-align: left;
+ }
+}
+
.menu__link {
font-size: 0.875rem;
line-height: 1.25;
@@ -39,13 +70,14 @@
margin-left: 8px;
padding: 0;
position: relative;
- color: rgb(113, 128, 150) !important;
+ @media (min-width: 996px) {
+ color: rgb(113, 128, 150) !important;
+ }
}
.menu__link--sublist {
margin-bottom: 0;
}
-.menu__link:hover {
- color: rgb(26, 32, 44) !important;
+.menu__link:not(.navbar-login-btn):hover {
background: none;
}
@@ -89,7 +121,7 @@
}
.theme-doc-sidebar-menu {
- border-left: none;
+ border-left: none !important;
}
.menu__list-item-collapsible:hover, .menu__list-item-collapsible--active, .menu__link--active:not(.menu__link--sublist), .menu__link--active:not(.menu__link--sublist):hover {
@@ -115,6 +147,14 @@
height: 6px;
}
+.theme-doc-toc-mobile > button::after {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ width: 20px;
+ height: 20px;
+}
+
.menu__link--sublist-caret:after {
display: none;
}
@@ -364,15 +404,11 @@ hr {
}
-.indigo:hover, .navbar__link--active.indigo {
+.indigo:hover, .navbar__link--active.indigo, .menu__link--active.indigo {
color: var(--navbar-indigo-color);
-
- /* --navbar-teal-color: rgb(24, 115, 103);
- --navbar-tab-bg: rgb(237, 242, 247);
- --navbar-indigo-color: rgb(76, 81, 191); */
}
-.teal:hover, .navbar__link--active.teal {
+.teal:hover, .navbar__link--active.teal, .menu__link--active.teal {
color: var(--navbar-teal-color);
}
@@ -387,6 +423,13 @@ hr {
.navbar__items {
gap: 16px;
}
+@media (max-width: 996px) {
+ .navbar__items:not(.navbar__items--right) {
+ width: 100%;
+ display: grid;
+ grid-template-columns: auto 1fr 30px;
+ }
+}
.logo-link {
font-family: Inter, sans-serif;
@@ -405,6 +448,9 @@ hr {
position: absolute;
left: 140px;
margin-top: 2px;
+ @media (max-width: 996px) {
+ display: none;
+ }
}
.logo-link:hover {
@@ -421,7 +467,11 @@ hr {
@media (prefers-color-scheme: dark) {
filter: brightness(100);
}
-
+ @media (max-width: 996px) {
+ width: auto;
+ padding-right: 0;
+ margin: 0 auto;
+ }
}
@media (prefers-color-scheme: dark) {
:root[data-theme='light'] .navbar__logo {
@@ -432,6 +482,9 @@ hr {
.first-item {
margin-left: -16px;
+ @media (max-width: 996px) {
+ margin-left: 0;
+ }
}
@@ -479,6 +532,12 @@ hr {
padding-left: 16px;
padding-right: 55px;
}
+@media (max-width: 996px) {
+ .navbar {
+ padding-right: 16px;
+ }
+}
+
.breadcrumbs__item:not(:last-child):after {
background: var(--ifm-breadcrumb-separator) center no-repeat;
opacity: 1;
@@ -615,13 +674,34 @@ footer > .container {
padding-right: 90px;
flex-direction: row-reverse;
position: relative;
+ @media (max-width: 996px) {
+ padding-right: 0;
+ }
}
.navbar-login-btn {
position: absolute;
+ margin-bottom: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
+ @media (max-width: 996px) {
+ top: unset;
+ bottom: 0;
+ left: 0;
+ margin-left: 0;
+ width: calc(100% - 16px);
+ font-family: Barlow !important;
+ font-size: 14px !important;
+ font-weight: 700 !important;
+ line-height: 20px !important;
+ letter-spacing: 0em !important;
+ justify-content: center;
+ }
+}
+
+.navbar-login-btn:hover {
+ color: white;
}
.teal-btn {
@@ -718,6 +798,11 @@ footer > .container {
color: var(--ifm-color-content);
margin: 0px;
}
+@media (max-width: 996px) {
+ .table-of-contents::before {
+ content: unset;
+ }
+}
.table-of-contents__link {
text-decoration: none;
@@ -766,4 +851,23 @@ footer > .container {
.theme-doc-markdown > p {
color: var(--ifm-color-content);
+}
+
+.navbar-sidebar__brand {
+ @media (max-width: 996px) {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+}
+
+.navbar-sidebar__brand > .margin-right--md {
+ @media (max-width: 996px) {
+ margin-left: auto;
+ }
+}
+
+.navbar-sidebar__brand > .navbar-sidebar__close {
+ @media (max-width: 996px) {
+ margin-left: unset;
+ }
}
\ No newline at end of file
diff --git a/src/css/theming.css b/src/css/theming.css
index 62491e2bca..53ca218486 100644
--- a/src/css/theming.css
+++ b/src/css/theming.css
@@ -27,6 +27,8 @@
--ifm-hover-overlay: var(--indigo-700);
--ifm-color-primary: var(--indigo-600);
--ifm-heading-color: var(--ifm-color-content);
+ --ifm-menu-color-background-active: var(--main-bgd-color);
+ --ifm-navbar-sidebar-width: 323px;
--main-font-color: #2d3748;
@@ -100,8 +102,13 @@
--gray-700: #4A5568;
--gray-800: #2D3748;
--gray-900: #1A202C;
+ @media (max-width: 996px) {
+ --ifm-menu-link-sublist-icon: url("/icons/chevron-up-solid.svg");
+ --ifm-navbar-padding-horizontal: 0;
+ }
}
+
/* For readability concerns, you should choose a lighter palette in dark mode. */
/* PRIMITES WITH THEME DEFINED BY TOGGLER */
[data-theme='dark'] {
@@ -189,7 +196,6 @@ main {
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
- --ifm-menu-link-sublist-icon: url("/icons/triangle-right.svg");
--ifm-breadcrumb-separator: url("/icons/breadcrumb.svg");
--navbar-teal-color: rgb(24, 115, 103);
--navbar-tab-bg: rgb(237, 242, 247);
diff --git a/static/icons/chevron-up-solid.svg b/static/icons/chevron-up-solid.svg
new file mode 100644
index 0000000000..24fbd45ed3
--- /dev/null
+++ b/static/icons/chevron-up-solid.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/static/img/logo-dark.svg b/static/img/logo-dark.svg
index 026073e307..8db99f452c 100644
--- a/static/img/logo-dark.svg
+++ b/static/img/logo-dark.svg
@@ -1 +1,22 @@
-
\ No newline at end of file
+
diff --git a/static/img/logo-white.svg b/static/img/logo-white.svg
index c497237f37..a5f22571d5 100644
--- a/static/img/logo-white.svg
+++ b/static/img/logo-white.svg
@@ -1 +1,22 @@
-
\ No newline at end of file
+
diff --git a/static/img/logo.svg b/static/img/logo.svg
index 026073e307..8db99f452c 100644
--- a/static/img/logo.svg
+++ b/static/img/logo.svg
@@ -1 +1,22 @@
-
\ No newline at end of file
+