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

fix: correct hardcoded cover width in CardItem component for consiste…

Author: AndyWang505

src/components/CardItem.astro

@@ -53,7 +53,6 @@ function getReadingTime(wordCount: number): number {
 const wordCount = content ? getWordCount(content) : getWordCount(description);
 const readingTime = getReadingTime(wordCount);
 const hasCover = heroImage !== undefined && heroImage !== null && heroImage !== "";
-const coverWidth = "30%";
 ---
 
 <div class="w-full rounded-xl overflow-hidden relative mb-4 bg-white
@@ -77,7 +76,7 @@ const coverWidth = "30%";
     </a>
   }
 
-  <div class={`px-4 py-4 md:pl-9 md:pr-2 md:pt-7 md:pb-6 relative ${hasCover ? `md:w-[calc(100%_-_${coverWidth}_-_12px)]` : 'md:w-[calc(100%_-_52px_-_12px)]'}`}>
+  <div class={`px-4 py-4 md:pl-9 md:pr-2 md:pt-7 md:pb-6 relative ${hasCover ? 'md:w-[calc(100%_-_30%_-_12px)]' : 'md:w-[calc(100%_-_52px_-_12px)]'}`}>
     <a href={`/post/${slug}/`}
        class="group w-full block font-bold mb-2 md:mb-3 text-lg md:text-3xl 
        text-zinc-900 dark:text-zinc-100
@@ -175,7 +174,7 @@ const coverWidth = "30%";
   <!-- Desktop images -->
   {hasCover && 
     <a href={`/post/${slug}/`} 
-       class={`group hidden md:block md:w-[${coverWidth}] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95 transition-transform ease-out`}>
+       class="group hidden md:block md:w-[30%] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95 transition-transform ease-out">
       <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition-colors duration-300 ease-out"></div>
       <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center">
         <svg class="opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl transition-all" width="60" height="60" viewBox="0 0 24 24" fill="currentColor">