/* --- Standard CSS (Optimized for Dark-Mode First) --- */ /* 1. Base Transitions */ body { transition: background-color 0.3s ease, color 0.3s ease; } /* 2. Blog Content (Default: Dark Mode / Bright Text) */ /* We target when html does NOT have .light-mode */ html:not(.light-mode) .prose h1 { color: #ffffff; } html:not(.light-mode) .prose h2 { color: #f5f5f4; } html:not(.light-mode) .prose h3 { color: #e7e5e4; } /* The Body Text - Now as bright as the headers as requested */ html:not(.light-mode) .prose p, html:not(.light-mode) .prose ul { color: #f5f5f4; line-height: 1.7; margin-bottom: 1.25rem; } html:not(.light-mode) .prose code { background-color: #292524; color: #f5f5f4; padding: 0.2em 0.4em; border-radius: 0.25rem; } html:not(.light-mode) .prose pre { background-color: #1c1917; border: 1px solid #292524; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; } html:not(.light-mode) .prose blockquote { border-left: 4px solid #44403c; color: #a8a29e; padding-left: 1rem; font-style: italic; } /* 3. Light Mode Overrides (Triggered by .light-mode on ) */ .light-mode .prose h1 { color: #1c1917; } .light-mode .prose h2 { color: #292524; } .light-mode .prose h3 { color: #44403c; } .light-mode .prose p, .light-mode .prose ul { color: #44403c; } /* Muted dark gray for light mode */ .light-mode .prose code { background-color: #f5f5f4; color: #1c1917; } .light-mode .prose pre { background-color: #fafaf9; border-color: #e7e5e4; } .light-mode .prose blockquote { border-left-color: #d6d3d1; color: #78716c; } /* 4. Formatting Helpers */ .prose h1 { font-size: 1.875rem; font-weight: 500; margin-bottom: 0.5rem; } .prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; } .prose h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; } .prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; } /* 5. Animations */ .fade-in { animation: fadeIn 0.4s ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Ensure Images in the blog are responsive and clean */ .prose img { width: 100%; height: auto; border-radius: 0.75rem; margin: 2rem 0; }