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

feat: major refactor of cards to standardize styles

Browse Source
This commit is contained in:
Alex Lebens
2026-02-14 00:55:43 -06:00
parent a57f43e082
commit 104fe35ee8
17 changed files with 407 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ui/cards/FeaturesCard.astro
View File

@@ -10,33 +10,26 @@ interface Props {
const { title, description, url, icon } = Astro.props;
const baseClasses = 'smooth-reveal-2 group group-hover flex flex-col ';
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
const bgColorClasses =
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
const sizeClasses = 'h-30 w-100 md:w-[300px]';
---
<div class={`${baseClasses}`}>
<div class="smooth-reveal-2 group flex flex-col">
<a
class={`rounded-xl duration-300 transition-all ${sizeClasses} ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
class={`card-base flex items-center ${sizeClasses}`}
href={url}
data-astro-prefetch
>
<div class="p-4 md:p-5">
<div class="flex">
<div class="p-5 w-full">
<div class="flex items-center">
<Icon
name={icon}
class="group-hover:text-steel dark:group-hover:text-bermuda h-6 w-6 text-neutral-600 transition-all duration-300 md:h-8 md:w-8 dark:text-neutral-200"
class="card-hover-icon shrink-0 h-6 w-6 md:h-8 md:w-8 "
/>
<div class="ms-5 grow">
<span
class="group-hover:text-steel dark:group-hover:text-bermuda block text-lg font-bold text-neutral-600 transition-all duration-300 dark:text-neutral-300"
>
<div class="ms-5 grow text-left">
<span class="card-text-title card-hover-text-title block text-lg">
{title}
</span>
<span class="mt-1 block text-neutral-500 dark:text-neutral-400">
<span class="card-text-description block mt-1">
{description}
</span>
</div>