diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss
index f861fa32..afc40e0f 100644
--- a/website/src/css/custom.scss
+++ b/website/src/css/custom.scss
@@ -10,7 +10,6 @@
/* You can override the default Infima variables here. */
:root {
--ifm-background-color: var(--ifm-color-primary-light);
-
--ifm-code-background: var(--ifm-color-primary-dark);
--ifm-code-font-size: 100%;
--ifm-code-border-radius: 2rem;
@@ -19,7 +18,7 @@
--ifm-code-padding-horizontal: 0.2rem;
--ifm-color-primary: #0e2b3d;
--ifm-color-primary-dark: #131226;
- --ifm-color-primary-darker: rgb(31, 165, 136);
+ --ifm-color-primary-darker: #0d0c1b;
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: #fffef6;
--ifm-color-primary-lighter: rgb(102, 212, 189);
@@ -39,7 +38,7 @@
--ifm-menu-color: var(--ifm-color-primary-dark);
--ifm-menu-color-active: var(--ifm-color-primary-dark);
--ifm-menu-color-background-hover: #fdf9d7;
- --ifm-menu-color-background-active: #fdf9d7;
+ --ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,');
--ifm-navbar-height: 6rem;
--ifm-navbar-background-color: var(--ifm-color-primary-light);
@@ -52,7 +51,7 @@
html[data-theme="dark"] {
--ifm-background-color: var(--ifm-color-primary-dark);
- --ifm-navbar-background-color: transparent;
+ --ifm-navbar-background-color: var(--ifm-color-primary-darker);
--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);
@@ -63,13 +62,14 @@ html[data-theme="dark"] {
--ifm-table-stripe-background: #2e526a;
--ifm-code-background: var(--ifm-color-primary-dark);
--ifm-heading-color: var(--ifm-color-primary-light);
+ --ifm-blockquote-color: var(--ifm-menu-color-background-hover);
+ --ifm-color-emphasis-300: var(--ifm-menu-color-background-hover);
}
/* global */
h1,
-h2,
-h3 {
+h2 {
font-family: "Poppins", sans-serif;
}
@@ -86,7 +86,7 @@ code {
.markdown {
& > h2 {
--ifm-h2-font-size: 1.5rem;
- --ifm-h2-vertical-rhythm-top: 3;
+ --ifm-h2-vertical-rhythm-top: 4;
}
& > h3 {
@@ -94,6 +94,10 @@ code {
--ifm-h3-vertical-rhythm-top: 3;
}
+ & > h2 + h3 {
+ --ifm-h3-vertical-rhythm-top: 2;
+ }
+
a {
font-weight: bold;
text-decoration: underline;
@@ -130,9 +134,11 @@ a[class*="menuLinkExternal"]:after {
position: absolute;
right: var(--ifm-menu-link-padding-horizontal);
top: var(--ifm-menu-link-padding-vertical);
+ height: 1.25rem;
+ width: 1.25rem;
}
-h1[class^="docTitle"] {
+h1[class^="h1Heading"] {
margin-bottom: 3rem;
}
@@ -141,6 +147,10 @@ h1[class^="docTitle"] {
display: flex;
align-items: center;
margin: 2rem 0 5rem;
+
+ html[data-theme="dark"] & svg path {
+ fill: var(--ifm-color-primary-light);
+ }
}
#__docusaurus {
@@ -148,7 +158,7 @@ h1[class^="docTitle"] {
padding-bottom: 3rem;
html[data-theme="dark"] & {
- background: #0d0c1b;
+ background: var(--ifm-color-primary-darker);
}
}
@@ -232,6 +242,7 @@ div[class^="codeBlockContainer"] {
div[class^="codeBlockTitle"] {
background-color: var(--ifm-color-primary-dark) !important;
+ border-bottom: 1px solid #606770;
font-family: var(--ifm-font-family-monospace);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@@ -244,6 +255,7 @@ div[class^="codeBlockContainer"] {
code[class^="codeBlockLines"] {
background-color: var(--ifm-color-primary-dark) !important;
+ border-radius: 0;
margin: 0;
.token-line {
color: var(--ifm-color-primary-light) !important;
@@ -301,19 +313,29 @@ html[data-theme="dark"] .menu {
color: var(--ifm-color-primary-light);
}
+ &--active:not(.menu__link--sublist) {
+ background-color: var(--ifm-color-primary);
+ color: var(--ifm-color-primary-light);
+
+ html[data-theme="dark"] & {
+ background-color: var(--ifm-menu-color-background-hover);
+ color: var(--ifm-color-primary);
+ }
+ }
+
html[data-theme="dark"] &,
html[data-theme="dark"] &:not([href]),
html[data-theme="dark"] &:focus {
color: var(--ifm-color-primary-light);
}
- html[data-theme="dark"] &:hover {
+ html[data-theme="dark"] &:not(.menu__link--active):hover {
background-color: var(--ifm-color-primary);
}
- html[data-theme="dark"] &:active {
- background-color: var(--ifm-color-primary);
- color: var(--ifm-color-primary-light);
+ html[data-theme="dark"] &:not(.menu__link--active):active {
+ background-color: var(--ifm-color-primary-light);
+ color: var(--ifm-color-primary);
}
&.menu__link--sublist {
@@ -325,7 +347,7 @@ html[data-theme="dark"] .menu {
}
&:hover {
- background-color: #fdf9d7;
+ background-color: var(--ifm-menu-color-background-hover);
}
html[data-theme="dark"] & {
@@ -346,10 +368,16 @@ html[data-theme="dark"] .menu {
display: none;
}
&:before {
- content: url("/img/Dagger_Icons_Search.svg");
+ content: "";
+ background-color: black;
+ mask: url("/img/Dagger_Icons_Search.svg");
display: block;
width: 20px;
height: 20px;
+
+ html[data-theme="dark"] & {
+ background-color: var(--ifm-color-primary-light);
+ }
}
}
@@ -370,7 +398,6 @@ div[class*="admonition-"] .admonition-icon svg {
img[alt="github-contribute"] {
display: block;
- margin: auto;
width: 180px;
}
@@ -384,7 +411,7 @@ img[alt="github-contribute"] {
.admonition-#{$name} .admonition-icon::before {
mask: url($path);
content: "";
- background-color: $bgColor;
+ background-color: var(--ifm-color-primary-dark);
display: block;
width: 22px;
height: 22px;
diff --git a/website/src/theme/Toggle/Icon_Day-mode.svg b/website/src/theme/Toggle/Icon_Day-mode.svg
deleted file mode 100644
index 876ad3b2..00000000
--- a/website/src/theme/Toggle/Icon_Day-mode.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/website/src/theme/Toggle/Icon_Night-mode.svg b/website/src/theme/Toggle/Icon_Night-mode.svg
deleted file mode 100644
index aba67380..00000000
--- a/website/src/theme/Toggle/Icon_Night-mode.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/website/src/theme/Toggle/icon_day.svg b/website/src/theme/Toggle/icon_day.svg
new file mode 100644
index 00000000..06ce769d
--- /dev/null
+++ b/website/src/theme/Toggle/icon_day.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/website/src/theme/Toggle/icon_night.svg b/website/src/theme/Toggle/icon_night.svg
new file mode 100644
index 00000000..b21b8329
--- /dev/null
+++ b/website/src/theme/Toggle/icon_night.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/website/src/theme/Toggle/index.js b/website/src/theme/Toggle/index.js
index 65525bc2..64c0ea75 100644
--- a/website/src/theme/Toggle/index.js
+++ b/website/src/theme/Toggle/index.js
@@ -9,8 +9,8 @@ import { useThemeConfig } from '@docusaurus/theme-common';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import clsx from 'clsx';
import styles from './styles.module.css';
-import DarkIcon from "./Icon_Night-mode.svg"
-import LightIcon from "./Icon_Day-mode.svg"
+import DarkIcon from "./icon_night.svg"
+import LightIcon from "./icon_day.svg"
const Dark = ({ icon, style }) => (
diff --git a/website/src/theme/Toggle/styles.module.css b/website/src/theme/Toggle/styles.module.css
index 68635249..72423869 100644
--- a/website/src/theme/Toggle/styles.module.css
+++ b/website/src/theme/Toggle/styles.module.css
@@ -103,3 +103,9 @@
:global(.react-toggle--checked .react-toggle-thumb) {
left: 31px;
}
+
+:global(.icon_day_svg__mode),
+:global(.icon_night_svg__mode) {
+ height: 26px;
+ width: 26px;
+}