Distinction主题的修改

Distinction这个主题感觉不错, 但是原版的宽度只有900px. 鉴于现在屏幕个各种1920*1080, 1366*768, 900像素的宽度显得有点窄, 于是我手动将其修改为1200px宽的.

style.css里面主要是直接改宽度, 内外层宽度, 页面宽度, 侧边栏宽度等等. 这个js的作用在于把一列内容变成两列, 要修改其中的columnWidth

主题的顶部改为了和首页一样的翅膀. 鼠标移动上去翅膀会往上摆. 一开始在想如何实现效果的时候, 就有点迷惑, 动画的鼠标触发区域是整个标题, 包括两边的翅膀和中间标题, 但是旋转动画是两边翅膀同时发生, 为了实现这个效果, 当时想用javascript来实现. 后来发现css居然何以这么玩

#site-title a:hover #leftwing{
-webkit-transform:rotate(10deg);

其中site-title是整个标题区域包括翅膀, leftwing是左边的翅膀. 这样就实现了鼠标在#site-title上hover的时候, #leftwing旋转10度.

Distinction自带的文章类型小图标边缘过硬, 和整个主题的各种反锯齿搭配不和谐, 于是手动修改了几个图标(及对应处CSS). 修改后的图标: http://blog.exz.me/wp-content/themes/distinction_MOD/images/icon-sprite.png

不需要特别的Google Font, 删除function.php第520行

Epix Sphere