网站冬日主题改动

  2019-12-20 

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

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

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

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

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

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

}
@media screen and (max-aspect-ratio: 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头像

.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

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颜色…

.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(直接写在主样式里了)：

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

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

.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中修改

.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，….等的样式

赏

且听风吟