From e0c99521b761ba65c1f3a2a0148425208c8a1790 Mon Sep 17 00:00:00 2001 From: oriooctopus Date: Wed, 27 May 2020 20:50:06 -0600 Subject: [PATCH 1/6] LIB-598: add code snippet --- docs/core/overview-v2.md | 72 ++++++++++++ package.json | 5 +- src/components/WithBackgroundImage/index.js | 14 ++- src/components/docs/Code/index.js | 121 ++++++++++++++++++++ src/components/docs/Code/styles.module.css | 52 +++++++++ src/components/docs/index.js | 2 + src/css/custom.css | 11 ++ src/css/variables.module.css | 2 + static/img/copy-dark.svg | 15 +++ static/img/copy.svg | 21 ++++ yarn.lock | 8 +- 11 files changed, 316 insertions(+), 7 deletions(-) create mode 100644 src/components/docs/Code/index.js create mode 100644 src/components/docs/Code/styles.module.css create mode 100644 static/img/copy-dark.svg create mode 100644 static/img/copy.svg diff --git a/docs/core/overview-v2.md b/docs/core/overview-v2.md index 38b89b5b..fd5491f5 100644 --- a/docs/core/overview-v2.md +++ b/docs/core/overview-v2.md @@ -4,6 +4,78 @@ title: Libra Core Overview sidebar_label: Core Contributors --- + +

You clicked {count} times

