Sakurasan
e6e4bdc71c
溢出（两处，同一类成因）：
- 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 之后，靠同特指度
的后者压掉页脚链接默认的强调色
63 lines
2.6 KiB
Vue
63 lines
2.6 KiB
Vue
<script setup>
|
||
import { RouterLink } from 'vue-router'
|
||
import { site } from '../../site'
|
||
import { socialIcon } from '../../socialIcons'
|
||
|
||
// 社交排只放站主自己的账号；源码仓库是「项目信息」，和 classic 页脚一样单独
|
||
// 成行挂在版权旁边（RightRail 的 .foot-meta）。混在一起会让人以为这是本站的
|
||
// 社交身份之一，而它其实是代码仓库入口。
|
||
const PROJECT_REPO = 'https://git.gopher.ink/mirrors2/ONE'
|
||
const social = (site.social_links || []).filter((s) => s && s.url && s.url !== PROJECT_REPO)
|
||
|
||
// 余白页脚。对应设计稿的 <footer class="foot">。
|
||
//
|
||
// 设计稿底部正中还有一枚 <div class="switch">「余白 / 当前主题」的药丸，
|
||
// 按站主要求去掉了（它只标识当前主题名，本站没有多套主题，属于纯装饰，
|
||
// 而且固定在底部会挡住内容）。对应的 .switch 样式也一并从
|
||
// chrome.css / pages.css 里删除，避免留下死规则。
|
||
|
||
const links = [
|
||
{ to: '/', label: '时间线' },
|
||
{ to: '/archive', label: '归档' },
|
||
{ to: '/tags', label: '标签' },
|
||
{ to: '/projects', label: '作品' },
|
||
{ to: '/about', label: '关于' }
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<footer class="foot">
|
||
<div class="quote">What’s left unsaid holds the most weight.</div>
|
||
<div v-if="social.length" class="foot-social">
|
||
<a
|
||
v-for="s in social"
|
||
:key="s.label + s.url"
|
||
:href="s.url"
|
||
:title="s.label"
|
||
:aria-label="s.label"
|
||
:target="s.url.startsWith('http') ? '_blank' : undefined"
|
||
:rel="s.url.startsWith('http') ? 'noopener' : undefined"
|
||
>
|
||
<svg v-if="socialIcon(s.url)" viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(s.url)" /></svg>
|
||
<span v-else>{{ s.label }}</span>
|
||
</a>
|
||
</div>
|
||
<div class="foot-nav">
|
||
<template v-for="(l, i) in links" :key="l.to">
|
||
<span v-if="i" class="sep">·</span>
|
||
<RouterLink :to="l.to">{{ l.label }}</RouterLink>
|
||
</template>
|
||
<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>
|