diff --git a/frontend/src/components/LinkCard.vue b/frontend/src/components/LinkCard.vue index 41d0c57..c2db575 100644 --- a/frontend/src/components/LinkCard.vue +++ b/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 { diff --git a/frontend/src/components/PostCard.vue b/frontend/src/components/PostCard.vue index bb9cc18..09a2dbd 100644 --- a/frontend/src/components/PostCard.vue +++ b/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 { diff --git a/frontend/src/ui/yohaku/YohakuFoot.vue b/frontend/src/ui/yohaku/YohakuFoot.vue index e34c854..32ae14a 100644 --- a/frontend/src/ui/yohaku/YohakuFoot.vue +++ b/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) // 余白页脚。对应设计稿的