LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Centering grid images - removing unnecesary css

This commit is contained in:
Julio Ruiz 2026-02-11 23:40:41 -05:00
parent 2979d507a7
commit 04f86aee9a
1 changed files with 2 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/cards/GridCard.astro
View File

@ -9,7 +9,7 @@ const imageUrl = props.image || ''
--- ---
{props.type !== 'imgText' && ( {props.type !== 'imgText' && (
<div class="aspect-square overflow-hidden"> <div class="aspect-square overflow-hidden">
<div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}> <div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
{ props.type === 'text' && ( { props.type === 'text' && (
<div class="p-16 flex flex-col justify-between h-full"> <div class="p-16 flex flex-col justify-between h-full">
<Icon name={props.icon} class={`text-8xl text-[${textColor}]`} /> <Icon name={props.icon} class={`text-8xl text-[${textColor}]`} />
@ -37,13 +37,4 @@ const imageUrl = props.image || ''
</div> </div>
</div> </div>
</div> </div>
)} )}
<style define:vars={{ imageUrl }}>
.gridcard {
/* Use the CSS variable in the background-image property */
background-image: url(var(--imageUrl));
background-size: cover;
background-position: center;
}
</style>