/* * ============================================================ * blog-core.css — Sam-Theme5 | Blog Post Base Styles * ============================================================ * Covers: layout, typography, shared components, dark mode * Import this on EVERY single.php / single-course.php page. * Then also import the category-specific file (dsa.css / maths.css). * * Dark-mode strategy * ------------------ * A single attribute, toggled by the * dark-mode button (see dark-mode-toggle.js), controls BOTH the * global site shell (header, footer, nav) AND the blog post. * No separate toggle needed. * ============================================================ */ /* ── 1. CSS Custom Properties ─────────────────────────────── */ :root { /* Brand (matches existing style.css) */ --brand-green: #2f8d46; --brand-green-dark: #1e6b30; --brand-green-light: #e8f5ec; /* Surface */ --bg-page: #f9f9f9; --bg-surface: #ffffff; --bg-surface-2: #f4f6f8; --bg-surface-3: #eef1f4; /* Text */ --text-primary: #1e1e1e; --text-secondary: #4a4a4a; --text-muted: #767676; --text-link: #1a5c8f; --text-link-hover: #0e3d61; /* Borders */ --border-light: #e0e4e8; --border-medium: #c8cdd4; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.07); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 8px 24px rgba(0,0,0,.13); /* Typography */ --font-body: 'Georgia', 'Times New Roman', serif; --font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-mono: 'Consolas', 'Courier New', monospace; /* Article width */ --article-max-width: 820px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Transition */ --transition-base: 0.25s ease; /* --- Category accent (overridden by dsa.css / maths.css) --- */ --accent-primary: #2f8d46; --accent-secondary: #1a6b2e; --accent-bg: #e8f5ec; --accent-border: #a8d5b5; --code-bg: #f0f5f7; --code-color: #1a4971; --code-border: #d0e0e8; --highlight-border: #2f8d46; --highlight-bg: #f0faf3; --blockquote-border: #c8cdd4; --blockquote-bg: #f7f9fb; } /* ── 2. Dark Mode Tokens ──────────────────────────────────── */ [data-theme="dark"] { --bg-page: #0f1117; --bg-surface: #1a1d27; --bg-surface-2: #222534; --bg-surface-3: #2a2e42; --text-primary: #e8eaf0; --text-secondary: #b0b8cc; --text-muted: #7a84a0; --text-link: #6eb3f7; --text-link-hover: #9ccfff; --border-light: #2e3348; --border-medium: #3d4260; --shadow-sm: 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 8px 24px rgba(0,0,0,.55); /* Category accents stay but are toned to fit dark bg */ --accent-bg: #162a1f; --accent-border: #2f8d46; --code-bg: #161c2a; --code-color: #7eb8f7; --code-border: #2a3a55; --highlight-bg: #142010; --highlight-border: #2f8d46; --blockquote-bg: #1c2030; --blockquote-border: #3d4260; } /* ── 3. Global Transitions for Theme Switch ───────────────── */ body, .site-header, .site-footer, .main-navigation, .sliding-sidebar, .post-content, .course-text { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* ── 4. Site-Shell Dark Mode Overrides ───────────────────── */ /* These complement the existing style.css without duplicating it. */ [data-theme="dark"] body { background-color: var(--bg-page); color: var(--text-primary); } [data-theme="dark"] .site-header { background: #111822; box-shadow: 0 2px 8px rgba(0,0,0,.5); } [data-theme="dark"] .main-navigation a, [data-theme="dark"] .site-title a, [data-theme="dark"] .menu-toggle { color: #d0d8e8; } [data-theme="dark"] .main-navigation a:hover, [data-theme="dark"] .site-title a:hover { color: #ffffff; } [data-theme="dark"] .main-navigation ul ul { background: #1a2030; border: 1px solid var(--border-light); } [data-theme="dark"] .site-footer { background: #0c0e14; color: #8a90a2; } [data-theme="dark"] .site-footer a { color: #6eb3f7; } [data-theme="dark"] .sliding-sidebar { background: #161922; border-right: 1px solid var(--border-light); } [data-theme="dark"] .sidebar-close { background: #2a2e42; color: var(--text-primary); } [data-theme="dark"] .topic-list a { color: var(--text-secondary); } [data-theme="dark"] .current-topic a { color: #5bc87a; } [data-theme="dark"] body.sidebar-open::before { background: rgba(0,0,0,.7); } /* ── 5. Dark Mode Toggle Button ──────────────────────────── */ .dark-mode-toggle { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-md); transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform 0.15s ease; outline: none; } .dark-mode-toggle:hover { transform: scale(1.10); box-shadow: var(--shadow-lg); } .dark-mode-toggle:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; } /* Icon swap via aria-label / data-theme on html */ .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: block; } [data-theme="dark"] .dark-mode-toggle .icon-sun { display: block; } [data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; } /* ── 6. Blog Post Wrapper ─────────────────────────────────── */ .blog-post-wrapper { max-width: var(--article-max-width); margin: 0 auto; padding: 40px 24px 64px; } /* Post header */ .blog-post-header { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 2px solid var(--border-light); } .blog-post-title { font-family: var(--font-ui); font-size: clamp(1.75rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--text-primary); line-height: 1.25; margin: 0 0 16px; } .blog-post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--font-ui); font-size: 0.875rem; color: var(--text-muted); } .blog-post-meta .meta-item { display: flex; align-items: center; gap: 5px; } .blog-post-meta .meta-item::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-primary); flex-shrink: 0; } .blog-category-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-bg); color: var(--accent-primary); border: 1px solid var(--accent-border); border-radius: 20px; padding: 3px 12px; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; } /* ── 7. Post Body Typography ──────────────────────────────── */ .post-content, .course-text, .blog-body { font-family: var(--font-body); font-size: 1.075rem; line-height: 1.8; color: var(--text-primary); } [data-theme="dark"] .post-content, [data-theme="dark"] .course-text, [data-theme="dark"] .blog-body { color: var(--text-secondary); } .post-content h1, .course-text h1, .blog-body h1 { font-family: var(--font-ui); font-size: clamp(1.65rem, 3vw, 2.1rem); color: var(--accent-primary); font-weight: 700; margin: 0 0 20px; text-align: center; line-height: 1.2; } .post-content h2, .course-text h2, .blog-body h2 { font-family: var(--font-ui); font-size: clamp(1.3rem, 2.5vw, 1.65rem); color: var(--text-primary); font-weight: 600; margin: 44px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--border-light); } .post-content h3, .course-text h3, .blog-body h3 { font-family: var(--font-ui); font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--text-secondary); font-weight: 600; margin: 32px 0 10px; } [data-theme="dark"] .post-content h2, [data-theme="dark"] .course-text h2, [data-theme="dark"] .blog-body h2 { color: var(--text-primary); border-color: var(--border-light); } [data-theme="dark"] .post-content h3, [data-theme="dark"] .course-text h3, [data-theme="dark"] .blog-body h3 { color: #9baac5; } .post-content p, .course-text p, .blog-body p { margin: 0 0 18px; color: inherit; } .post-content a, .course-text a, .blog-body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-base); } .post-content a:hover, .course-text a:hover, .blog-body a:hover { color: var(--text-link-hover); } /* Lists */ .post-content ul, .post-content ol, .course-text ul, .course-text ol, .blog-body ul, .blog-body ol { padding-left: 28px; margin: 16px 0 20px; } .post-content li, .course-text li, .blog-body li { margin: 8px 0; line-height: 1.7; } /* ── 8. Shared Blog Components ───────────────────────────── */ /* --- Highlight / callout box --- */ .highlight-box { background: var(--highlight-bg); border-left: 5px solid var(--highlight-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 18px 22px; margin: 28px 0; color: var(--text-primary); } [data-theme="dark"] .highlight-box { color: var(--text-secondary); } .highlight-box strong { color: var(--accent-primary); } /* --- Blockquote --- */ .post-content blockquote, .course-text blockquote, .blog-body blockquote { background: var(--blockquote-bg); border-left: 4px solid var(--blockquote-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 16px 22px; margin: 22px 0; color: var(--text-secondary); font-size: 0.97rem; } [data-theme="dark"] .post-content blockquote, [data-theme="dark"] .course-text blockquote, [data-theme="dark"] .blog-body blockquote { background: var(--blockquote-bg); color: var(--text-secondary); } /* --- Example box --- */ .example-box { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 20px 22px; margin: 24px 0; box-shadow: var(--shadow-sm); } [data-theme="dark"] .example-box { background: var(--bg-surface-2); border-color: var(--border-light); } /* --- CTA box --- */ .cta-box { background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-primary); padding: 20px 24px; text-align: center; border-radius: var(--radius-md); margin: 36px 0; font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; line-height: 1.6; } [data-theme="dark"] .cta-box { background: #0d2018; border-color: #1e5230; color: #5bc87a; } /* --- Inline code --- */ .post-content code, .course-text code, .blog-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); color: var(--code-color); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--code-border); } /* --- Code blocks (pre > code) --- */ .post-content pre, .course-text pre, .blog-body pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-md); padding: 20px 22px; overflow-x: auto; margin: 24px 0; box-shadow: inset 0 1px 4px rgba(0,0,0,.06); line-height: 1.6; } .post-content pre code, .course-text pre code, .blog-body pre code { background: none; border: none; padding: 0; font-size: 0.92rem; color: var(--code-color); } [data-theme="dark"] .post-content pre, [data-theme="dark"] .course-text pre, [data-theme="dark"] .blog-body pre { box-shadow: inset 0 1px 4px rgba(0,0,0,.3); } /* --- Formula / math box --- */ .formula { text-align: center; font-size: 1.1em; margin: 18px 0; padding: 14px 18px; background: var(--bg-surface-3); border-radius: var(--radius-md); border: 1px solid var(--border-light); overflow-x: auto; } [data-theme="dark"] .formula { background: var(--bg-surface-2); border-color: var(--border-light); } /* --- Emoji / icon decoration --- */ .emoji { font-size: 1.3rem; margin-right: 6px; vertical-align: middle; } /* ── 9. Featured Image ────────────────────────────────────── */ .post-featured-image, .course-featured-image { margin: 0 0 32px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .post-featured-image img, .course-featured-image img { width: 100%; height: auto; display: block; } /* ── 10. Post Footer Meta ─────────────────────────────────── */ .post-footer { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--border-light); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .post-tag { display: inline-block; background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 20px; padding: 4px 12px; font-family: var(--font-ui); font-size: 0.8rem; text-decoration: none; transition: all var(--transition-base); } .post-tag:hover { background: var(--accent-bg); color: var(--accent-primary); border-color: var(--accent-border); } /* ── 11. Topic Navigation (single-course.php) ─────────────── */ .topic-navigation { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--border-light); } .prev-topic, .next-topic { flex: 1; background: var(--bg-surface-2); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 14px 18px; transition: all var(--transition-base); } .prev-topic:hover, .next-topic:hover { background: var(--accent-bg); border-color: var(--accent-border); box-shadow: var(--shadow-sm); } .next-topic { text-align: right; } .prev-topic a, .next-topic a { text-decoration: none; color: var(--accent-primary); font-family: var(--font-ui); font-size: 0.92rem; font-weight: 500; } [data-theme="dark"] .prev-topic, [data-theme="dark"] .next-topic { background: var(--bg-surface-2); border-color: var(--border-light); } [data-theme="dark"] .prev-topic a, [data-theme="dark"] .next-topic a { color: #5bc87a; } /* ── 12. Comments Area ───────────────────────────────────── */ .comments-area { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--border-light); } .comments-title { font-family: var(--font-ui); font-size: 1.35rem; color: var(--text-primary); margin-bottom: 24px; } .comment-list { list-style: none; padding: 0; margin: 0; } .comment-body { background: var(--bg-surface-2); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 16px; } [data-theme="dark"] .comment-body { background: var(--bg-surface-2); border-color: var(--border-light); } /* Comment form inputs */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; box-sizing: border-box; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--font-ui); font-size: 0.95rem; transition: border-color var(--transition-base); } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(47, 141, 70, .15); } [data-theme="dark"] .comment-form input, [data-theme="dark"] .comment-form textarea { background: var(--bg-surface-2); border-color: var(--border-medium); color: var(--text-primary); } .comment-form .submit { background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 28px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background var(--transition-base); } .comment-form .submit:hover { background: var(--accent-secondary); } /* ── 13. Reading Progress Bar ─────────────────────────────── */ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--accent-primary); z-index: 9998; transition: width 0.1s linear; } /* ── 14. Responsive ───────────────────────────────────────── */ @media (max-width: 768px) { .blog-post-wrapper { padding: 24px 16px 48px; } .topic-navigation { flex-direction: column; } .next-topic { text-align: left; } .dark-mode-toggle { bottom: 16px; right: 16px; width: 42px; height: 42px; font-size: 18px; } } @media (max-width: 480px) { .post-content, .course-text, .blog-body { font-size: 1rem; } } /* ── PATCH: Dark mode for home page & course pages ── */ [data-theme="dark"] .search-container { background: #1a1d27; border: 1px solid #2e3348; } [data-theme="dark"] .search-field { background: #222534; color: #e8eaf0; border-color: #3d4260; } [data-theme="dark"] .search-field::placeholder { color: #7a84a0; } [data-theme="dark"] .search-submit { background: #2f8d46; color: #fff; } [data-theme="dark"] .category-box { background: #1a1d27; border-color: #2e3348; } [data-theme="dark"] .category-box a { color: #e8eaf0; } [data-theme="dark"] .category-box:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.4); } [data-theme="dark"] .course-topic { background: #1a1d27; border-color: #2e3348; } [data-theme="dark"] .course-topic a { color: #e8eaf0; } [data-theme="dark"] .topic-card { background: #1a1d27; border-color: #2e3348; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } [data-theme="dark"] .topic-card h3 { color: #e8eaf0; } [data-theme="dark"] .topic-card:hover h3 { color: #5bc87a; } [data-theme="dark"] .topic-card a { color: #e8eaf0; } [data-theme="dark"] .read-more-btn { background: #222534; color: #5bc87a; } [data-theme="dark"] .topic-card:hover .read-more-btn { background: #2f8d46; color: #fff; } [data-theme="dark"] .course-intro { background: #1a1d27; color: #b0b8cc; } [data-theme="dark"] .course-category-full, [data-theme="dark"] .course-archive { color: #e8eaf0; } [data-theme="dark"] .main-navigation ul ul { background: #1a2030; border: 1px solid #2e3348; } [data-theme="dark"] .main-navigation ul ul a { color: #d0d8e8; } [data-theme="dark"] .main-navigation ul ul a:hover { color: #ffffff; } [data-theme="dark"] .site-content { background: #0f1117; } [data-theme="dark"] .home-container h2 { color: #e8eaf0; } [data-theme="dark"] .course-topics-grid h2 { color: #e8eaf0; } [data-theme="dark"] .course-topics-grid h2:after { background-color: #2f8d46; } [data-theme="dark"] .topic-excerpt { color: #7a84a0; } [data-theme="dark"] .back-to-course a { color: #5bc87a; } [data-theme="dark"] .back-to-course { border-bottom-color: #2e3348; }