hd-garden 0.4.0 → 0.5.0

package/app/page.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
-import { columns, postHref, posts } from "./lib/content";
-import { ThoughtCard } from "./components/ThoughtCard";
-import { getPublishedThoughts } from "./lib/public-thoughts";
+import { homeListDate } from "./lib/a2-meta";
+import { columns, formatDate, postHref, posts } from "./lib/content";
 import { githubUrl, siteConfig } from "./site.config";
 
 export const metadata = {
@@ -21,10 +20,10 @@ function day(value: string) {
 }
 
 export default function Home() {
-  const recent = [...posts].sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
-  const feature = recent[0];
+  const recentAll = [...posts].sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
+  const feature = recentAll[0];
+  const recent = recentAll.filter((post) => post.path !== feature?.path);
   const pinned = posts.filter((post) => post.pinned);
-  const thoughts = getPublishedThoughts();
   const series = Array.from(
     columns.reduce((result, entry) => {
       const existing = result.get(entry.column ?? "");
@@ -49,7 +48,7 @@ export default function Home() {
       {posts.length > 0 && feature ? (
         <article className="sh-feature" aria-labelledby="ft">
           {feature.cover ? (
-            <div className="cover" style={{ background: "var(--cover)" }}>
+            <div className="cover">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={feature.cover} alt="" />
             </div>
@@ -57,8 +56,7 @@ export default function Home() {
           <div>
             <p className="kicker">
               <span>最新文章</span>
-              <time className="num" dateTime={day(feature.date)}>{day(feature.date)}</time>
-              {feature.topic ? <span>{feature.topic}</span> : null}
+              <time className="num" dateTime={day(feature.date)}>{formatDate(feature.date)}</time>
             </p>
             <h2 id="ft"><Link href={postHref(feature)}>{feature.title}</Link></h2>
             {feature.description ? <p>{feature.description}</p> : null}
@@ -76,12 +74,11 @@ export default function Home() {
             <Link className="sh-more" href="/blog">全部 {posts.length} 篇</Link>
           </div>
           <ol className="sh-rows">
-            {recent.slice(0, 7).map((post) => (
+            {recent.slice(0, 6).map((post) => (
               <li className="sh-row" key={post.path}>
-                <time className="num" dateTime={day(post.date)}>{day(post.date)}</time>
+                <time className="num" dateTime={day(post.date)}>{homeListDate(post.date)}</time>
                 <h3><Link href={postHref(post)}>{post.title}</Link></h3>
                 {post.description ? <p>{post.description}</p> : null}
-                {post.topic ? <Link className="cat" href={`/blog?topic=${encodeURIComponent(post.topic)}`}>{post.topic}</Link> : null}
               </li>
             ))}
           </ol>
@@ -93,7 +90,7 @@ export default function Home() {
               {pinned.map((post) => (
                 <li key={post.path}>
                   <Link href={postHref(post)}>{post.title}</Link>
-                  <span><time className="num" dateTime={day(post.date)}>{day(post.date)}</time>{post.topic ? `　${post.topic}` : ""}</span>
+                  <span><time className="num" dateTime={day(post.date)}>{formatDate(post.date)}</time></span>
                 </li>
               ))}
             </ul>
@@ -129,20 +126,6 @@ export default function Home() {
           </div>
         </section>
       ) : null}
-
-      {thoughts.length > 0 ? (
-        <section className="sh-section" aria-labelledby="h-thoughts">
-          <div className="sh-sec-head">
-            <h2 id="h-thoughts">最近随想</h2>
-            <Link className="sh-more" href="/thoughts">全部随想</Link>
-          </div>
-          <div className="home-thought-list">
-            {thoughts.slice(0, 5).map((thought) => (
-              <ThoughtCard key={thought.slug} thought={thought} />
-            ))}
-          </div>
-        </section>
-      ) : null}
     </main>
   );
 }

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}
@@ -134,33 +146,33 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-intro .links a:hover{color:var(--blue);text-decoration-color:currentColor}
 .sh-feature{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center;margin:56px 0 0}
 .sh-feature:not(:has(.cover)){grid-template-columns:minmax(0,1fr)}
-.sh-feature .cover{border-radius:var(--r-lg);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
-.sh-feature .cover .cover-art{height:86%;width:auto}
+.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 .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}
@@ -172,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}
@@ -212,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}
 
@@ -271,14 +270,9 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-intro{padding:44px 0 0}
   .sh-intro p{font-size:var(--fs-body)}
   .sh-feature{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
-  .sh-feature .cover{border-radius:16px}
   .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;