/* ============================================================================ Blog Content – Shared Typography ---------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH for blog body styling. This file is loaded BOTH by: 1. The TinyMCE editor (AddBlog.cshtml -> tinymce.init content_css), with body_class: 'blog-content', so authors see exactly these defaults while typing. 2. The published blog page (ViewBlog.cshtml -> ), so the rendered article looks identical to the editor. These rules only set DEFAULTS for each tag (font-size, font-weight, margin, font-style, etc.). When an author changes formatting in TinyMCE, TinyMCE writes inline styles on the element, and inline styles always win over the rules here – so manual changes are preserved on the view page. Dark-mode rules use Tailwind's class strategy (`.dark` on ). They apply on the view page; the editor surface stays light for a standard authoring UX. ============================================================================ */ /* ----- Base typography ----- */ .blog-content { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14pt; font-weight: 400; font-style: normal; line-height: 1.5; color: #374151; word-wrap: break-word; overflow-wrap: break-word; } .dark .blog-content { color: #d1d5db; } /* ----- Headings ----- */ .blog-content h1 { font-size: 2em; font-weight: 700; font-style: normal; line-height: 1.25; margin: 1em 0 0.5em; } .blog-content h2 { font-size: 1.5em; font-weight: 700; font-style: normal; line-height: 1.3; margin: 1em 0 0.5em; } .blog-content h3 { font-size: 1.25em; font-weight: 600; font-style: normal; line-height: 1.35; margin: 1em 0 0.5em; } .blog-content h4 { font-size: 1.1em; font-weight: 600; font-style: normal; line-height: 1.4; margin: 1em 0 0.5em; } .blog-content h5 { font-size: 1em; font-weight: 600; font-style: normal; line-height: 1.4; margin: 1em 0 0.4em; } .blog-content h6 { font-size: 0.9em; font-weight: 600; font-style: normal; line-height: 1.4; margin: 1em 0 0.4em; letter-spacing: 0.03em; text-transform: uppercase; } .dark .blog-content h1, .dark .blog-content h2, .dark .blog-content h3, .dark .blog-content h4, .dark .blog-content h5, .dark .blog-content h6 { color: #f9fafb; } /* ----- Paragraphs ----- */ .blog-content p { margin: 0.75em 0; font-weight: 400; font-style: normal; } /* ----- Links ----- */ .blog-content a { color: #3b82f6; text-decoration: underline; } .dark .blog-content a { color: #60a5fa; } /* ----- Lists (explicit markers because Tailwind preflight resets them) ----- */ .blog-content ul, .blog-content ol { padding-left: 1.5em; margin: 0.75em 0; } .blog-content ul { list-style-type: disc; } .blog-content ol { list-style-type: decimal; } .blog-content li { margin: 0.25em 0; } .blog-content li > ul, .blog-content li > ol { margin: 0.25em 0; } /* ----- Blockquote ----- */ .blog-content blockquote { border-left: 4px solid #3b82f6; margin: 1em 0; padding: 0.5em 1em; background: #f9fafb; } .dark .blog-content blockquote { background: rgba(255, 255, 255, 0.05); border-left-color: #60a5fa; } /* ----- Inline code ----- */ .blog-content code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace; } .dark .blog-content code { background: #374151; color: #f3f4f6; } /* ----- Code block ----- */ .blog-content pre { background: #f3f4f6; border-radius: 0.5rem; padding: 15px; overflow-x: auto; margin: 1.5em 0; font-size: 0.9em; line-height: 1.5; font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace; } .blog-content pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: inherit; } .dark .blog-content pre { background: #1f2937; color: #e5e7eb; } /* ----- Tables ----- */ .blog-content table { width: 100%; border-collapse: collapse; margin: 15px 0; } .blog-content th, .blog-content td { border: 1px solid #e5e7eb; padding: 10px; } .blog-content th { background-color: #f3f4f6; font-weight: 600; text-align: left; } .dark .blog-content th, .dark .blog-content td { border-color: #4b5563; } .dark .blog-content th { background-color: #374151; color: #f3f4f6; } /* ----- Images ----- */ .blog-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 15px 0; } /* ----- Figure / caption ----- */ .blog-content figure { margin: 1.5em 0; text-align: center; } .blog-content figcaption { font-size: 0.875em; font-style: italic; color: #6b7280; margin-top: 0.5em; } .dark .blog-content figcaption { color: #9ca3af; } /* ----- Horizontal rule ----- */ .blog-content hr { border: none; border-top: 2px solid #e5e7eb; margin: 1.5em 0; } .dark .blog-content hr { border-top-color: #4b5563; } /* ----- Embedded media (YouTube, etc.) ----- */ .blog-content iframe { max-width: 100%; margin: 15px 0; } /* ----- Inline emphasis ----- */ .blog-content strong, .blog-content b { font-weight: 700; } .blog-content em, .blog-content i { font-style: italic; } .blog-content s, .blog-content del { text-decoration: line-through; } .blog-content mark { background: #fef08a; padding: 0 0.2em; border-radius: 2px; } .blog-content sub { font-size: 0.75em; } .blog-content sup { font-size: 0.75em; } /* Keep inline text colors chosen in the editor readable on the dark view page */ .dark .blog-content span[style*="color"] { filter: brightness(1.3); } /* ----- Responsive ----- */ @media (max-width: 640px) { .blog-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .blog-content iframe { width: 100% !important; height: auto !important; min-height: 200px; aspect-ratio: 16 / 9; } .blog-content pre { font-size: 0.8em; } } @media (min-width: 641px) and (max-width: 1024px) { .blog-content iframe { width: 100% !important; aspect-ratio: 16 / 9; } }