alchaincyf--huashu-md-html
wehub-resource-sync
613 行
15 KiB
CSS
613 行
15 KiB
CSS
/* ==========================================================================
|
||
huashu-md-html / article — Editorial magazine theme (v0.2)
|
||
For: essays, blog posts, deep-reading articles, single-column long-form
|
||
Inspired by: Tufte CSS · Penguin Books · The New Yorker · Pentagram
|
||
Signatures: drop cap · margin notes · pull quotes · numbered sections
|
||
========================================================================== */
|
||
|
||
:root {
|
||
/* Type families (loaded via Google Fonts in template.html5) */
|
||
--font-display: "Newsreader", "Source Han Serif SC", "Songti SC", "Iowan Old Style", Georgia, serif;
|
||
--font-body: "Newsreader", "Source Han Serif SC", "Songti SC", "Iowan Old Style", Georgia, serif;
|
||
--font-meta: "IBM Plex Sans", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
|
||
|
||
/* Color (Penguin Books × Anthropic restraint) */
|
||
--ink: #1a1612;
|
||
--ink-2: #4a4338;
|
||
--ink-3: #7a7062;
|
||
--rule: #d9d2c0;
|
||
--rule-2: #ebe5d4;
|
||
--paper: #fbf7ee;
|
||
--paper-2: #f3ecd9;
|
||
--accent: #b04a1a;
|
||
--accent-2: #d97342;
|
||
--link: #8a3911;
|
||
--link-h: #5e2509;
|
||
--code-bg: #2a2622;
|
||
--code-ink: #e9e2d0;
|
||
--code-accent: #d97342;
|
||
|
||
/* Layout */
|
||
--col: 720px;
|
||
--col-wide: 920px;
|
||
--margin: 220px; /* margin-note column width on wide screens */
|
||
--gutter: clamp(20px, 4vw, 56px);
|
||
--rhythm: 1.2em;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--ink: #ece4d2;
|
||
--ink-2: #c0b89f;
|
||
--ink-3: #88806b;
|
||
--rule: #3a3326;
|
||
--rule-2: #2c261a;
|
||
--paper: #1a1610;
|
||
--paper-2: #221d14;
|
||
--accent: #e08560;
|
||
--accent-2: #f0a07d;
|
||
--link: #e09060;
|
||
--link-h: #f0b18b;
|
||
--code-bg: #0e0c08;
|
||
--code-ink: #ece4d2;
|
||
}
|
||
}
|
||
|
||
/* ---------- base ---------- */
|
||
|
||
* { box-sizing: border-box; }
|
||
html {
|
||
font-size: 18px;
|
||
text-size-adjust: 100%;
|
||
-webkit-text-size-adjust: 100%;
|
||
scroll-behavior: smooth;
|
||
}
|
||
@media (max-width: 600px) { html { font-size: 17px; } }
|
||
@media (min-width: 1400px) { html { font-size: 19px; } }
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-body);
|
||
font-feature-settings: "kern", "liga", "calt", "ss01", "onum";
|
||
font-variant-numeric: oldstyle-nums proportional-nums;
|
||
line-height: 1.72;
|
||
color: var(--ink);
|
||
background: var(--paper);
|
||
text-rendering: geometricPrecision;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-wrap: pretty;
|
||
hanging-punctuation: first allow-end last;
|
||
}
|
||
|
||
/* Reading progress bar — top hairline, fills with accent */
|
||
#reading-progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 2px;
|
||
width: 0;
|
||
background: var(--accent);
|
||
z-index: 1000;
|
||
transition: width 80ms linear;
|
||
}
|
||
|
||
/* ---------- prose column with optional margin gutter ---------- */
|
||
|
||
.title-block,
|
||
main {
|
||
max-width: var(--col);
|
||
margin: 0 auto;
|
||
padding: clamp(48px, 7vw, 112px) var(--gutter) 6rem;
|
||
}
|
||
|
||
/* On wide screens, give an extra right gutter for margin notes */
|
||
@media (min-width: 1180px) {
|
||
main {
|
||
max-width: calc(var(--col) + var(--margin));
|
||
padding-right: var(--margin);
|
||
position: relative;
|
||
}
|
||
.title-block {
|
||
max-width: calc(var(--col) + var(--margin));
|
||
padding-right: var(--margin);
|
||
}
|
||
}
|
||
|
||
/* ---------- title block ---------- */
|
||
|
||
.title-block {
|
||
margin-bottom: 4em;
|
||
padding-bottom: 2em;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.title-block .eyebrow {
|
||
font-family: var(--font-meta);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin: 0 0 1em;
|
||
}
|
||
.title-block .title,
|
||
body > h1:first-of-type {
|
||
font-family: var(--font-display);
|
||
font-weight: 600;
|
||
font-size: clamp(2.2rem, 5vw, 3.4rem);
|
||
line-height: 1.1;
|
||
letter-spacing: -0.018em;
|
||
margin: 0 0 0.4em;
|
||
color: var(--ink);
|
||
text-wrap: balance;
|
||
}
|
||
.title-block .subtitle {
|
||
font-family: var(--font-display);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-size: 1.35rem;
|
||
line-height: 1.4;
|
||
color: var(--ink-2);
|
||
margin: 0 0 1.4em;
|
||
text-wrap: balance;
|
||
}
|
||
.title-block .byline {
|
||
font-family: var(--font-meta);
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-3);
|
||
margin: 0;
|
||
}
|
||
.title-block .date {
|
||
font-family: var(--font-meta);
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.06em;
|
||
color: var(--ink-3);
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 0.4em;
|
||
}
|
||
|
||
/* ---------- section counters ---------- */
|
||
|
||
main > article { counter-reset: h2-num; }
|
||
article h2 { counter-increment: h2-num; }
|
||
article h2::before {
|
||
content: "§" counter(h2-num);
|
||
display: block;
|
||
font-family: var(--font-meta);
|
||
font-weight: 500;
|
||
font-size: 0.7em;
|
||
letter-spacing: 0.08em;
|
||
color: var(--accent);
|
||
margin-bottom: 0.4em;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
/* ---------- headings ---------- */
|
||
|
||
article h1, article h2, article h3, article h4, article h5, article h6 {
|
||
font-family: var(--font-display);
|
||
font-weight: 600;
|
||
line-height: 1.22;
|
||
color: var(--ink);
|
||
letter-spacing: -0.008em;
|
||
text-wrap: balance;
|
||
}
|
||
article h1 { font-size: 2.0rem; margin: 0 0 0.6em; }
|
||
article h2 {
|
||
font-size: 1.65rem;
|
||
margin: 2.6em 0 0.7em;
|
||
padding-top: 1.2em;
|
||
position: relative;
|
||
}
|
||
article h2::after {
|
||
/* Hairline rule above h2, 30% width, left-aligned (Kenya Hara restraint) */
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 30%;
|
||
height: 1px;
|
||
background: var(--rule);
|
||
}
|
||
article h2:first-child { padding-top: 0; }
|
||
article h2:first-child::after { display: none; }
|
||
article h3 { font-size: 1.3rem; margin: 2em 0 0.5em; }
|
||
article h4 { font-size: 1.1rem; font-style: italic; font-weight: 500; margin: 1.6em 0 0.4em; }
|
||
article h5 {
|
||
font-family: var(--font-meta);
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--ink-2);
|
||
margin: 1.6em 0 0.4em;
|
||
}
|
||
article h6 { font-size: 0.85rem; color: var(--ink-3); font-weight: 500; }
|
||
|
||
/* ---------- paragraphs ---------- */
|
||
|
||
article p {
|
||
margin: 0 0 var(--rhythm);
|
||
orphans: 3;
|
||
widows: 3;
|
||
}
|
||
|
||
/* Drop cap on the first paragraph of the article */
|
||
article > p:first-of-type::first-letter,
|
||
article > section:first-of-type > p:first-of-type::first-letter {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
float: left;
|
||
font-size: 4.2em;
|
||
line-height: 0.85;
|
||
margin: 0.05em 0.12em 0 -0.04em;
|
||
color: var(--accent);
|
||
font-feature-settings: "lnum";
|
||
}
|
||
|
||
/* Lead paragraph (first ¶ after H1) gets a touch larger */
|
||
article > p:first-of-type {
|
||
font-size: 1.08em;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* ---------- inline elements ---------- */
|
||
|
||
article strong, article b {
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
background: linear-gradient(to bottom, transparent 65%, color-mix(in oklab, var(--accent), transparent 82%) 65%);
|
||
}
|
||
article em, article i { font-style: italic; }
|
||
|
||
article a {
|
||
color: var(--link);
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 0.5px;
|
||
text-underline-offset: 0.22em;
|
||
text-decoration-color: color-mix(in oklab, var(--link), transparent 60%);
|
||
transition: color 120ms ease, text-decoration-color 120ms ease;
|
||
}
|
||
article a:hover {
|
||
color: var(--link-h);
|
||
text-decoration-color: var(--link-h);
|
||
}
|
||
|
||
article small { font-size: 0.86em; color: var(--ink-2); }
|
||
|
||
/* ---------- pull quote (custom — usable from md via blockquote with > class) ---------- */
|
||
|
||
article blockquote {
|
||
margin: 2em 0;
|
||
padding: 0 1.2em;
|
||
border-left: 3px solid var(--accent);
|
||
font-style: italic;
|
||
color: var(--ink-2);
|
||
background: transparent;
|
||
}
|
||
article blockquote p:last-child { margin-bottom: 0; }
|
||
article blockquote cite {
|
||
display: block;
|
||
margin-top: 0.6em;
|
||
font-style: normal;
|
||
font-family: var(--font-meta);
|
||
font-size: 0.85em;
|
||
letter-spacing: 0.04em;
|
||
color: var(--ink-3);
|
||
}
|
||
article blockquote cite::before { content: "— "; }
|
||
|
||
/* "Pull quote" — bigger, bleeds into margin on wide screens */
|
||
article blockquote.pull,
|
||
article blockquote.epigraph {
|
||
margin: 2.4em 0;
|
||
padding: 0;
|
||
border: none;
|
||
font-family: var(--font-display);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
|
||
line-height: 1.32;
|
||
color: var(--ink);
|
||
letter-spacing: -0.005em;
|
||
text-wrap: balance;
|
||
}
|
||
article blockquote.pull::before,
|
||
article blockquote.epigraph::before {
|
||
content: "";
|
||
display: block;
|
||
width: 80px;
|
||
height: 1px;
|
||
background: var(--accent);
|
||
margin-bottom: 0.8em;
|
||
}
|
||
|
||
/* ---------- margin note (Tufte-style sidenote) ---------- */
|
||
|
||
article .marginnote,
|
||
article .sidenote {
|
||
display: block;
|
||
font-family: var(--font-meta);
|
||
font-size: 0.8rem;
|
||
line-height: 1.45;
|
||
color: var(--ink-2);
|
||
margin: 0.4em 0 1em;
|
||
padding: 0.6em 0.8em;
|
||
border-left: 2px solid var(--accent);
|
||
background: var(--paper-2);
|
||
}
|
||
@media (min-width: 1180px) {
|
||
article .marginnote,
|
||
article .sidenote {
|
||
float: right;
|
||
clear: right;
|
||
width: calc(var(--margin) - 60px);
|
||
margin-right: calc(var(--margin) * -1 + 30px);
|
||
margin-top: 0.4em;
|
||
background: transparent;
|
||
padding: 0;
|
||
border: none;
|
||
border-top: 1px solid var(--rule);
|
||
padding-top: 0.5em;
|
||
}
|
||
}
|
||
|
||
/* ---------- lists ---------- */
|
||
|
||
article ul, article ol { padding-left: 1.4em; margin: 0 0 var(--rhythm); }
|
||
article ul { list-style: none; }
|
||
article ul > li { position: relative; padding-left: 0.2em; }
|
||
article ul > li::before {
|
||
content: "—";
|
||
position: absolute;
|
||
left: -1.2em;
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
article ol li::marker {
|
||
color: var(--accent);
|
||
font-variant-numeric: oldstyle-nums;
|
||
font-weight: 500;
|
||
}
|
||
article li { margin: 0.35em 0; }
|
||
article li > ul, article li > ol { margin: 0.4em 0; }
|
||
|
||
article dl { margin: 0 0 var(--rhythm); }
|
||
article dt {
|
||
font-weight: 600;
|
||
margin-top: 0.6em;
|
||
font-family: var(--font-meta);
|
||
font-size: 0.9em;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
article dd { margin: 0.2em 0 0.4em 1.4em; color: var(--ink-2); }
|
||
|
||
/* ---------- code ---------- */
|
||
|
||
code, kbd, samp {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.84em;
|
||
font-feature-settings: "calt", "liga";
|
||
}
|
||
article :not(pre) > code {
|
||
background: color-mix(in oklab, var(--accent), transparent 88%);
|
||
color: var(--ink);
|
||
padding: 0.12em 0.4em;
|
||
border-radius: 3px;
|
||
border: 1px solid color-mix(in oklab, var(--accent), transparent 75%);
|
||
white-space: nowrap;
|
||
}
|
||
article pre {
|
||
margin: 1.6em 0;
|
||
padding: 1.1em 1.3em;
|
||
background: var(--code-bg);
|
||
color: var(--code-ink);
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
line-height: 1.6;
|
||
font-size: 0.88rem;
|
||
position: relative;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
article pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
border: none;
|
||
padding: 0;
|
||
white-space: pre;
|
||
}
|
||
|
||
/* Code copy button */
|
||
.copy-btn {
|
||
position: absolute;
|
||
top: 0.6em;
|
||
right: 0.6em;
|
||
padding: 0.25em 0.7em;
|
||
font-family: var(--font-meta);
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: var(--code-ink);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 150ms ease, background 150ms ease;
|
||
}
|
||
pre:hover .copy-btn,
|
||
.copy-btn:focus { opacity: 1; }
|
||
.copy-btn:hover {
|
||
background: rgba(255, 255, 255, 0.16);
|
||
}
|
||
|
||
/* ---------- tables ---------- */
|
||
|
||
article table {
|
||
width: 100%;
|
||
margin: 1.8em 0;
|
||
border-collapse: collapse;
|
||
font-size: 0.95em;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
article caption {
|
||
caption-side: top;
|
||
font-style: italic;
|
||
color: var(--ink-3);
|
||
text-align: left;
|
||
margin-bottom: 0.5em;
|
||
font-family: var(--font-meta);
|
||
font-size: 0.85em;
|
||
}
|
||
article thead {
|
||
border-top: 2px solid var(--ink);
|
||
border-bottom: 1px solid var(--ink);
|
||
}
|
||
article tbody tr { border-bottom: 1px solid var(--rule); }
|
||
article tbody tr:last-child { border-bottom: 2px solid var(--ink); }
|
||
article th, article td {
|
||
text-align: left;
|
||
padding: 0.7em 0.9em;
|
||
vertical-align: top;
|
||
}
|
||
article th {
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
font-family: var(--font-meta);
|
||
font-size: 0.85em;
|
||
text-transform: uppercase;
|
||
color: var(--ink);
|
||
}
|
||
|
||
/* ---------- figure & images ---------- */
|
||
|
||
article figure {
|
||
margin: 2em auto;
|
||
max-width: var(--col-wide);
|
||
padding: 0;
|
||
}
|
||
article figure img,
|
||
article p > img,
|
||
article > img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
border-radius: 2px;
|
||
box-shadow: 0 1px 3px color-mix(in oklab, var(--ink), transparent 92%);
|
||
}
|
||
article figcaption {
|
||
margin-top: 0.8em;
|
||
font-size: 0.85em;
|
||
font-family: var(--font-meta);
|
||
font-style: italic;
|
||
text-align: center;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
/* Image lightbox lite (added by template script) */
|
||
.img-lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: color-mix(in oklab, var(--ink), transparent 6%);
|
||
z-index: 1500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 5vw;
|
||
cursor: zoom-out;
|
||
animation: fade-in 180ms ease;
|
||
}
|
||
.img-lightbox img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
|
||
}
|
||
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||
|
||
/* ---------- horizontal rule (signature: 30% width, left-leaning) ---------- */
|
||
|
||
article hr {
|
||
border: none;
|
||
height: 1px;
|
||
background: var(--rule);
|
||
margin: 3em 0;
|
||
width: 30%;
|
||
}
|
||
|
||
/* ---------- TOC ---------- */
|
||
|
||
#TOC, nav#TOC {
|
||
margin: 0 0 3em;
|
||
padding: 1.4em 0;
|
||
border-top: 1px solid var(--rule);
|
||
border-bottom: 1px solid var(--rule);
|
||
font-family: var(--font-meta);
|
||
font-size: 0.88em;
|
||
}
|
||
#TOC::before {
|
||
content: "目次";
|
||
display: block;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 0.8em;
|
||
}
|
||
#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: 1.4em; }
|
||
#TOC li { margin: 0.3em 0; }
|
||
#TOC a, nav#TOC a {
|
||
color: var(--ink-2);
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted transparent;
|
||
transition: color 100ms, border-color 100ms;
|
||
}
|
||
#TOC a:hover, nav#TOC a:hover {
|
||
color: var(--accent);
|
||
border-bottom-color: var(--accent);
|
||
}
|
||
|
||
/* ---------- footnotes ---------- */
|
||
|
||
a.footnote-ref, a.footnote-back {
|
||
font-size: 0.7em;
|
||
vertical-align: super;
|
||
text-decoration: none;
|
||
color: var(--accent);
|
||
font-feature-settings: "lnum";
|
||
}
|
||
.footnotes {
|
||
margin-top: 4em;
|
||
padding-top: 1.5em;
|
||
border-top: 1px solid var(--rule);
|
||
font-size: 0.92em;
|
||
color: var(--ink-2);
|
||
}
|
||
.footnotes ol { padding-left: 1.4em; }
|
||
|
||
/* ---------- print ---------- */
|
||
|
||
@media print {
|
||
#reading-progress, .copy-btn { display: none; }
|
||
body { background: white; color: black; padding: 0; }
|
||
pre, code { background: #f4efe2 !important; color: #2a2622 !important; }
|
||
pre { border: 1px solid #ddd6c1; }
|
||
article a { color: black; text-decoration: underline; }
|
||
article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #666; }
|
||
article h2 { break-before: page; }
|
||
article h2::after { display: none; }
|
||
pre, blockquote, table, figure { break-inside: avoid; }
|
||
}
|
||
|
||
::selection {
|
||
background: color-mix(in oklab, var(--accent), transparent 72%);
|
||
color: var(--ink);
|
||
}
|