quick fixes for the previous commit

This commit is contained in:
Xanazf 2024-10-09 02:12:40 +03:00
parent 23719ec405
commit 0e749e5bfa
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
5 changed files with 33 additions and 31 deletions

View file

@ -132,7 +132,7 @@ export const Tree: Component<TreeProps> = props => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
QtQuick Type Reference QtQuick Types
</a> </a>
</span> </span>
</Accordion.ItemTrigger> </Accordion.ItemTrigger>

View file

@ -1,9 +1,5 @@
--- ---
import BaseLayout from "@layouts/BaseLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
function handleCardClick(target: string): void {
window.location.href = target;
}
--- ---
<BaseLayout title="Quickshell" description="A fully user customizable desktop shell" image="/quickshell.png"> <BaseLayout title="Quickshell" description="A fully user customizable desktop shell" image="/quickshell.png">
<div class="main-page_hero"> <div class="main-page_hero">
@ -12,18 +8,18 @@ function handleCardClick(target: string): void {
<h3>Based on QtQuick</h3> <h3>Based on QtQuick</h3>
</section> </section>
<section class="main-page_links"> <section class="main-page_links">
<button type="button" class="main-page_link-card" onclick={() => handleCardClick("/docs/configuration")}> <a href="/docs/configuration" class="main-page_link-card">
<h3><a href="/docs/configuration">Configuration</a></h3> <h3>Configuration</h3>
</button> </a>
<button class="main-page_link-card"> <a href="/docs/types" class="main-page_link-card">
<h3><a href="/docs/types">Type Definitions</a></h3> <h3>Type Definitions</h3>
</button> </a>
<button class="main-page_link-card"> <a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples" class="main-page_link-card">
<h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples">Examples</a></h3> <h3>Examples</h3>
</button> </a>
<button class="main-page_link-card"> <a href="https://git.outfoxxed.me/outfoxxed/quickshell" class="main-page_link-card">
<h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell">Source</a></h3> <h3>Source</h3>
</button> </a>
</section> </section>
</div> </div>
</BaseLayout> </BaseLayout>

View file

@ -35,7 +35,7 @@
font-size: 1.614rem; font-size: 1.614rem;
max-height: 500px; max-height: 500px;
& > svg { &>svg {
height: 100%; height: 100%;
width: 24px; width: 24px;
} }
@ -51,7 +51,6 @@
& .toc-mobile { & .toc-mobile {
position: absolute; position: absolute;
overflow-y: scroll;
top: 2.6rem; top: 2.6rem;
right: -1rem; right: -1rem;
width: 0; width: 0;
@ -65,17 +64,17 @@
display: none; display: none;
} }
transition: transition: width 0.3s ease,
width 0.3s ease, height 0.3s ease,
height 0.3s ease, background-color 0.3s ease,
background-color 0.3s ease, backdrop-filter 0.3s ease,
backdrop-filter 0.3s ease, padding 0.3s ease;
padding 0.3s ease;
&.shown { &.shown {
overflow-y: scroll;
padding: 0.3rem; padding: 0.3rem;
width: var(--width); width: var(--width);
height: 50svh; height: max(min(100svh, 800px), calc(100svh - 8rem));
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;
@ -86,8 +85,10 @@
} }
@media (max-width: 1280px) { @media (max-width: 1280px) {
.toc-toggle { @media (min-width: 768px) {
--width: 70svw; .toc-toggle {
--width: 25svw;
}
} }
} }
@ -120,7 +121,7 @@
list-style: none; list-style: none;
&.active { &.active {
& > .toc_a { &>.toc_a {
color: hsl(var(--green) 72 60); color: hsl(var(--green) 72 60);
} }
} }

View file

@ -117,7 +117,7 @@ footer {
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: 3rem; height: 3.5rem;
font-size: min(1.112rem, max(1svw, 0.8rem)); font-size: min(1.112rem, max(1svw, 0.8rem));
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View file

@ -45,21 +45,26 @@
width: 75%; width: 75%;
flex-wrap: wrap; flex-wrap: wrap;
gap: 2rem; gap: 2rem;
z-index: 0;
} }
.main-page_link-card { .main-page_link-card {
all: unset; all: unset;
position: relative; position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
height: 9.67rem; height: 9.67rem;
border-radius: 9px; border-radius: 9px;
text-align: center;
overflow: hidden; overflow: hidden;
border: 1px solid transparent; border: 1px solid transparent;
transition: border-color 0.3s; transition: border-color 0.3s;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
text-decoration: none;
} }
&::before { &::before {