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/layouts/AboutLayout.astro

@@ -21,7 +21,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   <!-- Enhanced background with gradient overlay -->
   <div class="fixed inset-0 -z-10 h-full w-full bg-background">
     <!-- Additional subtle gradient for about page -->
-    <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10">
+    <div class="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-blue-50/20 dark:from-blue-950/20 dark:via-transparent dark:to-blue-950/10">
      </div>
   </div>
   
@@ -62,7 +62,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
                 <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>
                       {lang === 'zh' ? '目录' : 'Table of Contents'}
@@ -161,7 +161,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
             // 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");
             });
@@ -170,7 +170,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
             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"
               );
             }
           }

src/layouts/BlogLayout.astro

@@ -18,7 +18,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   <!-- Enhanced background with gradient overlay for better visual consistency -->
   <div class="fixed inset-0 -z-10 h-full w-full bg-background">
     <!-- Additional subtle gradient for blog pages -->
-    <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10"></div>
+    <div class="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-blue-50/20 dark:from-blue-950/20 dark:via-transparent dark:to-blue-950/10"></div>
   </div>
   
   <!-- Glass Header with navigation -->

src/layouts/Layout.astro

@@ -24,7 +24,9 @@ const t = useTranslations(lang);
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content={description} />
-        <title>{title}{t('site.title') ? ` | ${t('site.title')}` : ''}</title>
+    <title>{title}{t('site.title') ? ` | ${t('site.title')}` : ''}</title>
+    <!-- View Transitions for smooth page transitions -->
+    <meta name="view-transition" content="same-origin" />
     {
       import.meta.env.MODE === 'production' && (
       <script defer src="https://cloud.umami.is/script.js" data-website-id="a79f759b-74ae-4165-b738-56d123a1c6be"></script>
@@ -32,10 +34,10 @@ const t = useTranslations(lang);
     }
   </head>
   <body
-    class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500"
+    class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
   >
     <div
-      class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"
+      class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.15),rgba(255,255,255,0))]"
     >
     </div>
     <slot />
@@ -86,4 +88,29 @@ const t = useTranslations(lang);
       background-color var(--transition-standard),
       color var(--transition-standard);
   }
+
+  /* Page transition animations */
+  @keyframes pageIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  main {
+    animation: pageIn 0.4s ease-out forwards;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    main {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+  }
 </style>