6e13451dc4
- Next.js 14 blog application with theme support - Docker containerization with volume bindings - Traefik integration with Let's Encrypt SSL - MDX support for blog posts - Theme toggle with localStorage persistence - Scheduled posts directory structure - Brand guidelines compliance with CHORUS colors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
116 lines
3.0 KiB
CSS
116 lines
3.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Exo:ital,wght@0,100..900;1,100..900&family=Inconsolata:wdth,wght@50..200,200..900&display=swap');
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--font-inter: 'Inter Tight', ui-sans-serif, system-ui;
|
|
--font-exo: 'Exo', 'Inter Tight', ui-sans-serif, system-ui;
|
|
--font-mono: 'Inconsolata', ui-monospace, monospace;
|
|
}
|
|
|
|
html {
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* CHORUS Blog Typography */
|
|
.prose {
|
|
@apply max-w-none text-carbon-950 dark:text-carbon-100;
|
|
}
|
|
|
|
.prose h1 {
|
|
@apply text-h2 font-sans font-thin text-carbon-950 dark:text-mulberry-100 mb-8;
|
|
}
|
|
|
|
.prose h2 {
|
|
@apply text-h3 font-logo text-carbon-950 dark:text-mulberry-200 mb-6 mt-12;
|
|
}
|
|
|
|
.prose h3 {
|
|
@apply text-h4 font-sans text-carbon-950 dark:text-mulberry-300 mb-4 mt-8;
|
|
}
|
|
|
|
.prose h4 {
|
|
@apply text-h5 font-sans text-carbon-800 dark:text-mulberry-400 mb-3 mt-6;
|
|
}
|
|
|
|
.prose h5 {
|
|
@apply text-h6 font-sans text-carbon-700 dark:text-mulberry-500 mb-3 mt-6;
|
|
}
|
|
|
|
.prose h6 {
|
|
@apply text-h7 font-sans text-carbon-600 dark:text-mulberry-600 mb-2 mt-4;
|
|
}
|
|
|
|
.prose p {
|
|
@apply text-base leading-relaxed mb-6 text-carbon-800 dark:text-carbon-200;
|
|
}
|
|
|
|
.prose a {
|
|
@apply text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-300 transition-colors underline decoration-ocean-500/30 hover:decoration-ocean-600/50 dark:hover:decoration-ocean-400/50;
|
|
}
|
|
|
|
.prose strong {
|
|
@apply text-carbon-950 dark:text-carbon-100 font-semibold;
|
|
}
|
|
|
|
.prose code {
|
|
@apply bg-carbon-200 dark:bg-carbon-800 text-eucalyptus-700 dark:text-eucalyptus-400 px-2 py-1 rounded-sm font-mono text-sm;
|
|
}
|
|
|
|
.prose pre {
|
|
@apply bg-carbon-100 dark:bg-carbon-900 border border-carbon-300 dark:border-carbon-700 rounded-lg overflow-x-auto p-4 mb-6;
|
|
}
|
|
|
|
.prose pre code {
|
|
@apply bg-transparent text-carbon-950 dark:text-carbon-200 p-0;
|
|
}
|
|
|
|
.prose blockquote {
|
|
@apply border-l-4 border-carbon-400 dark:border-mulberry-600 pl-6 italic text-carbon-600 dark:text-carbon-300 my-6;
|
|
}
|
|
|
|
.prose ul {
|
|
@apply list-disc pl-6 mb-6 space-y-2;
|
|
}
|
|
|
|
.prose ol {
|
|
@apply list-decimal pl-6 mb-6 space-y-2;
|
|
}
|
|
|
|
.prose li {
|
|
@apply text-carbon-800 dark:text-carbon-200;
|
|
}
|
|
|
|
/* Blog-specific utilities */
|
|
.blog-container {
|
|
@apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.blog-meta {
|
|
@apply text-sm text-carbon-600 dark:text-carbon-500 flex items-center space-x-4;
|
|
}
|
|
|
|
.blog-tag {
|
|
@apply inline-block bg-carbon-200 dark:bg-mulberry-800 text-carbon-700 dark:text-mulberry-200 px-3 py-1 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
/* Reading progress indicator */
|
|
.reading-progress {
|
|
@apply fixed top-0 left-0 w-full h-1 bg-ocean-600 dark:bg-mulberry-600 transform origin-left scale-x-0 transition-transform z-50;
|
|
}
|
|
|
|
/* Utilities */
|
|
.line-clamp-3 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
} |