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

fix: adjust cover width and image dimensions in CardItem component fo…

Author: AndyWang505

src/components/CardItem.astro

@@ -53,7 +53,7 @@ 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 = "28%";
+const coverWidth = "30%";
 ---
 
 <div class="w-full rounded-xl overflow-hidden relative mb-4 bg-white
@@ -77,7 +77,7 @@ const coverWidth = "28%";
     </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%_-_var(--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%_-_${coverWidth}_-_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 +175,7 @@ const coverWidth = "28%";
   <!-- Desktop images -->
   {hasCover && 
     <a href={`/post/${slug}/`} 
-       class="group hidden md:block md:w-[var(--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-[${coverWidth}] 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">
@@ -185,8 +185,8 @@ const coverWidth = "28%";
       <Image 
         src={heroImage} 
         alt={title}
-        width={300}
-        height={200}
+        width={240}
+        height={180}
         loading="lazy"
         format="webp"
         quality={80}