修两套 UI 的横向溢出 + vivid 页脚把源码入口从社交排里分出来

溢出（两处，同一类成因）：
- vivid 时间线：短文正文用的是 .note .body 而不是 .prose，所以 c6eb0bb 给
  .prose 加的 overflow-wrap:anywhere 没覆盖到它，正文里的裸链接把列撑到 552px
  （视口 516）。补上 anywhere 而非 break-word——要参与 min-content 计算才压得住
- classic 时间线：.shell 的页边距在 640px 断点从 20px 收到 12px，而 .row-feed 的
  负出血要到 520px 才跟着收到 -12px，521~640 这段出血比父容器内边距多 4px，
  整页横向溢出。把出血断点对齐到 640px（桌面视觉不动）
- LinkCard 的 .lc-site 同样补 anywhere：主机名是最典型的不可断行长 token

vivid 页脚：源码仓库入口原先被 concat 进社交数组，和站主的 GitHub/X 排成同一行，
看起来像「又一个社交账号」。改成社交排只放账号（同 classic RightRail 的过滤），
源码图标与版权单独成 .foot-meta 压在页脚最底；样式写在 .foot a 之后，靠同特指度
的后者压掉页脚链接默认的强调色

frontend/src/components/LinkCard.vue

@@ -83,6 +83,9 @@ function open() {
   letter-spacing: 0.04em;
   text-transform: lowercase;
   color: var(--v-muted, var(--faint));
+  /* 主机名是最典型的不可断行长 token（子域一长串），不给它 anywhere
+     就会把卡片左列顶宽、整行溢出 */
+  overflow-wrap: anywhere;
 }
 
 .lc-title {

frontend/src/components/PostCard.vue

@@ -274,11 +274,19 @@ const gridW = computed(() => (props.post.images && props.post.images.length ===
   gap: 6px;
 }
 
+/* 出血必须跟 .shell 的页边距同步：styles.css 里 .shell 在 640px 断点从 20px
+   收到 12px，这里就得同时从 -16px 收到 -12px。之前写的是 520px，于是
+   521~640 这段（窄窗口 / 横屏手机）出血比父容器内边距多 4px，整页横向溢出。 */
+@media (max-width: 640px) {
+  .row-feed {
+    margin: 0 -12px;
+  }
+}
+
 @media (max-width: 520px) {
   .row-feed {
     grid-template-columns: 34px minmax(0, 1fr);
     padding: 16px 12px;
-    margin: 0 -12px;
   }
 
   .avatar {

frontend/src/ui/yohaku/YohakuFoot.vue

@@ -3,10 +3,11 @@ import { RouterLink } from 'vue-router'
 import { site } from '../../site'
 import { socialIcon } from '../../socialIcons'
 
-// 社交按钮与 classic 页脚同源：后台「社交链接」+ 固定源码仓库入口
+// 社交排只放站主自己的账号；源码仓库是「项目信息」，和 classic 页脚一样单独
+// 成行挂在版权旁边（RightRail 的 .foot-meta）。混在一起会让人以为这是本站的
+// 社交身份之一，而它其实是代码仓库入口。
 const PROJECT_REPO = 'https://git.gopher.ink/mirrors2/ONE'
-const social = (site.social_links || []).concat([{ label: '源码', url: PROJECT_REPO }])
-  .filter((s) => s && s.url)
+const social = (site.social_links || []).filter((s) => s && s.url && s.url !== PROJECT_REPO)
 
 // 余白页脚。对应设计稿的 <footer class="foot">。
 //
@@ -41,7 +42,6 @@ const links = [
         <span v-else>{{ s.label }}</span>
       </a>
     </div>
-    <div>{{ site.footer_note }}<template v-if="site.icp"> · {{ site.icp }}</template></div>
     <div class="foot-nav">
       <template v-for="(l, i) in links" :key="l.to">
         <span v-if="i" class="sep">·</span>
@@ -50,5 +50,13 @@ const links = [
       <span class="sep">·</span>
       <a href="/rss.xml">RSS</a>
     </div>
+    <!-- 项目信息：固定的源码入口 + 版权，压在最后。和上面那排社交账号分开——
+         它是代码仓库入口，不是站主的社交身份（顺序同 classic 的 RightRail） -->
+    <div class="foot-meta">
+      <a :href="PROJECT_REPO" title="项目源码" aria-label="项目源码" target="_blank" rel="noopener">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(PROJECT_REPO)" /></svg>
+      </a>
+      <span>{{ site.footer_note }}<template v-if="site.icp"> · {{ site.icp }}</template></span>
+    </div>
   </footer>
 </template>

frontend/src/ui/yohaku/chrome.css

@@ -178,6 +178,16 @@ html[data-ui='vivid'] .foot-social a {color:var(--soft);font-weight:400;
 html[data-ui='vivid'] .foot-social a:hover {color:var(--accent);background:var(--accent-soft);}
 html[data-ui='vivid'] .foot-social svg {width:17px;height:17px;fill:currentColor;}
 html[data-ui='vivid'] .foot-social span {font-size:12px;}
+/* 项目信息行：源码入口 + 版权。刻意不并进 .foot-social——那一排是站主的社交
+   身份，源码是仓库入口，混在一起会让人以为它也是一个社交账号。
+   放在 .foot a 规则之后：两者特指度相同，靠后者才能压掉默认的强调色。 */
+html[data-ui='vivid'] .foot-meta {display:flex;justify-content:center;align-items:center;
+  gap:8px;margin:16px 0 0;color:var(--muted);}
+html[data-ui='vivid'] .foot-meta a {display:inline-flex;align-items:center;justify-content:center;
+  width:26px;height:26px;border-radius:7px;color:var(--soft);font-weight:400;
+  transition:color .25s,background .25s;}
+html[data-ui='vivid'] .foot-meta a:hover {color:var(--accent);background:var(--accent-soft);}
+html[data-ui='vivid'] .foot-meta svg {width:15px;height:15px;fill:currentColor;}
 @media (hover: hover) and (pointer: fine) {
   html[data-ui='vivid'] .foot a:hover {opacity:.75}
 }

frontend/src/ui/yohaku/home.css

@@ -121,7 +121,12 @@ html[data-ui='vivid'] .note {display:block;background:transparent;
 }
 html[data-ui='vivid'] .note .meta {display:flex;gap:10px;align-items:center;
   font-size:12px;color:var(--muted);font-weight:600;margin-top:16px;}
-html[data-ui='vivid'] .note .body {margin:0;font-size:15.5px;line-height:1.8;color:var(--text);}
+html[data-ui='vivid'] .note .body {margin:0;font-size:15.5px;line-height:1.8;color:var(--text);
+  /* 短文正文用的是 .body 而不是 .prose，所以拿不到 styles.css 里 .prose 的
+     overflow-wrap:anywhere——裸链接这种不可断行的长 token 会把整列撑到 550px+，
+     手机上表现为页面横向能滚、右侧留白。用 anywhere 而非 break-word：
+     要让它参与 min-content 计算才真正压得住列宽。 */
+  overflow-wrap:anywhere;}
 html[data-ui='vivid'] .note .body a {color:var(--accent);font-weight:600;
   border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
   transition:border-color .25s;}