quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

fixed mobile menus, page spacing, horizontal scroll, .toc-wrapper

Browse source
This commit is contained in:
Xanazf 2024-10-12 18:38:00 +03:00
parent 2b1f9f3bb2
commit 0df624df40
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
9 changed files with 76 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/navigation/sidebars/nav/Tree.tsx
View file

@ -102,11 +102,13 @@ export const Tree: Component<TreeProps> = props => {
: "" : ""
} }
> >
<a <p>
href={`/docs/types/${submodule.type}/${submodule.name}`} <a
> href={`/docs/types/${submodule.type}/${submodule.name}`}
{submodule.name} >
</a> {submodule.name}
</a>
</p>
</div> </div>
)} )}
</For> </For>

2
src/layouts/ConfigLayout.astro
View file

@ -32,8 +32,8 @@ const { headings, frontmatter } = Astro.props;
<hr /> <hr />
<slot /> <slot />
</div> </div>
<TOC mobile={false} headings={headings} data-pagefind-ignore/>
</div> </div>
<TOC mobile={false} headings={headings} data-pagefind-ignore/>
</DocsLayout> </DocsLayout>
<TOCIntersectionObserver/> <TOCIntersectionObserver/>

2
src/pages/docs/types/[type]/[name].astro
View file

@ -53,7 +53,7 @@ const details = data.details
--- ---
<DocsLayout title={`${route.name} - ${route.type}`} description={data?.description ?? ""}> <DocsLayout title={`${route.name} - ${route.type}`} description={data?.description ?? ""}>
<div class="docs"> <div class="docs">
<div class="typedocs-content"> <div class="docs-content typedocs-content">
<hr /> <hr />
<h2 class="typedocs-title" data-pagefind-weight="10"> <h2 class="typedocs-title" data-pagefind-weight="10">
{route.name}: {route.name}:

2
src/styles/docs/docs-types.css
View file

