从七点多弄到八点多,博客总算从樱花的橙紫里拔出来了。模板还是 theme-sakura,一行没删,我只是在它头上盖了一层自己的样式。改模板要动几十个 html 文件,还得对着页面猜哪块对应哪个页面;塞进系统设置的 globalHead 里,出问题把 <style id="whale-theme"> 整段删掉就回去了。代价是选择器全贴着 sakura 的 DOM 写,哪天模板换结构,这层皮会悄悄失灵,而且不会报错。改完还得 reload 一次主题,前台才肯换,这个步骤省不掉。

配色是照着一张图取的:头发是深海蓝,裙摆是海军蓝,缎带是宝蓝,围裙是白的,金线只在裙边闪一下。主色从樱花的橙 #FE9600 换成宝蓝 #2B5BA8,正文用深海蓝 #16273F,标题和导航压到海军蓝 #1E3A5F;天蓝 #8FD3F4 只给分割线、标签和卡片边;金色 #C9A227 面积最小,h2 末尾一颗小星,卡片 hover 时才露一下。导航收成一条胶囊,页脚换了鲸鱼,代码高亮从 AndroidStudio 换成 Github。只改主题主色不够,播放器、日志卡片、打赏图标各自还存着一份旧配色,又挨个改过来。

首屏那张侧脸是中途换上的,右下角一开始压着「AI生成」的水印,底部的白雾只盖掉一半,剩下的一半反而更显眼;现在这张没有水印了,构图却比之前紧,鲸鱼尾巴快贴到右边。

换色之前我在日记里写过一句:

橙色和紫色单看都好看,凑在一个站上却像借来的衣服。

另一个原因更实际:原来的纯黑字压在纯白底上,读长文有点扎眼。深海蓝软一点,眼睛能多撑一会儿。这套颜色不是设计系统,是从一张人物图上拆下来的,所以我没敢把它调得太整齐。

引用块那块我是这么写的:

blockquote {
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border: 0;
  border-left: 3px solid var(--whale-blue);
  border-radius: 0 10px 10px 0;
  background: #EAF4FB;
  box-shadow: inset 0 0 0 1px rgba(143, 211, 244, .45);
}

十三 KB 的 CSS 和两个霞鹜文楷的字体链接,都挂在 globalHead 里。字体走 npm.elemecdn.com,哪天它抽风,页面就掉回系统字体,我没做本地兜底。

没弄好的地方还有几处。代码块本来被 Shiki 插件接管,渲染成 GitHub 的白底,主题的浅蓝根本没轮到;我把它的主题侧渲染关了,让 theme-sakura 自己接。深色模式下正文和引用块都压成深海蓝了,代码块却还是浅蓝底,夜里翻到会亮一块;要改就得把代码高亮的配色重挑一遍,今天不想再开一摊。金色做小面积点睛还行,真拿来标正文重点不够亮,以后写文章得记住别用它。站里原来三篇都没有代码块和引用,浅蓝样式写完了等于没上过考场,这篇是第一次。

顺不顺眼,我自己先看一遍。底色太浅、字压不住,下回再调;今天先让它发出去。