diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 931ad10..de16c48 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,6 +1,3 @@
-@import 'navbar';
-@import 'footer';
-
html {
font-family: var(--app-font-family-main);
overflow: auto !important;
@@ -10,10 +7,6 @@ html {
min-width: toRem(375);
}
-body {
- background: var(--background-primary-dark);
-}
-
body,
span,
p,
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index d07b6d4..cae423c 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -17,11 +17,7 @@
/* Infima variables */
--ifm-code-font-size: 95%;
- --ifm-navbar-background-color: var(--background-primary-main);
--ifm-navbar-height: var(--app-height-header);
- --ifm-navbar-link-color: var(--text-primary-light);
- --ifm-navbar-link-hover-color: var(--primary-main);
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
/* status colors */
--success-light: #{$success-light};
@@ -103,14 +99,29 @@
/* For readability concerns, you should choose a lighter palette in dark mode. */
html[data-theme='dark'] {
+ --ifm-navbar-background-color: var(--background-primary-main);
+ --ifm-navbar-link-color: var(--text-primary-light);
+ --ifm-navbar-link-hover-color: var(--primary-light);
--ifm-color-primary: var(--primary-main);
--ifm-color-primary-dark: var(--primary-dark);
--ifm-color-primary-darker: var(--primary-dark);
--ifm-color-primary-darkest: var(--primary-dark);
+ --ifm-font-color-base: var(--text-primary-main);
+ --ifm-background-color: var(--background-primary-main);
--ifm-button-color: var(--text-primary-invert-main);
--ifm-button-border-radius: var(--border-radius-main);
--ifm-button-padding-vertical: #{toRem(12)};
--ifm-button-padding-horizontal: #{toRem(16)};
- --ifm-link-hover-color: var(--primary-dark);
+ --ifm-link-hover-color: var(--primary-light);
--ifm-hover-overlay: var(--background-primary-light);
+ --ifm-menu-color: var(--text-primary-main);
+ --ifm-menu-link-sublist-icon: url('/static/icons/chevron-up.svg') 50% / 2rem 2rem;
+ --ifm-toc-link-color: var(--text-primary-main);
+ --ifm-toc-border-color: var(--border-primary-dark);
+ --ifm-breadcrumb-border-radius: var(--border-radius-main);
+ --ifm-breadcrumb-separator: url('/static/icons/chevron-right.svg');
+ --ifm-pagination-nav-border-radius: var(--border-radius-main);
+ --ifm-table-border-color: var(--border-primary-main);
+ --ifm-table-stripe-background: var(--background-primary-light);
+ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index a6ebddb..fc14880 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,7 +1,12 @@
@import '/static/fonts/index.css';
+@import 'breadcrumbs';
@import 'button';
+@import 'footer';
+@import 'menu';
+@import 'navbar';
+@import 'pagination-nav';
+@import 'table-of-contents';
@import 'variables';
-
@import 'global';
diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
new file mode 100644
index 0000000..f78b386
--- /dev/null
+++ b/src/styles/breadcrumbs.scss
@@ -0,0 +1,25 @@
+.breadcrumbs {
+ .breadcrumbs__link {
+ padding: toRem(6) toRem(8);
+
+ &:not(span) {
+ &:not([disabled]):hover {
+ color: var(--text-primary-main);
+ }
+
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ color: var(--ifm-breadcrumb-color-active);
+ background: var(--ifm-breadcrumb-item-background-active);
+ }
+ }
+
+ span {
+ color: inherit;
+ transition: inherit;
+ font: inherit;
+ }
+
+ @include p-12-light;
+ }
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 2119070..0676c62 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -2,6 +2,7 @@
&--primary {
&:focus,
&:active {
+ background: var(--primary-dark);
color: var(--primary-light);
}
}
@@ -9,7 +10,36 @@
&--link {
&:focus,
&:active {
- color: var(--primary-light);
+ text-decoration: underline;
+ color: var(--primary-dark);
}
}
+
+ @include p-14-semi-bold;
+}
+
+button[class*=backToTopButton] {
+ background-color: var(--background-primary-light);
+
+ &:hover {
+ background-color: var(--background-primary-light);
+
+ &:after {
+ background-color: var(--primary-light);
+ }
+ }
+
+ &:focus,
+ &:active {
+ &:after {
+ background-color: var(--primary-main);
+ }
+ }
+
+ &:after {
+ transition: inherit;
+ background-color: var(--text-primary-main);
+ -webkit-mask: var(--ifm-menu-link-sublist-icon);
+ mask: var(--ifm-menu-link-sublist-icon);
+ }
}
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
index aa62d08..8a73833 100644
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@@ -2,44 +2,44 @@
background: var(--background-primary-main);
box-shadow: 0 toRem(-1) var(--background-primary-light);
padding: 0;
-}
-
-.footer__links {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 0;
- height: toRem(70);
-}
-
-span.footer__link-item {
- padding: 0;
-}
-.footer__link-item {
- text-decoration: none;
- outline: none;
- color: var(--text-primary-main);
- padding: toRem(12) toRem(16);
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
+ .footer__links {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 0;
+ height: toRem(70);
}
- &:not([disabled]):hover {
- color: var(--primary-main);
+ span.footer__link-item {
+ padding: 0;
}
- &:not([disabled]):focus,
- &:not([disabled]):active {
- color: var(--primary-light);
+ .footer__link-item {
+ text-decoration: none;
+ outline: none;
+ color: var(--text-primary-main);
+ padding: toRem(12) toRem(16);
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+
+ &:not([disabled]):hover {
+ color: var(--primary-light);
+ }
+
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ color: var(--primary-main);
+ }
+
+ @include p-14-semi-bold;
}
- @include p-14-semi-bold;
-}
-
-.footer__link-separator {
- display: none;
+ .footer__link-separator {
+ display: none;
+ }
}
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
new file mode 100644
index 0000000..0e288f7
--- /dev/null
+++ b/src/styles/menu.scss
@@ -0,0 +1,34 @@
+.menu {
+ .menu__link {
+ padding: toRem(12) toRem(16);
+ border-radius: var(--border-radius-main);
+
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ color: var(--ifm-menu-color-active);
+ }
+
+ &:after {
+ -webkit-mask: var(--ifm-menu-link-sublist-icon);
+ mask: var(--ifm-menu-link-sublist-icon);
+ background: currentColor;
+ filter: none;
+ }
+
+ @include p-14-semi-bold;
+ }
+
+ .menu__list {
+ margin-top: toRem(8);
+ }
+
+ .menu__list-item-collapsible {
+ border-radius: var(--border-radius-main);
+ }
+
+ .menu__list-item {
+ &:not(:first-child) {
+ margin-top: toRem(8);
+ }
+ }
+}
diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss
index 171cf53..c099ddc 100644
--- a/src/styles/navbar.scss
+++ b/src/styles/navbar.scss
@@ -1,44 +1,53 @@
.navbar {
padding: 0 var(--app-padding-left) 0 var(--app-padding-right);
box-shadow: 0 toRem(1) var(--background-primary-light);
-}
-.navbar__toggle {
- @include respond-to(medium) {
- display: inherit;
+ .navbar__toggle {
+ @include respond-to(medium) {
+ display: inherit;
+ }
}
-}
-.navbar__brand {
- margin-left: toRem(-8);
-}
+ .navbar__brand {
+ margin-left: toRem(-8);
-.navbar__logo {
- margin-right: 0;
-}
+ transition: var(--ifm-transition-fast) var(--ifm-transition-timing-default);
-.navbar__title {
- @include h3;
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ color: var(--primary-main);
+ }
+ }
- font-size: toRem(20);
-}
+ .navbar__logo {
+ margin-right: 0;
+ }
-.navbar__items {
- &--right {
- margin-right: toRem(-12);
+ .navbar__title {
+ @include h3;
+
+ font-size: toRem(20);
+ }
+
+ .navbar__items {
+ &--right {
+ margin-right: toRem(-12);
+ }
}
-}
-.navbar__link {
- font-family: var(--app-font-family-secondary);
- font-weight: 400;
- padding: toRem(12) toRem(16);
+ .navbar__link {
+ font-family: var(--app-font-family-secondary);
+ font-weight: 400;
+ padding: toRem(12) toRem(16);
- &:not([disabled]):active {
- color: var(--primary-light);
+ &--active,
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ color: var(--primary-main);
+ }
}
-}
-[class^="searchBox"] {
- display: none;
+ [class^="searchBox"] {
+ display: none;
+ }
}
diff --git a/src/styles/pagination-nav.scss b/src/styles/pagination-nav.scss
new file mode 100644
index 0000000..940f87b
--- /dev/null
+++ b/src/styles/pagination-nav.scss
@@ -0,0 +1,34 @@
+.pagination-nav {
+ .pagination-nav__sublabel,
+ .pagination-nav__label {
+ color: var(--text-primary-main);
+
+ @include p-14-semi-bold;
+ }
+
+ .pagination-nav__link {
+ border: toRem(1) solid var(--border-primary-dark);
+ transition-property: background-color, border-color;
+
+ &:hover {
+ background: var(--background-primary-dark);
+ border-color: var(--primary-light);
+
+ .pagination-nav__sublabel,
+ .pagination-nav__label {
+ color: var(--primary-light);
+ }
+ }
+
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ background: var(--background-primary-dark);
+ border-color: var(--primary-main);
+
+ .pagination-nav__sublabel,
+ .pagination-nav__label {
+ color: var(--primary-main);
+ }
+ }
+ }
+}
diff --git a/src/styles/table-of-contents.scss b/src/styles/table-of-contents.scss
new file mode 100644
index 0000000..8cecfbf
--- /dev/null
+++ b/src/styles/table-of-contents.scss
@@ -0,0 +1,14 @@
+.table-of-contents {
+ .table-of-contents__link {
+ &:not(.table-of-contents__link--active):hover {
+ color: var(--primary-light);
+ }
+
+ &:not([disabled]):focus,
+ &:not([disabled]):active {
+ color: var(--primary-main);
+ }
+
+ @include p-14-semi-bold;
+ }
+}
diff --git a/static/icons/chevron-right.svg b/static/icons/chevron-right.svg
new file mode 100644
index 0000000..c0d45f4
--- /dev/null
+++ b/static/icons/chevron-right.svg
@@ -0,0 +1,10 @@
+
diff --git a/static/icons/chevron-up.svg b/static/icons/chevron-up.svg
new file mode 100644
index 0000000..65d9b4d
--- /dev/null
+++ b/static/icons/chevron-up.svg
@@ -0,0 +1,10 @@
+
diff --git a/static/img/docusaurus-social-card.jpg b/static/img/docusaurus-social-card.jpg
deleted file mode 100644
index ffcb448..0000000
Binary files a/static/img/docusaurus-social-card.jpg and /dev/null differ
diff --git a/static/img/docusaurus.png b/static/img/docusaurus.png
deleted file mode 100644
index f458149..0000000
Binary files a/static/img/docusaurus.png and /dev/null differ
diff --git a/static/img/undraw_docusaurus_mountain.svg b/static/img/undraw_docusaurus_mountain.svg
deleted file mode 100644
index af961c4..0000000
--- a/static/img/undraw_docusaurus_mountain.svg
+++ /dev/null
@@ -1,171 +0,0 @@
-
diff --git a/static/img/undraw_docusaurus_react.svg b/static/img/undraw_docusaurus_react.svg
deleted file mode 100644
index 94b5cf0..0000000
--- a/static/img/undraw_docusaurus_react.svg
+++ /dev/null
@@ -1,170 +0,0 @@
-
diff --git a/static/img/undraw_docusaurus_tree.svg b/static/img/undraw_docusaurus_tree.svg
deleted file mode 100644
index d9161d3..0000000
--- a/static/img/undraw_docusaurus_tree.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-