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
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
title={route.type + " Type Documentation"}
title={route.type + " Module Types"}
description="Quickshell Type Documentation"
>
<div class="docs-content">

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

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

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

@ -19,29 +19,6 @@
&:not(:last-child) {
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;
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 {
padding-left: 1rem;
border-left: 1px solid hsl(var(--blue) 10 15 / 0.6);