把博客改成像素风的一次尝试

周末心血来潮，把博客从「正经的白底黑字」改成了现在的像素科技风。记录一下几个关键决定，说不定对想改版的人有用。

为什么是像素风

个人博客最怕「模板感」。像素风的好处是性格足够强：硬阴影、直角、8-bit 字体，一眼就能记住。而且实现成本意外地低——不需要任何图片素材，纯 CSS 就能出效果。

字体：只在英文上用像素体

中文像素字体（比如缝合像素字体）全套有好几 MB，首屏加载吃不消。折中方案是像素字体只用在英文标签上：Logo、状态徽章、章节标注。中文正文保持正常的黑体，阅读体验不受影响。Press Start 2P 的拉丁子集只有 12KB，下载到本地用 @font-face 引入即可。

硬阴影比圆角重要

像素感的核心不是马赛克，而是「没有过渡」：

.pixel-btn {
	border: 1px solid var(--color-accent);
	box-shadow: 4px 4px 0 0 var(--color-shadow); /* 无模糊半径 */
}

.pixel-btn:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--color-shadow);
}

按钮按下去时阴影跟着位移，就像真的被按下去了。卡片反过来：悬停时浮起、阴影变大。border-radius 一律清零。

扫描线和网格

背景网格用两条 linear-gradient 交叉画出来，扫描线是 repeating-linear-gradient 做的 4px 周期条纹，固定在 body::after 上、pointer-events: none。透明度一定要低（0.1 左右），不然长文阅读会累。

改完之后的感受

博客有性格了，但我也提醒自己：风格是皮，内容是肉。接下来还是得多写，别让这么酷的皮下面只有三篇文章。