diff --git a/website/sidebars.js b/website/sidebars.js index 1cb4e77b2..4ba4302c5 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -70,7 +70,7 @@ export default { { type: "category", label: "Serialization (Molecule)", - className: "category-serialization", + className: "category-molecule", collapsible: false, items: [ "serialization/serialization-molecule-in-ckb", diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css index c1d9f5223..a630b3b05 100644 --- a/website/src/css/customTheme.css +++ b/website/src/css/customTheme.css @@ -30,10 +30,12 @@ /* Navbar */ --ifm-navbar-background-color: var(--dark-surface-03); + --ifm-navbar-link-color: var(--dark-text-secondary); + --ifm-navbar-link-hover-color: var(--dark-text-link); --ifm-navbar-height: 64px; /* Sidebar */ - --doc-sidebar-width: 322px !important; + --doc-sidebar-width: 260px !important; --ifm-sidebar-border-color: var(--border-subtle); /* DocSearch for algolia*/ @@ -74,7 +76,7 @@ padding: 0 1.5rem; } -/*Search bar*/ +/*Search bar - deprecated*/ .navbar-search .DocSearch-Button { background-color: transparent; border: 1px solid var(--dark-border-subtle); @@ -114,9 +116,9 @@ background-color: transparent; border: 1px solid var(--dark-border-subtle); border-radius: 40px; - width: 280px; - height: 3rem; - padding: 0 1rem; + width: 260px; + height: 2.5rem; + padding: 0 1rem 0 0.5rem; margin-right: 0.5rem; } .navbar-search .aa-DetachedSearchButton:hover { @@ -159,12 +161,15 @@ .aa-Input { color: var(--text-primary) !important; } +.aa-DetachedSearchButtonPlaceholder { + font-size: 0.875rem; +} .aa-Input::-webkit-input-placeholder { color: var(--text-tertiary) !important; } .navbar-help { - height: 3rem; + height: 2.5rem; border: 1px solid var(--dark-border-subtle); border-radius: 40px; cursor: pointer; @@ -183,7 +188,9 @@ color: var(--dark-text-primary); text-decoration: none !important; } + .help-text { + font-size: 0.875rem; margin: 0 0 0 0.5rem; } @@ -200,28 +207,25 @@ padding-right: 0; } .menu__link { - height: 2.5rem; + height: 2.25rem; + font-size: 0.875rem; border-radius: 20px !important; } .menu__list-item-collapsible { - height: 3rem; + height: 2.25rem; cursor: default; background-color: transparent !important; } .menu__list-item-collapsible > .menu__link { - font-weight: bold; color: var(--text-tertiary); } -.menu__link--active { - font-weight: 700; -} .menu__list .menu__list { margin-top: 0; padding-left: 0; } .menu__list .menu__list > .menu__list-item > .menu__link { - padding-left: calc(var(--ifm-menu-link-padding-horizontal) + 1rem); + padding-left: calc(var(--ifm-menu-link-padding-horizontal) + 0.625rem); padding-right: 1rem; } @@ -229,62 +233,68 @@ .category-getting-started > div > a:before { content: url("/svg/icon-sidebar-rocket.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-dapp > div > a:before { content: url("/svg/icon-sidebar-tutorial.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-script > div > a:before { content: url("/svg/icon-sidebar-script.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-tool > div > a:before { content: url("/svg/icon-sidebar-tool.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-integrate-wallets > div > a:before { content: url("/svg/icon-sidebar-wallet.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-node > div > a:before { content: url("/svg/icon-sidebar-node.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; +} +.category-molecule > div > a:before { + content: url("/svg/icon-sidebar-molecule.svg"); + margin-right: 0.5rem; + width: 1.125rem; + height: 1.125rem; } .category-mining > div > a:before { content: url("/svg/icon-sidebar-mining.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-tech-explanation > div > a:before { content: url("/svg/icon-sidebar-concept.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-ecosystem > div > a:before { content: url("/svg/icon-sidebar-ecosystem.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } .category-resources > div > a:before { content: url("/svg/icon-sidebar-resource.svg"); margin-right: 0.5rem; - width: 1.5rem; - height: 1.5rem; + width: 1.125rem; + height: 1.125rem; } /* Footer */ @@ -298,10 +308,13 @@ /* Table of Contents */ .table-of-contents { - padding: 0; - padding-left: 1rem; - margin-top: 3rem; + padding: 0rem 1rem 3rem 1rem; +} + +.table-of-contents__left-border { + border-left: none; } + .table-of-contents__link { font-size: 0.875rem; } @@ -371,30 +384,35 @@ ol { padding-left: 1rem; } +.markdown > img { + width: 100%; + height: auto; +} + .markdown > h1, h1 { - font-size: 2.5rem; - margin: 3rem 0 2rem; + font-size: 2.25rem; + margin: 4rem 0 2rem; } .markdown > h2, h2 { - font-size: 1.75rem; + font-size: 1.5rem; margin: 3.5rem 0 1.5rem; } .markdown > h3, h3 { - font-size: 1.5rem; + font-size: 1.25rem; margin: 2rem 0 1.5rem; } .markdown > h4, h4 { - font-size: 1.25rem; + font-size: 1.125rem; margin-bottom: 1rem; } .markdown li::marker { - color: var(--text-link); + color: var(--text-tertiary); } code { @@ -506,6 +524,11 @@ details { } /* Responsive */ +@media (min-width: 1441px) { + :root { + --doc-sidebar-width: 300px !important; + } +} @media only screen and (min-width: 1024px) { .navigationSlider { margin-left: 0; diff --git a/website/src/theme/ColorModeToggle/styles.module.css b/website/src/theme/ColorModeToggle/styles.module.css index 39ee7fa08..783088125 100644 --- a/website/src/theme/ColorModeToggle/styles.module.css +++ b/website/src/theme/ColorModeToggle/styles.module.css @@ -1,8 +1,8 @@ @import "@css/customVariables.css"; .toggle { - width: 3rem; - height: 3rem; + width: 2.5rem; + height: 2.5rem; border-radius: 50%; border: 1px solid var(--dark-border-subtle); } diff --git a/website/src/theme/DocItem/Layout/index.tsx b/website/src/theme/DocItem/Layout/index.tsx new file mode 100644 index 000000000..b0ace7afd --- /dev/null +++ b/website/src/theme/DocItem/Layout/index.tsx @@ -0,0 +1,89 @@ +/** + * Original source: + * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx + * + * Reason for overriding: + * - Move the Sidebar component to this layout + */ + +import React, { useState } from "react"; +import clsx from "clsx"; +import { useWindowSize } from "@docusaurus/theme-common"; +import { useDoc, useDocsSidebar } from "@docusaurus/theme-common/internal"; +import DocRootLayoutSidebar from "@theme/DocRoot/Layout/Sidebar"; +import DocItemPaginator from "@theme/DocItem/Paginator"; +import DocVersionBanner from "@theme/DocVersionBanner"; +import DocVersionBadge from "@theme/DocVersionBadge"; +import DocItemFooter from "@theme/DocItem/Footer"; +import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile"; +import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop"; +import DocItemContent from "@theme/DocItem/Content"; +import DocBreadcrumbs from "@theme/DocBreadcrumbs"; +import Unlisted from "@theme/Unlisted"; +import type { Props } from "@theme/DocItem/Layout"; + +import styles from "./styles.module.css"; + +/** + * Decide if the toc should be rendered, on mobile or desktop viewports + */ +function useDocTOC() { + const { frontMatter, toc } = useDoc(); + const windowSize = useWindowSize(); + + const hidden = frontMatter.hide_table_of_contents; + const canRender = !hidden && toc.length > 0; + + const mobile = canRender ? : undefined; + + const desktop = + canRender && windowSize === "desktop" ? : undefined; + + return { + hidden, + mobile, + desktop, + }; +} + +export default function DocItemLayout({ children }: Props): JSX.Element { + const docTOC = useDocTOC(); + const { + metadata: { unlisted }, + } = useDoc(); + const sidebar = useDocsSidebar(); + const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); + return ( +
+ {sidebar && ( + + )} +
+ {unlisted && } + +
+
+ + + {docTOC.mobile} + {children} + +
+ +
+
+
+ {docTOC.desktop} +
+
+ ); +} diff --git a/website/src/theme/DocItem/Layout/styles.module.css b/website/src/theme/DocItem/Layout/styles.module.css new file mode 100644 index 000000000..0185c1e31 --- /dev/null +++ b/website/src/theme/DocItem/Layout/styles.module.css @@ -0,0 +1,51 @@ +.customLayout { + width: 100%; + display: flex; + justify-content: space-between; +} + +.tocDesktop { + display: block; + min-width: var(--doc-sidebar-width); + width: var(--doc-sidebar-width); + max-width: var(--doc-sidebar-width); + border-left: 1px solid var(--border-subtle); +} + +.tocDesktopInvisible { + border-left: none; +} + +.docItemCol { + width: 100%; + max-width: 732px; + padding: 0rem 1rem 8rem; + overflow-x: hidden; +} + +@media (max-width: 996px) { + .customLayout { + flex-direction: column; + align-items: center; + } + + .tocDesktop { + display: none; + } + + .docItemCol { + padding-bottom: 4rem; + } +} + +@media (min-width: 1441px) { + .docItemCol { + max-width: 792px; + } +} + +@media (min-width: 1511px) { + .docItemCol { + max-width: 832px; + } +} diff --git a/website/src/theme/DocRoot/Layout/Main/index.tsx b/website/src/theme/DocRoot/Layout/Main/index.tsx new file mode 100644 index 000000000..05073535a --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Main/index.tsx @@ -0,0 +1,31 @@ +/** + * Original source: + * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Main/index.tsx + * + * Reason for overriding: + * - Modify the styling of docMainContainer due to the replacement of Sidebar + */ + +import React from "react"; +import clsx from "clsx"; +import { useDocsSidebar } from "@docusaurus/theme-common/internal"; +import type { Props } from "@theme/DocRoot/Layout/Main"; + +import styles from "./styles.module.css"; + +export default function DocRootLayoutMain({ + hiddenSidebarContainer, + children, +}: Props): JSX.Element { + const sidebar = useDocsSidebar(); + return ( +
+ {children} +
+ ); +} diff --git a/website/src/theme/DocRoot/Layout/Main/styles.module.css b/website/src/theme/DocRoot/Layout/Main/styles.module.css new file mode 100644 index 000000000..1d5bacd25 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Main/styles.module.css @@ -0,0 +1,5 @@ +.docMainContainer { + display: flex; + flex-direction: column; + width: 100%; +} diff --git a/website/src/theme/DocRoot/Layout/index.tsx b/website/src/theme/DocRoot/Layout/index.tsx new file mode 100644 index 000000000..f79951181 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/index.tsx @@ -0,0 +1,28 @@ +/** + * Original source: + * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/index.tsx + * + * Reason for overriding: + * - Take the Sidebar component out + */ + +import React, { useState } from "react"; +import BackToTopButton from "@theme/BackToTopButton"; +import DocRootLayoutMain from "@theme/DocRoot/Layout/Main"; +import type { Props } from "@theme/DocRoot/Layout"; + +import styles from "./styles.module.css"; + +export default function DocRootLayout({ children }: Props): JSX.Element { + const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); + return ( +
+ +
+ + {children} + +
+
+ ); +} diff --git a/website/src/theme/DocRoot/Layout/styles.module.css b/website/src/theme/DocRoot/Layout/styles.module.css new file mode 100644 index 000000000..a77c97589 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/styles.module.css @@ -0,0 +1,9 @@ +.docRoot { + display: flex; + width: 100%; +} + +.docsWrapper { + display: flex; + flex: 1 0 auto; +} diff --git a/website/static/svg/icon-sidebar-concept.svg b/website/static/svg/icon-sidebar-concept.svg index c808c8177..6fb2fbf75 100644 --- a/website/static/svg/icon-sidebar-concept.svg +++ b/website/static/svg/icon-sidebar-concept.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/static/svg/icon-sidebar-ecosystem.svg b/website/static/svg/icon-sidebar-ecosystem.svg index bb339af90..cd259a738 100644 --- a/website/static/svg/icon-sidebar-ecosystem.svg +++ b/website/static/svg/icon-sidebar-ecosystem.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/static/svg/icon-sidebar-howto.svg b/website/static/svg/icon-sidebar-howto.svg new file mode 100644 index 000000000..5cf5ff8dd --- /dev/null +++ b/website/static/svg/icon-sidebar-howto.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/website/static/svg/icon-sidebar-mining.svg b/website/static/svg/icon-sidebar-mining.svg index 39b2f6b2e..9d23ca8bd 100644 --- a/website/static/svg/icon-sidebar-mining.svg +++ b/website/static/svg/icon-sidebar-mining.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/static/svg/icon-sidebar-molecule.svg b/website/static/svg/icon-sidebar-molecule.svg new file mode 100644 index 000000000..8d35d0c2f --- /dev/null +++ b/website/static/svg/icon-sidebar-molecule.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/svg/icon-sidebar-node.svg b/website/static/svg/icon-sidebar-node.svg index 434416a43..672f51458 100644 --- a/website/static/svg/icon-sidebar-node.svg +++ b/website/static/svg/icon-sidebar-node.svg @@ -1,8 +1,7 @@ - - - - - - - + + + + + + diff --git a/website/static/svg/icon-sidebar-resource.svg b/website/static/svg/icon-sidebar-resource.svg index bc10b2430..90fe75e09 100644 --- a/website/static/svg/icon-sidebar-resource.svg +++ b/website/static/svg/icon-sidebar-resource.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/website/static/svg/icon-sidebar-rocket.svg b/website/static/svg/icon-sidebar-rocket.svg index 322fbaa52..8a178848b 100644 --- a/website/static/svg/icon-sidebar-rocket.svg +++ b/website/static/svg/icon-sidebar-rocket.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/static/svg/icon-sidebar-rpc.svg b/website/static/svg/icon-sidebar-rpc.svg new file mode 100644 index 000000000..2def9ae05 --- /dev/null +++ b/website/static/svg/icon-sidebar-rpc.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/svg/icon-sidebar-script.svg b/website/static/svg/icon-sidebar-script.svg index abdfb96ff..6b080a340 100644 --- a/website/static/svg/icon-sidebar-script.svg +++ b/website/static/svg/icon-sidebar-script.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/static/svg/icon-sidebar-tool.svg b/website/static/svg/icon-sidebar-tool.svg index b3c856b77..653a50852 100644 --- a/website/static/svg/icon-sidebar-tool.svg +++ b/website/static/svg/icon-sidebar-tool.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/static/svg/icon-sidebar-tutorial.svg b/website/static/svg/icon-sidebar-tutorial.svg index 22d663322..8d38522cc 100644 --- a/website/static/svg/icon-sidebar-tutorial.svg +++ b/website/static/svg/icon-sidebar-tutorial.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/website/static/svg/icon-sidebar-wallet.svg b/website/static/svg/icon-sidebar-wallet.svg index a20e08736..cdf40d361 100644 --- a/website/static/svg/icon-sidebar-wallet.svg +++ b/website/static/svg/icon-sidebar-wallet.svg @@ -1,3 +1,3 @@ - - + +