宣传一下自己的实现朴素且长得漂亮的博客（日常+技术流）

[geelaw]

Gee Law ’ s Blog 或者粘贴网址 https://geelaw.blog/

可以发现的几个网站设计的亮点（也就是产品经理常说的 细节）：

• 代码 vanilla ，没有库依赖，无浏览器 detection ，内容纯静态；
• 元素 sematic ，纯 CSS 实现 responsive design ，对 screen reader 友好；
• 支持无脚本环境，视觉效果无折扣，所有东西都完美 fallback ；
• 打印机友好，打印效果在不同视觉状态下一致（托 semantic + css 的福）；
• 剪贴板友好，可见元素和元素结构长得差不多（托 semantic 的福）；
• 支持 Windows 高对比度，部分图片有高对比度版；
• 支持 Windows 动态磁贴，固定到“开始”屏幕将轮播最近 5 条博文标题、摘要和主题图；
• 元数据丰富，支持 Open Graph 和 Twitter Card 以及 vendor-neutral 元数据。

不好之处也有不少：

• 支持高对比度的图片牺牲了部分 semantic 和剪贴板友好性；
• Disqus 部分不支持在更改主题后自动更改主题（如果强行 reset 会导致数据丢失）；
• 从博文 source build 网站的脚本写得很糟，不敢开源。

所以求关注我的 blog 啦～

[sensui7]

所有链接改成磁贴的风格, 能否更好看一点? 特别是导航条的风格, 目前看来有点太普通了.

评论的链接放标题或者日期后面能否更好一点

各个元素的 margin 和 padding 是否能细调一下, 现在是否有点随意了呢?

article 元素做成大磁贴, 是否能比现在简单的用分割线要好一点?

[geelaw]

@boolean93 感谢您的建议，我刚刚实现了在视区宽度大于 1600px 时转换为横向分列排版的形式，并且打印的时候如果宽度大于 1600px 也会采用分栏（大约 720px 到 850px 一栏）。

[geelaw]

@sensui7 感谢您的回复。

上面贴的图已经过时了。

磁贴的信息容量比较有限，展现了标题、摘要和题图之后就没什么其他的空间了（最多可以再用 badge 表现一下评论数），此外磁贴是一个大的点击目标，这样就不能列出标签、直达评论的链接了。另一种设定是采取双面 /peeking 的磁贴，一面是题图+评论数，另一面是标题和摘要，这样做的好处是很容易解决可访问性（对比度）的要求。但是可能因为 timing 不好让读者必须等待磁贴翻面。此外还有一些问题，例如有些文章是没有题图的，这些磁贴的图就不太好弄，再比如现在的题图都是按照 4:3 选择的，增加磁贴之后剪裁很成问题。

现在评论数就是在日期后面，之所以右侧放置是为了保持对齐，如果多次访问我的网站会发现昨今二日里气泡的位置改变了——从数字左边变到右边，这个也是对齐考虑，因为数字的加载需要一段时间，要让数字出现的位置尽量不改变其他元素的位置，否则会有跳动的感觉。

感觉主页可以考虑一下使用磁贴设计，现在的设计对 archive 页面比较合适。

[sensui7]

@geelaw 虽然我之前用的 lumia 手机, 但我对磁贴这一形式理解还停留在色块上, 你的回复让我意识到了交互性的特点, 感谢.

[leokino]

@geelaw 建议微调一下排版和个元素的 padding 等。可以先上图然后在 css ，避免代码难度影响美观。

[coolcfan]

@geelaw #22 这个逻辑可能还是需要细化，比如都是 21:9 的显示器，2560x1080 屏幕上最大化的浏览器里，横向排版看起来很正常，但是在 3440x1440 屏幕上 snap 到一侧的浏览器窗口里，横向排版看起来就有些别扭了……

[geelaw]

@coolcfan 只要窗口的宽度达到 1600px 就会横向，你可以选择调节 snap 的比例~