新站标「一横」:墨圆 + 一道白横,接进两套 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
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
+10
-32
@@ -1,32 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128.81 128.17">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#gradient3);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.cls-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="gradient3" x1="57.54" y1="31.44" x2="128.81" y2="31.44" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ff4d4d"/>
|
||||
<stop offset=".99" stop-color="#f9cb28"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="b">
|
||||
<g>
|
||||
<path class="cls-2" d="M56.32,100.47c0,15.98-11.84,27.61-27.85,27.61S.33,116.45,.33,100.47s11.83-27.45,28.08-27.45,27.91,11.63,27.91,27.45Z"/>
|
||||
<path class="cls-2" d="M120,101.26v19.31c-4.87,4.63-12.9,7.6-21.65,7.6-18.33,0-30-10.49-30-26.7s12.92-28.34,31.07-28.34v28.13h20.58Z"/>
|
||||
<polygon class="cls-1" points="119.7 21.48 128.81 38.51 83.27 62.88 57.54 14.79 85.17 0 101.79 31.06 119.7 21.48"/>
|
||||
<polygon class="cls-2" points="0 63.11 16.54 32.82 .68 8.17 55.98 8.17 40.12 32.82 56.65 63.11 0 63.11"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="ONE">
|
||||
<!-- 方案 A「一横」:墨圆 + 一道白横,既是字母 O 也是汉字「一」。
|
||||
横杠用 fill-rule="evenodd" 挖成真洞(不是叠一块纸色矩形),
|
||||
所以它在任何底色上都是透明的——不需要为深浅皮肤各出一版。 -->
|
||||
<style>
|
||||
.m { fill: #33302b }
|
||||
@media (prefers-color-scheme: dark) { .m { fill: #e8e3d9 } }
|
||||
</style>
|
||||
<path class="m" fill-rule="evenodd" d="M32 4a28 28 0 1 0 0 56 28 28 0 1 0 0-56Zm-16 23.5h32a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H16a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 648 B |
Reference in new issue
Block a user