87 lines
2.3 KiB
CSS
87 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
@import "github-markdown-css/github-markdown.css";
|
|
@import "animate.css";
|
|
|
|
:root,
|
|
.light {
|
|
--font-geist-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji";
|
|
--font-geist-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
"Liberation Mono", "Courier New", monospace;
|
|
--background: #fafafa;
|
|
--foreground: #171717;
|
|
--card: #ffffff;
|
|
--card-foreground: #171717;
|
|
--muted: #f4f4f5;
|
|
--muted-foreground: #71717a;
|
|
--border: #e4e4e7;
|
|
--accent: #f59e0b;
|
|
--accent-foreground: #1c1917;
|
|
--accent-muted: rgba(245, 158, 11, 0.2);
|
|
--gradient-accent: rgba(251, 191, 36, 0.15);
|
|
}
|
|
|
|
.dark {
|
|
--background: #0c0c0f;
|
|
--foreground: #fafafa;
|
|
--card: rgba(255, 255, 255, 0.05);
|
|
--card-foreground: #fafafa;
|
|
--muted: rgba(255, 255, 255, 0.05);
|
|
--muted-foreground: #a1a1aa;
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--accent: #f59e0b;
|
|
--accent-foreground: #1c1917;
|
|
--accent-muted: rgba(245, 158, 11, 0.2);
|
|
--gradient-accent: rgba(251, 191, 36, 0.15);
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.85; }
|
|
}
|
|
.animate-gradient { animation: gradient-shift 8s ease-in-out infinite; }
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
.hover-shimmer { position: relative; overflow: hidden; }
|
|
.hover-shimmer::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
|
|
background-size: 200% 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.hover-shimmer:hover::after {
|
|
opacity: 1;
|
|
animation: shimmer 1.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes float-badge {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-2px); }
|
|
}
|
|
.animate-float-badge { animation: float-badge 3s ease-in-out infinite; }
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-sans), system-ui, sans-serif;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|