hd-garden 0.4.1 → 0.5.0

package/app/styles/a2.css

@@ -105,7 +105,8 @@ body {
 }
 
 .post-reading-page {
-  width: min(1340px, 100%);
+  /* rail + gap + 740px column + gap + rail, plus side padding */
+  width: min(1360px, 100%);
   padding-right: 32px;
   padding-left: 32px;
 }
@@ -191,6 +192,55 @@ body {
   font-size: var(--fs-meta);
 }
 
+.article-tagrow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.article-tagrow li {
+  margin: 0;
+  padding: 0;
+}
+
+.article-tagrow .tag-chip {
+  position: relative;
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--chip);
+  color: var(--soft);
+  font-size: var(--fs-meta);
+  line-height: 1.6;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* 44px tall hit area without enlarging the chip */
+.article-tagrow .tag-chip::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 44px;
+  transform: translateY(-50%);
+}
+
+.article-tagrow .tag-chip:hover {
+  background: var(--chip-hover);
+  color: var(--ink);
+}
+
+.article-tagrow .tag-chip:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+}
+
 .cover-card.cover-img,
 .article-hero.article-cover {
   width: 100%;
@@ -262,7 +312,7 @@ body {
 
 .post-reading-page .e-content,
 .column-reading-page .e-content {
-  --qa-bar: #e2e4e8;
+  --qa-bar: #e8e6dc;
   --qa-text: #737069;
 }
 
@@ -277,7 +327,7 @@ html[data-theme="dark"] .column-reading-page .e-content {
 .lead.quote-plain {
   margin: 0 0 32px;
   padding: 2px 0 2px 24px;
-  border-left: 3px solid var(--qa-bar, #e2e4e8);
+  border-left: 3px solid var(--qa-bar, #e8e6dc);
   border-radius: 0;
   background: none;
   color: var(--qa-text, #737069);
@@ -331,7 +381,13 @@ html[data-theme="dark"] .column-reading-page .e-content {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
-  text-decoration-color: rgb(27 26 24 / 28%);
+  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
+  transition: text-decoration-color 0.15s ease;
+}
+
+.markdown-body a:hover {
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
 }
 
 .markdown-body a.ext {
@@ -349,6 +405,7 @@ html[data-theme="dark"] .markdown-body a.ext {
 .markdown-body a.ext:hover {
   text-decoration-style: solid;
   text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
 }
 
 .markdown-body :not(pre) > code {
@@ -381,9 +438,9 @@ html[data-theme="dark"] .markdown-body a.ext {
 }
 
 .markdown-body.prose {
-  --al-note: #2c55b4;
-  --al-note-bg: #eef3fc;
-  --al-note-line: rgba(44, 85, 180, 0.22);
+  --al-note: #30302e;
+  --al-note-bg: #f0eee6;
+  --al-note-line: rgba(20, 20, 19, 0.18);
   --al-tip: #2d6a3e;
   --al-tip-bg: #edf5ef;
   --al-tip-line: rgba(45, 106, 62, 0.22);
@@ -402,9 +459,9 @@ html[data-theme="dark"] .markdown-body a.ext {
 :root[data-theme="dark"] .prose,
 html[data-theme="dark"] .markdown-body.prose,
 html[data-theme="dark"] .prose {
-  --al-note: #93b2f4;
-  --al-note-bg: rgba(147, 178, 244, 0.09);
-  --al-note-line: rgba(147, 178, 244, 0.28);
+  --al-note: #eeece7;
+  --al-note-bg: rgba(238, 236, 231, 0.06);
+  --al-note-line: rgba(238, 236, 231, 0.22);
   --al-tip: #8fcb9f;
   --al-tip-bg: rgba(143, 203, 159, 0.08);
   --al-tip-line: rgba(143, 203, 159, 0.26);
@@ -578,7 +635,9 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
 }
 
 .markdown-body .fig-card img {
-  width: 100%;
+  width: auto;
+  max-width: 100%;
+  margin: 0 auto;
   border-radius: 8px;
 }
 
@@ -611,6 +670,7 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
 }
 
 .table-wrap table {
+  margin: 0;
   border-collapse: collapse;
   width: 100%;
   font-size: var(--fs-small);
@@ -620,6 +680,8 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
 .table-wrap th,
 .table-wrap td {
   padding: 10px 14px;
+  overflow-wrap: normal;
+  word-break: normal;
   text-align: left;
   vertical-align: top;
   border-bottom: 1px solid var(--rule);
@@ -651,10 +713,27 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   color: var(--grey);
 }
 
+.toc .toc-item-row {
+  position: relative;
+  padding-left: 10px;
+}
+
 .toc a[aria-current="location"],
 .toc li.active > .toc-item-row > a {
   color: var(--ink);
-  font-weight: 500;
+  font-weight: 600;
+}
+
+/* The current section carries an ink bar, so it reads without colour. */
+.toc li.active > .toc-item-row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.2em;
+  bottom: 0.2em;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--ink);
 }
 
 @media (min-width: 1200px) {
@@ -670,6 +749,7 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
 
 @media (prefers-reduced-motion: reduce) {
   .toc,
+  .markdown-body a,
   .h1-line,
   .ux-btn {
     transition: none;
@@ -1182,7 +1262,8 @@ html.ux-lock body {
 .hljs-built_in,
 .hljs-type,
 .hljs-meta .hljs-keyword {
-  color: #2c55b4;
+  color: #30302e;
+  font-weight: 600;
 }
 
 .hljs-string,
@@ -1216,7 +1297,7 @@ html.ux-lock body {
 html[data-theme="dark"] .hljs-keyword,
 html[data-theme="dark"] .hljs-built_in,
 html[data-theme="dark"] .hljs-type {
-  color: #93b2f4;
+  color: #eeece7;
 }
 
 html[data-theme="dark"] .hljs-string {
@@ -1285,7 +1366,7 @@ html[data-theme="dark"] .hljs-params {
 
   .cover-card,
   .article-hero.article-cover {
-    border-radius: 16px;
+    border-radius: var(--r-lg);
     margin-top: 28px;
   }
 }

package/app/styles/shell.css

@@ -1,9 +1,11 @@
 
 /* ===== Hedon Garden shell (A2). Tokens shared with the A2 article. ===== */
 :root{
-  --paper:#F8F7F3; --card:#FFFFFF; --ink:#1B1A18; --text:#2D2C29; --soft:#4A4844; --muted:#6E6B64;
-  --rule:#E6E3DC; --rule-strong:#D6D2C9; --well:#F0EEE8; --tint:rgba(27,26,24,.055);
-  --blue:#2C55B4; --blue-tint:#EAF0FC; --blue-line:rgba(44,85,180,.28); --cover:#5E86E0;
+  --paper:#FAF9F5; --card:#FFFFFF; --ink:#1B1A18; --text:#2D2C29; --soft:#4A4844; --muted:#6E6B64;
+  --rule:#E6E3DC; --rule-strong:#D6D2C9; --well:#F0EEE6; --tint:rgba(27,26,24,.055);
+  --blue:#30302E; --blue-tint:#F0EEE6; --blue-line:rgba(20,20,19,.22); --cover:#C2C0B6;
+  --chip:#F0EEE6; --chip-hover:#E8E5DB; --chip-on:#30302E; --chip-on-text:#FAF9F5;
+  --card-hover:#F5F4ED; --card-shadow:0 1px 2px rgba(20,20,19,.04),0 4px 14px rgba(20,20,19,.05);
   --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
   --serif:"Source Han Serif SC","Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong","Source Serif 4",Georgia,serif;
   --fs-display:46px; --fs-h2:26px; --fs-lead:20px; --fs-body:17px; --fs-small:14px; --fs-meta:13px;
@@ -12,9 +14,11 @@
   color-scheme:light;
 }
 html[data-theme="dark"]{
-  --paper:#161513; --card:#1E1D1A; --ink:#EEECE7; --text:#DCD9D2; --soft:#BDB9B0; --muted:#A09B91;
-  --rule:#2F2D29; --rule-strong:#45423C; --well:#22211D; --tint:rgba(238,236,231,.07);
-  --blue:#93B2F4; --blue-tint:rgba(147,178,244,.13); --blue-line:rgba(147,178,244,.35); --cover:#4C72C9;
+  --paper:#1F1E1D; --card:#262624; --ink:#EEECE7; --text:#DCD9D2; --soft:#BDB9B0; --muted:#A09B91;
+  --rule:#3D3D3A; --rule-strong:#4D4C48; --well:#262624; --tint:rgba(238,236,231,.07);
+  --blue:#EEECE7; --blue-tint:#30302E; --blue-line:rgba(238,236,231,.25); --cover:#4D4C48;
+  --chip:#30302E; --chip-hover:#3D3D3A; --chip-on:#EEECE7; --chip-on-text:#1F1E1D;
+  --card-hover:#30302E; --card-shadow:0 1px 2px rgba(0,0,0,.18);
   color-scheme:dark;
 }
 *,*::before,*::after{box-sizing:border-box}
@@ -82,20 +86,28 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-rail li a[aria-current="true"]{color:var(--blue)}
 .sh-rail li[hidden]{display:none}
 
-/* ---------- filter tabs ---------- */
-.sh-filters{display:flex;flex-wrap:wrap;gap:6px 4px;margin:0 0 8px;padding:0;list-style:none}
-.sh-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--soft);
-  font:400 15px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
-.sh-chip .n{font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
-@media (hover:hover){.sh-chip:hover{background:var(--tint);color:var(--ink)}}
-.sh-chip[aria-current="true"],.sh-chip[aria-pressed="true"]{background:var(--blue-tint);color:var(--blue);font-weight:600}
-.sh-chip[aria-current="true"] .n,.sh-chip[aria-pressed="true"] .n{color:var(--blue)}
-.sh-filters .extra[hidden]{display:none}
-.sh-chip.toggle{color:var(--muted)}
-.sh-chip.toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s ease}
-.sh-chip.toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
+/* ---------- tag filter (/blog) and tag index (/tags) ---------- */
+.sh-tagfilter{margin:0 0 8px}
+.sh-tagchips{display:flex;flex-wrap:wrap;gap:12px 8px;list-style:none;margin:0;padding:0}
+.sh-tagchip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:var(--chip);color:var(--soft);font:400 var(--fs-small)/1.4 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
+.sh-tagchip::after,.sh-tagmore::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
+.sh-tagchip .n{font-size:var(--fs-meta);color:inherit;opacity:.72;font-variant-numeric:tabular-nums}
+@media (hover:hover){.sh-tagchip:hover:not(:disabled){background:var(--chip-hover);color:var(--ink)}}
+.sh-tagchip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-text);font-weight:600}
+@media (hover:hover){.sh-tagchip[aria-pressed="true"]:hover{background:var(--chip-on);color:var(--chip-on-text)}}
+.sh-tagchip[aria-pressed="true"] .n{opacity:.85}
+.sh-tagchip .x{font-size:15px;line-height:1;margin-left:-1px}
+.sh-tagchip:disabled{background:var(--tint);color:var(--muted);cursor:default;opacity:.55}
+.sh-tagchip:focus-visible,.sh-tagmore:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
+.sh-tagmore{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:4px 2px;border:0;background:none;color:var(--blue);font:400 var(--fs-small)/1.4 var(--sans);cursor:pointer;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
+@media (hover:hover){.sh-tagmore:hover{text-decoration-thickness:2px}}
+.sh-tagempty{margin-top:16px;padding:40px 0;border-top:1px solid var(--rule-strong)}
+.sh-tagempty p{margin:0 0 4px;color:var(--soft);font-size:var(--fs-body);line-height:1.7}
+.sh-tagempty .acts{display:flex;flex-wrap:wrap;gap:0 24px}
+.sh-tagempty button{font:inherit;font-size:var(--fs-small);color:var(--blue);background:none;border:0;padding:0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
+.sh-tagindex{margin-top:8px}
 .sh-status{display:flex;align-items:center;gap:12px;min-height:40px;margin:4px 0 0;font-size:var(--fs-small);color:var(--muted)}
-.sh-status > button,.sh-status > a{font:inherit;color:var(--blue);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
+.sh-status > button,.sh-status > a{font:inherit;color:var(--blue);background:none;border:0;padding:6px 0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
 .sh-view{display:inline-flex;margin-left:auto;border:1px solid var(--rule);border-radius:var(--r);padding:2px;background:var(--card)}
 .sh-view button{font:400 13px/1 var(--sans);color:var(--muted);background:none;border:0;border-radius:9px;padding:7px 10px;cursor:pointer;min-height:30px}
 .sh-view button[aria-pressed="true"]{background:var(--well);color:var(--ink);font-weight:600}
@@ -118,7 +130,7 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-row .cat:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
 .sh-row .pin{font:400 12px/1 var(--sans);color:var(--blue);background:var(--blue-tint);border-radius:6px;padding:3px 6px;margin-left:8px;vertical-align:2px;white-space:nowrap}
 .sh-row .series{font-weight:400;color:var(--muted);font-size:var(--fs-meta);margin-left:8px;white-space:nowrap}
-.sh-row:hover h3 a{color:var(--blue)}
+.sh-row:hover h3 a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
 .sh-row h3 a{transition:color .15s ease}
 .is-compact .sh-row{padding:11px 0 12px}
 .is-compact .sh-row p{display:none}
@@ -136,32 +148,31 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-feature:not(:has(.cover)){grid-template-columns:minmax(0,1fr)}
 .sh-feature .cover{border-radius:var(--r-lg);aspect-ratio:auto;display:block;overflow:hidden;background:none}
 .sh-feature .cover img{display:block;width:100%;height:auto}
-.sh-feature .cover .cover-art{height:86%;width:auto}
 .sh-feature .kicker{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-small);color:var(--muted);margin:0 0 12px}
 .sh-feature h2{font:700 30px/1.35 var(--sans);color:var(--ink);margin:0;text-wrap:balance}
 .sh-feature h2 a{text-decoration:none}
 .sh-feature h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
-.sh-feature:hover h2 a{color:var(--blue)}
+.sh-feature:hover h2 a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
 .sh-feature:has(h2 a:focus-visible){outline:2px solid var(--blue);outline-offset:8px;border-radius:var(--r-lg)}
 .sh-feature h2 a:focus-visible{outline:none}
 .sh-feature p{margin:14px 0 0;font-size:var(--fs-body);color:var(--soft)}
 .sh-feature .tags{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:var(--fs-meta);color:var(--muted)}
 .sh-home-grid{display:grid;grid-template-columns:minmax(0,var(--list)) minmax(0,320px);gap:0 72px;justify-content:space-between;align-items:start}
-.sh-home-grid .sh-row{grid-template-columns:96px minmax(0,1fr) auto}
+.sh-home-grid .sh-row{grid-template-columns:minmax(6em,max-content) minmax(0,1fr) auto}
+.sh-home-grid .sh-row time{min-width:6em;font-variant-numeric:tabular-nums}
 .sh-side-list{list-style:none;margin:0;padding:0}
 .sh-side-list li{position:relative;padding:16px 0;border-bottom:1px solid var(--rule)}
 .sh-side-list a{font:600 15px/1.6 var(--sans);color:var(--ink);text-decoration:none}
 .sh-side-list a::after{content:"";position:absolute;inset:0}
-.sh-side-list li:hover a{color:var(--blue)}
+.sh-side-list li:hover a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
 .sh-side-list span{display:block;margin-top:4px;font-size:var(--fs-meta);color:var(--muted)}
 
 /* ---------- column (series) cards ---------- */
 .sh-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
-.sh-col{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:border-color .15s ease}
-.sh-col:hover{border-color:var(--rule-strong)}
-.sh-col .cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--r-lg) - 8px);margin:8px 8px 0;overflow:hidden}
-.sh-col .cover .cover-art{height:84%;width:auto}
-.sh-col .body{padding:18px 22px 22px}
+.sh-col{position:relative;display:flex;flex-direction:column;background:transparent;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:background-color .15s ease,box-shadow .15s ease}
+@media (hover:hover){.sh-col:hover{background:var(--card-hover);box-shadow:var(--card-shadow)}}
+.sh-col .cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border-radius:0;margin:0;overflow:hidden}
+.sh-col .body{padding:16px 18px 18px}
 .sh-col h3{margin:0;font:700 var(--fs-lead)/1.4 var(--sans);color:var(--ink)}
 .sh-col h3 a{text-decoration:none}
 .sh-col h3 a::after{content:"";position:absolute;inset:0}
@@ -173,22 +184,6 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 
 /* columns page */
 
-/* ---------- tags ---------- */
-.sh-tagcloud{display:flex;flex-wrap:wrap;gap:6px 4px;list-style:none;margin:0;padding:0}
-.sh-tagcloud .sh-chip{border-color:var(--rule);background:var(--card)}
-@media (hover:hover){.sh-tagcloud .sh-chip:hover{border-color:var(--rule-strong);background:var(--card)}}
-.sh-tagcloud .sh-chip[aria-pressed="true"]{background:var(--blue-tint);border-color:var(--blue-line)}
-.sh-once{margin:20px 0 0}
-.sh-once summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;color:var(--soft);padding:8px 0;list-style:none}
-.sh-once summary::-webkit-details-marker{display:none}
-.sh-once summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s ease}
-.sh-once[open] summary svg{transform:rotate(180deg)}
-.sh-once .sh-tagcloud{margin-top:10px}
-.sh-once .sh-chip{min-height:32px;font-size:var(--fs-small)}
-.sh-tagresult{margin-top:40px;scroll-margin-top:calc(var(--hdr) + 16px)}
-.sh-tagresult h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:0;padding-bottom:12px;border-bottom:1px solid var(--rule-strong)}
-.sh-tagresult .hint{color:var(--muted);font-size:15px;padding:20px 0}
-
 /* ---------- about ---------- */
 .sh-about{display:grid;grid-template-columns:minmax(0,var(--list)) var(--side);gap:0 72px;justify-content:space-between}
 .sh-prose p{margin:0 0 1.1em}
@@ -213,8 +208,11 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-foot p{margin:0}
 .sh-foot strong{color:var(--ink);font:600 15px/1 var(--serif);margin-right:12px}
 .sh-foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
-.sh-foot a{color:var(--soft);text-decoration:none;padding:4px 0}
+.sh-foot a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--soft);text-decoration:none;padding:4px 0;white-space:nowrap}
 .sh-foot a:hover{color:var(--blue)}
+.sh-foot .footer-framework a{display:inline;min-height:0;padding:0;color:var(--soft);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
+.sh-foot-links{display:flex;align-items:center;gap:20px}
+.sh-foot-links a svg{display:block;flex:none;width:16px;height:16px}
 .sh-demo{width:100%;font-size:var(--fs-meta);color:var(--muted)}
 .sh-demo a{text-decoration:underline;text-underline-offset:3px}
 
@@ -275,10 +273,6 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-feature h2{font-size:24px}
   .sh-section{margin-top:56px}
   .sh-cols{grid-template-columns:minmax(0,1fr);gap:16px}
-  /* one-line, scrollable filter row on phones */
-  .sh-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 4px;padding:0 20px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent)}
-  .sh-filters::-webkit-scrollbar{display:none}
-  .sh-filters.is-open{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none}
   .sh-row,.sh-home-grid .sh-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:16px 0 17px}
   .sh-row time{grid-column:1;grid-row:1;font-size:var(--fs-meta);padding:0}
   .sh-row .cat{grid-column:2;grid-row:1;padding:0}
@@ -286,7 +280,7 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-row h3{font-size:var(--fs-body)}
   .sh-404{padding:48px 0 0}
   .sh-footer{margin-top:80px}
-  .sh-foot{padding:24px 20px 40px;flex-direction:column}
+  .sh-foot{padding:24px 20px 40px;flex-direction:column;align-items:flex-start}
   /* palette becomes a full-screen sheet */
   .sh-pal{padding:0}
   .sh-pal-box{width:100%;max-height:none;height:100%;border-radius:0;border:0;animation:none}
@@ -338,8 +332,8 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
 .sh-note-audio{margin:16px 0 0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
 .sh-note-audio figcaption{font-size:var(--fs-meta);color:var(--muted);margin:0 0 8px}
 .sh-note-audio audio{display:block;width:100%;height:36px}
-.sh-note-link{display:grid;gap:2px;margin:16px 0 0;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);text-decoration:none;transition:border-color .15s ease}
-@media (hover:hover){.sh-note-link:hover{border-color:var(--rule-strong)}.sh-note-link:hover .t{color:var(--blue)}}
+.sh-note-link{display:grid;gap:2px;margin:16px 0 0;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);text-decoration:none;transition:background-color .15s ease,box-shadow .15s ease}
+@media (hover:hover){.sh-note-link:hover{background:var(--card-hover);box-shadow:var(--card-shadow)}}
 .sh-note-link .h{font-size:var(--fs-meta);color:var(--muted)}
 .sh-note-link .t{font:600 15px/1.5 var(--sans);color:var(--ink)}
 .sh-note-link .t::after{content:" ↗";color:var(--muted);font-weight:400}
@@ -361,7 +355,7 @@ html[data-theme="dark"] .sh-note-imgs img,html[data-theme="dark"] .sh-note-video
 /* ===== About: GitHub project cards (live) ===== */
 .sh-repos{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .sh-repos > li{position:relative;margin:0;display:grid;grid-template-rows:24px 48px 20px;row-gap:6px;padding:16px 18px;
-  border:1px solid var(--rule-strong);border-radius:var(--r);background:transparent;transition:border-color .15s ease}
+  border:1px solid var(--rule-strong);border-radius:var(--r);background:transparent;transition:background-color .15s ease,box-shadow .15s ease}
 .sh-repos h3{margin:0;display:flex;align-items:center;gap:8px;min-width:0;font:600 16px/24px var(--sans)}
 .sh-repos h3 a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
 .sh-repos h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
@@ -376,9 +370,8 @@ html[data-theme="dark"] .sh-note-imgs img,html[data-theme="dark"] .sh-note-video
 .sh-repos .meta svg{width:14px;height:14px;fill:currentColor}
 .sh-repos .meta time{margin-left:auto}
 @media (hover:hover){
-  .sh-repos > li:not(.sk):hover{border-color:var(--muted)}
-  .sh-repos > li:not(.sk):hover h3 a{color:var(--blue)}
-  .sh-repos > li:not(.sk):hover .arr{color:var(--blue);transform:translate(2px,-2px)}
+  .sh-repos > li:not(.sk):hover{background:var(--card-hover);box-shadow:var(--card-shadow)}
+  .sh-repos > li:not(.sk):hover .arr{color:var(--ink)}
 }
 /* skeleton card: same box, same rows */
 .sh-repos > li.sk{overflow:hidden;border-color:var(--rule)}
@@ -396,7 +389,6 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 .sh-series{display:grid;grid-template-columns:240px minmax(0,760px);gap:0 40px;padding:36px 0;border-top:1px solid var(--rule)}
 .sh-series:first-of-type{border-top:0;padding-top:8px}
 .sh-series .cover{aspect-ratio:16/9;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;align-self:start}
-.sh-series .cover .cover-art{height:84%;width:auto}
 .sh-series h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:0;scroll-margin-top:calc(var(--hdr) + 16px)}
 .sh-series .count{font-size:var(--fs-small);color:var(--muted);margin:6px 0 0}
 .sh-series .desc{font-size:var(--fs-body);line-height:1.7;color:var(--soft);margin:12px 0 0}
@@ -435,4 +427,7 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 .is-compact .sh-row .incol{display:none}
 @media (max-width:820px){.sh-row .incol{grid-column:1 / -1}}
 
-
+/* Cards answer hover with a warm fill and a faint shadow; nothing moves. */
+@media (prefers-reduced-motion:reduce){
+  .sh-col,.sh-note-link,.sh-repos > li,.sh-tagchip{transition:none}
+}

package/app/styles/tokens.css

@@ -2,8 +2,8 @@
 
 :root,
 :root[data-theme="light"] {
-  --paper: #f8f7f3;
-  --paper-deep: #f0eee8;
+  --paper: #faf9f5;
+  --paper-deep: #f0eee6;
   --card: #ffffff;
   --ink: #1b1a18;
   --ink-soft: #2d2c29;
@@ -16,15 +16,22 @@
   --rule-strong: #d6d2c9;
   --line: #e6e3dc;
   --line-strong: #d6d2c9;
-  --well: #f0eee8;
+  --well: #f0eee6;
   --tint: rgb(27 26 24 / 5.5%);
-  --blue: #2c55b4;
-  --blue-tint: #eaf0fc;
-  --blue-line: rgb(44 85 180 / 28%);
-  --cover: #5e86e0;
+  /* "blue" is the accent slot; the accent is now ink, there is no blue. */
+  --blue: #30302e;
+  --blue-tint: #f0eee6;
+  --blue-line: rgb(20 20 19 / 22%);
+  --cover: #c2c0b6;
+  --chip: #f0eee6;
+  --chip-hover: #e8e5db;
+  --chip-on: #30302e;
+  --chip-on-text: #faf9f5;
+  --card-hover: #f5f4ed;
+  --card-shadow: 0 1px 2px rgb(20 20 19 / 4%), 0 4px 14px rgb(20 20 19 / 5%);
   --accent: var(--blue);
   --accent-soft: var(--blue-tint);
-  --selection: #eaf0fc;
+  --selection: #e8e5db;
   --hl: #ffe58f;
   --red: #d82d48;
   --red-text: #c2263f;
@@ -42,7 +49,7 @@
   --fs-meta: 13px;
   --r: 12px;
   --r-lg: 24px;
-  --col: 700px;
+  --col: 740px;
   --rail: 232px;
   --gap: 48px;
   --content: var(--col);
@@ -54,9 +61,9 @@
 
 :root[data-theme="dark"],
 html[data-theme="dark"] {
-  --paper: #161513;
-  --paper-deep: #22211d;
-  --card: #1e1d1a;
+  --paper: #1f1e1d;
+  --paper-deep: #262624;
+  --card: #262624;
   --ink: #eeece7;
   --ink-soft: #dcd9d2;
   --text: #dcd9d2;
@@ -64,19 +71,25 @@ html[data-theme="dark"] {
   --muted: #a09b91;
   --grey: #a09b91;
   --faint: #a09b91;
-  --rule: #2f2d29;
-  --rule-strong: #45423c;
-  --line: #2f2d29;
-  --line-strong: #45423c;
-  --well: #22211d;
+  --rule: #3d3d3a;
+  --rule-strong: #4d4c48;
+  --line: #3d3d3a;
+  --line-strong: #4d4c48;
+  --well: #262624;
   --tint: rgb(238 236 231 / 7%);
-  --blue: #93b2f4;
-  --blue-tint: rgb(147 178 244 / 13%);
-  --blue-line: rgb(147 178 244 / 35%);
-  --cover: #4c72c9;
+  --blue: #eeece7;
+  --blue-tint: #30302e;
+  --blue-line: rgb(238 236 231 / 25%);
+  --cover: #4d4c48;
+  --chip: #30302e;
+  --chip-hover: #3d3d3a;
+  --chip-on: #eeece7;
+  --chip-on-text: #1f1e1d;
+  --card-hover: #30302e;
+  --card-shadow: 0 1px 2px rgb(0 0 0 / 18%);
   --accent: var(--blue);
   --accent-soft: var(--blue-tint);
-  --selection: rgb(147 178 244 / 22%);
+  --selection: rgb(238 236 231 / 18%);
   --hl: #6b5a2a;
   --red: #f29aab;
   --red-text: #f29aab;

package/app/tags/page.tsx

@@ -1,28 +1,39 @@
+import Link from "next/link";
 import { Suspense } from "react";
 import { posts } from "../lib/content";
-import { TagIndex } from "../components/TagIndex";
+import { tagCounts, tagFilterHref } from "../lib/tag-filter";
+import { TagRedirect } from "../components/TagRedirect";
 import { siteDocumentTitle } from "../site.config";
 
 export const metadata = {
   title: siteDocumentTitle,
-  description: "按标签浏览文章。标签不是专栏，也不是分类。",
+  description: "全部标签。",
 };
 
 export default function TagsPage() {
-  const counts = new Map<string, number>();
-  for (const post of posts) {
-    for (const tag of post.tags ?? []) counts.set(tag, (counts.get(tag) ?? 0) + 1);
-  }
-  const once = [...counts.values()].filter((count) => count === 1).length;
+  const tags = tagCounts(posts);
   return (
     <main className="sh-main" id="content">
       <div className="sh-head">
         <h1>标签</h1>
-        <p className="sh-deck">{counts.size} 个标签，按使用次数排序；只用过一次的 {once} 个收在下面。点选一个标签，下方列出对应文章。</p>
+        <p className="sh-deck">{tags.length} 个标签，按文章数排序。点一个标签，查看带这个标签的文章。</p>
       </div>
       <Suspense>
-        <TagIndex posts={posts} />
+        <TagRedirect />
       </Suspense>
+      {tags.length ? (
+        <ul className="sh-tagchips sh-tagindex" aria-label="全部标签">
+          {tags.map(([tag, count]) => (
+            <li key={tag}>
+              <Link className="sh-tagchip" href={tagFilterHref([tag])}>
+                #{tag}<span className="n num">{count}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="sh-deck">还没有标签。</p>
+      )}
     </main>
   );
 }

package/package.json

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

package/scripts/build-content.mjs

@@ -184,7 +184,7 @@ function assertWidgetSidecar(src, markdownPath, sourcePath) {
   ) {
     fail(
       sourcePath,
-      `widget src 必须位于同名目录 ${stem}/ 内的 .html 或 .pdf，例如 ./${stem}/notes.pdf`,
+      `widget src 必须位于同名目录 ${stem}/ 内的 .html 或 .pdf，例如 ./${stem}/diagram.html`,
     );
   }
   return absoluteSource;
@@ -337,7 +337,6 @@ function validateAndNormalize(data, content, markdownPath, kind, sourcePath, lin
 
   if (kind === "post") {
     requireString(data, "description", sourcePath);
-    requireString(data, "topic", sourcePath);
   }
   if (kind === "thought" && data.mediaType) {
     if (!["image", "audio", "video", "link", "text"].includes(data.mediaType)) {
@@ -348,6 +347,8 @@ function validateAndNormalize(data, content, markdownPath, kind, sourcePath, lin
   const publishTime = Date.parse(publishAt ?? date);
   if (!includeDrafts && (data.draft === true || publishTime > now)) return null;
   delete data.coverAlt;
+  // Older posts may still carry `topic:`; it is no longer used.
+  delete data.topic;
   const references = normalizeReferences(data.references, sourcePath);
   delete data.references;
 
@@ -562,7 +563,6 @@ export type ContentEntry = {
   updated?: string;
   publishAt?: string;
   draft?: boolean;
-  topic?: string;
   tags?: string[];
   references?: { title: string; url?: string }[];
   pinned?: boolean;

package/scripts/check-post.mjs

@@ -272,9 +272,6 @@ const checkFile = (filePath) => {
   if (typeof data.description !== "string" || !data.description.trim()) {
     error(errors, "missing-description", 1, `${sourcePath}: front matter 缺少有效的 description`);
   }
-  if (typeof data.topic !== "string" || !data.topic.trim()) {
-    error(errors, "missing-topic", 1, `${sourcePath}: front matter 缺少有效的 topic`);
-  }
   if (data.slug !== undefined) {
     error(errors, "unexpected-slug", 1, `${sourcePath}: 不要写 slug，文件名就是标识`);
   }