新站标「一横」:墨圆 + 一道白横,接进两套 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:
1 parent
e6e4bdc71c
commit
7e302c51a6
13 files changed
+87
-84
No files matched your search
@@ -6,6 +6,7 @@ import RightRail from '../components/RightRail.vue'
|
||||
import YohakuArticle from '../ui/yohaku/YohakuArticle.vue'
|
||||
import CommentSection from '../components/comments/CommentSection.vue'
|
||||
import LinkCard from '../components/LinkCard.vue'
|
||||
import LogoMark from '../components/LogoMark.vue'
|
||||
import { openLightbox } from '../lightbox'
|
||||
import { publicApi } from '../api'
|
||||
import { site, applyDocTitle } from '../site'
|
||||
@@ -68,7 +69,6 @@ onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
|
||||
watch(() => route.params.slug, load)
|
||||
|
||||
const isShort = computed(() => post.value && post.value.kind === 'short')
|
||||
const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUpperCase())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -100,7 +100,7 @@ const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUp
|
||||
<article v-else class="wrap" :class="{ short: isShort }">
|
||||
<header class="head">
|
||||
<div class="byline">
|
||||
<div class="avatar">{{ initial }}</div>
|
||||
<div class="avatar"><LogoMark /></div>
|
||||
<div class="who">
|
||||
<span class="author">{{ site.author_name || 'ONE' }}</span>
|
||||
<span class="sub">
|
||||
@@ -188,17 +188,11 @@ const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUp
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 站标自身是圆,原来的 accent-soft 圆底与衬线首字母一并去掉,只留尺寸与颜色 */
|
||||
.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--serif);
|
||||
font-size: 18px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.who {
|
||||
|
||||
Reference in new issue
Block a user