From d0169727c25a3dc98e6b093a4baac58a0b3b7a47 Mon Sep 17 00:00:00 2001 From: jffarge Date: Mon, 28 Jun 2021 15:41:10 +0200 Subject: [PATCH] docs: :lipstick: many css improvments + minor fixes Signed-off-by: jffarge --- website/src/css/custom.scss | 61 ++++++++++++++------ website/src/theme/Toggle/Icon_Day-mode.svg | 1 - website/src/theme/Toggle/Icon_Night-mode.svg | 1 - website/src/theme/Toggle/icon_day.svg | 1 + website/src/theme/Toggle/icon_night.svg | 1 + website/src/theme/Toggle/index.js | 4 +- website/src/theme/Toggle/styles.module.css | 6 ++ 7 files changed, 54 insertions(+), 21 deletions(-) delete mode 100644 website/src/theme/Toggle/Icon_Day-mode.svg delete mode 100644 website/src/theme/Toggle/Icon_Night-mode.svg create mode 100644 website/src/theme/Toggle/icon_day.svg create mode 100644 website/src/theme/Toggle/icon_night.svg 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; +}