awescnb 博客工具使用和自定义优化
发现了一款挺好的博客园主题工具：awescnb。
使用手册：awescnb 使用手册
工具里面包含了9款主题，我使用了 geek 这一款。
预览地址：预览地址
在此基础上，我做了一些简单的优化：
文章标题
居中和颜色渐变
#post_detail .postTitle {
text-align: center;
background: linear-gradient(to right, #ff6a6a, #008dff);
-webkit-background-clip: text;
color: transparent;
}
文章内容
a 标签颜色区分
这样子更有辨识度
.cnblogs-markdown a {
color: #ff6a6a;
}
标签
彩色标签
点击查看CSS代码
.catListTag {
margin: 20px 0;
clear: both;
text-align: left;
font-size: 12px;
}
.catListTag ul {
display: inline;
list-style-type: none;
width: 400px;
}
.catListTag ul li a {
list-style: none;
display: inline;
}
.catListTag ul li a{
/* line-height: 24px; */
height: 24px;
display: inline-block;
/* background: #fff; */
padding: 2px 11px;
/* margin: 10px 5px 0 0; */
border-radius: 8px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.catListTag ul li a {
color: #FFF;
text-decoration: none
}
.catListTag ul li a:hover {
border-radius: 0;
text-shadow: #000 1px 1px 1px
}
.catListTag ul li:nth-of-type(8n-7) a {
background: #8A9B0F
}
.catListTag ul li:nth-of-type(8n-6) a {
background: #EB6841
}
.catListTag ul li:nth-of-type(8n-5) a {
background: #3FB8AF
}
.catListTag ul li:nth-of-type(8n-4) a {
background: #FE4365
}
.catListTag ul li:nth-of-type(8n-3) a {
background: #FC9D9A
}
.catListTag ul li:nth-of-type(8n-2) a {
background: #EDC951
}
.catListTag ul li:nth-of-type(8n-1) a {
background: #C8C8A9
}
.catListTag ul li:nth-of-type(8n) a {
background: #83AF9B
}
.dict .pcolor a:first-child {
background: #036564
}
.dict .pcolor a:last-child {
background: #3299BB
}
点击查看HTML代码
分类
点击查看CSS代码
#sidebar_postcategory ul {
display: flex;
flex-wrap: wrap;
}
#sidebar_postcategory {
margin: 20px 0;
clear: both;
text-align: left;
font-size: 12px;
}
#sidebar_postcategory ul {
/* display: inline; */
list-style-type: none;
/* width: 400px; */
}
#sidebar_postcategory ul li a {
list-style: none;
display: inline;
}
#sidebar_postcategory ul li a{
/* line-height: 24px; */
height: 24px;
display: inline-block;
/* background: #fff; */
padding: 2px 11px;
/* margin: 10px 5px 0 0; */
border-radius: 8px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#sidebar_postcategory ul li a {
color: #FFF;
text-decoration: none
}
#sidebar_postcategory ul li a:hover {
border-radius: 0;
text-shadow: #000 1px 1px 1px
}
#sidebar_postcategory ul li:nth-of-type(8n-7) a {
background: #8A9B0F
}
#sidebar_postcategory ul li:nth-of-type(8n-6) a {
background: #EB6841
}
#sidebar_postcategory ul li:nth-of-type(8n-5) a {
background: #3FB8AF
}
#sidebar_postcategory ul li:nth-of-type(8n-4) a {
background: #FE4365
}
#sidebar_postcategory ul li:nth-of-type(8n-3) a {
background: #FC9D9A
}
#sidebar_postcategory ul li:nth-of-type(8n-2) a {
background: #EDC951
}
#sidebar_postcategory ul li:nth-of-type(8n-1) a {
background: #C8C8A9
}
#sidebar_postcategory ul li:nth-of-type(8n) a {
background: #83AF9B
}
#sidebar_postcategory ul li:first-child a {
background: #036564
}
#sidebar_postcategory ul li:last-child a {
background: #3299BB
}
点击查看HTML代码