CHANGELOG
关于博客的设计见 我的博客设计。
- 优化外部链接的图标(参考了 MDN 的实现)
- 新增两个主题,看起来有点像素风的感觉。(参考了 seated.ro)
- 优化代码块复制按钮的样式。
- 优化 a11y-nav 的样式。(参考了 Stefan Judis 的博客)
- 又收集了一些 88x31 buttons。
- 优化链接样式,外部链接添加
↗标记,内外部链接下划线样式统一用实线。 - 更新 订阅 页面。(见:XSLT 将要被废弃、更新订阅页面)
- 移除 Snippet 订阅流,感觉这个分类没啥必要,范围不太清晰。
- 使 littlefoot 样式和默认脚注样式相近,降低它对正文阅读的干扰。
- 基于 关于 "Give footnotes the boot" 的思考,调整博客中脚注的使用。
- 新增注释块 (note section) 样式。
- sidenote 使用 <aside> 和 ARIA: note role 实现,提供更好的语义。
- 新增 Snippet 订阅流。
- 优化 example 的样式。
- 新增了 好きなアニメ 页面。
- 扩大 sidenote 的悬浮区域,设置更明显的悬浮样式,让读者更容易识别 sidenote 和正文中数字的关联位置。
- 搜索页面增加 Kagi 和 Google 的搜索链接,当读者不开启 JS 的时候,也给他提供搜索的办法。(借鉴了 Sacha Chua 的搜索页面)
- 一些 hover 效果在手机上并不好,显得干扰阅读,通过
@media (pointer: fine) and (hover: hover)控制只在有鼠标等精细指针时才启用 hover 效果。 - 新增 Album Wall 页面。
- 给一些特定域名的链接增加了图标,悬浮在链接上的时候会看到。
- 悬浮在链接时设置背景色,使其更明显地表达悬浮状态。
- 降低 sidenote 透明度,避免喧宾夺主,悬浮上去时再还原透明度。
- 调整 heading 的间距,使得 heading 之间的内容容易区分开,一个 heading 的内容更像一个整体。
- 新增 heading-enhanced.js,使得点击 heading 前面的伪类可以定位到此 heading,方便引用。
- 更新 summary 的 icons,使用手指 ☞ 和 ☟,不过 Safari 目前还不支持。
- 移除 org export 的默认样式,优化 footnotes 的样式使其支持段落的换行,统一都使用 CSS logical properties and values。
- 新增了一些字体,Schoolbell 用于可爱的歌词;I.Ming 用于中文歌词。
- 优化了 Webmentions 的排版,将用户网站地址整合到用户昵称里,将引用的链接原样呈现,便于读者区分。
- 作者边上增加了一个发邮件的提示,明显的提示或许能引导读者发邮件。
- 搜索页面 增加了 pagefind 的 credit,感谢 pagefind 提供的简单好用的服务。
- 搜索页面增加了搜索帮助,顺便了解了一下 popover 的使用。
- 导航的「黑洞里」移动到最后,设置了非常低的透明度。毕竟是黑洞嘛,看不见才正常 (≖ᴗ≖๑)
- 设置链接 :visited 颜色,方便读者区分博客中访问过的链接。颜色用了 favicon 里的颜色,稍微调整了一些对比度使其能看清。
- 延长 view-transition 的动画速度,让主题切换、页面切换之间的过渡给人感觉柔和一些。
- 优化打印时的样式。
- heading 前增加元素,区分 heading 和内容,但是为了不影响阅读,颜色很浅。
- 使用 subtitle 显示副标题。
- 把首页的样式做成了目录的样式,目录的实现见:Zine#14::Responsive TOC leader lines with CSS,感觉还蛮有趣的。
- 移除 image-enhanced.js,使用
<a>标签包裹图片,从而实现放大图片,减少一个 JS 的维护,读者禁用 JS 时也依然能放大图片。 - 增加引用 (blockquote) 之间的间距,避免贴的太近,看起来像是同一个引用。
- 移除
::target的样式,原来使用的波浪线,感觉不够明显,还是使用浏览器默认的样式吧。 - 下划线样式改为不是那么明显的波浪线,下划线主要用于标记一些文字,太明显了,可能会导致读者只关注这部分文字。
- 添加了 404 页面
- 通过下划线的样式,简单区分内部链接和外部链接
- 将博客文件迁移到用 denote 管理,见 结合 denote 和 org-publish 写博客。
- 搜索页面:修复自动 dark mode 下的样式、增加 backtop、避免横向滚动条。
- 移除了页脚「查看 org 文件的链接」,因为用 denote 管理后,实际文件名和 URL 对不上了,暂时不想维护。
- 图片样式还原成默认样式,不居中,因为有的图片比较小,居中不好看,就需要额外写样式,嫌麻烦。
- 补充了所有文章的 description,这样分享的时候能看到一些描述。
- 新增了基于 tag 生成 Atom feed 的功能,格式是
{tag}.xml,目前生成了 Zine 和 Emacs 的。
- 移除了 Atkinson 英文字体,都使用落霞孤鹜字体,使得整体更和谐。但缺点是,可能部分英文字母不容易区分。
调整了部分手机上的样式,例如 list,details 等,让它们尽可能利用屏幕空间,不要留太多的间距,不然每行内容太少,换行太多。
如果在手机上你还是觉得字体太大,你可以通过浏览器调整页面的字体大小,这样就能看到更多啦。
- 调整页脚,增加了用于分割页脚的文字,增加了查看 org 文件的链接。
如果你看到有错误,也可以 fork 帮我修改,嘿嘿。
- 调整了一下 littlefoot 的样式,使它看起来像是一个 footnote。
- 移除 giscus 评论,see also:移除博客的留言。
- 手机上的字体再增大了一点,最小字号是 22px。
- 增加了「返回顶部」的功能。见 backtop.js。
- 解决 giscus 的主题异常问题,通过动态加载 giscus,确保在 light / dark mode 下都能渲染正确的主题。
- 顺手更新了 给博客添加 dark mode。
- 让 sidenote 分布在文章的两边,充分利用两边的空间,而不是都放在一边,显得不均匀。
- 增大 pagefind 的 Excerpt length,便于看到关键字附近更多的内容,更好的找到想要找的内容。
- 调整 pagefind 的 border 颜色,使其更明显一些。
- 调整 search 和 rss 页面的字体,保持统一。
- 文章中尝试用是
<hr>去分割段落,同时给<hr>添加了一些样式。
- 重新添加 霞鹜文楷 字体,粗体现在似乎看起来对比度还可以;字体放到网站的静态资源中托管;一定程度上提高文字的耐看度。
- 添加背景图,内容过多的时候,纯色背景有些单调,使得页面看起来有些枯燥,设置背景使得页面相对耐看一些。
- 现在是一张叶子的背景图,倒是挺像落羽杉的
- figcaption 只有一行的时候居中,好看一些,但对于一些小图片不太合适,需要手动修改样式,有点麻烦。
- 页脚添加了 support me,support me 页面添加了支付宝收款码。
- 调整 list 的样式,避免部分 list item 出现额外的 margin-block。
- 在宽度大于 768px 的设备上,点击图片,在新 tab 展示,可以进一步放大查看。见 image-enhanced.js。
- 调整 dark-mode 下的颜色,让对比相对柔和一点。
- 将 giscus 切换成中文。
- 将 giscus 的字体变大,保持和正文相近的大小,看起来轻松一点。
- 主题为 auto 的时候,使用 high-constact 的主题,也是为了提高可读性。
- 集成 littlefoot,最开始是在 極客死亡計劃 看到的,感觉交互不错,现在我也集成了,当屏幕比较小的时候会用 littlefoot,屏幕大的时候会现实 sitenote。
- 稍微扩大导航的点击范围。
- 调整 TODO 关键字的颜色,原来的红色比较刺眼,换成一个相对柔和的红色。
- 修复暗黑模式下,pre 元素的背景色异常。
- 使得 Atom feed 符合规范,see: 验证你的 RSS/Atom feed 是否有效。
调整内容宽度 (1024px -> 900px),使得每一行不会太长。
当文本行足够短 使眼睛无需移动头部即可扫视,同时又足够长确保眼睛不会过于频繁地换行时,文本块的可读性最佳。
The Realities And Myths Of Contrast And Color by Andrew Somers
调整文字的颜色,符合 APCA 定义的 Lc90。
代码块添加了复制按钮,便于复制代码。
推荐阅读 How to build a copy code snippet button and why it matters
- 代码块支持自动滚动,当鼠标移动到左右边缘时会自动滚动,忘了在哪个博客看到的,感觉对读者比较友好。
移除 霞鹜文楷 字体,使用默认中文字体,因为霞鹜文楷的粗体太不明显了。
虽然霞鹜文楷是有粗体的,但正如 The Easy Intro to the APCA Contrast Method 里面说的,对比是靠周围的内容衬托出来的。霞鹜文楷的粗体和普通字体之间的差别太小了,很难看出来加粗。
- preload Atkinson Hyperlegible 字体,并设置字体缓存。
- 添加了 SideNote,借鉴了 Sacha Chua 的实现,相关 JS 见:sidenote.js。
- 美化了 Atom feed,see: 让你的 RSS/Atom feed 更好看。
- RSS feed 切换到 Atom feed,see: 博客的一些更新。
- 迁移到 org-publish,see: 使用 org-publish 发布博客。
- 迁移到 Hugo,使用的主题是 hugo-theme-even。
- 创建了博客,最开始是 VuePress 搭建的。