诗与远方

为next主题的主页文章添加阴影效果

next主题的主页文章列表颜色个人感觉有点单调,层次不够突出,一直想加个阴影效果,所以来改写一下前端样式,怕以后忘记,写文记之。

next主题的css好像是采用的less来组织编写的,所以打开chrome,定位以后发现是在编译后的main.css 的类.posts-expand .post来控制的。

解决方法

打开themes/next/source/css/_schemes/Mist/_posts-expanded.styl文件
找到类.posts-expand下面的.post

1
2
3
4
5
6
7
.posts-expand {
...
.post {
margin-top: 120px;
}
...
}

修改成

1
2
3
4
5
6
7
8
9
10
11
12
.posts-expand {
...
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
...
}