From 0df624df4054eb032e833a25020f5be14477424e Mon Sep 17 00:00:00 2001 From: Xanazf Date: Sat, 12 Oct 2024 18:38:00 +0300 Subject: [PATCH] fixed mobile menus, page spacing, horizontal scroll, .toc-wrapper --- .../navigation/sidebars/nav/Tree.tsx | 12 ++-- src/layouts/ConfigLayout.astro | 2 +- src/pages/docs/types/[type]/[name].astro | 2 +- src/styles/docs/docs-types.css | 2 - src/styles/docs/docs.css | 55 +++++++++---------- src/styles/docs/nav/nav-tree.css | 9 ++- src/styles/docs/nav/nav.css | 40 ++++++++++---- src/styles/docs/toc/toc.css | 18 +++--- src/styles/global.css | 4 +- 9 files changed, 76 insertions(+), 68 deletions(-) diff --git a/src/components/navigation/sidebars/nav/Tree.tsx b/src/components/navigation/sidebars/nav/Tree.tsx index 5dbc1ae..10cf243 100644 --- a/src/components/navigation/sidebars/nav/Tree.tsx +++ b/src/components/navigation/sidebars/nav/Tree.tsx @@ -102,11 +102,13 @@ export const Tree: Component = props => { : "" } > - - {submodule.name} - +

+ + {submodule.name} + +

)} diff --git a/src/layouts/ConfigLayout.astro b/src/layouts/ConfigLayout.astro index 3e65d78..143558f 100644 --- a/src/layouts/ConfigLayout.astro +++ b/src/layouts/ConfigLayout.astro @@ -32,8 +32,8 @@ const { headings, frontmatter } = Astro.props;
+ - diff --git a/src/pages/docs/types/[type]/[name].astro b/src/pages/docs/types/[type]/[name].astro index b827aae..9cb83ae 100644 --- a/src/pages/docs/types/[type]/[name].astro +++ b/src/pages/docs/types/[type]/[name].astro @@ -53,7 +53,7 @@ const details = data.details ---
-
+

