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

fix module listing style

Browse source
This commit is contained in:
outfoxxed 2024-10-24 21:43:22 -07:00
parent cafdf14928
commit 84703e3117
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
3 changed files with 22 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,7 @@ const details = route.data.details
--- ---
<DocsLayout <DocsLayout
title={route.type + " Type Documentation"} title={route.type + " Module Types"}
description="Quickshell Type Documentation" description="Quickshell Type Documentation"
> >
<div class="docs-content"> <div class="docs-content">

12
src/pages/docs/types/index.astro
View file

@ -6,9 +6,13 @@ const routes = await getTypeData();
const modules = [...new Set(routes.map(route => route.type))]; const modules = [...new Set(routes.map(route => route.type))];
--- ---
<DocsLayout title="Quickshell Type Definitions" description="Quickshell Type Documentation"> <DocsLayout title="Quickshell Module Listing" description="Quickshell Type Documentation">
<h2>Type Definitions</h2> <div class="docs-content">
<div class="root-nav"> <hr/>
<h2>Module Listing</h2>
<section>
<span>All modules included with Quickshell</span>
<div class="root-nav" data-pagefind-ignore>
{modules.map(moduleEntry => { {modules.map(moduleEntry => {
const indexData = routes.filter(route => route.name === "index") const indexData = routes.filter(route => route.name === "index")
const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0] const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0]
@ -22,4 +26,6 @@ const modules = [...new Set(routes.map(route => route.type))];
</div>) </div>)
})} })}
</div> </div>
</section>
</div>
</DocsLayout> </DocsLayout>

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

@ -19,29 +19,6 @@
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6); border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
} }
& .root-nav-link {
font-size: 1.137rem;
max-height: 2rem;
position: relative;
text-decoration: none;
text-align: center;
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 25%,
hsla(var(--accent-500) / 0.88) 50%,
transparent 75%
);
}
}
} }
} }
@ -353,27 +330,6 @@ html.dark .typevariants {
display: grid; display: grid;
grid-template-columns: 0.60fr 1.40fr; grid-template-columns: 0.60fr 1.40fr;
& .root-nav-link {
justify-self: start;
height: max-content;
&::before {
width: 0;
background: linear-gradient(
to right,
hsla(var(--accent-400) / 0.5) var(--percent),
hsla(var(--accent-400) / 0) 100%
);
animation: percentToZero 250ms ease-in-out forwards;
transition: width 0.25s ease-in-out;
}
&:hover::before {
animation: percentToFifty 250ms ease-in-out forwards;
width: 100%;
}
}
& .root-nav-desc { & .root-nav-desc {
padding-left: 1rem; padding-left: 1rem;
border-left: 1px solid hsl(var(--blue) 10 15 / 0.6); border-left: 1px solid hsl(var(--blue) 10 15 / 0.6);