|
@@ -0,0 +1,205 @@
|
|
|
|
|
+/* resources/css/modules/_reader-content.css
|
|
|
|
|
+ 阅读器正文排版。所有规则限定在 article.reader-body 作用域内。
|
|
|
|
|
+ 包含:基础排版、Tufte sidenote 集成、响应式断点对齐。
|
|
|
|
|
+*/
|
|
|
|
|
+
|
|
|
|
|
+/* ══════════════════════════════════════════
|
|
|
|
|
+ 一、作用域根:正文必须用 <article class="reader-body"> 包裹
|
|
|
|
|
+ ══════════════════════════════════════════ */
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body {
|
|
|
|
|
+ font-family: 'Noto Serif', Georgia, serif;
|
|
|
|
|
+ font-size: 1.05rem;
|
|
|
|
|
+ line-height: 1.75;
|
|
|
|
|
+ color: inherit;
|
|
|
|
|
+ counter-reset: sidenote-counter;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ── 段落 ── */
|
|
|
|
|
+article.reader-body p {
|
|
|
|
|
+ margin-bottom: 1.25rem;
|
|
|
|
|
+ padding-right: 0;
|
|
|
|
|
+ vertical-align: baseline;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ── 标题 ── */
|
|
|
|
|
+article.reader-body h1,
|
|
|
|
|
+article.reader-body h2,
|
|
|
|
|
+article.reader-body h3,
|
|
|
|
|
+article.reader-body h4 {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ line-height: 1.3;
|
|
|
|
|
+ margin-top: 2rem;
|
|
|
|
|
+ margin-bottom: 0.75rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ── 列表:只在正文内收缩,不影响外部 ── */
|
|
|
|
|
+article.reader-body ul,
|
|
|
|
|
+article.reader-body ol {
|
|
|
|
|
+ padding-left: 1.5rem;
|
|
|
|
|
+ margin-bottom: 1.25rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body li {
|
|
|
|
|
+ line-height: 1.7;
|
|
|
|
|
+ margin-bottom: 0.25rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ── 引用块 ── */
|
|
|
|
|
+article.reader-body blockquote {
|
|
|
|
|
+ margin: 1.5rem 0 1.5rem 0;
|
|
|
|
|
+ padding: 0.75rem 1.25rem;
|
|
|
|
|
+ border-left: 3px solid var(--tblr-border-color);
|
|
|
|
|
+ color: var(--tblr-secondary);
|
|
|
|
|
+ font-style: italic;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ── 分割线 ── */
|
|
|
|
|
+article.reader-body hr {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height: 1px;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
|
|
+ margin: 2em 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ── 代码块 ── */
|
|
|
|
|
+article.reader-body pre > code {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ padding: 1rem;
|
|
|
|
|
+ background: var(--tblr-bg-surface-secondary);
|
|
|
|
|
+ border-radius: var(--tblr-border-radius);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ══════════════════════════════════════════
|
|
|
|
|
+ 二、Tufte Sidenote / Marginnote
|
|
|
|
|
+ 断点与 reader 对齐:>= 992px 浮动显示,< 992px 点击展开
|
|
|
|
|
+ ══════════════════════════════════════════ */
|
|
|
|
|
+
|
|
|
|
|
+/* 触发标签(手机/平板用) */
|
|
|
|
|
+article.reader-body input.margin-toggle {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body label.sidenote-number {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ max-height: 1.75rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ≥ 992px:浮动 sidenote,右侧边栏同时存在,布局一致 */
|
|
|
|
|
+@media (min-width: 992px) {
|
|
|
|
|
+ article.reader-body label.margin-toggle:not(.sidenote-number) {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ article.reader-body .sidenote,
|
|
|
|
|
+ article.reader-body .marginnote {
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ clear: right;
|
|
|
|
|
+ margin-right: -35%; /* 收窄,适配 reader 右侧无大空白的布局 */
|
|
|
|
|
+ width: 28%;
|
|
|
|
|
+ margin-top: 0.3rem;
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ font-size: 0.875rem;
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+ vertical-align: baseline;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border: 1px solid wheat;
|
|
|
|
|
+ padding: 6px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background-color: #f5deb330;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dark-mode article.reader-body .sidenote,
|
|
|
|
|
+ .dark-mode article.reader-body .marginnote {
|
|
|
|
|
+ border-color: #6b5a3e;
|
|
|
|
|
+ background-color: rgba(139, 109, 56, 0.15);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* < 992px:与手机一致,点击展开 */
|
|
|
|
|
+@media (max-width: 991px) {
|
|
|
|
|
+ article.reader-body label.margin-toggle:not(.sidenote-number) {
|
|
|
|
|
+ display: inline;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: var(--tblr-primary);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ article.reader-body .sidenote,
|
|
|
|
|
+ article.reader-body .marginnote {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ article.reader-body .margin-toggle:checked + .sidenote,
|
|
|
|
|
+ article.reader-body .margin-toggle:checked + .marginnote {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ clear: both;
|
|
|
|
|
+ width: 95%;
|
|
|
|
|
+ margin: 0.75rem 2.5%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border: 1px solid wheat;
|
|
|
|
|
+ padding: 6px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background-color: #f5deb330;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* sidenote 编号上标 */
|
|
|
|
|
+article.reader-body .sidenote-number {
|
|
|
|
|
+ counter-increment: sidenote-counter;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body .sidenote-number::after,
|
|
|
|
|
+article.reader-body .sidenote::before {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ vertical-align: baseline;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body .sidenote-number::after {
|
|
|
|
|
+ content: counter(sidenote-counter);
|
|
|
|
|
+ font-size: 0.75rem;
|
|
|
|
|
+ top: -0.5rem;
|
|
|
|
|
+ left: 0.1rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body .sidenote::before {
|
|
|
|
|
+ content: counter(sidenote-counter) ' ';
|
|
|
|
|
+ font-size: 0.75rem;
|
|
|
|
|
+ top: -0.5rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ══════════════════════════════════════════
|
|
|
|
|
+ 三、正文内 origin(原文显示)
|
|
|
|
|
+ ══════════════════════════════════════════ */
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body .origin {
|
|
|
|
|
+ color: darkred;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-mode article.reader-body .origin {
|
|
|
|
|
+ color: #ff8a8a;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ══════════════════════════════════════════
|
|
|
|
|
+ 四、Epigraph(题词)
|
|
|
|
|
+ ══════════════════════════════════════════ */
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body div.epigraph {
|
|
|
|
|
+ margin: 3em 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body div.epigraph > blockquote,
|
|
|
|
|
+article.reader-body div.epigraph > blockquote > p {
|
|
|
|
|
+ font-style: italic;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+article.reader-body div.epigraph > blockquote > footer {
|
|
|
|
|
+ font-style: normal;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+}
|