feat: optimize some stuff

src/components/Nav.astro

@@ -4,7 +4,7 @@ import Logo from "./Logo.astro";
 import ToggleTheme from "@components/ThemeToggle.svelte";
 
 function isActive(path: string) {
-  return Astro.url.pathname === path;
+  return Astro.url.pathname.startsWith(path);
 }
 
 const t = useTranslations(Astro.url);

src/components/TOC.astro

@@ -10,10 +10,9 @@ type Props = {
 const { headings } = Astro.props;
 ---
 
-<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
+<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6 z-2">
   <details
-    class="py-2 lg:px-4 rounded-xl lg:border lg:border-neutral flex flex-col lg:bg gap-2"
-  >
+    class="py-2 lg:px-4 rounded-xl lg:border lg:border-neutral flex flex-col lg:bg gap-2">
     <summary class="text-lg cursor-pointer select-none"
       >{t("toc.title")}</summary
     >
@@ -24,8 +23,7 @@ const { headings } = Astro.props;
             <a
               href={`#${heading.slug}`}
               style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
-              class={`block text my-0`}
-            >
+              class={`block text my-0`}>
               {heading.text}
             </a>
           );

src/layouts/theme.css

@@ -29,6 +29,10 @@ body {
   background-color: var(--neutral-000);
 }
 
+.border-neutral {
+  border-color: var(--outline);
+}
+
 .dark body {
   background-color: var(--neutral-800);
   --background-dark: var(--neutral-800);
@@ -37,7 +41,7 @@ body {
   --background-gradient: linear-gradient(-30deg,
       var(--neutral-500) 0%,
       var(--neutral-400) 100%);
-  --outline: var(--neutral-300);
+  --outline: var(--neutral-400);
   --text: var(--neutral-100);
   --text-light: white;
 }