{route.name}: diff --git a/src/styles/docs/docs-types.css b/src/styles/docs/docs-types.css index dab5275..418d38b 100644 --- a/src/styles/docs/docs-types.css +++ b/src/styles/docs/docs-types.css @@ -74,8 +74,6 @@ } .typedocs-content { - flex-grow: 1; - &>p { margin-block: 0.618rem; } diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css index f2838a6..c5ad546 100644 --- a/src/styles/docs/docs.css +++ b/src/styles/docs/docs.css @@ -3,29 +3,23 @@ .docslayout-root { margin-inline: 0.618rem; - margin-top: 3.5rem; + margin-top: 4rem; } -.docs, -.docslayout-root { +.docs { display: flex; - flex-direction: column; + flex-direction: row; } -.spacer-desktop { - display: none; -} - -.c-breadcrumbs { - --color-link-breadcrumbs: hsl(var(--accent-600)); - margin-top: 1.056rem; - margin-bottom: 0.318rem; - max-width: 100svw; +.docslayout-inner { + min-height: 100svh; } .docs-content { + flex-grow: 1; + & section { - max-width: 95svw; + max-width: 100svw; margin-block: 1.618rem; } @@ -39,6 +33,17 @@ } } +.spacer-desktop { + display: none; +} + +.c-breadcrumbs { + --color-link-breadcrumbs: hsl(var(--accent-600)); + margin-top: 1.056rem; + margin-bottom: 0.318rem; + max-width: 100svw; +} + .heading { &>[id] { width: max-content; @@ -81,17 +86,6 @@ ul { } @media (min-width: 65rem) { - .docs, - .docslayout-root { - gap: 0.648rem; - } - - .docslayout-root { - justify-content: center; - display: flex; - flex-direction: row; - } - .docs-content { margin-inline: 1.272rem; @@ -110,6 +104,12 @@ ul { } @media (min-width: 85rem) { + .docslayout-root { + display: flex; + justify-content: center; + flex-direction: row; + } + .docs { display: flex; flex-direction: row; @@ -125,8 +125,3 @@ ul { min-width: 33.8rem; } } - -.docslayout-inner { - flex-grow: 1; - max-width: 100rem; -} diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css index 656c370..dfd6424 100644 --- a/src/styles/docs/nav/nav-tree.css +++ b/src/styles/docs/nav/nav-tree.css @@ -6,7 +6,6 @@ & [data-part="item"] { padding-top: 0.2rem; padding-bottom: 0.2rem; - padding-left: 0.15rem; } } @@ -18,7 +17,7 @@ cursor: pointer; font-size: 1rem; width: 100%; - height: 2.2rem; + min-height: 2.2rem; display: flex; justify-content: flex-start; align-items: center; @@ -80,7 +79,7 @@ html.dark .nav-shevron { transition: background-color 0.2s ease; &:hover { - background-color: hsl(var(--nav-hovered-bkg)) + background-color: hsl(var(--nav-hovered-bkg)); } &>a { @@ -93,8 +92,8 @@ html.dark .nav-shevron { } } - & .arktree-item.__current-type-doc, - [data-part="item-content"]>div.__current-type-doc { + & .arktree-item.__current-type-doc, + [data-part="item-content"]>div.__current-type-doc { background-color: hsl(var(--nav-selected-bkg)); &>a { diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css index a816797..836dc02 100644 --- a/src/styles/docs/nav/nav.css +++ b/src/styles/docs/nav/nav.css @@ -31,11 +31,11 @@ & .nav-items { position: absolute; z-index: 11; - overflow-y: scroll; - top: 2.5rem; + overflow: hidden; + top: 2.6rem; left: -1rem; width: 0; - height: 0; + height: calc(100svh - 2.5rem); font-size: 0.745rem; font-weight: 600; scrollbar-width: none; @@ -52,9 +52,7 @@ padding 0.3s ease; &.shown { - padding: 0.3rem; width: 100svw; - height: 50svh; background-color: hsl(var(--bg-900) / 0.6); backdrop-filter: blur(3px) saturate(180%); display: flex; @@ -63,10 +61,19 @@ } & .navtree { + padding: 1rem; height: 100%; width: 100%; - overflow: scroll; - padding: 6px; + overflow-x: hidden; + overflow-y: scroll; + margin-bottom: 4rem; + padding-left: 1rem; + text-wrap: nowrap; + + & [data-part="item-trigger"] { + min-height: 3em; + max-width: 80%; + } & [data-part="item"] { margin-left: unset; @@ -77,7 +84,6 @@ & [data-part="item-content"] { & [data-part="item-trigger"] { - width: 93%; margin-left: 1em; & p { @@ -86,8 +92,20 @@ } & [data-part="item-content"] { - width: 80%; - margin-left: 24px; + max-width: 70%; + margin-left: 3.33em; + + &>div { + min-height: 4em; + display: grid; + + & a { + display: grid; + justify-items: start; + align-items: center; + min-height: 100%; + } + } } } } @@ -95,7 +113,7 @@ } } -@media (min-width: 65rem) { +@media (min-width: 85rem) { .nav-wrapper-mobile { display: none; } diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css index c2e3b2e..86347ea 100644 --- a/src/styles/docs/toc/toc.css +++ b/src/styles/docs/toc/toc.css @@ -84,15 +84,11 @@ } } -@media (max-width: 85rem) { - @media (min-width: 65rem) { - .toc-toggle { - --width: 25svw; - } +@media (min-width: 65rem) { + .toc-toggle { + --width: 25svw; } -} -@media (min-width: 85rem) { .toc-wrapper-mobile { display: none; } @@ -101,12 +97,12 @@ background-color: transparent; display: block; position: sticky; - top: 5rem; - width: 19rem; - flex-shrink: 0; - max-height: 90svh; + top: 4rem; + min-width: max-content; + max-height: calc(100svh - 8rem); overflow-y: scroll; z-index: 10; + margin-right: 1.272rem; & .toc_a { transition: color 0.33s; diff --git a/src/styles/global.css b/src/styles/global.css index d254d33..16effa2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -62,7 +62,7 @@ html.dark { .header { position: fixed; top: 0; - width: 100%; + width: 100svw; z-index: 10; display: flex; align-items: center; @@ -184,7 +184,7 @@ footer { } } -@media (min-width: 65rem) { +@media (min-width: 85rem) { html { font-size: 16px; }