hd-garden 0.8.1 → 0.8.2

package/app/components/ArticleMeasure.tsx

@@ -92,8 +92,11 @@ export function ArticleMeasure() {
       const articleBox = (article.querySelector(".markdown-body") ?? article).getBoundingClientRect();
       const viewport = root.clientWidth;
       let docMaxRoom: number | null = null;
-      if (docPage) {
-        const sidebar = docPage.querySelector<HTMLElement>(".gdoc-sidebar");
+      // A left rail (the doc sidebar, or a column's article list) bounds the
+      // breakout on both sides, so wide content never runs under it.
+      const columnNav = docPage ? null : document.querySelector<HTMLElement>(".series-nav");
+      if (docPage || columnNav) {
+        const sidebar = docPage ? docPage.querySelector<HTMLElement>(".gdoc-sidebar") : columnNav;
         let leftLimit = 24;
         if (sidebar && getComputedStyle(sidebar).position === "sticky") {
           const sbBox = sidebar.getBoundingClientRect();
@@ -102,7 +105,7 @@ export function ArticleMeasure() {
           }
         }
         let rightLimit = viewport - 24;
-        if (toc && getComputedStyle(toc).display !== "none") {
+        if (docPage && toc && getComputedStyle(toc).display !== "none") {
           const tocBox = toc.getBoundingClientRect();
           if (tocBox.width > 0 && tocBox.left >= articleBox.right - 1) {
             rightLimit = tocBox.left - translatedX(toc) - 16;

package/app/components/MermaidDiagram.tsx

@@ -25,10 +25,11 @@ function renderMermaid(source: string, id: string) {
       themeVariables: {
         darkMode: dark,
         background: token("--paper"),
-        primaryColor: token("--card"),
-        primaryBorderColor: token("--rule-strong"),
+        primaryColor: token("--paper"),
+        primaryBorderColor: token("--ink"),
         primaryTextColor: token("--ink"),
-        lineColor: token("--muted"),
+        textColor: token("--ink"),
+        lineColor: token("--ink"),
         secondaryColor: token("--well"),
         tertiaryColor: token("--well"),
         fontSize: "14px",

package/app/globals.css

@@ -2160,6 +2160,22 @@ button {
   margin: 7px 0;
 }
 
+/* Loose lists (items separated by blank lines) render li > p. The item keeps
+   the list rhythm; paragraphs only space apart inside the same item. */
+.markdown-body :is(ol, ul):not(.g-steps) > li > p {
+  margin: 0;
+}
+
+.markdown-body li > p + p,
+.markdown-body li > p + :is(pre, blockquote, figure, .table-wrap),
+.markdown-body li > :is(pre, blockquote, figure, .table-wrap) + p {
+  margin-top: 12px;
+}
+
+.markdown-body li > p:empty {
+  display: none;
+}
+
 .markdown-body li::marker {
   color: var(--accent);
 }
@@ -2611,7 +2627,7 @@ button {
 
 .markdown-body .mermaid-block {
   margin: 34px 0;
-  background: var(--card);
+  background: transparent;
   border: 1px solid var(--line);
 }
 
@@ -5724,3 +5740,25 @@ html[data-theme="dark"] .search-footer {
     transition: transform 220ms ease, visibility 0s;
   }
 }
+
+/* Mermaid sits on the page: no fills, body-text ink for lines and labels, so
+   it reads in both themes. !important beats the svg's own id-scoped styles. */
+.g-mermaid svg { background: transparent !important; }
+.g-mermaid svg :is(.node, .cluster, .actor, .labelBox, .edgeLabel, .labelBkg) :is(rect, polygon, circle, ellipse, path),
+.g-mermaid svg :is(rect.actor, .edgeLabel rect, .labelBkg, rect.background) {
+  fill: transparent !important;
+  stroke: var(--ink) !important;
+}
+.g-mermaid svg :is(.edgeLabel, .labelBkg) rect { stroke: none !important; }
+.g-mermaid svg :is(.edgeLabel, .labelBkg) { background: transparent !important; }
+.g-mermaid svg :is(.flowchart-link, .edgePath path, .messageLine0, .messageLine1, .relation, .transition, line) {
+  stroke: var(--ink) !important;
+}
+.g-mermaid svg :is(marker path, .arrowheadPath, .arrowMarkerPath, marker) {
+  fill: var(--ink) !important;
+  stroke: var(--ink) !important;
+}
+.g-mermaid svg :is(text, tspan, .nodeLabel, .edgeLabel, .label, .messageText, .actor > tspan) {
+  fill: var(--ink) !important;
+  color: var(--ink) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",