130 lines
3.0 KiB
CSS
130 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--color-background: #ffffff;
|
|
--color-surface: #f4f4f5;
|
|
|
|
--color-foreground: #18181b;
|
|
--color-muted: #52525b;
|
|
--color-border: #e4e4e7;
|
|
|
|
--color-primary: #ff6b2c;
|
|
--color-blue: #4169e1;
|
|
--color-green: #00c853;
|
|
--color-purple: #9b59b6;
|
|
--color-pink: #ff69b4;
|
|
--color-yellow: #ffd93d;
|
|
--color-red: #ff4757;
|
|
|
|
--font-display: "Bricolage Grotesque", system-ui, sans-serif;
|
|
|
|
--shadow-custom: 4px 4px 0 #ff6b2c;
|
|
--shadow-custom-lg: 6px 6px 0 #ff6b2c;
|
|
--shadow-custom-hover: 8px 8px 0 #ff6b2c;
|
|
|
|
--border-primary: 3px solid var(--color-primary);
|
|
|
|
--radius-none: 0;
|
|
}
|
|
|
|
@layer theme {
|
|
.dark {
|
|
--color-background: #0d0d0d;
|
|
--color-surface: #1a1a1a;
|
|
|
|
--color-foreground: #f0f0f0;
|
|
--color-muted: #999999;
|
|
--color-border: #27272a;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--color-background: #0d0d0d;
|
|
--color-surface: #1a1a1a;
|
|
|
|
--color-foreground: #f0f0f0;
|
|
--color-muted: #999999;
|
|
--color-border: #27272a;
|
|
}
|
|
|
|
html {
|
|
font-size: 20px;
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
body {
|
|
font-size: 1.1rem;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply font-display bg-background text-foreground leading-relaxed overflow-x-hidden;
|
|
}
|
|
|
|
h1 { @apply text-5xl font-black mb-10 text-foreground tracking-tight; }
|
|
h2 { @apply text-3xl font-bold mt-16 mb-6 text-primary uppercase tracking-widest border-b border-border dark:border-surface pb-2; }
|
|
h3 { @apply text-2xl font-bold mt-10 mb-4 text-foreground/90; }
|
|
|
|
.prose p {
|
|
@apply mb-8 text-foreground/90 max-w-3xl;
|
|
}
|
|
|
|
.prose a,
|
|
.prose h1 a, .prose h2 a, .prose h3 a,
|
|
.prose h4 a, .prose h5 a, .prose h6 a {
|
|
@apply no-underline transition-colors;
|
|
text-decoration: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.prose p a {
|
|
@apply text-primary font-semibold hover:text-foreground transition-colors;
|
|
}
|
|
|
|
.prose blockquote {
|
|
@apply border-l-4 border-primary bg-surface/70 py-2 px-6 italic my-10 text-foreground/90;
|
|
}
|
|
|
|
.prose code {
|
|
@apply bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-sm border border-border;
|
|
}
|
|
|
|
.prose pre {
|
|
@apply border border-border dark:border-white/10;
|
|
}
|
|
}
|
|
|
|
/* Shiki dual themes */
|
|
html.dark .shiki,
|
|
html.dark .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
}
|
|
|
|
html:not(.dark) .shiki,
|
|
html:not(.dark) .shiki span {
|
|
color: var(--shiki-light) !important;
|
|
background-color: var(--shiki-light-bg) !important;
|
|
}
|
|
|
|
/* responsive container for youtube/video embeds generated by markdown */
|
|
.embed-responsive {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom: 56.25%;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.embed-responsive iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
} |