refactor: update styles and animations across pages for improved consistency and aesthetics

- Changed background gradients and color schemes in `now.astro` and `projects.astro` to use primary colors.
- Updated text styles and backgrounds to enhance readability and visual appeal.
- Added new font imports for better typography.
- Introduced custom animations and hover effects in `global.css` for enhanced user interaction.
- Adjusted CSS variables for a more cohesive design across light and dark modes.

src/components/layout/TableOfContents.astro

@@ -14,7 +14,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
   <div id="nav-content" class="sticky xl:w-72 w-full top-14">
     <div class="flex flex-col gap-3 p-4">
       <h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
-        <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
         </svg>
         {title}
@@ -106,7 +106,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
             // Remove active state from all links
             document.querySelectorAll("#toc-list a").forEach((el) => {
               el.classList.remove(
-                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
+                "bg-primary/10", "text-primary", "border-l-primary", "font-medium"
               );
               el.classList.add("text-muted-foreground", "border-transparent");
             });
@@ -115,7 +115,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
             if (link) {
               link.classList.remove("text-muted-foreground", "border-transparent");
               link.classList.add(
-                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
+                "bg-primary/10", "text-primary", "border-l-primary", "font-medium"
               );
             }
           }