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

feat: improve category cards spacing, overflow, and add fade effect to edges
All checks were successful
test-build / guarddog (push) Successful in 23s
Details
renovate / renovate (push) Successful in 1m42s
Details
test-build / build (push) Successful in 1m48s
Details

Browse Source
This commit is contained in:
Alex Lebens
2026-03-13 10:18:04 -05:00
parent 629403fdde
commit d0f10986cd
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/cards/CategoryCard.astro
View File

@@ -22,8 +22,8 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
data-astro-prefetch data-astro-prefetch
> >
<div class="relative grow overflow-hidden"> <div class="relative grow overflow-hidden">
<div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5"> <div class="mask-fade-edges absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
<div class="flex flex-row items-center mb-4"> <div class="flex flex-row items-center mb-4 shrink-0">
<div class="card-hover-icon-scale shrink-0 mr-3"> <div class="card-hover-icon-scale shrink-0 mr-3">
<Logo <Logo
srcLight={getDirectusImageURL(logoLight)} srcLight={getDirectusImageURL(logoLight)}
@@ -35,12 +35,12 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
{title} {title}
</h3> </h3>
</div> </div>
<div> <div class="overflow-hidden">
<p class="card-text-description mb-4"> <p class="card-text-description line-clamp-3">
{description} {description}
</p> </p>
</div> </div>
<div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2"> <div class="card-text-description flex shrink-0 items-center justify-between text-xs mt-auto pt-1 md:pt-2">
<span class="inline-flex items-center"> <span class="inline-flex items-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

12
src/styles/utilities.css
View File

@@ -138,3 +138,15 @@
bg-neutral-100 dark:bg-neutral-800 bg-neutral-100 dark:bg-neutral-800
shadow-xs dark:shadow-md shadow-xs dark:shadow-md
} }
@utility mask-fade-edges {
-webkit-mask-image:
linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
mask-image:
linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}