@chengzhao-dev/dsh-quarto-book 0.4.3 → 0.6.0

package/skills/designing-theme/assets/theme/css/sidebar.css

@@ -1,4 +1,4 @@
-/* dsh-quarto-book Quarto 主题 · 侧栏 / TOC / 翻页卡片（自 common.css 拆分） */
+/* dsh-quarto-book Quarto 主题 · 侧栏 / TOC / 翻页（自 common.css 拆分） */
 
 /* ---------- 侧栏 / TOC ---------- */
 /* 分组标题（sidebar 含分组时生成，向前兼容）：冷灰 docs 风——13px、不大写、正文色；
@@ -25,6 +25,16 @@
     border-right: 1px solid var(--card-border);
   }
 }
+/* 桌面压掉 Quarto 的栏间竖线：`sidebar.border` 默认 true，Quarto 编出
+   `.sidebar.sidebar-navigation:not(.rollup) { border-right: 1px solid … !important }`，
+   会在左栏与正文之间立一道竖墙。桌面三栏是同一张纸上的三个区域，
+   分隔统一归顶栏下那条通栏横线；这里的 !important 只为压过 Quarto 的同名 !important。
+   限定 ≥992px：窄屏的浮层右缘还要那条线当抽屉边。 */
+@media (min-width: 992px) {
+  #quarto-sidebar.sidebar.sidebar-navigation {
+    border-right: 0 !important;
+  }
+}
 #quarto-margin-sidebar {
   background-color: transparent;
 }
@@ -54,9 +64,8 @@ body::-webkit-scrollbar-thumb {
   border-radius: 5px;
 }
 /* 章节链接：通栏条目（margin 0 + 1.5rem 内边距），默认灰字 14px/400/1.4；
-   当前项 = 左侧 2px 竖条 + 弱背景（冷灰 docs 风，无圆角）。
-   单字面字体 + font-synthesis: none 下 600 不会变粗，当前项靠色条和浅底区分，
-   不写无效字重 */
+   当前项只用左侧 2px 色条与正文色，不加底色、不加圆角，像书页边缘的索引。
+   单字面字体 + font-synthesis: none 下 600 不会变粗，不写无效字重 */
 #quarto-sidebar .sidebar-item-text.sidebar-link {
   display: block;
   padding: 0.3rem 1.5rem;
@@ -80,9 +89,9 @@ body::-webkit-scrollbar-thumb {
 }
 #quarto-sidebar .sidebar-item-text.sidebar-link.active {
   color: var(--body-color);
-  background-color: var(--sidebar-active-bg);
+  background-color: transparent;
   border-left: 2px solid var(--accent);
-  border-radius: var(--radius-sm);
+  border-radius: 0;
 }
 /* 嵌套子项（章节分组 / 小节）：缩进由条目 padding-left 提供，色条与 part 标题左缘对齐 */
 #quarto-sidebar .sidebar-section .sidebar-item {
@@ -96,24 +105,52 @@ body::-webkit-scrollbar-thumb {
   line-height: 1.4;
   color: var(--sidebar-fg);
 }
-/* 嵌套激活项：与上一级激活规则同观感，靠色条和浅底区分 */
+/* 嵌套激活项：与上一级激活规则同观感，只靠色条与正文色区分 */
 #quarto-sidebar .sidebar-section .sidebar-item-text.sidebar-link.active {
   color: var(--body-color);
-  background-color: var(--sidebar-active-bg);
+  background-color: transparent;
   border-left: 2px solid var(--accent);
