Merge pull request #11 from AndyWang505/feature/ux-enhancements

Feature/ux enhancements

Author: AndyWang505

src/components/ToC.astro

@@ -3,9 +3,7 @@ import PersonalInfo from '../components/PersonalInfo.astro';
 import CategoryAside from '../components/CategoryAside.astro';
 import TagCloud from '../components/TagCloud.astro';
 import RecentPosts from '../components/RecentPosts.astro';
-import ToC from '../components/ToC.astro';
 
-const { headings = [] } = Astro.props;
 const isPost = Astro.url.pathname.includes('/post/');
 ---
 
@@ -18,9 +16,6 @@ const isPost = Astro.url.pathname.includes('/post/');
     isPost ? (
       <div class="transition-all duration-700 flex flex-col w-full gap-4">
         <RecentPosts />
-        <div class="sticky top-4">
-          <ToC headings={headings} />
-        </div>
       </div>
     ) : (
       <div class="transition-all duration-700 flex flex-col w-full gap-4">

src/layouts/Aside.astro

@@ -30,9 +30,9 @@ const { headings } = await entry.render();
   <div class="relative max-w-[var(--page-width)] mx-auto">
     <div class="w-full grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto] mx-auto gap-4">
       <Aside headings={headings} />
-      <main class="col-span-2 lg:col-span-1 p-0 overflow-hidden">
+      <main class="col-span-2 lg:col-span-1 p-0 rounded-xl border border-gray-100/50 dark:border-zinc-700/50 overflow-hidden">
         <div class="onload-animation">
-          <article class="bg-white shadow-lg rounded-xl dark:bg-zinc-900 border border-gray-100/50 dark:border-zinc-700/50 px-2 py-3 sm:px-4 sm:py-4 md:px-8 md:py-8">
+          <article class="bg-white shadow-lg dark:bg-zinc-900 px-2 py-3 sm:px-4 sm:py-4 md:px-8 md:py-8">
       <h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4 md:mb-6 dark:text-zinc-100 bg-gradient-to-r from-gray-900 to-gray-700 dark:from-zinc-100 dark:to-zinc-300 bg-clip-text text-transparent leading-tight">{title}</h1>
       <!-- metadata - 使用 CardItem 的樣式 -->
       <div class="flex flex-wrap text-gray-500 dark:text-gray-400 items-center gap-1.5 sm:gap-2 md:gap-3 lg:gap-5 mb-3 sm:mb-4 md:mb-6 lg:mb-8 p-2 sm:p-3 md:p-4 bg-gray-100/70 dark:bg-zinc-800/30 rounded-lg border border-gray-300/50 dark:border-zinc-700/30 shadow-sm text-xs sm:text-sm md:text-base">

src/layouts/Post.astro

@@ -38,7 +38,7 @@ function formatDate(date: Date) {
       <!-- mobile nav -->
       <main class="col-span-2 lg:col-span-1 p-0 overflow-hidden">
         <div class="onload-animation">
-          <section class="dark:bg-zinc-900 bg-white shadow-md rounded-lg overflow-hidden py-3 sm:py-6">
+          <section class="dark:bg-zinc-900 bg-white rounded-xl overflow-hidden py-3 sm:py-6">
       <div class="mb-4 sm:mb-8 ml-3 sm:ml-6 md:ml-12 dark:text-neutral-200">
         <h2 class="text-lg sm:text-xl md:text-2xl">Archive</h2>
         <h3 class="text-sm sm:text-base md:text-xl">共 {posts.length} 筆文章</h3>

src/pages/archive/index.astro

@@ -38,7 +38,7 @@
 
   /* 代碼塊 */
   --codeblock-bg: #0b0b0c;
-  --codeblock-topbar-bg: #111827;
+  --codeblock-topbar-bg: #0f1e4e;
 }
 
 body {
@@ -485,8 +485,8 @@ h6 {
 }
 
 blockquote {
-  background-color: #f7f7f7;
-  border-left: 4px solid #e4e4e7;
+  background-color: #f0f0f0;
+  border-left: 4px solid #c9c9ce;
   padding: 10px 0 10px 20px;
   margin: 0px 0 1.2rem;
 }
@@ -496,7 +496,7 @@ blockquote p {
 }
 
 .dark blockquote {
-  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
+  background-color: #0d121a;
   border-left-color: #3b82f6;
 }