Fix theming and spacing: alpha-value colors, remove v4 CSS syntax, clean card padding
- tailwind.config.ts: add <alpha-value> to all color definitions so opacity modifiers (ring-foreground/10, outline-ring/50) render correctly - globals.css: move @keyframes out of @theme inline block (v4-only, ignored by browser in v3); remove @custom-variant block (also v4-only) - page.tsx, experience/page.tsx, publications/page.tsx: remove pb-3 from CardHeaders and pt-0 from CardContents — new shadcn card uses gap-4 so these overrides added extra space instead of removing it Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -68,7 +68,7 @@ export default function ExperiencePage() {
|
||||
className={`animate-fade-in-up-delay-${Math.min(delay + index, 4)} card-hover`}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start gap-3">
|
||||
@@ -95,7 +95,7 @@ export default function ExperiencePage() {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent>
|
||||
<ul className="space-y-3">
|
||||
{exp.description.map((item, itemIndex) => (
|
||||
<li key={itemIndex} className="flex items-start gap-3">
|
||||
@@ -161,10 +161,10 @@ export default function ExperiencePage() {
|
||||
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
|
||||
>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{category}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{skills.map((skill) => (
|
||||
<Badge
|
||||
@@ -193,7 +193,7 @@ export default function ExperiencePage() {
|
||||
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
|
||||
>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="break-words text-lg leading-tight">
|
||||
@@ -206,7 +206,7 @@ export default function ExperiencePage() {
|
||||
<Award className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground">{conf.presentation}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -225,7 +225,7 @@ export default function ExperiencePage() {
|
||||
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
|
||||
>
|
||||
<Card className="card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-start gap-3">
|
||||
<Award className="mt-1 h-5 w-5 flex-shrink-0 text-primary" />
|
||||
<div className="min-w-0">
|
||||
@@ -241,7 +241,7 @@ export default function ExperiencePage() {
|
||||
</div>
|
||||
</CardHeader>
|
||||
{award.description && (
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<p className="break-words text-sm leading-relaxed text-muted-foreground">
|
||||
{award.description}
|
||||
</p>
|
||||
@@ -258,7 +258,7 @@ export default function ExperiencePage() {
|
||||
<h2 className="text-2xl font-bold">Relevant Coursework</h2>
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<CardContent>
|
||||
<ul className="space-y-3">
|
||||
{relevantCoursework.map((course, index) => (
|
||||
<li key={index} className="flex items-start gap-3">
|
||||
|
||||
+18
-18
@@ -106,7 +106,7 @@ export default function HomePage() {
|
||||
{educationList.map((edu, index) => (
|
||||
<div key={index} className={`animate-fade-in-up-delay-${index + 1}`}>
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="mb-1">{edu.institution}</CardTitle>
|
||||
@@ -115,7 +115,7 @@ export default function HomePage() {
|
||||
<School className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 pt-0">
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium">{edu.degree}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@@ -154,7 +154,7 @@ export default function HomePage() {
|
||||
className={`animate-fade-in-up-delay-${index + 1}`}
|
||||
>
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="mb-1">{exp.title}</CardTitle>
|
||||
@@ -166,7 +166,7 @@ export default function HomePage() {
|
||||
<FlaskConical className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
{exp.description.map((item, itemIndex) => (
|
||||
<li key={itemIndex} className="flex items-start gap-2">
|
||||
@@ -194,7 +194,7 @@ export default function HomePage() {
|
||||
className={`animate-fade-in-up-delay-${index + 1}`}
|
||||
>
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="mb-1">{exp.title}</CardTitle>
|
||||
@@ -206,7 +206,7 @@ export default function HomePage() {
|
||||
<Building className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
{exp.description.slice(0, 3).map((item, itemIndex) => (
|
||||
<li key={itemIndex} className="flex items-start gap-2">
|
||||
@@ -232,7 +232,7 @@ export default function HomePage() {
|
||||
className={`animate-fade-in-up-delay-${index + 1}`}
|
||||
>
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<GraduationCap className="h-5 w-5 flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
@@ -248,7 +248,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||||
{exp.description[0]}
|
||||
</p>
|
||||
@@ -269,7 +269,7 @@ export default function HomePage() {
|
||||
className={`animate-fade-in-up-delay-${index + 1}`}
|
||||
>
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
@@ -285,7 +285,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
{exp.description.slice(0, 2).map((item, itemIndex) => (
|
||||
<li key={itemIndex} className="flex items-start gap-2">
|
||||
@@ -311,7 +311,7 @@ export default function HomePage() {
|
||||
className={`animate-fade-in-up-delay-${index + 1}`}
|
||||
>
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Award className="h-5 w-5 flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
@@ -327,7 +327,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</CardHeader>
|
||||
{award.description && (
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<p className="break-words text-sm leading-relaxed text-muted-foreground">
|
||||
{award.description}
|
||||
</p>
|
||||
@@ -345,13 +345,13 @@ export default function HomePage() {
|
||||
<div className="grid-equal-height grid gap-6 md:grid-cols-3">
|
||||
<div className="animate-fade-in-up-delay-1">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Code className="h-5 w-5 flex-shrink-0" />
|
||||
<CardTitle className="mb-1 break-words">Projects</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<div className="flex h-full flex-col">
|
||||
<p className="break-words leading-relaxed text-muted-foreground">
|
||||
Explore my featured projects including HRIStudio, machine
|
||||
@@ -370,7 +370,7 @@ export default function HomePage() {
|
||||
|
||||
<div className="animate-fade-in-up-delay-2">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<BookOpen className="h-5 w-5 flex-shrink-0" />
|
||||
<CardTitle className="mb-1 break-words">
|
||||
@@ -378,7 +378,7 @@ export default function HomePage() {
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<div className="flex h-full flex-col">
|
||||
<p className="break-words leading-relaxed text-muted-foreground">
|
||||
Read my peer-reviewed publications in human-robot
|
||||
@@ -397,7 +397,7 @@ export default function HomePage() {
|
||||
|
||||
<div className="animate-fade-in-up-delay-3">
|
||||
<Card className="card-hover card-full-height">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<ExternalLink className="h-5 w-5 flex-shrink-0" />
|
||||
<CardTitle className="mb-1 break-words">
|
||||
@@ -405,7 +405,7 @@ export default function HomePage() {
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="card-content-stretch pt-0">
|
||||
<CardContent className="card-content-stretch">
|
||||
<div className="flex h-full flex-col">
|
||||
<p className="break-words leading-relaxed text-muted-foreground">
|
||||
View my complete academic and professional curriculum vitae.
|
||||
|
||||
@@ -146,7 +146,7 @@ export default function PublicationsPage() {
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<CardContent>
|
||||
{pub.abstract && (
|
||||
<p className="break-words text-sm leading-relaxed text-muted-foreground">
|
||||
{pub.abstract}
|
||||
|
||||
+96
-212
@@ -2,79 +2,101 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@keyframes accordion-down {
|
||||
from { height: 0; }
|
||||
to { height: var(--radix-accordion-content-height); }
|
||||
}
|
||||
@keyframes accordion-up {
|
||||
from { height: var(--radix-accordion-content-height); }
|
||||
to { height: 0; }
|
||||
}
|
||||
@keyframes collapsible-down {
|
||||
from { height: 0; }
|
||||
to { height: var(--radix-collapsible-content-height); }
|
||||
}
|
||||
@keyframes collapsible-up {
|
||||
from { height: var(--radix-collapsible-content-height); }
|
||||
to { height: 0; }
|
||||
}
|
||||
@keyframes slide-in-from-left {
|
||||
from { transform: translateX(-100%); }
|
||||
}
|
||||
@keyframes slide-in-from-right {
|
||||
from { transform: translateX(100%); }
|
||||
}
|
||||
@keyframes slide-in-from-top {
|
||||
from { transform: translateY(-100%); }
|
||||
}
|
||||
@keyframes slide-in-from-bottom {
|
||||
from { transform: translateY(100%); }
|
||||
}
|
||||
@keyframes slide-out-to-left {
|
||||
to { transform: translateX(-100%); }
|
||||
}
|
||||
@keyframes slide-out-to-right {
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
@keyframes slide-out-to-top {
|
||||
to { transform: translateY(-100%); }
|
||||
}
|
||||
@keyframes slide-out-to-bottom {
|
||||
to { transform: translateY(100%); }
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
/* Darker secondary for better badge contrast against white bg */
|
||||
--secondary: 240 4.8% 90%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 1rem;
|
||||
--sidebar: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.625rem;
|
||||
--chart-1: 222.2 47.4% 11.2%;
|
||||
--chart-2: 210 40% 44%;
|
||||
--chart-3: 210 40% 57.6%;
|
||||
--chart-4: 182 40% 76.5%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 20%;
|
||||
/* Slightly lighter for visibility */
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.9 100% 50%;
|
||||
--chart-1: 217.2 91.2% 59%;
|
||||
--chart-2: 160 84% 39%;
|
||||
--chart-3: 30 80% 50%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,156 +104,18 @@
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground font-sans;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-heading;
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.animate-blob {
|
||||
animation: blob 7s infinite;
|
||||
}
|
||||
|
||||
.animation-delay-2000 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animation-delay-4000 {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
@keyframes fade-in-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes blob {
|
||||
0% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
|
||||
33% {
|
||||
transform: translate(30px, -50px) scale(1.1);
|
||||
}
|
||||
|
||||
66% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
||||
/* Animation utilities */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up-delay-1 {
|
||||
animation: fadeInUp 0.5s ease-in-out 0.1s backwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up-delay-2 {
|
||||
animation: fadeInUp 0.5s ease-in-out 0.2s backwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up-delay-3 {
|
||||
animation: fadeInUp 0.5s ease-in-out 0.3s backwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up-delay-4 {
|
||||
animation: fadeInUp 0.5s ease-in-out 0.4s backwards;
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.card-hover {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.button-hover {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.button-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px -4px 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;
|
||||
}
|
||||
|
||||
.card-content-stretch p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Text wrapping and overflow utilities */
|
||||
.break-words {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }
|
||||
.animate-fade-in-up-delay-1 { animation: fade-in-up 0.5s ease-out 0.1s both; }
|
||||
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.5s ease-out 0.2s both; }
|
||||
.animate-fade-in-up-delay-3 { animation: fade-in-up 0.5s ease-out 0.3s both; }
|
||||
.animate-fade-in-up-delay-4 { animation: fade-in-up 0.5s ease-out 0.4s both; }
|
||||
+26
-26
@@ -4,7 +4,7 @@ import typography from "@tailwindcss/typography";
|
||||
import tailwindAnimate from "tailwindcss-animate";
|
||||
|
||||
export default {
|
||||
darkMode: "media",
|
||||
darkMode: "class",
|
||||
content: ["./src/**/*.tsx", "./src/**/*.mdx"],
|
||||
theme: {
|
||||
extend: {
|
||||
@@ -16,48 +16,48 @@ export default {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
xl: "calc(var(--radius) + 4px)",
|
||||
xl: "calc(var(--radius) + 2px)",
|
||||
},
|
||||
colors: {
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
background: "hsl(var(--background) / <alpha-value>)",
|
||||
foreground: "hsl(var(--foreground) / <alpha-value>)",
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
||||
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
|
||||
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
|
||||
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
|
||||
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
||||
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
|
||||
},
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
border: "hsl(var(--border) / <alpha-value>)",
|
||||
input: "hsl(var(--input) / <alpha-value>)",
|
||||
ring: "hsl(var(--ring) / <alpha-value>)",
|
||||
chart: {
|
||||
"1": "hsl(var(--chart-1))",
|
||||
"2": "hsl(var(--chart-2))",
|
||||
"3": "hsl(var(--chart-3))",
|
||||
"4": "hsl(var(--chart-4))",
|
||||
"5": "hsl(var(--chart-5))",
|
||||
"1": "hsl(var(--chart-1) / <alpha-value>)",
|
||||
"2": "hsl(var(--chart-2) / <alpha-value>)",
|
||||
"3": "hsl(var(--chart-3) / <alpha-value>)",
|
||||
"4": "hsl(var(--chart-4) / <alpha-value>)",
|
||||
"5": "hsl(var(--chart-5) / <alpha-value>)",
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
|
||||
Reference in New Issue
Block a user