Define card utility classes and fix equal-height grid cards
Previously grid-equal-height, card-full-height, card-content-stretch, and
card-hover were all undefined class names doing nothing. Now defined:
- .grid-equal-height > * { height: 100% } — forces every grid child to fill
its row height, making adjacent cards stretch to match the tallest sibling
- .card-full-height { h-full } — card fills its wrapper
- .card-content-stretch { flex-1 } — CardContent grows to push footer down
- .card-hover — subtle shadow + ring lift on hover
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -109,6 +109,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
@apply transition-all duration-200 hover:shadow-lg hover:ring-foreground/20;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* grid-equal-height: force every direct child to fill the row */
|
||||||
|
.grid-equal-height > * {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* card-full-height: card fills its wrapper */
|
||||||
|
.card-full-height {
|
||||||
|
@apply h-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* card-content-stretch: CardContent grows to push footer content down */
|
||||||
|
.card-content-stretch {
|
||||||
|
@apply flex-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-contact-link {
|
||||||
|
@apply rounded-lg;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fade-in-up {
|
@keyframes fade-in-up {
|
||||||
from { opacity: 0; transform: translateY(10px); }
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
|||||||
Reference in New Issue
Block a user