从最早接触的Farbox的时候,就对CaiCai制作的Cais模板印象深刻。但由于本人的视力不好,加之在某些视觉效果方面有特别顽固的个人喜好,因此总希望自己能尝试着对原模板进行一些微调,例如放大字号之类的小改动。

最近在学习了一些简单的CSS知识后,斗胆根据自身喜好,在CaiCai提供的Cais模板基础上制作了一个自定义Mod,定名为Cais v2.0,以向原作者致敬。

较原版,本模板有以下改动:

布局

  • 添加宽度768px以下的自适应布局,以适应iPhone屏幕
  • 添加「左浮动」1及右浮动2
  • 微调页脚与浏览器底部间距
  • 微调正文行距、行高

-------

样式

  • 修改脚注样式(Bigfoot)
  • 修改行内引用3样式
  • 增加隐藏文本样式
  • 修改区块引用4样式
  • 修改块引用5样式
  • 添加普通引用样式6

配色

  • 修改链接配色7
  • 修改链接鼠标悬停配色8
  • 修改按钮鼠标悬停配色9
  • 修改鼠标选择文字底色10

字体

  • 修改字体尺寸
  • 正文字体修改为Museo-Slab(西文,TypeKit)、思源黑体(中文,TypeKit) 和华文宋体(引用部分)
  • 站点标题字体修改为Museo Sans Rounded(TypeKit)

图片

  • 图片圆角处理
  • 图片自动居中
  • 添加图释框样式11
  • 添加左浮动图释框12及右浮动图释框13样式
  • 添加图片鼠标悬停效果

--------

功能

  • 首页底部翻页按钮文字改成「Older Posts」
  • 修复原首页「Older Posts」与「Newer Posts」功能颠倒的错误
  • 首页增加「分类」、「RSS」、「关于」、「Wiki」等按钮
  • 添加页面顶部阅读进度条(Eager.io)
  • 添加「一键返回顶部」按钮(Eager.io)

具体效果可参考该测试页面


  1. .alignleft  

  2. .alignright  

  3. <cite><code>标签  

  4. <pre>标签  

  5. <blockquote>标签  

  6. <quote>标签  

  7. #FF5449  

  8. #BFBFBF  

  9. #FF5449  

  10. #FEFFCF  

  11. .wp-caption  

  12. .wp-caption-alignleft  

  13. .wp-caption-alignright