🎨 style(PostCard.astro): add 'group' class to article element for bet…

…ter styling and interaction

🎨 style(PostCard.astro): update image class to improve hover effect and transition
🎨 style(PostCard.astro): update text and description classes for better readability and styling
🎨 style(PostCard.astro): add a bottom border element to indicate hover effect on the card
🎨 style(BlogPost.astro): update placeholder element style to use backdrop-filter and improve appearance

src/components/PostCard.astro

@@ -10,15 +10,15 @@ const {
 } = Astro.props
 ---
 
-<article class='grid grid-rows-[300px_auto]'>
+<article class='grid grid-rows-[300px_auto] group'>
 	<a class='relative' href={`/post/${slug}/`}
 		><Image
 			src={heroImage}
 			width={600}
 			height={200}
 			format='webp'
 			loading='eager'
-			class='h-full min-w-full object-cover hover:scale-[1.01] transition-transform duration-150 opacity-0'
+			class='h-full min-w-full object-cover opacity-0 hover:scale-[101%] transition-all duration-200 rounded-[2px]'
 			alt={`img of ${title}`}
 		/>
 
@@ -38,13 +38,13 @@ const {
 	<div class='flex justify-between flex-col py-6 gap-4 pl-1'>
 		<div class='flex flex-col gap-3'>
 			<div class='flex flex-col gap-2'>
-				<a class='text-2xl font-semibold hover:underline' href={`/post/${slug}/`}>
+				<a class='text-2xl font-semibold' href={`/post/${slug}/`}>
 					{title}
 				</a>
 			</div>
 
 			<p
-				class='overflow-hidden line-clamp-3 text-gray-500 dark:text-white mb-8 font-light md:pr-[15%]'>
+				class='overflow-hidden line-clamp-3 text-gray-700 dark:text-white mb-5 font-[400] md:pr-[15%]'>
 				{description}
 			</p>
 		</div>
@@ -60,6 +60,9 @@ const {
 				>
 			</a>
 		</footer>
+		<div
+			class='scale-x-0 group-hover:scale-x-100 transition-transform duration-500 border-black dark:border-white border-b-2'>
+		</div>
 	</div>
 </article>
 

src/layouts/BlogPost.astro

@@ -59,7 +59,8 @@ const articleDate = pubDate.toISOString()
 				)
 			}
 			<div
-				class='placeholder absolute inset-0 rounded-md backdrop-blur-3xl blur-3xl bg-gradient-to-r from-indigo-500 to-orange-600 transition-opacity duration-700 ease-out'>
+				style='backdrop-filter: blur(25px) saturate(180%);'
+				class='placeholder absolute inset-0 blur rounded-md transition-opacity duration-700 ease-out border-2 border-neutral-200 bg-gray-200 dark:border-neutral-900 dark:bg-zinc-900 bg-opacity-90'>
 			</div>
 		</div>