zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update BlogPost.astro styles to enhance hover effects and adjust transition durations

Browse Source
This commit is contained in:
EFEELE
2025-04-14 11:41:08 -06:00
parent cf3194d00d
commit e5127ecb61
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/blog/BlogPost.astro
View File

@@ -8,7 +8,7 @@ import Capsule from "../ui/Capsule.astro";
---
<article class="bg-white dark:bg-zinc-900/25 dark:border dark:border-zinc-800 dark:hover:border-mint-300 backdrop-blur-lg shadow-sm overflow-auto hover:shadow-[5px_5px_rgba(0,_98,_90,_0.4),_10px_10px_rgba(0,_98,_90,_0.3),_15px_15px_rgba(0,_98,_90,_0.2),_20px_20px_rgba(0,_98,_90,_0.1),_25px_25px_rgba(0,_98,_90,_0.05)] p-8 max-md:p-6 w-full flex justify-between items-center bg-gradient-to-r hover:from-teal-200 hover:to-emerald-200 dark:hover:from-riptide-500 dark:hover:to-mint-500 transition-all hover:scale-105 duration-300 ease-in-out gap-8 max-md:gap-4 rounded-3xl max-md:flex-col-reverse">
<article class="bg-white dark:bg-zinc-900/25 dark:border dark:border-zinc-800 dark:hover:border-mint-300 hover:backdrop-blur-none backdrop-blur-lg shadow-sm overflow-auto hover:shadow-[5px_5px_rgba(0,_98,_90,_0.4),_10px_10px_rgba(0,_98,_90,_0.3),_15px_15px_rgba(0,_98,_90,_0.2),_20px_20px_rgba(0,_98,_90,_0.1),_25px_25px_rgba(0,_98,_90,_0.05)] p-8 max-md:p-6 w-full flex justify-between items-center bg-gradient-to-r hover:from-teal-200 hover:to-emerald-200 dark:hover:from-riptide-500 dark:hover:to-mint-500 transition-all hover:scale-105 duration-200 ease-in-out gap-8 max-md:gap-4 rounded-3xl max-md:flex-col-reverse">
<div class="flex flex-col">
<a href={url} class="flex flex-col gap-4 w-full">
<DatePub date={date} />
@@ -26,6 +26,6 @@ import Capsule from "../ui/Capsule.astro";
</div>
</div>
{image?.url && (
<a href={url} style={{ backgroundImage: `url(${image.url})` }} class="flex-shrink-0 rounded-2xl bg-center bg-cover aspect-square max-md:aspect-video w-1/6 max-md:w-full" />
<a href={url} style={{ backgroundImage: `url(${image.url})` }} class="flex-shrink-0 rounded-2xl bg-center bg-cover aspect-video max-md:aspect-video w-2/6 max-md:w-full" />
)}
</article>