之前的网站界面风格用了好几年，是一种类似 Medium 的设计，挺整洁的，我个人也很喜欢。但是那套f风格到了很重的 CSS 框架，好处是不管页面里想放进去点什么，都能有对应的设计预设，保证可以比较优雅地展示。但是同时坏处就是，个人站点怎么会用到那么多结构呢？于是一直想着重新设计。
从想法，到实施，再到真正落实出来，前后跨度也差不多两年了吧……现在至少……勉强上线了。后续还会修修补补。之前的风格，一张图片预览作为存档吧：
新的设计抛弃了框架，用到什么就写进去什么，所以 CSS 文件大小直接缩小了 4 倍左右——第一行是新的 CSS 文件，第二行是旧的。
而且借着这次重构的机会，把原来的布局方式也抛弃了，直接用到了 flex 和 grid 布局。不过问题是浏览器的兼容性可能就比较差了。但是我决定不再做向下兼容。所以全部使用的标准 CSS 属性，诸如 -webkit- 或者 -ms- 之类的针对特定浏览器的前缀全都没用。
首页做了几个宽高都是 100% 的内容区块，用到了 flex 布局，局部伸缩，还蛮有意思；文章页面的下面，罗列相关文章时用到了 grid 网格布局，自动调整行列元素，也挺有趣。但是我这个咖啡师知道这些干嘛呢，哈哈。
本来，还做了一个页面加载完成之前的 preload 动画，但是不知从什么时候开始，我的这个 kaix.in 域名就被微信加入了黑名单，每次访问都会出现跳转页，进入一个不支持 JS 的页面，而且经测试，所有的页面元素只要是 CSS 中设置了 position 属性，全都被屏蔽掉了！
当然我可以全然不顾页面在微信里的显示效果，但是效果是一回事，页面能不能展示出来是另一回事。目前没有找到合适的方法做到兼顾，所以暂时把预加载动画以及 CSS 的异步加载都搁置起来了。幸好页面本身都比较小，所以加载倒不至于很慢。
最后，作为一个强迫症，之前的风格，查看源代码时，可以看到一坨去掉空格的源码；新的，为了不一样……尽量做到了严格缩进。真是毫无用处的变化呢，笑……