网站冬日主题改动

明天就是冬至了,想起来网站的风格几个月没变了,就稍微改了一下记录下来,不然下次忘了自己改了啥了= =

主要是以雪色#b1bbf0为主题,直接从背景图取的色,我还挺喜欢这个颜色的

标题和副标题的字号都调了一下

全文字体改为谷歌的思源字体了

设置手机与PC端不同的背景样式,我直接在主样式下加了

1
2
3
4
5
6
@media screen and (min-aspect-ratio: 1/1){

}
@media screen and (max-aspect-ratio: 1/1){

}

主题透明度的样式新添在主样式下

1
.main-inner

根据屏幕长宽比来判断是手机还是电脑

C:\aisakaki\themes\next\source\css_common\components\header\site-meta.styl

.brand样式修改标题,

.site-subtitle副标题样式

C:\aisakaki\themes\next\source\css_common\components\header\site-nav.styl 修改标题button

C:\aisakaki\themes\next\source\css_common\components\sidebar\sidebar-author.styl

修改样式,添加sidebar头像

1
2
3
4
5
6
7
8
9
10
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
border-radius: 60%;
transition: 2.5s all;
}

同目录下sidebar.styl修改按钮和links

1
2
3
4
5
6
7
8
a {
//color: $grey-dark;
//border-bottom-color: $black-light;
//&:hover { color: $gainsboro; }
color: #fff;
border-bottom-color: #fff;
&:hover { color: $black-light; }
}

.sidebar-inner修改links小字样式

同目录下sidebar-nav修改描述样式

当时没有找到menu的样式表,所以我直接审计元素在主样式表里修改menu颜色…

1
2
3
4
5
6
7
8
9
10
.menu .menu-item a {
padding: 1px 5px;
background: transparent;
border: none;
color: #fff;
//transition-property: background;
//box-shadow: 5px 5px 5px #888;
border-radius: 10px;
}
}

C:\aisakaki\themes\next\source\css_common\components\sidebar\sidebar.styl修改侧边栏样式

为了让鼠标移到标题上变色,给标题添加一个hover(直接写在主样式里了):

1
2
3
.posts-expand .post-title-link:hover{
color: #49b1f5;
}

鼠标移到标题上时在其下面显示下划线效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.posts-expand .post-title-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #49b1f5;
visibility: hidden;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}

上面两个的样式都可以写在C:\aisakaki\themes\next\source\css_common\components\post\post-title中覆盖原样式

右下角两个也要改,直接审查元素吧

归档页面的小灰点在post-collapse.styl中的.post-header &::before ,下面还有border-bottom-color:属性是下划线属性,&::before中修改光标移上去的颜色

archiev.styl中修改上面最大的灰点

post-collapse.styl里改了一堆,懒得记了

文章的侧边栏的目录结构在sidebar-nav.styl中修改

1
2
3
4
5
.sidebar-nav .sidebar-nav-active {
//color: $sidebar-highlight;
color: #fff
//border-bottom-color: $sidebar-highlight;
border-bottom-color: #fff

对应了标题和下划线

目录样式在sidebar-toc.styl

post-expands.styl中修改h2,h3,….等的样式