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

feat: make cards fixed height

Browse Source
This commit is contained in:
Alex Lebens
2026-03-09 16:37:44 -05:00
parent 62886ba2b3
commit 9dfcf6f006
3 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/cards/BlogCard.astro
View File

@@ -16,13 +16,13 @@ const { post } = Astro.props;
<div class="smooth-reveal-cards group flex flex-col"> <div class="smooth-reveal-cards group flex flex-col">
<a <a
class="card-base border-none!" class="card-base border-none! h-full flex flex-col"
href={`/blog/${post.slug}/`} href={`/blog/${post.slug}/`}
data-astro-prefetch data-astro-prefetch
> >
<div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full"> <div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
<Image <Image
class="rounded-t-xl h-auto w-full" class="rounded-t-xl h-64 w-full object-cover"
src={getDirectusImageURL(post.image)} src={getDirectusImageURL(post.image)}
alt={post.image_alt} alt={post.image_alt}
draggable="false" draggable="false"
@@ -31,11 +31,11 @@ const { post } = Astro.props;
inferSize={true} inferSize={true}
/> />
</div> </div>
<div class="rounded-xl p-4 md:p-5"> <div class="rounded-xl p-4 md:p-5 flex flex-col flex-1">
<h3 class="card-text-title text-xl"> <h3 class="card-text-title text-xl">
{post.title} {post.title}
</h3> </h3>
<div class="ml-6 flex"> <div class="ml-6 flex mt-auto">
<div class="relative inline-block w-full"> <div class="relative inline-block w-full">
<div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4"> <div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
<span class="relative inline-block overflow-hidden ml-2"> <span class="relative inline-block overflow-hidden ml-2">

2
src/components/cards/LargeCategoryCard.astro
View File

@@ -15,7 +15,7 @@ interface Props {
const { url, title, description, logoLight, logoDark, count, publishDate } = Astro.props; const { url, title, description, logoLight, logoDark, count, publishDate } = Astro.props;
--- ---
<div class="smooth-reveal flex flex-col mx-auto w-full"> <div class="smooth-reveal-cards flex flex-col mx-auto w-full">
<a <a
class="card-base flex flex-col h-full min-h-55" class="card-base flex flex-col h-full min-h-55"
href={url} href={url}

6
src/pages/all.astro
View File

@@ -44,11 +44,9 @@ const posts = await directus.request(
/> />
<section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10"> <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
<div class="columns-1 sm:columns-2 lg:columns-3 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{posts.map((b) => {posts.map((b) =>
<div class="break-inside-avoid mb-6"> <BlogCard post={b} />
<BlogCard post={b} />
</div>
)} )}
</div> </div>
</section> </section>