@ -74,8 +74,6 @@
} }
.typedocs-content { .typedocs-content {
flex-grow: 1;
&>p { &>p {
margin-block: 0.618rem; margin-block: 0.618rem;
} }

55
src/styles/docs/docs.css
View file

@ -3,29 +3,23 @@
.docslayout-root { .docslayout-root {
margin-inline: 0.618rem; margin-inline: 0.618rem;
margin-top: 3.5rem; margin-top: 4rem;
} }
.docs, .docs {
.docslayout-root {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
} }
.spacer-desktop { .docslayout-inner {
display: none; min-height: 100svh;
}
.c-breadcrumbs {
--color-link-breadcrumbs: hsl(var(--accent-600));
margin-top: 1.056rem;
margin-bottom: 0.318rem;
max-width: 100svw;
} }
.docs-content { .docs-content {
flex-grow: 1;
& section { & section {
max-width: 95svw; max-width: 100svw;
margin-block: 1.618rem; 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 { .heading {
&>[id] { &>[id] {
width: max-content; width: max-content;
@ -81,17 +86,6 @@ ul {
} }
@media (min-width: 65rem) { @media (min-width: 65rem) {
.docs,
.docslayout-root {
gap: 0.648rem;
}
.docslayout-root {
justify-content: center;
display: flex;
flex-direction: row;
}
.docs-content { .docs-content {
margin-inline: 1.272rem; margin-inline: 1.272rem;
@ -110,6 +104,12 @@ ul {
} }
@media (min-width: 85rem) { @media (min-width: 85rem) {
.docslayout-root {
display: flex;
justify-content: center;
flex-direction: row;
}
.docs { .docs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -125,8 +125,3 @@ ul {
min-width: 33.8rem; min-width: 33.8rem;
} }
} }
.docslayout-inner {
flex-grow: 1;
max-width: 100rem;
}

9
src/styles/docs/nav/nav-tree.css
View file

@ -6,7 +6,6 @@
& [data-part="item"] { & [data-part="item"] {
padding-top: 0.2rem; padding-top: 0.2rem;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
padding-left: 0.15rem;
} }
} }
@ -18,7 +17,7 @@
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
width: 100%; width: 100%;
height: 2.2rem; min-height: 2.2rem;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -80,7 +79,7 @@ html.dark .nav-shevron {
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
&:hover { &:hover {
background-color: hsl(var(--nav-hovered-bkg)) background-color: hsl(var(--nav-hovered-bkg));
} }
&>a { &>a {
@ -93,8 +92,8 @@ html.dark .nav-shevron {
} }
} }
& .arktree-item.__current-type-doc, & .arktree-item.__current-type-doc,
[data-part="item-content"]>div.__current-type-doc { [data-part="item-content"]>div.__current-type-doc {
background-color: hsl(var(--nav-selected-bkg)); background-color: hsl(var(--nav-selected-bkg));
&>a { &>a {

40
src/styles/docs/nav/nav.css
View file

@ -31,11 +31,11 @@
& .nav-items { & .nav-items {
position: absolute; position: absolute;
z-index: 11; z-index: 11;
overflow-y: scroll; overflow: hidden;
top: 2.5rem; top: 2.6rem;
left: -1rem; left: -1rem;
width: 0; width: 0;
height: 0; height: calc(100svh - 2.5rem);
font-size: 0.745rem; font-size: 0.745rem;
font-weight: 600; font-weight: 600;
scrollbar-width: none; scrollbar-width: none;
@ -52,9 +52,7 @@
padding 0.3s ease; padding 0.3s ease;
&.shown { &.shown {
padding: 0.3rem;
width: 100svw; width: 100svw;
height: 50svh;
background-color: hsl(var(--bg-900) / 0.6); background-color: hsl(var(--bg-900) / 0.6);
backdrop-filter: blur(3px) saturate(180%); backdrop-filter: blur(3px) saturate(180%);
display: flex; display: flex;
@ -63,10 +61,19 @@
} }
& .navtree { & .navtree {
padding: 1rem;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: scroll; overflow-x: hidden;
padding: 6px; 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"] { & [data-part="item"] {
margin-left: unset; margin-left: unset;
@ -77,7 +84,6 @@
& [data-part="item-content"] { & [data-part="item-content"] {
& [data-part="item-trigger"] { & [data-part="item-trigger"] {
width: 93%;
margin-left: 1em; margin-left: 1em;
& p { & p {
@ -86,8 +92,20 @@
} }
& [data-part="item-content"] { & [data-part="item-content"] {
width: 80%; max-width: 70%;
margin-left: 24px; 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 { .nav-wrapper-mobile {
display: none; display: none;
} }

18
src/styles/docs/toc/toc.css
View file

@ -84,15 +84,11 @@
} }
} }
@media (max-width: 85rem) { @media (min-width: 65rem) {
@media (min-width: 65rem) { .toc-toggle {
.toc-toggle { --width: 25svw;
--width: 25svw;
}
} }
}
@media (min-width: 85rem) {
.toc-wrapper-mobile { .toc-wrapper-mobile {
display: none; display: none;
} }
@ -101,12 +97,12 @@
background-color: transparent; background-color: transparent;
display: block; display: block;
position: sticky; position: sticky;
top: 5rem; top: 4rem;
width: 19rem; min-width: max-content;
flex-shrink: 0; max-height: calc(100svh - 8rem);
max-height: 90svh;
overflow-y: scroll; overflow-y: scroll;
z-index: 10; z-index: 10;
margin-right: 1.272rem;
& .toc_a { & .toc_a {
transition: color 0.33s; transition: color 0.33s;

4
src/styles/global.css
View file

@ -62,7 +62,7 @@ html.dark {
.header { .header {
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100svw;
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
@ -184,7 +184,7 @@ footer {
} }
} }
@media (min-width: 65rem) { @media (min-width: 85rem) {
html { html {
font-size: 16px; font-size: 16px;
} }