新站标「一横」:墨圆 + 一道白横,接进两套 UI 与图标

立意:既是字母 O 也是汉字「一」,对应站名 ONE / 一个博客。

- favicon.svg 重画:横杠用 fill-rule=evenodd 挖成真洞而不是叠一块纸色矩形,
  所以纸感 / 墨色暗端 / 后台卡片任何底色都直接透过去,不必为皮肤各出一版;
  SVG 内带 prefers-color-scheme,标签页深浅自动翻色
- 补 favicon-16/32.png(不认 SVG 的老浏览器)与 apple-touch-icon.png 180
  (iOS 不支持 SVG 且会把透明压成黑底,故铺纸色实底)。PNG 由临时 Go 程序
  按 8x8 子采样光栅化生成,生成器未入库,产物是资产
- LogoMark.vue 内联 SVG 组件:颜色跟 currentColor,尺寸由外层给
- 接入 6 处:classic 桌面左栏品牌位(原来是个排版字符 ○)、移动顶栏 brand、
  时间线头像位、详情页头像位、快发盒头像位;vivid 顶栏与底部 dock 品牌标记
  (右下角绿色在线点保留,它是「有人在写」的信号,不属于被替换的部分)
- 顺带清理:三处只为算首字母的死代码(initial 与只服务于它的 userName)、
  vivid 里一条被同特指度靠后规则完全覆盖的 .av 死规则;标记 wrapper 统一加
  flex:none,否则站名一长会被压成椭圆
This commit is contained in:
Sakurasan committed 2026-09-29 21:04:55 +08:00
1 parent e6e4bdc71c
commit 7e302c51a6
13 files changed
+87 -84

No files matched your search

+3 -3
View File
@@ -3,6 +3,7 @@ import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { site } from '../../site'
import NavBurger from '../../components/NavBurger.vue'
import LogoMark from '../../components/LogoMark.vue'
// 余白顶栏。对应设计稿的 <header class="top">:品牌 / 导航 / 操作三块,
// 滚动过 8px 加 .scrolled(设计稿的「四态里的第一态」)。
@@ -27,7 +28,6 @@ const links = [
{ to: '/about', label: '关于', en: 'About' }
]
const initial = () => (site.author_name || site.site_title || 'O').trim().slice(0, 1).toUpperCase()
const title = () => site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE'
function isOn(l) {
@@ -94,7 +94,7 @@ function toggleTheme() {
<header class="top" :class="{ scrolled }">
<div class="top-in">
<RouterLink class="brand" to="/">
<span class="av">{{ initial() }}</span>
<span class="av"><LogoMark /></span>
<span>{{ title() }}</span>
</RouterLink>
<nav class="nav" aria-label="站点导航">
@@ -115,7 +115,7 @@ function toggleTheme() {
必须待在 .top 外面:.top 有 backdrop-filter,会给 fixed 后代当包含块。 -->
<div class="dock">
<RouterLink class="dock-brand" to="/">
<span class="av">{{ initial() }}</span>
<span class="av"><LogoMark /></span>
<span>{{ title() }}</span>
</RouterLink>
<NavBurger
+6 -12
View File
@@ -15,15 +15,8 @@ html[data-ui='vivid'] .brand {display:flex;align-items:center;gap:10px;
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .brand:hover {transform:scale(1.04)}
}
/* .av 品牌标记:顶栏一枚,菜单里那枚随菜单头一起撤了(顶栏浮在菜单上) */
html[data-ui='vivid'] .brand .av {width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent-deep));
display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
position:relative;}
html[data-ui='vivid'] .brand .av::after {content:"";position:absolute;right:-1px;bottom:-1px;
width:9px;height:9px;border-radius:50%;
background:#34c759;border:2px solid var(--paper);}
/* .av 品牌标记:原来这里是一条 .brand .av 规则,但它被下面 :is(.brand,.dock-brand)
那条同特指度、且位置更靠后的规则完整覆盖了——等于死规则。合并成一条,避免两处漂移。 */
html[data-ui='vivid'] .nav {display:flex;gap:2px;flex:1;justify-content:center}
html[data-ui='vivid'] .nav a {position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
padding:8px 14px;border-radius:999px;
@@ -74,9 +67,10 @@ html[data-ui='vivid'] .dock-brand {display:flex;align-items:center;gap:9px;
@media (max-width:720px) {
html[data-ui='vivid'] .dock {display:flex}
}
html[data-ui='vivid'] :is(.brand, .dock-brand) .av {width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent-deep));
display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
/* 品牌标记换成站标「一横」:它自身就是圆,所以去掉渐变圆盘与首字母字号;
右下角那颗绿色在线点保留(它是「有人在写」的信号,不属于被替换的部分)。 */
html[data-ui='vivid'] :is(.brand, .dock-brand) .av {width:30px;height:30px;flex:none;
color:var(--ink);
box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
position:relative;}
html[data-ui='vivid'] :is(.brand, .dock-brand) .av::after {content:"";position:absolute;right:-1px;bottom:-1px;