+ + + ); +} + `} +/> + +> Getting committed transaction by account and sequence number +Committed transaction: SignedTransaction { + { raw_txn: RawTransaction { + sender: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, + sequence_number: 0, + payload: {, + transaction: peer_to_peer_transaction, + args: [ + {ADDRESS: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7}, + {U64: 10000000}, + ] + }, + max_gas_amount: 10000, + gas_unit_price: 0, + expiration_time: 1560466424s, +}, + public_key: 55af3fe3f28550a2f1e5ebf073ef193feda44344d94c463b48be202aa0b3255d, + signature: Signature( R: CompressedEdwardsY: [210, 23, 214, 62, 228, 179, 64, 147, 81, 159, 180, 138, 100, 211, 111, 139, 178, 148, 81, 1, 240, 135, 148, 145, 104, 234, 227, 239, 198, 153, 13, 199], s: Scalar{ + bytes: [203, 76, 105, 49, 64, 130, 162, 81, 22, 237, 159, 26, 80, 181, 111, 94, 84, 6, 152, 126, 181, 192, 62, 103, 130, 94, 246, 174, 139, 214, 3, 15], +} ), + } + } +Events: +ContractEvent { access_path: AccessPath { address: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, type: Resource, hash: "217da6c6b3e19f1825cfb2676daecce3bf3de03cf26647c78df00b371b25cc97", suffix: "/sent_events_count/" } , index: 0, event_data: AccountEvent { account: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7, amount: 10000000 } } +ContractEvent { access_path: AccessPath { address: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7, type: Resource, hash: "217da6c6b3e19f1825cfb2676daecce3bf3de03cf26647c78df00b371b25cc97", suffix: "/received_events_count/" } , index: 0, event_data: AccountEvent { account: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, amount: 10000000 } } + `} +/> + + + Libra Core is the official name for the open-source implementation of the Libra protocol published by the Libra Association. ### Discover Core Contributor diff --git a/package.json b/package.json index 95df8d18..892fc562 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.0", "private": true, "scripts": { - "start": "TEST_ADA=1 docusaurus start", + "start": "docusaurus start", + "start-with-ada": "TEST_ADA=1 docusaurus start", "build": "docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy" @@ -12,7 +13,7 @@ "@docusaurus/core": "^2.0.0-alpha.53", "@docusaurus/preset-classic": "^2.0.0-alpha.53", "classnames": "^2.2.6", - "libra-docusaurus-nav": "^1.1.4", + "libra-docusaurus-nav": "^1.2.6", "react": "^16.8.4", "react-dom": "^16.8.4" }, diff --git a/src/components/WithBackgroundImage/index.js b/src/components/WithBackgroundImage/index.js index 322dbf1e..c3b3828b 100644 --- a/src/components/WithBackgroundImage/index.js +++ b/src/components/WithBackgroundImage/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import useBaseUrl from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -23,6 +24,17 @@ const WithBackgroundImage = ({ {children} ); -} +}; + +WithBackgroundImage.propTypes = { + children: PropTypes.element, + imageDark: PropTypes.string, + imageLight: PropTypes.string.isRequired, + tag: PropTypes.oneOf(PropTypes.element, PropTypes.string).isRequired, +}; + +WithBackgroundImage.defaultProps = { + tag: 'div', +}; export default WithBackgroundImage; diff --git a/src/components/docs/Code/index.js b/src/components/docs/Code/index.js new file mode 100644 index 00000000..edb80d4c --- /dev/null +++ b/src/components/docs/Code/index.js @@ -0,0 +1,121 @@ +import React, {useEffect, useRef, useState} from "react"; +import Clipboard from 'clipboard'; +import Highlight, { defaultProps } from "prism-react-renderer"; +import darkCodeTheme from "prism-react-renderer/themes/paleNight"; +import lightCodeTheme from "prism-react-renderer/themes/github"; +import PropTypes from 'prop-types'; + +import useThemeContext from '@theme/hooks/useThemeContext'; + +import WithBackgroundImage from 'components/WithBackgroundImage'; + +import classnames from 'classnames'; +import styles from './styles.module.css'; + +const LINE_CONTENT_CLASS = 'line-content'; + +const getUniqueID = (() => { + let id = 0; + return () => id++; +})(); + +const handleCopyCode = (setShowCopied) => { + window.getSelection().empty(); + setShowCopied(true); + + setTimeout(() => setShowCopied(false), 2000); +}; + +const Header = ({ snippetID, target }) => { + const [showCopied, setShowCopied] = useState(false); + const button = useRef(null); + + useEffect(() => { + let clipboard; + + if (button.current) { + clipboard = new Clipboard(button.current, { + text: () => + Array.from(document.querySelectorAll(`#${snippetID} .${LINE_CONTENT_CLASS}`)) + .map(({textContent}) => `${textContent}\n`) + .join(''), + }); + } + + return () => { + if (clipboard) { + clipboard.destroy(); + } + }; + }, [button.current, target.current]); + + return ( +
+
+ handleCopyCode(setShowCopied)} + > + + +
+
+ ); +}; + +const Code = ({ code, language }) => { + const {isDarkTheme} = useThemeContext(); + const [snippetID, setSnippetID] = useState(null); + const target = useRef(null); + + const parsedCode = code.trim(); + const theme = isDarkTheme ? darkCodeTheme : lightCodeTheme; + + useEffect(() => setSnippetID(`snippet-${getUniqueID()}`), []); + + return ( + + {({ className,style, tokens, getLineProps, getTokenProps }) => ( +
+
+ 
+            {tokens.map((line, i) => (
+              

+                {i + 1}
+                
+                  {line.map((token, key) => (
+                    
+                  ))}
+                
+              

+            ))}
+
+
+ )} + + ); +}; + +Code.propTypes = { + code: PropTypes.string.isRequired, + /* + * For a list of available languages, see + * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js + */ + language: PropTypes.string.isRequired, +}; + +Code.defaultProps = { + language: 'plaintext', +}; + +export default Code; diff --git a/src/components/docs/Code/styles.module.css b/src/components/docs/Code/styles.module.css new file mode 100644 index 00000000..b849f033 --- /dev/null +++ b/src/components/docs/Code/styles.module.css @@ -0,0 +1,52 @@ +.header { + background-color: var(--snippet-header-background); + border-top-left-radius: var(--ifm-pre-border-radius); + border-top-right-radius: var(--ifm-pre-border-radius); + display: flex; + justify-content: flex-end; + padding: 10px; +} + +.copyWrapper { + --icon-size: 12px; + background-position: 99% 2.5px; + background-repeat: no-repeat; + background-size: var(--icon-size); + display: flex; + margin-right: 5px; + padding: 3px calc(var(--icon-size) + 4px) 3px 0; +} + +.copyWrapper:not(.isCopied), .copyWrapper:not(.isCopied) button { + cursor: pointer; +} + +.header button { + background-color: transparent; + border: none; + color: var(--snippet-copy-color); + font-size: 10px; +} + +.header button:focus { + outline: none; +} + +.root pre { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.root :global(.token-line) { + display: table-row; +} + + +.lineNumber { + display: table-cell; + padding-right: 13px; + text-align: right; + user-select: none; + -moz-user-select: none; + word-break: keep-all; +} diff --git a/src/components/docs/index.js b/src/components/docs/index.js index d841c715..627320a2 100644 --- a/src/components/docs/index.js +++ b/src/components/docs/index.js @@ -1,5 +1,7 @@ +import Code from './Code'; import Cards from './Cards'; export default { ...Cards, + Code, }; diff --git a/src/css/custom.css b/src/css/custom.css index 8365687d..77abff07 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -25,6 +25,17 @@ body .hash-link { margin-top: 2.25px !important; } +.prism-code > * { + /* + * Prevents code block from overflowing on extremely + * long words + */ + white-space: pre-wrap !important; + word-break: break-all; +} + +/* Fonts */ + @font-face { font-family: 'NB International Pro'; font-weight: 400; diff --git a/src/css/variables.module.css b/src/css/variables.module.css index da886421..1eb22aa4 100644 --- a/src/css/variables.module.css +++ b/src/css/variables.module.css @@ -42,6 +42,8 @@ --nav-page-indicator-secondary: #5F7186; --nav-primary-text-color: #42318c; --right-sidebar-top-bar-hover: #354052; + --snippet-header-background: #E3E8EE; + --snippet-copy-color: #6B7689; /* TODO: Look into accounting varying browser widths of scrollbar */; --scrollbar-width: 10px; --sidebar-gray: var(--dark-mode-gray-1); diff --git a/static/img/copy-dark.svg b/static/img/copy-dark.svg new file mode 100644 index 00000000..3bc51563 --- /dev/null +++ b/static/img/copy-dark.svg @@ -0,0 +1,15 @@ + + + 7666CE3F-7FB9-40EC-B2D2-2FBC17775C85@2x + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/copy.svg b/static/img/copy.svg new file mode 100644 index 00000000..421075bf --- /dev/null +++ b/static/img/copy.svg @@ -0,0 +1,21 @@ + + + A26E11D2-472E-4DAC-88F4-69AA357F76A9 + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b140f01d..11a5e6f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5217,10 +5217,10 @@ levenary@^1.1.1: dependencies: leven "^3.1.0" -libra-docusaurus-nav@^1.1.4: - version "1.1.4" - resolved "https://registry.yarnpkg.com/libra-docusaurus-nav/-/libra-docusaurus-nav-1.1.4.tgz#e870414d1e825f658b6a6e2b4f07150f334a0c84" - integrity sha512-aKLj263maqcedQwzI9K5SuUQy6vSWw8Ymz56KKfjEqhyHaG3BdYxqddoNh+l/2zAvADkaocolReLxR8BIPXUiw== +libra-docusaurus-nav@^1.2.6: + version "1.2.6" + resolved "https://registry.yarnpkg.com/libra-docusaurus-nav/-/libra-docusaurus-nav-1.2.6.tgz#b7d7fe578eebb2eb2b1707c916d5bdf0add1c152" + integrity sha512-3/E2w9dMfRAxBP9rqguuq6R1O/2IC8eL9GDzBegcWyR6MBkOcLI8y6gEJ+RXVvllY8Afg6R7lAW0m1ZSdbIWwQ== dependencies: prop-types "^15.7.2" react "^16.13.1" From f68aebd83392873dfe3b6b128dafc79ea4c17eab Mon Sep 17 00:00:00 2001 From: oriooctopus Date: Thu, 28 May 2020 10:59:00 -0600 Subject: [PATCH 2/6] LIB-598: Make code snippet specified with normal markdown syntax --- docs/core/overview-v2.md | 82 ++++++++++--------------------- src/components/docs/Code/index.js | 14 +++--- src/components/docs/index.js | 2 +- 3 files changed, 34 insertions(+), 64 deletions(-) diff --git a/docs/core/overview-v2.md b/docs/core/overview-v2.md index fd5491f5..417712ab 100644 --- a/docs/core/overview-v2.md +++ b/docs/core/overview-v2.md @@ -4,9 +4,7 @@ title: Libra Core Overview sidebar_label: Core Contributors --- - ); } - `} -/> - -> Getting committed transaction by account and sequence number -Committed transaction: SignedTransaction { - { raw_txn: RawTransaction { - sender: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, - sequence_number: 0, - payload: {, - transaction: peer_to_peer_transaction, - args: [ - {ADDRESS: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7}, - {U64: 10000000}, - ] - }, - max_gas_amount: 10000, - gas_unit_price: 0, - expiration_time: 1560466424s, -}, - public_key: 55af3fe3f28550a2f1e5ebf073ef193feda44344d94c463b48be202aa0b3255d, - signature: Signature( R: CompressedEdwardsY: [210, 23, 214, 62, 228, 179, 64, 147, 81, 159, 180, 138, 100, 211, 111, 139, 178, 148, 81, 1, 240, 135, 148, 145, 104, 234, 227, 239, 198, 153, 13, 199], s: Scalar{ - bytes: [203, 76, 105, 49, 64, 130, 162, 81, 22, 237, 159, 26, 80, 181, 111, 94, 84, 6, 152, 126, 181, 192, 62, 103, 130, 94, 246, 174, 139, 214, 3, 15], -} ), - } - } -Events: -ContractEvent { access_path: AccessPath { address: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, type: Resource, hash: "217da6c6b3e19f1825cfb2676daecce3bf3de03cf26647c78df00b371b25cc97", suffix: "/sent_events_count/" } , index: 0, event_data: AccountEvent { account: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7, amount: 10000000 } } -ContractEvent { access_path: AccessPath { address: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7, type: Resource, hash: "217da6c6b3e19f1825cfb2676daecce3bf3de03cf26647c78df00b371b25cc97", suffix: "/received_events_count/" } , index: 0, event_data: AccountEvent { account: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, amount: 10000000 } } - `} -/> - - +``` + +``` +usage: + +Use the following commands: + +account | a + Account operations +query | q + Query operations +transfer | transferb | t | tb + | | [gas_unit_price (default=0)] [max_gas_amount (default 10000)] Suffix 'b' is for blocking. + Transfer coins from account to another. +help | h + Prints this help +quit | q! + Exit this client + + +Please, input commands: + +libra% +``` Libra Core is the official name for the open-source implementation of the Libra protocol published by the Libra Association. diff --git a/src/components/docs/Code/index.js b/src/components/docs/Code/index.js index edb80d4c..16ae76f6 100644 --- a/src/components/docs/Code/index.js +++ b/src/components/docs/Code/index.js @@ -72,18 +72,20 @@ const Header = ({ snippetID, target }) => { ); }; -const Code = ({ code, language }) => { +const Code = ({ children, className: languageClassName }) => { const {isDarkTheme} = useThemeContext(); const [snippetID, setSnippetID] = useState(null); const target = useRef(null); - const parsedCode = code.trim(); + let code = children.replace(/\n$/, ''); const theme = isDarkTheme ? darkCodeTheme : lightCodeTheme; + let language = + languageClassName && languageClassName.replace(/language-/, ''); useEffect(() => setSnippetID(`snippet-${getUniqueID()}`), []); return ( - + {({ className,style, tokens, getLineProps, getTokenProps }) => (
@@ -106,16 +108,16 @@ const Code = ({ code, language }) => { }; Code.propTypes = { - code: PropTypes.string.isRequired, /* * For a list of available languages, see * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js */ - language: PropTypes.string.isRequired, + className: PropTypes.string.isRequired, + children: PropTypes.element.isRequired, }; Code.defaultProps = { - language: 'plaintext', + className: 'language-plaintext', }; export default Code; diff --git a/src/components/docs/index.js b/src/components/docs/index.js index 627320a2..ba2bff55 100644 --- a/src/components/docs/index.js +++ b/src/components/docs/index.js @@ -3,5 +3,5 @@ import Cards from './Cards'; export default { ...Cards, - Code, + code: Code, }; From c77ce20b8c575ad856a1ac47b4f4bb9ad2d7a7fa Mon Sep 17 00:00:00 2001 From: oriooctopus Date: Wed, 27 May 2020 21:11:12 -0600 Subject: [PATCH 3/6] LIB-590: changes variables to enable dark mode --- src/css/variables.module.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/css/variables.module.css b/src/css/variables.module.css index 1eb22aa4..7c663287 100644 --- a/src/css/variables.module.css +++ b/src/css/variables.module.css @@ -4,6 +4,29 @@ }; } +html[data-theme='dark'] { + --accent-highlight: #6889E5; + --default-background-color: var(--dark-mode-black-darkest); + --default-border-color: var(--dark-mode-black-lighter); + --doc-component-background: var(--dark-mode-black-lighter); + --doc-primary: white; + --doc-title: white; + --nav-page-indicator-primary: white; + --nav-page-indicator-secondary: var(--dark-mode-gray-1); + --nav-primary-text-color: white; + --primary-gray: var(--dark-mode-gray-2); + --right-sidebar-top-bar-hover: var(--accent-highlight); + --sidebar-gray: var(--dark-mode-gray-1); + --sidebar-primary-title: var(--dark-mode-gray-2); + --snippet-copy-color: white; + --snippet-header-background: #50576B; + --subnav-background: #2A3045; + --subnav-text-color: var(--dark-mode-gray-1); + --toc-color: #A3ACB9; + --toggle-background: var(--dark-mode-gray-1); + --toggle-indicator-background: var(--default-background-color); +} + :root { /* Sizing */ --body-horizontal-padding: 30px; From c2caf19db7e1ddaa456e54dbfa8647acb6129d63 Mon Sep 17 00:00:00 2001 From: oriooctopus Date: Thu, 28 May 2020 12:12:09 -0600 Subject: [PATCH 4/6] LIB-691: Add search --- docusaurus.config.js | 5 +- src/theme/DocSidebar/index.js | 6 + src/theme/DocSidebar/styles.module.css | 147 +++++++++++++------------ static/img/search.svg | 9 ++ 4 files changed, 97 insertions(+), 70 deletions(-) create mode 100644 static/img/search.svg diff --git a/docusaurus.config.js b/docusaurus.config.js index 419c3765..bb7f833d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -7,7 +7,10 @@ module.exports = { organizationName: 'facebook', // Usually your GitHub org/user name. projectName: 'docusaurus', // Usually your repo name. themeConfig: { - disableDarkMode: true, + algolia: { + apiKey: 'eb29b473d27eae9cc46c84eb3a2e4063', + indexName: 'libra-website', + }, sidebarCollapsible: false, navbar: { title: 'My Site', diff --git a/src/theme/DocSidebar/index.js b/src/theme/DocSidebar/index.js index 2d13fe57..ae7428a7 100644 --- a/src/theme/DocSidebar/index.js +++ b/src/theme/DocSidebar/index.js @@ -4,6 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLogo from '@theme/hooks/useLogo'; import Link from '@docusaurus/Link'; +import SearchBar from '@theme/SearchBar'; import useBaseUrl from '@docusaurus/useBaseUrl'; import isInternalUrl from '@docusaurus/isInternalUrl'; @@ -157,6 +158,7 @@ function mutateSidebarCollapsingState(item, path) { function DocSidebar(props) { const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false); + const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false); const { siteConfig: { themeConfig: {navbar: {title, hideOnScroll = false} = {}}, @@ -248,6 +250,10 @@ function DocSidebar(props) { )}
    + {sidebarData.map((item) => ( .menuLink:hover { background-color: inherit; - color: var(--ifm-color-primary); + color: var(--accent-highlight); } .menu .withBackgroundImage, .menu .menuLink.withBackgroundImage { @@ -159,9 +139,8 @@ } /* Themes */ - .primary .menuLink, .menuLink.primary { - color: var(--ifm-font-color-base); + color: var(--sidebar-primary-title); font-size: 1.8em; } @@ -194,3 +173,33 @@ padding-top: .2em; padding-bottom: .5em; } + +@media large-tablet-breakpoint-query { + .sidebar { + height: calc(100vh - var(--total-nav-height) ); + overflow-y: auto; + position: sticky; + top: 0; + margin-bottom: .5px !important; + } + + .sidebar .menu:not(:global(.menu--show)) .menuList, + .sidebar .menu:not(:global(.menu--show)) :global(#search_input_react) { + display: block; + opacity: 1; + } + + :global(.ds-dropdown-menu) { + width: 100%; + } + + :global(.navbar__search) { + /* + * Allow for a border that traverses the width of the + * whole sidebar without the need for absolute positioning + */ + margin-left: calc(-1 * var(--sidebar-horizontal-padding)); + padding-left: calc(var(--sidebar-horizontal-padding)); + width: calc(100% + 2 * var(--sidebar-horizontal-padding)); + } +} diff --git a/static/img/search.svg b/static/img/search.svg new file mode 100644 index 00000000..8f03ec16 --- /dev/null +++ b/static/img/search.svg @@ -0,0 +1,9 @@ + + + DF3A9311-34C6-4A97-961A-27AC10F65402 + + + + + + \ No newline at end of file From 00757cab0de1953a52f69d214d88c76b1494af38 Mon Sep 17 00:00:00 2001 From: oriooctopus Date: Thu, 28 May 2020 12:23:21 -0600 Subject: [PATCH 5/6] tighten up styles/add more dark mode support --- .../Cards/BaseContainer/styles.module.css | 5 +-- .../docs/Cards/OverlayCard/styles.module.css | 8 ++++- .../docs/Cards/SimpleCard/styles.module.css | 2 +- .../docs/Cards/TagCard/styles.module.css | 2 +- src/css/custom.css | 32 ++++++++++++++----- src/theme/DocPage/styles.module.css | 18 +++++------ src/theme/Layout/styles.css | 8 +++-- src/theme/Navbar/index.js | 2 +- 8 files changed, 51 insertions(+), 26 deletions(-) diff --git a/src/components/docs/Cards/BaseContainer/styles.module.css b/src/components/docs/Cards/BaseContainer/styles.module.css index 9fa08ef6..e9751a42 100644 --- a/src/components/docs/Cards/BaseContainer/styles.module.css +++ b/src/components/docs/Cards/BaseContainer/styles.module.css @@ -1,6 +1,7 @@ .root { - color: var(--doc-black); - transition: .15s ease-in-out; + --transition-speed: .15s; + color: var(--doc-primary); + transition: box-shadow var(--transition-speed) ease-in-out; width: var(--doc-card-size); } diff --git a/src/components/docs/Cards/OverlayCard/styles.module.css b/src/components/docs/Cards/OverlayCard/styles.module.css index ccb0954c..b09023de 100644 --- a/src/components/docs/Cards/OverlayCard/styles.module.css +++ b/src/components/docs/Cards/OverlayCard/styles.module.css @@ -1,5 +1,6 @@ .root { - background-color: var(--doc-background-color); + --transition-speed: .25s; + background-color: var(--doc-component-background); display: inline-block; overflow: hidden; position: relative; @@ -22,9 +23,14 @@ position: absolute; top: 50%; transform: translateY(-50%); + transition: background-color var(--transition-speed) ease-in-out; width: 263px; } +.root:hover .circleOverlay { + background-color: #8ECFBA; +} + .root .image { --image-size: 50px; background-repeat: no-repeat; diff --git a/src/components/docs/Cards/SimpleCard/styles.module.css b/src/components/docs/Cards/SimpleCard/styles.module.css index 332dca24..0baf361d 100644 --- a/src/components/docs/Cards/SimpleCard/styles.module.css +++ b/src/components/docs/Cards/SimpleCard/styles.module.css @@ -1,6 +1,6 @@ .root { align-items: center; - background-color: var(--doc-background-color); + background-color: var(--doc-component-background); display: inline-flex; padding: 20px; } diff --git a/src/components/docs/Cards/TagCard/styles.module.css b/src/components/docs/Cards/TagCard/styles.module.css index 3f5fda3e..25cc3560 100644 --- a/src/components/docs/Cards/TagCard/styles.module.css +++ b/src/components/docs/Cards/TagCard/styles.module.css @@ -1,6 +1,6 @@ .root { align-items: center; - background-color: var(--doc-background-color); + background-color: var(--doc-component-background); display: inline-flex; padding: 20px; } diff --git a/src/css/custom.css b/src/css/custom.css index 77abff07..b5e659d3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,13 +1,17 @@ -html { - overflow-y: hidden; -} - /* stylelint-disable docusaurus/copyright-header */ * { list-style: none; } -body { +html, body { + overflow: hidden; +} + +html { + background-color: var(--default-background-color); +} + +body, input { font-family: 'NB International Pro'; } @@ -20,9 +24,21 @@ body .hash-link { padding-right: 5px ; } -.main-wrapper > div > div { - width: 400px !important; - margin-top: 2.25px !important; +main > .container.padding-vert--lg { + padding-top: 0 !important; +} + +main article { + margin-top: 20px; +} + +main article h1, +main article h2, +main article h3, +main article h4, +main article h5, +main article h6 { + color: var(--doc-title); } .prism-code > * { diff --git a/src/theme/DocPage/styles.module.css b/src/theme/DocPage/styles.module.css index f22b9d7e..103eda11 100644 --- a/src/theme/DocPage/styles.module.css +++ b/src/theme/DocPage/styles.module.css @@ -1,27 +1,27 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ +@value large-tablet-breakpoint-query from '~CSS/variables.module.css'; .docPage { - color: var(--doc-black); + color: var(--doc-primary); display: flex; } .docSidebarContainer { - border-right: 1px solid var(--ifm-contents-border-color); box-sizing: border-box; width: 300px; position: relative; - margin-top: calc(-1 * var(--ifm-navbar-height)); } .docMainContainer { + flex: 1; flex-grow: 1; } +@media large-tablet-breakpoint-query { + .docSidebarContainer { + border-right: 1px solid var(--default-border-color); + } +} + @media (max-width: 996px) { .docPage { display: inherit; diff --git a/src/theme/Layout/styles.css b/src/theme/Layout/styles.css index 0723a0ac..8d5fdf62 100644 --- a/src/theme/Layout/styles.css +++ b/src/theme/Layout/styles.css @@ -18,7 +18,8 @@ body { .width-wrapper { margin-left: auto; margin-right: auto; - max-width: 1400px; + max-width: 1440px; + width: 100%; } .main-wrapper { @@ -26,10 +27,11 @@ body { } .nav-spacer { - height: 140px; + height: var(--total-nav-height); } .nav-pusher { + margin-top: 1px; overflow-y: scroll; - height: calc(100vh - 180px); + height: calc(100vh - var(--total-nav-height) ); } diff --git a/src/theme/Navbar/index.js b/src/theme/Navbar/index.js index 704dae95..43508275 100644 --- a/src/theme/Navbar/index.js +++ b/src/theme/Navbar/index.js @@ -2,7 +2,7 @@ import React from 'react'; import Nav from 'libra-docusaurus-nav'; const Navbar = () => { - return