-  border-radius: var(--radius-sm);
+  border-radius: 0;
+}
+/* 可折叠章节的箭头：Quarto 把 .sidebar-item-container 设成 space-between，
+   而 part 标题那条规则又给链接 flex: 1 1 0%，两下一夹，箭头被推到 300px 侧栏的最右缘，
+   离标题隔着一大片空白，像一枚落在栏外的游标。只有「带折叠箭头」的行才收拢标题，
+   不带箭头的 part 标题仍保持通栏底色。 */
+#quarto-sidebar .sidebar-item-container {
+  justify-content: flex-start;
+  align-items: center;
+}
+#quarto-sidebar .sidebar-item-container:has(> .sidebar-item-toggle) > .sidebar-item-text.sidebar-link,
+#quarto-sidebar ul.list-unstyled.mt-1 > li.sidebar-item-section > .sidebar-item-container:has(> .sidebar-item-toggle) > .sidebar-item-text.sidebar-link {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 0;
+}
+#quarto-sidebar .sidebar-item-container > .sidebar-item-toggle {
+  flex: none;
+  margin-left: 0.35rem;
+  padding: 0.15rem;
+  color: var(--text-secondary);
+  line-height: 1;
+}
+#quarto-sidebar .sidebar-item-container > .sidebar-item-toggle:hover {
+  color: var(--body-color);
+}
+#quarto-sidebar .sidebar-item-container > .sidebar-item-toggle i {
+  font-size: 0.72rem;
 }
 
-/* 右 TOC：分组标题 + 滚动高亮（冷灰 docs "On this page" 观感：14px 常规、不大写） */
+/* 右 TOC：分组标题 + 滚动高亮（安静的书页边注：14px 常规、不大写） */
 .sidebar.margin-sidebar nav[role="doc-toc"] h2#toc-title {
   font-size: 0.875rem;
   font-weight: 400;
   color: var(--body-color);
   margin-bottom: 0.75rem;
 }
