alchaincyf--huashu-md-html
wehub-resource-sync
437 行
11 KiB
CSS
437 行
11 KiB
CSS
/* ==========================================================================
|
||
huashu-md-html / interactive — Long-form with sidebar TOC + collapsibles
|
||
For: orange-book chapters, technical books, long tutorials, deep guides
|
||
Philosophy: navigable density × sidebar anchor × collapsible sections
|
||
No: cyber-neon, purple gradients, #0D1117 dark blue, emoji as icons
|
||
========================================================================== */
|
||
|
||
:root {
|
||
--font-sans-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
--font-sans-en: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
||
--font-serif-zh: "Source Han Serif SC", "Noto Serif CJK SC", serif;
|
||
--font-mono: "JetBrains Mono", "SF Mono", "IBM Plex Mono", Menlo, monospace;
|
||
|
||
/* Warm-tinted neutral, ink with desaturated forest accent */
|
||
--color-ink: #1f201d;
|
||
--color-ink-soft: #4a4d47;
|
||
--color-ink-mute: #8a8d86;
|
||
--color-rule: #e3e1da;
|
||
--color-rule-strong: #c8c5bb;
|
||
--color-paper: #fbfaf6;
|
||
--color-paper-soft: #f3f1e9;
|
||
--color-accent: #2c5e3f; /* desaturated forest green */
|
||
--color-accent-soft: #3a7651;
|
||
--color-link: #2c5e3f;
|
||
--color-link-hover: #1a3e28;
|
||
--color-quote-bar: #2c5e3f;
|
||
--color-code-bg: #2a2c25;
|
||
--color-code-ink: #e8e6dc;
|
||
--color-toc-active: #2c5e3f;
|
||
|
||
--sidebar-width: 280px;
|
||
--content-max: 780px;
|
||
--gutter: clamp(20px, 3vw, 48px);
|
||
--rhythm: 1.1em;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-ink: #ece9df;
|
||
--color-ink-soft: #c0bdb2;
|
||
--color-ink-mute: #898578;
|
||
--color-rule: #34322b;
|
||
--color-rule-strong: #4a4842;
|
||
--color-paper: #1a1916;
|
||
--color-paper-soft: #22211c;
|
||
--color-accent: #6fb38a;
|
||
--color-accent-soft: #88c5a3;
|
||
--color-link: #88c5a3;
|
||
--color-link-hover: #b3dcc4;
|
||
--color-quote-bar: #6fb38a;
|
||
--color-code-bg: #22211c;
|
||
--color-code-ink: #d8d5c8;
|
||
--color-toc-active: #88c5a3;
|
||
}
|
||
}
|
||
|
||
html {
|
||
font-size: 16px;
|
||
-webkit-text-size-adjust: 100%;
|
||
scroll-behavior: smooth;
|
||
}
|
||
@media (min-width: 1200px) { html { font-size: 17px; } }
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: clamp(32px, 5vw, 64px) var(--gutter) 6rem;
|
||
font-family: var(--font-sans-en), var(--font-sans-zh);
|
||
font-feature-settings: "kern", "liga", "calt";
|
||
line-height: 1.8;
|
||
color: var(--color-ink);
|
||
background: var(--color-paper);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
/* Mobile / narrow viewport: single-column with inline TOC */
|
||
header.title-block,
|
||
main,
|
||
article,
|
||
body > section,
|
||
body > h1, body > h2, body > h3, body > h4, body > h5, body > h6,
|
||
body > p, body > ul, body > ol, body > pre, body > blockquote,
|
||
body > figure, body > table, body > details, body > hr,
|
||
body > .footnotes {
|
||
max-width: var(--content-max);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
nav#TOC, #TOC {
|
||
max-width: var(--content-max);
|
||
margin: 2em auto;
|
||
padding: 1.2em 1.4em;
|
||
background: var(--color-paper-soft);
|
||
border-radius: 6px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* Wide viewport: fixed sidebar TOC + content shifts right */
|
||
@media (min-width: 1100px) {
|
||
body {
|
||
padding-left: calc(var(--sidebar-width) + clamp(32px, 4vw, 80px));
|
||
}
|
||
body > nav#TOC, body > #TOC {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: var(--sidebar-width);
|
||
height: 100vh;
|
||
margin: 0;
|
||
padding: 2.5em 1.6em 2em 2em;
|
||
border-right: 1px solid var(--color-rule);
|
||
border-radius: 0;
|
||
background: var(--color-paper-soft);
|
||
overflow-y: auto;
|
||
font-size: 0.88em;
|
||
z-index: 10;
|
||
}
|
||
/* Main content stays its width, just shifted right by body padding */
|
||
header.title-block, main, article, body > section,
|
||
body > h1, body > h2, body > h3, body > h4, body > h5, body > h6,
|
||
body > p, body > ul, body > ol, body > pre, body > blockquote,
|
||
body > figure, body > table, body > details, body > hr,
|
||
body > .footnotes {
|
||
margin-left: 0;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
/* ---------- title block ---------- */
|
||
|
||
header.title-block {
|
||
margin-bottom: 3em;
|
||
padding-bottom: 1.4em;
|
||
border-bottom: 1px solid var(--color-rule-strong);
|
||
}
|
||
header.title-block .title, body > h1:first-of-type {
|
||
font-family: var(--font-serif-zh);
|
||
font-weight: 600;
|
||
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
|
||
line-height: 1.22;
|
||
letter-spacing: -0.012em;
|
||
margin: 0 0 0.4em;
|
||
}
|
||
header.title-block .subtitle {
|
||
font-family: var(--font-serif-zh);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-size: 1.12rem;
|
||
color: var(--color-ink-soft);
|
||
margin: 0 0 1em;
|
||
}
|
||
header.title-block .author, header.title-block .date {
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-ink-mute);
|
||
margin: 0.2em 0;
|
||
}
|
||
|
||
/* ---------- headings (numbered for navigation) ---------- */
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-serif-zh);
|
||
font-weight: 600;
|
||
line-height: 1.32;
|
||
color: var(--color-ink);
|
||
scroll-margin-top: 2em;
|
||
}
|
||
h1 { font-size: 1.9rem; margin: 0 0 0.5em; }
|
||
h2 {
|
||
font-size: 1.4rem;
|
||
margin: 2.4em 0 0.7em;
|
||
padding-top: 0.6em;
|
||
border-top: 1px solid var(--color-rule);
|
||
position: relative;
|
||
}
|
||
h2:first-child { border-top: none; padding-top: 0; }
|
||
h3 { font-size: 1.18rem; margin: 1.8em 0 0.5em; }
|
||
h4 { font-size: 1.04rem; margin: 1.4em 0 0.4em; }
|
||
h5 {
|
||
font-size: 0.86rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--color-ink-soft);
|
||
margin: 1.4em 0 0.3em;
|
||
}
|
||
h6 { font-size: 0.78rem; color: var(--color-ink-mute); font-weight: 600; }
|
||
|
||
/* anchor pilcrow */
|
||
h1:hover a.anchor::after,
|
||
h2:hover a.anchor::after,
|
||
h3:hover a.anchor::after { opacity: 1; }
|
||
a.anchor::after {
|
||
content: " §";
|
||
margin-left: 0.3em;
|
||
color: var(--color-ink-mute);
|
||
text-decoration: none;
|
||
opacity: 0;
|
||
transition: opacity 150ms;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* ---------- body ---------- */
|
||
|
||
p { margin: 0 0 var(--rhythm); }
|
||
strong, b { font-weight: 600; color: var(--color-ink); }
|
||
em, i { font-style: italic; }
|
||
|
||
a {
|
||
color: var(--color-link);
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 0.06em;
|
||
text-underline-offset: 0.18em;
|
||
text-decoration-color: color-mix(in oklab, var(--color-link), transparent 60%);
|
||
}
|
||
a:hover { color: var(--color-link-hover); text-decoration-color: var(--color-link-hover); }
|
||
|
||
/* ---------- collapsible sections via <details> ---------- */
|
||
|
||
details {
|
||
margin: 1.4em 0;
|
||
padding: 0.6em 1em;
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 4px;
|
||
background: var(--color-paper-soft);
|
||
}
|
||
details[open] { background: var(--color-paper); }
|
||
summary {
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-family: var(--font-serif-zh);
|
||
color: var(--color-ink);
|
||
padding: 0.2em 0;
|
||
list-style: none;
|
||
}
|
||
summary::-webkit-details-marker { display: none; }
|
||
summary::before {
|
||
content: "▸";
|
||
display: inline-block;
|
||
margin-right: 0.5em;
|
||
color: var(--color-accent);
|
||
font-size: 0.85em;
|
||
transition: transform 150ms;
|
||
}
|
||
details[open] summary::before { content: "▾"; }
|
||
details > :not(summary) { margin-top: 0.6em; }
|
||
|
||
/* ---------- blockquote ---------- */
|
||
|
||
blockquote {
|
||
margin: 1.4em 0;
|
||
padding: 0.7em 1.2em;
|
||
border-left: 3px solid var(--color-quote-bar);
|
||
background: var(--color-paper-soft);
|
||
font-style: italic;
|
||
color: var(--color-ink-soft);
|
||
}
|
||
blockquote p:last-child { margin-bottom: 0; }
|
||
|
||
/* ---------- lists ---------- */
|
||
|
||
ul, ol { padding-left: 1.4em; margin: 0 0 var(--rhythm); }
|
||
ul li::marker { color: var(--color-accent); }
|
||
ol li::marker { color: var(--color-accent); font-weight: 600; }
|
||
li { margin: 0.3em 0; }
|
||
|
||
/* task list (GFM) */
|
||
ul.task-list { list-style: none; padding-left: 0.4em; }
|
||
ul.task-list li input[type="checkbox"] {
|
||
margin-right: 0.5em;
|
||
accent-color: var(--color-accent);
|
||
}
|
||
|
||
/* ---------- code (this theme leans dark for code) ---------- */
|
||
|
||
code, kbd, samp {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.86em;
|
||
}
|
||
:not(pre) > code {
|
||
background: color-mix(in oklab, var(--color-accent), transparent 88%);
|
||
color: var(--color-ink);
|
||
padding: 0.1em 0.36em;
|
||
border-radius: 3px;
|
||
}
|
||
pre {
|
||
margin: 1.4em 0;
|
||
padding: 1em 1.2em;
|
||
background: var(--color-code-bg);
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
line-height: 1.6;
|
||
font-size: 0.88rem;
|
||
color: var(--color-code-ink);
|
||
}
|
||
pre code { background: transparent; padding: 0; color: inherit; }
|
||
|
||
/* ---------- tables ---------- */
|
||
|
||
table {
|
||
width: 100%;
|
||
margin: 1.6em 0;
|
||
border-collapse: collapse;
|
||
font-size: 0.93em;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
thead {
|
||
background: var(--color-paper-soft);
|
||
border-top: 2px solid var(--color-ink);
|
||
border-bottom: 1px solid var(--color-rule-strong);
|
||
}
|
||
tbody tr { border-bottom: 1px solid var(--color-rule); }
|
||
tbody tr:last-child { border-bottom: 2px solid var(--color-ink); }
|
||
th, td { text-align: left; padding: 0.5em 0.8em; vertical-align: top; }
|
||
th { font-weight: 600; font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.04em; }
|
||
|
||
/* ---------- figure ---------- */
|
||
|
||
figure {
|
||
margin: 1.6em auto;
|
||
max-width: 100%;
|
||
}
|
||
figure img, p > img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
border-radius: 4px;
|
||
}
|
||
figcaption {
|
||
margin-top: 0.6em;
|
||
font-size: 0.85em;
|
||
color: var(--color-ink-mute);
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---------- TOC styling (sidebar mode) ---------- */
|
||
|
||
#TOC, nav#TOC {
|
||
font-family: var(--font-sans-en), var(--font-sans-zh);
|
||
}
|
||
#TOC > ul, nav#TOC > ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
margin: 0;
|
||
}
|
||
#TOC ul ul, nav#TOC ul ul {
|
||
list-style: none;
|
||
padding-left: 1em;
|
||
margin: 0.2em 0;
|
||
border-left: 1px solid var(--color-rule);
|
||
}
|
||
#TOC li, nav#TOC li {
|
||
margin: 0.3em 0;
|
||
line-height: 1.5;
|
||
}
|
||
#TOC a, nav#TOC a {
|
||
color: var(--color-ink-soft);
|
||
text-decoration: none;
|
||
display: block;
|
||
padding: 0.2em 0.4em;
|
||
border-radius: 3px;
|
||
transition: background 100ms, color 100ms;
|
||
}
|
||
#TOC a:hover, nav#TOC a:hover {
|
||
background: color-mix(in oklab, var(--color-accent), transparent 90%);
|
||
color: var(--color-accent);
|
||
}
|
||
#TOC a.active, nav#TOC a.active {
|
||
color: var(--color-toc-active);
|
||
background: color-mix(in oklab, var(--color-accent), transparent 85%);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* TOC heading */
|
||
#TOC::before, nav#TOC::before {
|
||
content: "目录";
|
||
display: block;
|
||
font-size: 0.78em;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--color-ink-mute);
|
||
padding: 0 0.4em;
|
||
margin-bottom: 0.8em;
|
||
}
|
||
|
||
/* ---------- horizontal rule ---------- */
|
||
|
||
hr {
|
||
border: none;
|
||
height: 1px;
|
||
background: var(--color-rule);
|
||
margin: 2.4em 0;
|
||
}
|
||
|
||
/* ---------- footnotes ---------- */
|
||
|
||
a.footnote-ref, a.footnote-back {
|
||
font-size: 0.78em;
|
||
vertical-align: super;
|
||
text-decoration: none;
|
||
color: var(--color-accent);
|
||
}
|
||
.footnotes {
|
||
margin-top: 3em;
|
||
padding-top: 1em;
|
||
border-top: 1px solid var(--color-rule);
|
||
font-size: 0.9em;
|
||
color: var(--color-ink-soft);
|
||
}
|
||
|
||
/* ---------- TOC scrollspy (vanilla JS, optional) ---------- */
|
||
/* This requires the template.html5 to include the small spy script. */
|
||
|
||
/* ---------- print ---------- */
|
||
|
||
@media print {
|
||
body { display: block; padding: 0; background: white; color: black; }
|
||
body > nav#TOC, body > #TOC { display: none; }
|
||
main, article { padding: 0; max-width: 100%; }
|
||
pre, code, blockquote { background: #f4f4f4 !important; color: #222 !important; }
|
||
pre, blockquote, table, figure, details { break-inside: avoid; }
|
||
details { border: 1px solid #aaa; }
|
||
details > summary { font-size: 1em; }
|
||
h2 { break-before: page; }
|
||
a { color: black; text-decoration: underline; }
|
||
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #666; }
|
||
}
|
||
|
||
::selection {
|
||
background: color-mix(in oklab, var(--color-accent), transparent 78%);
|
||
color: var(--color-ink);
|
||
}
|