diff --git a/packages/logos-docusaurus-theme/src/client/css/lsd.scss b/packages/logos-docusaurus-theme/src/client/css/_lsd.scss similarity index 100% rename from packages/logos-docusaurus-theme/src/client/css/lsd.scss rename to packages/logos-docusaurus-theme/src/client/css/_lsd.scss diff --git a/packages/logos-docusaurus-theme/src/client/css/_vars.scss b/packages/logos-docusaurus-theme/src/client/css/_vars.scss index e65421d..0624a35 100644 --- a/packages/logos-docusaurus-theme/src/client/css/_vars.scss +++ b/packages/logos-docusaurus-theme/src/client/css/_vars.scss @@ -17,6 +17,7 @@ $breakpoints: ( ), 'xl': ( 1200, + null, ), ); diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index f332195..972c918 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -14,6 +14,8 @@ [data-theme='dark'] { background-color: transparent !important; + --content-padding: 32px; + --ifm-color-scheme: dark; --ifm-navbar-link-color: rgb(var(--lsd-text-primary)); --ifm-navbar-background-color: rgb(var(--lsd-surface-primary)); @@ -165,7 +167,7 @@ --ifm-card-vertical-spacing: var(--ifm-spacing-vertical); --ifm-footer-link-horizontal-spacing: 0; - --ifm-footer-padding-horizontal: 0; + --ifm-footer-padding-horizontal: var(--content-padding); --ifm-footer-padding-vertical: 24px; --ifm-footer-background-color: transparent; @@ -179,7 +181,7 @@ --ifm-navbar-height: 80px; --ifm-navbar-item-padding-horizontal: 0.75rem; --ifm-navbar-item-padding-vertical: 0.25rem; - --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal); + --ifm-navbar-padding-horizontal: var(--content-padding); --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5); --ifm-navbar-shadow: var(--ifm-global-shadow-lw); --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,'); @@ -426,87 +428,6 @@ small { font-size: var(--ifm-h6-font-size); } -.footer { - border-top: 1px solid rgb(var(--lsd-text-primary)); - margin-bottom: 40px; - - > div { - max-width: unset; - padding: unset; - margin: unset; - width: 100% !important; - - display: grid; - grid-template-columns: repeat(24, 1fr); - gap: 1rem; - } -} - -.footer__title { - @include lsd.typography('label1'); - margin-bottom: 4px; -} - -.footer__links { - margin-bottom: 0; - grid-column: 8 / 25; - grid-row: 1 / 1; - - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 2rem 1rem; -} - -.footer__col { - grid-template-columns: span 1; -} - -.footer__items { - display: flex; - flex-direction: row; - gap: 0.5rem; -} - -.footer__item { - display: inline-block; - - &, - a { - @include lsd.typography('label1'); - } - - a { - text-decoration: underline; - } - - &:not(:last-child) { - &::after { - content: '•'; - margin-left: 8px; - text-decoration: none; - display: inline-block; - } - } -} - -.footer__bottom { - text-align: unset; - grid-column: 1 / 4; - grid-row: 1 / 1; - - & > div:first-of-type { - display: none; - } -} - -.footer__copyright { - @include lsd.typography('body2'); -} - -.footer__logo { - margin: 0 !important; -} - .card { padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal); } @@ -703,3 +624,182 @@ div.w-10 > a:not(:last-child) { --ifm-h4-font-size: 1.25rem !important; } } + +.main-wrapper { + padding: 0 var(--content-padding); + + & > div { + display: grid; + grid-template-columns: repeat(18, 1fr); + gap: 1rem; + + aside { + width: auto; + grid-column: 1 / 4; + border: none; + } + + main { + grid-column: 5 / 19; + max-width: none; + } + } +} + +.main-wrapper { + // website pages + & > main { + padding: 0; + + &, + > .row, + & > .row > .col { + width: 100% !important; + flex-basis: 100% !important; + max-width: unset; + padding: 0; + margin: 0; + flex: unset; + } + } +} + +.footer { + border-top: 1px solid rgb(var(--lsd-text-primary)); + margin-bottom: 40px; + + > div { + max-width: unset; + padding: unset; + margin: unset; + width: 100% !important; + + display: grid; + grid-template-columns: repeat(18, 1fr); + gap: 1rem; + } +} + +.footer__title { + @include lsd.typography('label1'); + margin-bottom: 4px; +} + +.footer__links { + margin-bottom: 0; + grid-column: 5 / 19; + grid-row: 1 / 1; + + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem 1rem; +} + +.footer__col { + grid-template-columns: span 1; +} + +.footer__items { + display: flex; + flex-direction: row; + gap: 0.5rem; +} + +.footer__item { + display: inline-block; + + &, + a { + @include lsd.typography('label1'); + } + + a { + text-decoration: underline; + } + + &:not(:last-child) { + &::after { + content: '•'; + margin-left: 8px; + text-decoration: none; + display: inline-block; + } + } +} + +.footer__bottom { + text-align: unset; + grid-column: 1 / 4; + grid-row: 1 / 1; + + & > div:first-of-type { + display: none; + } +} + +.footer__copyright { + @include lsd.typography('body2'); +} + +.footer__logo { + margin: 0 !important; +} + +.navbar__inner { + padding: 0 var(--content-padding); +} + +@include utils.responsive('lg', 'up') { + .navbar__inner { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + + .navbar__left { + flex-grow: 0; + flex-basis: calc(1 / 12 * 100%); + } + + .navbar__left-items { + flex: 1 0; + } + + .navbar__right-items { + } +} + +@include utils.responsive('xl', 'up') { + .navbar__inner { + display: grid; + gap: 16px; + grid-template-columns: repeat(18, 1fr); + padding: 0 var(--content-padding); + } + + .navbar__left { + grid-column: 1 / 5; + display: flex; + flex-direction: row; + align-items: center; + } + + .navbar__left-items { + grid-column: 5 / 14; + } + + .navbar__right-items { + grid-column: 14 / 19; + display: flex; + flex-direction: row; + justify-content: flex-end; + } +} + +@include utils.responsive('lg', 'down') { + .main-wrapper > div { + display: block; + > main { + } + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx index bd9e9cf..e0bf6de 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx @@ -10,7 +10,8 @@ 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 styles from './styles.module.css' +import styles from './styles.module.scss' +import { useMedia } from 'react-use' /** * Decide if the toc should be rendered, on mobile or desktop viewports @@ -18,11 +19,16 @@ import styles from './styles.module.css' export function useDocTOC() { const { frontMatter, toc } = useDoc() const windowSize = useWindowSize() + const isDesktop = useMedia('(min-width: 1200px)') const hidden = frontMatter.hide_table_of_contents const canRender = !hidden && toc.length > 0 - const mobile = canRender ? : undefined + const mobile = canRender ? ( +
+ +
+ ) : undefined const desktop = - canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? ( + canRender && (isDesktop || windowSize === 'ssr') ? ( ) : undefined diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss similarity index 59% rename from packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css rename to packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss index ae50191..d4939de 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss @@ -1,3 +1,5 @@ +@use '../../../css/utils'; + .docItemContainer header + *, .docItemContainer article > *:first-child { margin-top: 0; @@ -21,7 +23,29 @@ grid-column: span 1; } -@media (max-width: 997px) { +.tocMobile { + display: none; + + & > div { + display: block !important; + } +} + +@include utils.responsive('xl', 'up') { + .tocMobile { + display: none; + } +} + +@include utils.responsive('xl', 'down') { + .tocMobile { + display: block; + } + + .toc { + display: none; + } + .docItemGrid { display: grid; grid-template-columns: repeat(2, 1fr); diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx deleted file mode 100644 index 9513b5d..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import { useDocsSidebar } from '@docusaurus/theme-common/internal' -import styles from './styles.module.css' - -export default function DocPageLayoutMain({ - hiddenSidebarContainer, - children, -}) { - const sidebar = useDocsSidebar() - return ( -
-
- {children} -
-
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css deleted file mode 100644 index 4c0ba40..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.docMainContainer { - display: flex; - width: 100%; - grid-column: span 14; -} - -.docItemWrapper { - width: 100%; - padding-top: 16px !important; - padding-bottom: 80px !important; -} - -@media (max-width: 997px) { - .docMainContainer { - width: 100%; - grid-column: span 2; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx deleted file mode 100644 index 380cc25..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useState, useCallback } from 'react' -import clsx from 'clsx' -import { prefersReducedMotion, ThemeClassNames } from '@docusaurus/theme-common' -import { useDocsSidebar } from '@docusaurus/theme-common/internal' -import { useLocation } from '@docusaurus/router' -import DocSidebar from '@theme/DocSidebar' -import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton' -import styles from './styles.module.css' -// Reset sidebar state when sidebar changes -// Use React key to unmount/remount the children -// See https://github.com/facebook/docusaurus/issues/3414 -function ResetOnSidebarChange({ children }) { - const sidebar = useDocsSidebar() - return ( - - {children} - - ) -} -export default function DocPageLayoutSidebar({ - sidebar, - hiddenSidebarContainer, - setHiddenSidebarContainer, -}) { - const { pathname } = useLocation() - const [hiddenSidebar, setHiddenSidebar] = useState(false) - const toggleSidebar = useCallback(() => { - if (hiddenSidebar) { - setHiddenSidebar(false) - } - // onTransitionEnd won't fire when sidebar animation is disabled - // fixes https://github.com/facebook/docusaurus/issues/8918 - if (!hiddenSidebar && prefersReducedMotion()) { - setHiddenSidebar(true) - } - setHiddenSidebarContainer((value) => !value) - }, [setHiddenSidebarContainer, hiddenSidebar]) - - return ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css deleted file mode 100644 index 557c9b5..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css +++ /dev/null @@ -1,36 +0,0 @@ -:root { - --doc-sidebar-width: 300px; - --doc-sidebar-hidden-width: 30px; -} - -.docSidebarContainer { - display: none; -} - -.sidebarGrid { - grid-column: span 3; -} - -@media (min-width: 997px) { - .docSidebarContainer { - display: block; - width: 100%; - margin-top: calc(-1 * var(--ifm-navbar-height)); - will-change: width; - transition: width var(--ifm-transition-fast) ease; - clip-path: inset(0); - margin-left: auto; - } - - .docSidebarContainerHidden { - width: var(--doc-sidebar-hidden-width); - cursor: pointer; - } - - .sidebarViewport { - top: 0; - position: sticky; - height: 100%; - max-height: 100vh; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx deleted file mode 100644 index 1f67fb5..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useState } from 'react' -import { useDocsSidebar } from '@docusaurus/theme-common/internal' -import Layout from '@theme/Layout' -import BackToTopButton from '@theme/BackToTopButton' -import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar' -import DocPageLayoutMain from '@theme/DocPage/Layout/Main' -import styles from './styles.module.css' -import clsx from 'clsx' - -export default function DocPageLayout({ children }) { - const sidebar = useDocsSidebar() - const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false) - return ( - - -
-
- {sidebar && ( - - )} -
- - {children} - -
-
- - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.css deleted file mode 100644 index 0c747fe..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.docPage { - display: flex; - justify-content: center; -} - -.docsWrapper { - display: flex; - flex: 1 0 auto; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx index c70eb01..e6975a6 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx @@ -1,17 +1,17 @@ -import React from 'react' -import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common' +import { ErrorCauseBoundary, useThemeConfig } from '@docusaurus/theme-common' import { splitNavbarItems, useNavbarMobileSidebar, } from '@docusaurus/theme-common/internal' -import NavbarItem from '@theme/NavbarItem' import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle' -import SearchBar from '@theme/SearchBar' -import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle' import NavbarLogo from '@theme/Navbar/Logo' +import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle' import NavbarSearch from '@theme/Navbar/Search' -import styles from './styles.module.css' +import NavbarItem from '@theme/NavbarItem' +import SearchBar from '@theme/SearchBar' import clsx from 'clsx' +import React from 'react' +import styles from './styles.module.css' function useNavbarItems() { // TODO temporary casting until ThemeConfig type is improved @@ -48,19 +48,19 @@ export default function NavbarContent() { const searchBarItem = items.find((item) => item.type === 'search') return ( -
- {!mobileSidebar.disabled && } -
+
+
+ {!mobileSidebar.disabled && }
-
-
+
-
-
+
- + {!searchBarItem && ( diff --git a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/index.tsx index 69799e3..d948395 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/index.tsx @@ -6,7 +6,10 @@ const SearchBarWrapper: React.FC = () => { const activePlugin = useActivePlugin() if (!activePlugin) return <> - return typeof window === 'undefined' ? <> : + // temporarily disable search bar + return <> + + // return typeof window === 'undefined' ? <> : } export default SearchBarWrapper diff --git a/packages/logos-docusaurus-theme/src/client/theme/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/style.module.css index aa01acb..9481169 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/style.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/style.module.css @@ -1,5 +1,8 @@ .root { - padding-inline: 32px; + width: 100%; + max-width: 1440px; + margin: 0 auto; + padding: 0; } @media (max-width: 997px) { diff --git a/packages/logos-docusaurus-theme/tsconfig.client.json b/packages/logos-docusaurus-theme/tsconfig.client.json index 2c7feb4..db3d322 100644 --- a/packages/logos-docusaurus-theme/tsconfig.client.json +++ b/packages/logos-docusaurus-theme/tsconfig.client.json @@ -26,7 +26,9 @@ "src/client", "src/*.d.ts", "src/theme.ts", - "src/client/theme/NavbarItem" + "src/client/theme/NavbarItem", + "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx", + "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx" ], "exclude": ["src/index.ts", "**/__tests__/**"] } diff --git a/packages/logos-docusaurus-theme/tsconfig.json b/packages/logos-docusaurus-theme/tsconfig.json index 3b35a4f..2cb315d 100644 --- a/packages/logos-docusaurus-theme/tsconfig.json +++ b/packages/logos-docusaurus-theme/tsconfig.json @@ -10,6 +10,11 @@ "jsx": "react", "target": "es5" }, - "include": ["src", "src/client/theme/NavbarItem"], + "include": [ + "src", + "src/client/theme/NavbarItem", + "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx", + "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx" + ], "exclude": ["src/client", "**/__tests__/**"] }