修两套 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 之后,靠同特指度
的后者压掉页脚链接默认的强调色
This commit is contained in:
Sakurasan
2026-09-29 12:01:11 +08:00
parent baf14897aa
commit e6e4bdc71c
5 changed files with 40 additions and 6 deletions
+12 -4
View File
@@ -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>