-/* 基础项（含嵌套）：13px 灰字、无底色圆角（docs TOC 风）。
-   每项保留 1px 左竖线（Quarto 原生），竖线↔文字 0.75rem（覆盖 Quarto 的 .6rem 并修复贴字），
-   边框色令牌化（替换硬编码 #e9ecef，暗色下可见度走 --card-border） */
+/* 基础项（含嵌套）：13px 次要色、无底色圆角（书页边注风）。
+   每项保留 1px 左轨（Quarto 原生），竖线↔文字 0.75rem（覆盖 Quarto 的 .6rem 并修复贴字），
+   边框色令牌化（替换硬编码 #e9ecef，暗色下可见度走 --card-border）。
+   这条轨标的是「读到哪一节」，不是栏与栏的墙；栏间分隔已收成顶栏下那一条通栏横线。 */
 .sidebar.margin-sidebar nav[role="doc-toc"] a.nav-link {
   color: var(--sidebar-fg);
   border-left: 1px solid var(--card-border);
@@ -129,13 +166,13 @@ body::-webkit-scrollbar-thumb {
   display: flex;
   align-items: center;
 }
-/* hover：正文色（!important 压过 Quarto 产物中的 color:#0969da !important） */
+/* hover：正文色（!important 压过 Quarto 产物中写死的亮蓝 !important） */
 .sidebar.margin-sidebar nav[role="doc-toc"] a.nav-link:hover {
   color: var(--body-color) !important;
   background-color: transparent;
 }
 /* 右 TOC 激活项：与侧栏当前项同策略——正文色 + 2px 色条（!important 压过 Quarto
-   写死的 color:#0969da 激活规则，暗色下必须继续压住，不能漏出亮色蓝），无背景 */
+   写死的亮蓝激活规则，暗色下必须继续压住，不能漏出亮色蓝），无背景 */
 .sidebar.margin-sidebar nav[role="doc-toc"] a.nav-link.active {
   color: var(--toc-active) !important;
   background-color: transparent;
@@ -170,11 +207,14 @@ body::-webkit-scrollbar-thumb {
   font-weight: 400;
   color: var(--sidebar-fg);
 }
-/* prev/next 章节导航（卡片式）：文字用 --body-color，箭头改用 < 与 > 符号 */
+/* prev/next 章节导航（书页脚注式）：一条顶线分开正文与翻页，不用边框卡片；
+   字用正文色，hover 才转 accent，箭头仍用 < 与 > 符号 */
 nav.page-navigation {
   display: flex;
-  gap: 1rem;
-  margin-top: 2.5rem;
+  gap: 2rem;
+  margin-top: 3rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--card-border);
 }
 .nav-page.nav-page-previous,
 .nav-page.nav-page-next {
@@ -182,14 +222,15 @@ nav.page-navigation {
 }
 .nav-page .pagination-link {
   display: flex;
-  align-items: center;
-  height: 100%;
-  border: 1px solid var(--card-border);
-  border-radius: var(--radius-md);
+  align-items: baseline;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: var(--body-color);
-  font-size: 0.85rem;
-  padding: 0.9rem 1.1rem;
-  min-height: 3.5rem;
+  font-size: 0.875rem;
+  padding: 0.25rem 0;
+  min-height: 0;
 }
 .nav-page .pagination-link .bi {
   display: none; /* 隐藏 Bootstrap 图标，改用 < > */
@@ -202,12 +243,15 @@ nav.page-navigation {
   content: ">";
   margin-left: 0.5rem;
 }
+.nav-page-next .pagination-link {
+  justify-content: flex-end;
+  text-align: right;
+}
 .nav-page .pagination-link:hover {
   color: var(--accent);
-  border-color: var(--card-hover-border);
 }
 .nav-page .nav-page-text {
-  color: var(--body-color);
+  color: inherit;
 }
 .nav-page .pagination-link:hover .nav-page-text {
   color: var(--accent);
@@ -221,13 +265,14 @@ nav.page-navigation {
 @media (max-width: 767.98px) {
   nav.page-navigation {
     flex-direction: column;
-    gap: 0.75rem;
-    margin-top: 2rem;
+    gap: 0.6rem;
+    margin-top: 2.25rem;
+    padding-top: 1rem;
   }
 
   .nav-page .pagination-link {
-    min-height: 3rem;
-    padding: 0.75rem 0.9rem;
+    min-height: 0;
+    padding: 0.3rem 0;
   }
 }
 

package/skills/designing-theme/assets/theme/css/tokens.css

@@ -5,24 +5,29 @@
    ============================================================ */
 
 body {
-  /* 代码块几何与排版（明暗共用）；宽度不再二次限窄，贴满 840px 正文内容列 */
-  --code-padding: 0.75rem 1rem;
-  --code-font-size: 1rem;
-  --code-line-height: 1.75;
-  --code-title-font-size: 0.8125rem;
-  --code-title-padding: 0.5rem 0.875rem;
-  --code-followup-gap: 1rem;
+  /* 代码块几何与排版（明暗共用）；宽度贴满 840px 正文内容列 */
+  --code-padding: 0.85rem 1.05rem;
+  --code-font-size: 0.9375rem;
+  --code-line-height: 1.7;
+  --code-title-font-size: 0.75rem;
+  --code-title-padding: 0.45rem 0.85rem;
+  --code-followup-gap: 0.9rem;
   --toc-indent: 0.75rem;
-  --transition: 0.15s ease-in-out;
-  /* 结构半径：sm 用于行内小件（kbd/复制钮/侧栏项），md 用于翻页卡等容器，
-     lg 用于首页卡片与图片（2026-09 软化：6/8 → 8/12，圆角统一走令牌） */
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 12px;
-  --code-radius: 8px;
+  --transition: 0.12s ease-in-out;
+  /* 书页半径：编辑注、代码块和图片都收窄；大圆角只留给触控目标 */
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --code-radius: 4px;
+  /* 浮层遮罩：搜索浮层等压在内容之上的一层，深色下加重。 */
+  --overlay-scrim: rgba(0, 0, 0, 0.42);
   /* 正文单字面：LXGW Bright Medium（登记 weight 400，层级靠字号）；
      栈尾 CJK 系统字体兜底：自托管子集缺字时不落浏览器默认宋体 */
   --ui-font: "LXGW Bright Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+  /* 标题与顶栏/侧栏标题：系统黑体栈。标题短、不需要楷体的长文耐读性，
+     黑体自带真 600/700 字重，能把「标题—正文」的字面差与字重差同时拉开；
+     不新增字体文件，只调用系统已装字体（Noto Sans SC / PingFang SC / 微软雅黑）。 */
+  --heading-font: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   /* 栈尾 CJK 系统字体兜底：自托管子集缺字时不落浏览器默认宋体 */
   --mono-font: "LXGW Bright Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
   /* 正文内容列宽 = body-width(872px) 减去 Quarto 栅格两侧各 1rem 内边距后的 840px；
@@ -30,11 +35,24 @@ body {
   --content-width: 840px;
   color: var(--body-color);
   background-color: var(--page-bg);
-  line-height: 1.75;
-  font-size: 1rem;
+  line-height: 1.85;
+  font-size: 1.0625rem;
   font-synthesis: none;
   text-wrap: pretty;
   /* 显式声明浅色，使内嵌 SVG（顶栏品牌徽标）与原生控件跟随页面明暗，
      而不是跟随系统偏好；深色由 palette 的 body.quarto-dark 覆盖。 */
   color-scheme: light;
 }
+
+/* 系统开了「减少动态效果」时，色板切换、箭头翻转、浮层淡入都收敛到瞬时：
+   保留状态变化，去掉过程。 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/skills/designing-theme/assets/theme/includes/fonts.html

@@ -1,2 +1,2 @@
 <!-- 仅注入移动端浏览器地址栏主题色；自托管 @font-face 在 css/fonts.css。 -->
-<meta name="theme-color" id="meta-theme-color" content="#ffffff">
+<meta name="theme-color" id="meta-theme-color" content="#fffcf0">

package/skills/designing-theme/assets/theme/includes/footer.html

@@ -1,6 +1,6 @@
-<div class="footer">
-  © 2026 Quarto Book · 用 <a href="https://quarto.org">Quarto</a> 构建
-</div>
+<footer class="book-footer">
+  <p>© 2026 Quarto Book · 用 <a href="https://quarto.org">Quarto</a> 构建</p>
+</footer>
 <button id="back-to-top" type="button" title="返回顶部" aria-label="返回顶部">↑</button>
 <script>
 (function () {
@@ -21,16 +21,25 @@
 (function () {
   var meta = document.getElementById('meta-theme-color');
   if (!meta) return;
-  // 地址栏主题色直接读 tokens.css 的 --page-bg 计算值（body.quarto-dark 切换后自动取暗色），
-  // 避免与令牌双写漂移；取不到时按当前明暗兜底
+  // 地址栏主题色直接读 tokens.css 的 --page-bg 计算值（明暗与色板切换后自动重取），
+  // 避免与令牌双写漂移；取不到时按当前色板的纸色兜底。
+  // favicon 也在这里再同步一次：file:// 下 Quarto 不写 localStorage，只能靠 body class 变化触发。
   var sync = function () {
+    var solarized = document.documentElement.getAttribute('data-palette') === 'solarized';
     var v = window.getComputedStyle(document.body).getPropertyValue('--page-bg').trim();
-    if (!v) v = document.body.classList.contains('quarto-dark') ? '#22272E' : '#FFFFFF';
+    if (!v) {
+      var dark = document.body.classList.contains('quarto-dark');
+      if (solarized) v = dark ? '#002B36' : '#FDF6E3';
+      else v = dark ? '#100F0F' : '#FFFCF0';
+    }
     meta.setAttribute('content', v);
+    if (window.__bookSyncFavicon) window.__bookSyncFavicon();
   };
   sync();
   if (window.MutationObserver) {
-    new MutationObserver(sync).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    var observer = new MutationObserver(sync);
+    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-palette'] });
   }
 })();
 </script>