/* Flavor Theme - Custom Styles */ /* Base font */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* Prose content styles for article body */ .prose-content h1 { font-size: 2rem; font-weight: 700; margin: 1.5em 0 0.5em; line-height: 1.3; } .prose-content h2 { font-size: 1.5rem; font-weight: 600; margin: 1.5em 0 0.5em; line-height: 1.3; } .prose-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.25em 0 0.5em; line-height: 1.4; } .prose-content h4 { font-size: 1.125rem; font-weight: 600; margin: 1em 0 0.5em; line-height: 1.4; } .prose-content p { margin: 1em 0; } .prose-content a { color: #059669; text-decoration: underline; text-decoration-color: rgba(5, 150, 105, 0.3); text-underline-offset: 2px; transition: text-decoration-color 0.2s; } .prose-content a:hover { text-decoration-color: #059669; } .prose-content ul, .prose-content ol { margin: 1em 0; padding-left: 1.5em; } .prose-content li { margin: 0.25em 0; } .prose-content blockquote { border-left: 3px solid #059669; margin: 1.5em 0; padding: 0.5em 1em; color: #6b7280; font-style: italic; } .prose-content pre { background: #1f2937; color: #e5e7eb; border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin: 1.5em 0; font-size: 0.875rem; line-height: 1.7; } .prose-content code { font-size: 0.875em; background: #f3f4f6; padding: 0.125em 0.375em; border-radius: 0.25rem; } .prose-content pre code { background: none; padding: 0; border-radius: 0; } .prose-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5em 0; } .prose-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } .prose-content th, .prose-content td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; } .prose-content th { background: #f9fafb; font-weight: 600; } .prose-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 2em 0; } /* Dark mode prose overrides */ `@media` (prefers-color-scheme: dark) { .prose-content code { background: `#374151`; } .prose-content blockquote { color: `#9ca3af`; } .prose-content th { background: `#1f2937`; } .prose-content th, .prose-content td { border-color: `#374151`; } }