Bear Blog Theme: Vermilion
<p>最近给博客换了一套适配 <a href='https://bearblog.dev/'>Bear Blog</a> 的自制主题，取名 Vermilion（朱砂）。</p>
<p>正文用衬线字体窄栏排版，行距放宽，适合中英文混排阅读，背景模拟了泛黄旧书的质感。</p>
<p>截图留念：<br>
<img src="https://imgproxy.citrusreader.com/OCevnia_DGBGic4YATqbP6gvSBqI06tjiJfhCgh60x4/raw:1/aHR0cHM6Ly9pLnNlZS55b3UvMjAyNi8wNy8wNC93MUloLzIwMjYwNzA0MjI0MDM3NjE3LmpwZw" alt></p>
<p><img src="https://imgproxy.citrusreader.com/hT7THDvioFQvmxnS7TPNymYr9YwXvQjS0tMXsEqIPvE/raw:1/aHR0cHM6Ly9pLnNlZS55b3UvMjAyNi8wNy8wNC9razJELzIwMjYwNzA0MjI0MDE4Mzc4LmpwZw" alt></p>
<p>完整 CSS：</p>
<div class="highlight"><pre><span></span>/* ============================================================
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, code {
font-family: "SF Mono", Menlo, Consolas, "Sarasa Mono SC", monospace;
font-size: 0.88em;
background: var(--code-bg);
border-radius: 3px;
}
code {
padding: 0.15em 0.4em;
}
pre {
padding: 1em 1.2em;
overflow-x: auto;
line-height: 1.7;
border: 1px solid var(--hairline);
}
pre code {
padding: 0;
background: none;
}
/* ---------- Images and tables ---------- */
img {
max-width: 100%;
border-radius: 2px;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 0.95em;
}
th, td {
padding: 0.5em 0.8em;
border-bottom: 1px solid var(--hairline);
text-align: left;
}
th {
font-weight: 600;
border-bottom-width: 2px;
}
/* ---------- Sub-headings (h2/h3): gray # prefix; h1 and blog title stay clean ---------- */
.post h2::before,
.page h2::before,
.post h3::before,
.page h3::before {
content: "# ";
color: var(--ink-soft);
opacity: 0.6;
font-weight: 400;
}
/* ---------- Post page: date under the title ---------- */
.post time,
time {
font-size: 0.85rem;
color: var(--ink-soft);
letter-spacing: 0.03em;
}
/* ---------- Inputs and buttons: search box, subscribe form ---------- */
/* Covers the common #searchInput search plugin, native search/text inputs,
and the email field on the subscribe page */
input[type="text"],
input[type="search"],
input[type="email"],
#searchInput {
font-family: inherit;
font-size: 0.95rem;
color: var(--ink);
background: transparent;
border: 1px solid var(--hairline);
border-radius: 3px;
padding: 0.5em 0.9em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
outline: none;
transition: border-color 0.15s ease;
-webkit-appearance: none; /* Strip default iOS input chrome */
}
#searchInput {
margin-bottom: 1.5em;
}
input::placeholder {
color: var(--ink-soft);
opacity: 0.7;
}
/* Focus: the border wakes up in cinnabar, echoing the link underlines */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
#searchInput:focus {
border-color: var(--cinnabar);
}
/* Remove the default clear (x) button so the field stays quiet */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
button:not(.upvote-button),
input[type="submit"] {
font-family: inherit;
font-size: 0.9rem;
letter-spacing: 0.03em;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--hairline);
border-radius: 3px;
padding: 0.45em 1.2em;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
button:not(.upvote-button):hover,
input[type="submit"]:hover {
color: var(--cinnabar);
border-color: var(--cinnabar);
}
/* ---------- Footer ---------- */
footer {
margin-top: 3.5rem;
padding-top: 1.2rem;
border-top: 1px solid var(--hairline);
font-size: 0.85rem;
color: var(--ink-soft);
}
footer a {
color: var(--ink-soft);
}
/* Hide the "Made with Bear" attribution (the last span in the footer).
Note: only allowed for paid Bear accounts or contributors —
free accounts hiding it will get their styles reset by the platform. */
footer span:last-child {
display: none;
}
/* ---------- Mobile ---------- */
@media (max-width: 600px) {
body {
padding: 1.4rem 1.1rem;
font-size: 1.05rem;
line-height: 1.85;
}
/* Scale the heading hierarchy down one step so narrow screens don't feel crowded */
.title h1 { font-size: 1.3rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.05rem; }
h1, h2, h3 { margin-top: 1.8em; }
/* Enlarge nav tap targets for thumbs */
nav {
margin-bottom: 1.8rem;
}
nav a {
display: inline-block;
padding: 0.4em 0;
margin-right: 1.4em;
}
/* Post list: date wraps above the title, row spacing increases */
.blog-posts li {
flex-direction: column;
gap: 0.1em;
padding: 0.6em 0;
}
/* Tighter code-block padding, smoother horizontal scrolling */
pre {
padding: 0.8em 1em;
font-size: 0.85em;
-webkit-overflow-scrolling: touch;
}
/* Wide tables scroll horizontally instead of breaking the page */
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
hr { width: 100%; }
}
.upvote-count {
display: none;
}
.upvote-button:disabled::after {
content: 'liked!';
}
</pre></div>
