From c2b07ceeb8577554f71ba60ed260d399b81545d1 Mon Sep 17 00:00:00 2001 From: Vahagn Aharonian Date: Fri, 3 Feb 2023 00:49:52 +0400 Subject: [PATCH] Redesign docs --- docusaurus.config.js | 4 ++ src/css/custom.css | 98 ++++++++++++++++++++++++++-------- static/img/bg-gradient.svg | 52 ++++++++++++++++++ static/img/footer-gradient.svg | 46 ++++++++++++++++ 4 files changed, 177 insertions(+), 23 deletions(-) create mode 100644 static/img/bg-gradient.svg create mode 100644 static/img/footer-gradient.svg diff --git a/docusaurus.config.js b/docusaurus.config.js index f9f65352..8b3e3b81 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -69,6 +69,10 @@ const config = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + colorMode: { + disableSwitch: true, + defaultMode: "dark", + }, navbar: { title: "Docs", logo: { diff --git a/src/css/custom.css b/src/css/custom.css index a2f0deac..24c75920 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,17 +1,25 @@ -:root { - --ifm-color-primary: #5a3ee0; +:root[data-theme="dark"] { + --ifm-color-primary: #a596ee; --ifm-color-primary-dark: #311a9e; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; --ifm-color-primary-light: #a596ee; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - --ifm-background-color: white; --ifm-footer-link-hover-color: white; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + + --ifm-background-color: #17171a; + --ifm-background-surface-color: var(--ifm-background-color); + --ifm-toc-border-color: rgba(255, 255, 255, 0.1); + --ifm-color-emphasis-200: #383843; + --ifm-color-emphasis-300: var(--ifm-toc-border-color); + --ifm-menu-color: #8a898e; + --ifm-menu-color-active: white; + --ifm-navbar-shadow: none; + --font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -19,33 +27,47 @@ --ifm-heading-font-family: "Archivo", var(--font-family-base); --ifm-toc-border-color: rgba(0, 0, 0, 0.06); --ifm-color-emphasis-300: var(--ifm-toc-border-color); - --ifm-color-content: rgba(0, 0, 0, 0.8); - --ifm-menu-color: rgba(0, 0, 0, 0.7); + + --brand-gradient-bg: linear-gradient( + 115.45deg, + rgba(90, 62, 224, 0.05) -17.45%, + rgba(197, 62, 224, 0.05) 103.72% + ); + --brand-gradient: linear-gradient( + 115.45deg, + rgba(90, 62, 224, 1) -17.45%, + rgba(197, 62, 224, 1) 103.72% + ); + + background-image: url("../../static/img/bg-gradient.svg"); + background-repeat: no-repeat; + background-size: cover; } -/* For readability concerns, you should choose a lighter palette in dark mode. */ -:root[data-theme="dark"] { - --ifm-color-primary: #a596ee; - /* --ifm-color-primary-dark: #1a9e77; */ - /* --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; */ - /* --ifm-color-primary-light: #96eed4; */ - /* --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; */ - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +.navbar { + background: transparent; +} - --ifm-background-color: #17171a; - --ifm-toc-border-color: rgba(255, 255, 255, 0.1); - --ifm-color-emphasis-300: var(--ifm-toc-border-color); - --ifm-menu-color: white; +.navbar:before { + content: ""; + position: absolute; + inset: 0; + background: rgba(23, 23, 26, 0.2); + backdrop-filter: blur(2px); + z-index: -1; } -[data-theme="dark"] .navbar { - background: linear-gradient(to right, #462741, #232331); +.theme-doc-sidebar-container { + border-color: transparent !important; } .footer--dark { --ifm-footer-background-color: #272730; + background-image: url("../../static/img/footer-gradient.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer__link-item:hover { @@ -78,3 +100,33 @@ a > svg[class*="ExternalLink"] { margin-right: 0.5em; vertical-align: middle; } + +.pagination-nav__link { + background: var(--brand-gradient-bg); +} + +.pagination-nav__label { + display: inline-block; + background: var(--brand-gradient); + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.breadcrumbs__item--active { + background: var(--brand-gradient-bg); + border-radius: 50px; +} + +.breadcrumbs__item--active .breadcrumbs__link { + background: var(--brand-gradient); + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.menu__list-item-collapsible--active, +.menu__link--active:not(.menu__link--sublist), +.menu__link:hover, +.menu__list-item-collapsible:hover { + background: var(--brand-gradient-bg); + color: white; +} diff --git a/static/img/bg-gradient.svg b/static/img/bg-gradient.svg new file mode 100644 index 00000000..a5340bf5 --- /dev/null +++ b/static/img/bg-gradient.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/footer-gradient.svg b/static/img/footer-gradient.svg new file mode 100644 index 00000000..2fa2818c --- /dev/null +++ b/static/img/footer-gradient.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +