这是一个创建于 3200 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 啦～
 | 1 unique 2017 年 4 月 8 日 还不错，挺极客的 |
 | 2 boolean93 2017 年 4 月 8 日  1 Gee Law? 怎么读着像“基佬”？（逃） |
 | 3 Kilerd 2017 年 4 月 8 日 via iPhone 怪我不懂艺术，哪里好看了？ |
 | 4 freedomSky 2017 年 4 月 8 日 @boolean93 我也这么读都出来了..hah |
 | 5 hxtheone 2017 年 4 月 8 日 并没觉得哪里漂亮 |
 | 6 wolfan 2017 年 4 月 8 日 via Android 动态磁贴是怎么实现的？ |
 | 7 geelaw OP |
| 8 geelaw OP @wolfan 看 index.html 的 meta 和根目录下的 browserconfig.xml 以及 tiles/?.xml （?=1..5 ）这些文件。 此外要工作正常还需要一般的动态磁贴要求，例如 XML 不超 5 KB 、图片不超 200 KB ，这很容易忘记导致磁铁不能显示。 |
 | 9 wuling 2017 年 4 月 8 日 要不是看了楼主说的这些优点，我会以为这是 10 年前的博客... |
 | 10 minamike 2017 年 4 月 8 日 1 移动端还行 桌面端的右边图片好违和 看起来好乱 还有那个切换亮色暗色的图标为什么要用屎黄色 阅读全文和 tag 的图标太写实 和扁平风格不符 |
| 13 geelaw OP |
| 14 geelaw OP  )这个是期待的显示效果，在其他操作系统（字体）下 emoji 会有不同的样式。此外右边的图似乎不太好搞，它是主题图，宽度永远是 300px ，高度根据左边的摘要、修改日期和标签产生的高度决定，所以会有点乱。但是我不想它控制高度，所以高度上可能有不一致的现象。我正在考虑解决，例如要求主题图的高度至少是一个固定数。 |
 | 15 Hackghost 2017 年 4 月 8 日 via iPhone 捕捉茶园学长一只 |
| 16 geelaw OP @minamike 感谢您提出的图片乱的问题。我修改了条目列举的实现， so that ： - 当且仅当宽视图且有图片时显示图片； - 如果显示图片，则图片宽度是 320px ，高度至少是 240px ； - 如果左侧文字多，则增加图片高度； - 如果左侧文字少，则在摘要和标签之间增加空白。 相比之前，设定最小高度让条目列举看起来整齐不少；此外标签、日期、评论数的显示也改变了一下，感觉新版本的更整齐。 吐槽一下 HTML 和 CSS 碎片化问题，我一开始用 flex-box 实现的，后来发现 Safari (El Capitan) 居然不支持！于是换回 CSS table 实现。 |
| 18 geelaw OP @minamike 居然忘了还有 vendor-prefix 可以用 orz ，懒得再改了，反正现在这个也能用。而且这样还可以兼容更多版本的 IE （虽然我没打算兼容 IE10-）。 |
| 19 boolean93 2017 年 4 月 9 日 1 对了，提一个小建议，就是给个最大宽度，否则在我的 21:9 显示器上面看会很丑很丑 |
 | 20 dnsjia 2017 年 4 月 9 日 via Android |
 | 21 sensui7 2017 年 4 月 9 日 所有链接改成磁贴的风格, 能否更好看一点? 特别是导航条的风格, 目前看来有点太普通了. 评论的链接放标题或者日期后面能否更好一点 各个元素的 margin 和 padding 是否能细调一下, 现在是否有点随意了呢? article 元素做成大磁贴, 是否能比现在简单的用分割线要好一点? |
| 22 geelaw OP @boolean93 感谢您的建议，我刚刚实现了在视区宽度大于 1600px 时转换为横向分列排版的形式，并且打印的时候如果宽度大于 1600px 也会采用分栏（大约 720px 到 850px 一栏）。 |
| 23 geelaw OP @sensui7 感谢您的回复。 上面贴的图已经过时了。 磁贴的信息容量比较有限，展现了标题、摘要和题图之后就没什么其他的空间了（最多可以再用 badge 表现一下评论数），此外磁贴是一个大的点击目标，这样就不能列出标签、直达评论的链接了。另一种设定是采取双面 /peeking 的磁贴，一面是题图+评论数，另一面是标题和摘要，这样做的好处是很容易解决可访问性（对比度）的要求。但是可能因为 timing 不好让读者必须等待磁贴翻面。此外还有一些问题，例如有些文章是没有题图的，这些磁贴的图就不太好弄，再比如现在的题图都是按照 4:3 选择的，增加磁贴之后剪裁很成问题。 现在评论数就是在日期后面，之所以右侧放置是为了保持对齐，如果多次访问我的网站会发现昨今二日里气泡的位置改变了从数字左边变到右边，这个也是对齐考虑，因为数字的加载需要一段时间，要让数字出现的位置尽量不改变其他元素的位置，否则会有跳动的感觉。 感觉主页可以考虑一下使用磁贴设计，现在的设计对 archive 页面比较合适。 |
Select Language