alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: change responsive height of image

Browse Source
This commit is contained in:
Alex Lebens
2026-03-10 22:27:10 -05:00
parent 18c2b54f65
commit e25a3d0189
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/cards/LargeBlogLeftCard.astro
View File

@@ -16,11 +16,11 @@ const { post } = Astro.props;
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full"> <div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
<a <a
class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8" class="md:card-base-hidden group md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
href={`/blog/${post.slug}`} href={`/blog/${post.slug}`}
data-astro-prefetch data-astro-prefetch
> >
<div> <div class="h-full">
<Image <Image
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full object-cover" class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full object-cover"
src={getDirectusImageURL(post.image)} src={getDirectusImageURL(post.image)}
@@ -30,7 +30,7 @@ const { post } = Astro.props;
inferSize={true} inferSize={true}
/> />
</div> </div>
<div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4"> <div class="flex flex-col justify-center bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
<h2 class="card-text-header"> <h2 class="card-text-header">
{post.title} {post.title}
</h2> </h2>

6
src/components/cards/LargeBlogRightCard.astro
View File

@@ -40,7 +40,7 @@ const { post } = Astro.props;
</div> </div>
</div> </div>
{!post.image_second ? ( {!post.image_second ? (
<div> <div class="h-full">
<Image <Image
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover" class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
src={getDirectusImageURL(post.image)} src={getDirectusImageURL(post.image)}
@@ -51,7 +51,7 @@ const { post } = Astro.props;
/> />
</div> </div>
) : ( ) : (
<> <div class="h-full">
<div class="md:hidden"> <div class="md:hidden">
<Image <Image
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover" class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
@@ -80,7 +80,7 @@ const { post } = Astro.props;
inferSize={true} inferSize={true}
/> />
</div> </div>
</> </div>
)} )}
</a> </a>
</div> </div>