diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js index 9632207ee5..42a22890f0 100644 --- a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js +++ b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js @@ -36,7 +36,7 @@ function DocItem(props) { {metadata && metadata.title && {metadata.title}} -
+
diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css index 8471d19777..5c5fc0b027 100644 --- a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css +++ b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css @@ -9,6 +9,16 @@ min-height: calc(100vh - 50px); } +.container { + padding-top: 2rem !important; +} + +@media (min-width: 996px) { + .container { + padding-left: 2rem; + } +} + @media only screen and (min-width: 996px) { .tableOfContents { max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js b/packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js index a026bb28df..73bf438a06 100644 --- a/packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js +++ b/packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js @@ -12,6 +12,8 @@ import Layout from '@theme/Layout'; // eslint-disable-line import DocSidebar from '@theme/DocSidebar'; +import './styles.css'; + function DocPage(props) { const {route, docsMetadata, location} = props; const {permalinkToId} = docsMetadata; @@ -24,11 +26,11 @@ function DocPage(props) { return (
-
-
+
+
-
+
{renderRoutes(route.routes, {docsMetadata})}
diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocPage/styles.css b/packages/docusaurus-plugin-content-docs/src/theme/DocPage/styles.css new file mode 100644 index 0000000000..f44d83b29e --- /dev/null +++ b/packages/docusaurus-plugin-content-docs/src/theme/DocPage/styles.css @@ -0,0 +1,23 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + /** + * width 19rem is calculated according to (sidebarWidth - sidebarPadding) + * i.e 20rem - ( 0.5rem + 0.5rem ) + * Todo - 0.5rem and 20rem should be a css variable + */ + + @media (min-width: 996px) { + .sidebar__container { + width: 19rem; + float: left; + min-height: calc(100vh - var(--ifm-navbar-height)); + } + .content__container { + margin: 0 0 0 19rem; + } +}