mirror of
https://github.com/soconnor0919/personal-website.git
synced 2025-12-12 23:04:43 -05:00
Add equal height card styling and layout improvements
This commit is contained in:
@@ -65,9 +65,9 @@ export default function HomePage() {
|
||||
{/* Current Focus */}
|
||||
<section className="animate-fade-in-up space-y-6">
|
||||
<h2 className="text-2xl font-bold">Current Focus</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<FlaskConical className="h-5 w-5" />
|
||||
@@ -76,7 +76,7 @@ export default function HomePage() {
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Developing a web-based platform for HRI experiments that
|
||||
addresses reproducibility challenges in Wizard-of-Oz studies.
|
||||
@@ -88,14 +88,14 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-2">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<GraduationCap className="h-5 w-5" />
|
||||
<CardTitle className="mb-1">Academic Excellence</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Bachelor of Science in Computer Science and Engineering at
|
||||
Bucknell University. 3.86 Engineering GPA, Dean's List
|
||||
@@ -112,7 +112,7 @@ export default function HomePage() {
|
||||
<h2 className="text-2xl font-bold">Experience Highlights</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -192,13 +192,13 @@ export default function HomePage() {
|
||||
<Code className="h-6 w-6" />
|
||||
Technical Skills
|
||||
</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">Languages & Frameworks</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Java, C/C++, Python, JavaScript/TypeScript, React, Next.js,
|
||||
PHP, SQL
|
||||
@@ -208,11 +208,11 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-2">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">Backend & DevOps</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
REST APIs, MySQL, PostgreSQL, Docker, Apache Web Server,
|
||||
NGINX, ROS2
|
||||
@@ -222,11 +222,11 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-3">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">Cloud & Infrastructure</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
AWS, GCP, Azure, Backblaze, Linux (RHEL/Debian), CI/CD
|
||||
</p>
|
||||
@@ -235,11 +235,11 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-4">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">Development Tools</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Git, JetBrains Suite, VS Code, Cursor, Linux CLI
|
||||
</p>
|
||||
@@ -255,9 +255,9 @@ export default function HomePage() {
|
||||
<Users className="h-6 w-6" />
|
||||
Leadership & Activities
|
||||
</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">
|
||||
AIChE Chem-E-Car Competition Team
|
||||
@@ -266,7 +266,7 @@ export default function HomePage() {
|
||||
Former President, Electrical and Mechanical Team Lead
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Pioneered team's first custom hardware solution by
|
||||
designing and fabricating a microcontroller-based control
|
||||
@@ -278,12 +278,12 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-2">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">Bucknell Coffee Society</CardTitle>
|
||||
<CardDescription>Treasurer</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Co-established and launched a new campus organization,
|
||||
managing financial operations and coordinating event
|
||||
@@ -294,12 +294,12 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-3">
|
||||
<Card className="card-hover">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="mb-1">RoboLab@Bucknell</CardTitle>
|
||||
<CardDescription>Founding Member</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-muted-foreground">
|
||||
Led and participated in group discussions in a new lab
|
||||
bridging computer science and psychology perspectives on
|
||||
@@ -315,12 +315,12 @@ export default function HomePage() {
|
||||
{/* Quick Links */}
|
||||
<section className="animate-fade-in-up space-y-6">
|
||||
<h2 className="text-2xl font-bold">Explore More</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="grid-equal-height grid gap-4 md:grid-cols-3">
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card className="card-hover group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link href="/publications" className="block p-4">
|
||||
<CardContent className="p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<Card className="card-hover card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link href="/publications" className="block h-full p-4">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex h-full items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<FlaskConical className="h-6 w-6 text-primary" />
|
||||
<div>
|
||||
@@ -338,10 +338,10 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-2">
|
||||
<Card className="card-hover group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link href="/projects" className="block p-4">
|
||||
<CardContent className="p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<Card className="card-hover card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link href="/projects" className="block h-full p-4">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex h-full items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Code className="h-6 w-6 text-primary" />
|
||||
<div>
|
||||
@@ -359,10 +359,10 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-3">
|
||||
<Card className="card-hover group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link href="/cv" className="block p-4">
|
||||
<CardContent className="p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<Card className="card-hover card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link href="/cv" className="block h-full p-4">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex h-full items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<GraduationCap className="h-6 w-6 text-primary" />
|
||||
<div>
|
||||
|
||||
@@ -88,17 +88,17 @@ export default function AccessibilityPage() {
|
||||
<section className="animate-fade-in-up-delay-3 space-y-6">
|
||||
<h2 className="text-2xl font-bold">Implemented Features</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
||||
{/* Image Alt Text */}
|
||||
<div className="animate-fade-in-up-delay-4 card-hover">
|
||||
<Card>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Eye className="h-5 w-5" />
|
||||
Image Accessibility
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
All images include descriptive alt text for screen readers
|
||||
</p>
|
||||
@@ -107,14 +107,14 @@ export default function AccessibilityPage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-4 card-hover">
|
||||
<Card>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Keyboard className="h-5 w-5" />
|
||||
Keyboard Navigation
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Full keyboard support for all interactive elements
|
||||
</p>
|
||||
@@ -127,16 +127,16 @@ export default function AccessibilityPage() {
|
||||
{/* Additional Features */}
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-2xl font-bold">Additional Features</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
||||
{/* Video Accessibility */}
|
||||
<Card>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Volume2 className="h-5 w-5" />
|
||||
Video Accessibility
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 pt-0">
|
||||
<CardContent className="card-content-stretch space-y-3 pt-0">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Custom video player with comprehensive accessibility features.
|
||||
</p>
|
||||
@@ -158,7 +158,7 @@ export default function AccessibilityPage() {
|
||||
</Card>
|
||||
|
||||
{/* Semantic HTML */}
|
||||
<Card>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="h-5 w-5" />
|
||||
@@ -225,7 +225,7 @@ export default function AccessibilityPage() {
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>Custom Components</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<p className="mb-3 text-sm text-muted-foreground">
|
||||
Built custom accessible components to ensure consistent user
|
||||
experience across the site.
|
||||
@@ -335,15 +335,15 @@ export default function AccessibilityPage() {
|
||||
{/* Resources */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-2xl font-bold">Accessibility Resources</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card className="group cursor-pointer transition-colors hover:bg-accent">
|
||||
<div className="grid-equal-height grid gap-4 md:grid-cols-2">
|
||||
<Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link
|
||||
href="https://www.w3.org/WAI/WCAG21/quickref/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="h-6 w-6 text-primary" />
|
||||
@@ -360,14 +360,14 @@ export default function AccessibilityPage() {
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Card className="group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link
|
||||
href="https://webaim.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Eye className="h-6 w-6 text-primary" />
|
||||
@@ -398,7 +398,7 @@ export default function AccessibilityPage() {
|
||||
with user feedback and updated standards.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="mb-2 font-semibold">Regular Testing</h3>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
|
||||
@@ -76,16 +76,16 @@ export default function LatexTutorialPage() {
|
||||
{/* What You'll Learn */}
|
||||
<section className="animate-fade-in-up-delay-3 space-y-4">
|
||||
<h2 className="text-2xl font-bold">What You'll Learn</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-4 md:grid-cols-2">
|
||||
<div className="animate-fade-in-up-delay-4 card-hover">
|
||||
<Card>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Play className="h-5 w-5" />
|
||||
Getting Started
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Setting up Overleaf</li>
|
||||
<li>• Basic document structure</li>
|
||||
@@ -97,14 +97,14 @@ export default function LatexTutorialPage() {
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-4 card-hover">
|
||||
<Card>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Code className="h-5 w-5" />
|
||||
Core Features
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Mathematical equations</li>
|
||||
<li>• Document organization</li>
|
||||
@@ -128,7 +128,7 @@ export default function LatexTutorialPage() {
|
||||
and engineering fields.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="mb-2 font-semibold">Academic Excellence</h3>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
@@ -153,15 +153,15 @@ export default function LatexTutorialPage() {
|
||||
{/* Resources */}
|
||||
<section className="animate-fade-in-up-delay-4 space-y-4">
|
||||
<h2 className="text-2xl font-bold">Essential Resources</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card className="group cursor-pointer transition-colors hover:bg-accent">
|
||||
<div className="grid-equal-height grid gap-4 md:grid-cols-3">
|
||||
<Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link
|
||||
href="https://www.overleaf.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Play className="h-6 w-6 text-primary" />
|
||||
@@ -178,14 +178,14 @@ export default function LatexTutorialPage() {
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Card className="group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link
|
||||
href="https://www.latex-project.org/get/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Code className="h-6 w-6 text-primary" />
|
||||
@@ -202,14 +202,14 @@ export default function LatexTutorialPage() {
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Card className="group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
|
||||
<Link
|
||||
href="https://en.wikibooks.org/wiki/LaTeX"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<CardContent className="card-content-stretch p-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<BookOpen className="h-6 w-6 text-primary" />
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function ProjectsPage() {
|
||||
)}
|
||||
|
||||
{/* Project Content */}
|
||||
<div className="flex flex-1 flex-col p-6">
|
||||
<div className="card-content-stretch flex flex-1 flex-col p-6">
|
||||
<div className="flex-1 space-y-4">
|
||||
<div>
|
||||
<CardTitle className="text-xl">
|
||||
@@ -148,7 +148,7 @@ export default function ProjectsPage() {
|
||||
{otherProjects.length > 0 && (
|
||||
<section className="animate-fade-in-up space-y-6">
|
||||
<h2 className="text-2xl font-bold">Additional Projects</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<CardSkeleton />
|
||||
@@ -160,7 +160,7 @@ export default function ProjectsPage() {
|
||||
key={index}
|
||||
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
|
||||
>
|
||||
<Card className="flex flex-col">
|
||||
<Card className="card-full-height flex flex-col">
|
||||
{project.image && (
|
||||
<div className="flex h-48 items-center justify-center p-4">
|
||||
<Image
|
||||
|
||||
@@ -38,7 +38,7 @@ export default function TripsPage() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="animate-fade-in-up-delay-2 grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="animate-fade-in-up-delay-2 grid-equal-height grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<CardSkeleton />
|
||||
@@ -54,7 +54,7 @@ export default function TripsPage() {
|
||||
key={index}
|
||||
className={`animate-fade-in-up-delay-${Math.min(index + 3, 4)} card-hover`}
|
||||
>
|
||||
<Card className="overflow-hidden rounded-lg">
|
||||
<Card className="card-full-height overflow-hidden rounded-lg">
|
||||
<CardHeader className="p-0">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex space-x-0 overflow-x-auto">
|
||||
@@ -76,12 +76,14 @@ export default function TripsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col content-between justify-items-start">
|
||||
<CardTitle className="mb-2 mt-6">{trip.title}</CardTitle>
|
||||
<CardDescription className="">
|
||||
{trip.description}
|
||||
</CardDescription>
|
||||
<CardContent className="card-content-stretch">
|
||||
<div className="flex flex-1 flex-col">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="mb-2 mt-6">{trip.title}</CardTitle>
|
||||
<CardDescription className="">
|
||||
{trip.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
{/* Show badges for tags */}
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{trip.tags.map((tag, tagIndex) => (
|
||||
|
||||
@@ -240,6 +240,23 @@ body {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
|
||||
/* Equal height cards in grid layouts */
|
||||
.grid-equal-height > * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-full-height {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-content-stretch {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
||||
Reference in New Issue
Block a user