/* ============================================================ WriteInOne Blog — default stylesheet All classes here are intentionally overridable by the site's custom stylesheet (configured via stylesUrl in site settings). ============================================================ */ /* ── Design tokens (light theme) ── */ :root { --bg: #fff; --fg: #1a1a1a; --border: #e5e5e5; --muted: #888; --muted-2: #555; --muted-3: #444; --tag-bg: #f0f0f0; --tag-fg: #555; --blockquote-border: #ddd; --blockquote-fg: #666; --code-bg: #f6f6f6; --inline-code-bg: #f0f0f0; --copy-btn-bg: #fff; --copy-btn-border: #ddd; --copy-btn-fg: #555; --surface: #f6f6f6; } /* Dark theme — activated by class="dark" on (set by theme.js). prefers-color-scheme serves as a no-JS fallback. */ @media (prefers-color-scheme: dark) { :root { --bg: #111; --fg: #e0e0e0; --border: #2a2a2a; --muted: #777; --muted-2: #aaa; --muted-3: #bbb; --tag-bg: #252525; --tag-fg: #aaa; --blockquote-border: #444; --blockquote-fg: #999; --code-bg: #1e1e1e; --inline-code-bg: #252525; --copy-btn-bg: #1e1e1e; --copy-btn-border: #444; --copy-btn-fg: #aaa; --surface: #1a1a1a; } } html.dark { --bg: #111; --fg: #e0e0e0; --border: #2a2a2a; --muted: #777; --muted-2: #aaa; --muted-3: #bbb; --tag-bg: #252525; --tag-fg: #aaa; --blockquote-border: #444; --blockquote-fg: #999; --code-bg: #1e1e1e; --inline-code-bg: #252525; --copy-btn-bg: #1e1e1e; --copy-btn-border: #444; --copy-btn-fg: #aaa; --surface: #1a1a1a; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ── */ body { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.7; color: var(--fg); background: var(--bg); transition: background 0.2s, color 0.2s; } a { color: inherit; } a:hover { text-decoration: none; } /* ── Layout container ── */ .container { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; } /* ── Header / Nav ── */ header { border-bottom: 1px solid var(--border); padding: 1.25rem 0; margin-bottom: 3rem; } nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .site-name { font-size: 1.1rem; font-weight: bold; text-decoration: none; } .nav-right { display: flex; align-items: center; gap: 1.5rem; } .nav-links { display: flex; gap: 1.5rem; list-style: none; } .nav-links a { text-decoration: none; font-size: 0.95rem; color: var(--muted-2); } .nav-links a:hover { color: var(--fg); } /* ── Theme toggle button ── */ .theme-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--muted); font-family: inherit; transition: border-color 0.15s, color 0.15s; } .theme-btn:hover { border-color: var(--muted-2); color: var(--fg); } /* ── Footer ── */ footer { border-top: 1px solid var(--border); margin-top: 4rem; padding: 2rem 0; font-size: 0.875rem; color: var(--muted); text-align: center; } /* ── Search bar ── */ .search-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; } .search-bar__input { flex: 1; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); font-family: inherit; font-size: 0.95rem; } .search-bar__input:focus { outline: none; border-color: var(--muted-2); } .search-bar__btn { padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--muted-2); font-family: inherit; font-size: 0.9rem; cursor: pointer; } .search-bar__btn:hover { border-color: var(--muted-2); color: var(--fg); } .search-bar__clear { font-size: 0.85rem; color: var(--muted); text-decoration: none; white-space: nowrap; } .search-bar__clear:hover { color: var(--fg); } .filter-label { font-size: 0.875rem; color: var(--muted); margin-bottom: 1.5rem; } /* ── Pagination ── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; font-size: 0.9rem; } .pagination__btn { text-decoration: none; color: var(--muted-2); border: 1px solid var(--border); padding: 0.3rem 0.75rem; border-radius: 4px; } .pagination__btn:hover { color: var(--fg); border-color: var(--muted-2); } .pagination__info { color: var(--muted); } /* ── Post list page ── */ .site-hero { margin-bottom: 3rem; } .site-hero h1 { font-size: 2rem; } .site-description { color: var(--muted-2); font-size: 1rem; margin-top: 0.25rem; } .post-list { list-style: none; display: flex; flex-direction: column; gap: 2.5rem; } /* Individual post card in the listing */ .post-card { display: grid; gap: 0.5rem; } .post-card__cover { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 4px; margin-bottom: 0.5rem; } .post-card__meta { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.75rem; } .post-card__title { font-size: 1.4rem; line-height: 1.3; } .post-card__title a { text-decoration: none; } .post-card__title a:hover { text-decoration: underline; } .post-card__excerpt { color: var(--muted-3); font-size: 0.95rem; } .post-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* ── Tag pill — used on both post list and post detail ── */ .tag { font-size: 0.78rem; padding: 0.2rem 0.55rem; background: var(--tag-bg); border-radius: 999px; color: var(--tag-fg); text-decoration: none; cursor: pointer; } .tag:hover { opacity: 0.75; } /* ── Empty state ── */ .empty-state { color: var(--muted); font-style: italic; margin-top: 2rem; } /* ── Post detail page ── */ .post-header { margin-bottom: 2.5rem; } .post-header__back { display: inline-block; font-size: 0.875rem; color: var(--muted); text-decoration: none; margin-bottom: 1.5rem; } .post-header__back:hover { color: var(--fg); } .post-header__meta { font-size: 0.875rem; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .post-header__title { font-size: 2.2rem; line-height: 1.25; margin-bottom: 0.75rem; } .post-header__excerpt { font-size: 1.1rem; color: var(--muted-2); font-style: italic; margin-bottom: 1.25rem; } .post-header__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; } .post-header__cover { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 4px; margin-top: 1.5rem; } /* ── Post body — rendered Markdown ── */ .post-body { margin-top: 2.5rem; } .post-body h1, .post-body h2, .post-body h3, .post-body h4 { margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.3; } .post-body p { margin-bottom: 1.25rem; } .post-body ul, .post-body ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .post-body li { margin-bottom: 0.25rem; } .post-body blockquote { border-left: 3px solid var(--blockquote-border); padding-left: 1rem; color: var(--blockquote-fg); margin: 1.5rem 0; } .post-body .code-block { position: relative; margin-bottom: 1.25rem; } .post-body .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.75rem; font-family: inherit; background: var(--copy-btn-bg); border: 1px solid var(--copy-btn-border); border-radius: 3px; cursor: pointer; color: var(--copy-btn-fg); opacity: 0; transition: opacity 0.15s; } .post-body .code-block:hover .copy-btn { opacity: 1; } .post-body .copy-btn.copied { color: #2a7a2a; border-color: #2a7a2a; opacity: 1; } .post-body pre { background: var(--code-bg); padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.875rem; margin-bottom: 0; } .post-body code { font-family: 'Courier New', monospace; font-size: 0.875em; background: var(--inline-code-bg); padding: 0.15em 0.35em; border-radius: 3px; } .post-body pre code { background: none; padding: 0; } .post-body img { max-width: 100%; border-radius: 4px; } .post-body a { text-decoration: underline; color: var(--fg); } .post-body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } .post-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.9rem; } .post-body th, .post-body td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .post-body th { background: var(--surface); }