Bear Blog Theme: Vermilion

最近给博客换了一套适配 Bear Blog 的自制主题，取名 Vermilion（朱砂）。 正文用衬线字体窄栏排版，行距放宽，适合中英文混排阅读，背景模拟了泛黄旧书的质感。 截图留念： 完整 CSS： /* ============================================================ Vermilion — Bear Blog theme from https://anotherdayu.com/ Eggshell-gray paper / ink text / cinnabar seal accents / narrow airy column Usage: paste into Dashboard → Themes → Edit theme CSS ============================================================ */ :root { --paper: #f4f3ef; /* Sketch paper: cool-toned eggshell gray */ --ink: #2d2b28; /* Ink: warm gray-black, not pure black */ --ink-soft: #6e6a63; /* Secondary text: dates, footer */ --cinnabar: #a6392e; /* Cinnabar: seal red */ --hairline: #dcd8d0; /* Thin divider lines */ --code-bg: #eceae4; /* Code blocks: half a shade darker than the paper */ /* Paper grain: SVG noise, faint dark speckle in light mode */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root { --paper: #242220; /* Night paper: warm gray-black */ --ink: #d8d4cb; --ink-soft: #8f8a80; --cinnabar: #cf6a58; /* Cinnabar brightened one step */ --hairline: #3b3833; --code-bg: #2e2b28; /* Switch to faint light speckle so grain stays visible on a dark base */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); } } /* ---------- Base typography: narrow, airy column ---------- */ body { background-color: var(--paper); background-image: var(--grain); /* Overlay the paper grain texture */ color: var(--ink); font-family: Georgia, "Iowan Old Style", "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif; font-size: 1.125rem; line-height: 1.9; max-width: 650px; margin: 0 auto; padding: 2.5rem 1.5rem; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; /* Long URLs / words won't break the narrow layout */ -webkit-text-size-adjust: 100%; /* Prevent font inflation on mobile landscape */ } p { margin: 1.4em 0; } /* ---------- Blog title: a cinnabar seal as the signature ---------- */ .title h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); display: inline-block; } /* Signature element: small cinnabar seal square after the title */ .title h1::after { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.45em; background: var(--cinnabar); border-radius: 1px; vertical-align: baseline; } .title h1 a, .title h1 a:visited { color: inherit; text-decoration: none; } /* ---------- Nav: small quiet text, no divider ---------- */ nav { font-size: 0.9rem; letter-spacing: 0.05em; margin-bottom: 2.5rem; } nav a { color: var(--ink-soft); text-decoration: none; margin-right: 1.2em; } nav a:hover { color: var(--cinnabar); } /* ---------- Heading hierarchy: distinguished by size and weight ---------- */ h1, h2, h3, h4 { line-height: 1.5; letter-spacing: 0.02em; margin-top: 2.2em; margin-bottom: 0.6em; } h1 { font-size: 1.6rem; font-weight: 700; } h2 { font-size: 1.3rem; font-weight: 600; } h3 { font-size: 1.05rem; font-weight: 600; } /* ---------- Links: thin cinnabar underline ---------- */ a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cinnabar); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--cinnabar); } /* ---------- Post list: alignment as separation — two columns and whitespace, no divider lines ---------- */ .blog-posts { list-style: none; padding: 0; } .blog-posts li { display: flex; align-items: baseline; gap: 1.2em; padding: 0.3em 0; } /* Fixed-width dates form a tidy left column; titles align into the right column */ .blog-posts li span { flex-shrink: 0; min-width: 6.5em; font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .blog-posts li a { text-decoration: none; } .blog-posts li a:hover { color: var(--cinnabar); } /* ---------- Tags: no underline, quiet gray text ---------- */ .tags a { text-decoration: none; color: var(--ink-soft); font-size: 0.85rem; } .tags a:hover { color: var(--cinnabar); } /* ---------- Blockquote: cinnabar left rule ---------- */ blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--cinnabar); color: var(--ink-soft); } /* ---------- Horizontal rule ---------- */ hr { border: none; border-top: 1px solid var(--hairline); margin: 2.5em auto; width: 60%; } /* ---------- Code ---------- */ .highlight, .code, pre, cod