quick fixes for the previous commit

src/components/navigation/sidebars/nav/Tree.tsx

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

src/pages/index.astro

@@ -1,9 +1,5 @@
 ---
 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">
   <div class="main-page_hero">
@@ -12,18 +8,18 @@ function handleCardClick(target: string): void {
       <h3>Based on QtQuick</h3>
     </section>
     <section class="main-page_links">
-      <button type="button" class="main-page_link-card" onclick={() => handleCardClick("/docs/configuration")}>
-        <h3><a href="/docs/configuration">Configuration</a></h3>
-      </button>
-      <button class="main-page_link-card">
-        <h3><a href="/docs/types">Type Definitions</a></h3>
-      </button>
-      <button class="main-page_link-card">
-        <h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples">Examples</a></h3>
-      </button>
-      <button class="main-page_link-card">
-        <h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell">Source</a></h3>
-      </button>
+      <a href="/docs/configuration" class="main-page_link-card">
+        <h3>Configuration</h3>
+      </a>
+      <a href="/docs/types" class="main-page_link-card">
+        <h3>Type Definitions</h3>
+      </a>
+      <a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples" class="main-page_link-card">
+        <h3>Examples</h3>
+      </a>
+      <a href="https://git.outfoxxed.me/outfoxxed/quickshell" class="main-page_link-card">
+        <h3>Source</h3>
+      </a>
     </section>
   </div>
 </BaseLayout>

src/styles/docs/toc/toc.css

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

src/styles/global.css

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

src/styles/main-page.css

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