/* ============================================================ TroBlog Theme System Three modes: light | sepia | dark Applied via data-theme attribute on ============================================================ */ /* ---------- Light (default) --------------------------------- */ :root, [data-theme="light"] { --bg-page: #ffffff; --bg-surface: #f9fafb; --bg-card: #ffffff; --border: #e5e7eb; --text-primary: #111827; --text-muted: #6b7280; --accent: #2563eb; --accent-hover: #1d4ed8; --header-bg: #ffffff; --header-text: #111827; --tag-bg: #eff6ff; --tag-text: #1d4ed8; --code-bg: #f3f4f6; } /* ---------- Sepia ------------------------------------------- */ [data-theme="sepia"] { --bg-page: #f5efe0; --bg-surface: #ede3cf; --bg-card: #faf4e8; --border: #c9b99a; --text-primary: #3b2e1e; --text-muted: #7a6650; --accent: #8b4513; --accent-hover: #6b3410; --header-bg: #ede3cf; --header-text: #3b2e1e; --tag-bg: #e8d9c0; --tag-text: #6b3410; --code-bg: #ede3cf; } /* ---------- Dark -------------------------------------------- */ [data-theme="dark"] { --bg-page: #0f172a; --bg-surface: #1e293b; --bg-card: #1e293b; --border: #334155; --text-primary: #f1f5f9; --text-muted: #94a3b8; --accent: #38bdf8; --accent-hover: #7dd3fc; --header-bg: #0f172a; --header-text: #f1f5f9; --tag-bg: #0c4a6e; --tag-text: #38bdf8; --code-bg: #0f172a; } /* ---------- Base element bindings --------------------------- */ body { background-color: var(--bg-page); color: var(--text-primary); } .site-header { background-color: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--border); } .site-footer { background-color: var(--bg-surface); color: var(--text-muted); border-color: var(--border); } .site-logo { color: var(--text-primary); } .nav-link { color: var(--text-muted); } .nav-link:hover { color: var(--text-primary); } .theme-btn { border-color: var(--border); color: var(--text-muted); background: var(--bg-surface); } .theme-btn:hover { color: var(--text-primary); background: var(--bg-card); } /* Card / surface */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: .5rem; } .surface { background: var(--bg-surface); } .divider { border-color: var(--border); } /* Typography */ .text-muted { color: var(--text-muted); } a.link { color: var(--accent); } a.link:hover { color: var(--accent-hover); text-decoration: underline; } /* Tag / badge */ .tag { display: inline-block; padding: .125rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; background: var(--tag-bg); color: var(--tag-text); } /* Sidebar */ .sidebar { background: var(--bg-surface); border: 1px solid var(--border); border-radius: .5rem; } /* Form inputs */ .form-input, .form-select, .form-textarea { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); border-radius: .375rem; padding: .5rem .75rem; width: 100%; transition: border-color .15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* Buttons */ .btn-primary { background: var(--accent); color: #fff; padding: .5rem 1.25rem; border-radius: .375rem; font-weight: 500; cursor: pointer; transition: background .15s; border: none; } .btn-primary:hover { background: var(--accent-hover); } /* ============================================================ Blog post rendered HTML prose ============================================================ */ .prose { color: var(--text-primary); line-height: 1.75; max-width: 72ch; } .prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 700; line-height: 1.3; margin-top: 2em; margin-bottom: .6em; color: var(--text-primary); } .prose h1 { font-size: 2em; } .prose h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: .3em; } .prose h3 { font-size: 1.25em; } .prose p { margin-bottom: 1.25em; } .prose a { color: var(--accent); text-decoration: underline; } .prose ul, .prose ol { margin-left: 1.5em; margin-bottom: 1.25em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: .4em; } .prose blockquote { border-left: 4px solid var(--accent); padding-left: 1em; color: var(--text-muted); font-style: italic; margin: 1.5em 0; } .prose code { background: var(--code-bg); padding: .15em .35em; border-radius: .25em; font-size: .875em; font-family: ui-monospace, SFMono-Regular, monospace; } .prose pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: .5em; padding: 1em 1.25em; overflow-x: auto; margin-bottom: 1.5em; } .prose pre code { background: none; padding: 0; font-size: .875em; } .prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; } .prose th, .prose td { border: 1px solid var(--border); padding: .5em .75em; text-align: left; } .prose th { background: var(--bg-surface); font-weight: 600; } .prose img { max-width: 100%; border-radius: .5em; } .prose hr { border-color: var(--border); margin: 2em 0; } /* ============================================================ Post list card ============================================================ */ .post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: .5rem; padding: 1.25rem 1.5rem; transition: box-shadow .2s, border-color .2s; } .post-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 15%, transparent); } .post-card h2 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .4rem; } .post-card h2 a { color: inherit; text-decoration: none; } .post-card h2 a:hover { color: var(--accent); }