refactor: Change some style

README.md

@@ -26,14 +26,30 @@
 
 [English](https://github.com/liuyib/hexo-theme-stun/blob/master/README_en_US.md) | [中文简体](https://github.com/liuyib/hexo-theme-stun/blob/master/README.md)
 
-> 关于主题有什么问题，可以 [Issue](https://github.com/liuyib/hexo-theme-stun/issues) 或 email 我，也可以在 [Gitter](https://gitter.im/liuyib/hexo-theme-stun?utm_source=badge) 里一起交流。
-
 ## :sparkles: 演示
 
 - [liuyib`s Blog](https://liuyib.github.io/)
 
 如果你正在使用 stun 主题，并希望像上面一样，在这里展示出来，你可以通过 [PR](https://github.com/liuyib/hexo-theme-stun/pulls) 将你的网站链接填写在这里。
 
+## :crystal_ball: 特性
+
+- 简洁，快速，易用，可定制性高
+- 响应式设计
+- 二级导航菜单
+- 支持文章图片懒加载
+- 支持 `Pjax`
+- 支持 `PWA`
+- 支持 `Fancybox`
+- 支持 `Quicklink`
+- 支持 `MathJax`、`KaTex`
+- 支持 `Gitalk`、`Valine`、`Livere` 和 `Disqus` 评论
+- 瀑布流式的相册页面
+- 内置谷歌广告，一键开启
+- 代码高亮，多种配色可选
+- 好看的背景特效
+- 超详细配置文档
+
 ## :package: 安装
 
 - 安装 stun
@@ -44,12 +60,12 @@
   $ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
   ```
 
-- 安装 pug 和 stylus
+- 安装依赖 pug
 
-  主题依赖于 pug 和 stylus，请在 hexo 根目录，执行指令。
+  进入 hexo 根目录，执行指令。
 
   ``` bash
-  $ npm install --save hexo-render-pug hexo-renderer-stylus
+  $ npm install --save hexo-render-pug
   ```
 
 ## :hammer: 使用

README_en_US.md

@@ -32,6 +32,24 @@
 
 If you are using the stun theme and would like it to be shown here, you can fill in your website link by [PR](https://github.com/liuyib/hexo-theme-stun/pulls).
 
+## :crystal_ball: 特性
+
+- Simple, fast, easy to use, highly customizable
+- Responsive design
+- Secondary navigation menu
+- Support article image lazy loading
+- Support `Pjax`
+- Support `PWA`
+- Support `Fancybox`
+- Support `Quicklink`
+- Support `MathJax`、`KaTex`
+- Support `Gitalk`、`Valine`、`Livere` 和 `Disqus` comment
+- Album page of waterfall streaming
+- Built-in Google ads
+- Multiple code highlighting themes
+- Beautiful background effects
+- Detailed documentation
+
 ## :package: Install
 
 - Install `stun`
@@ -42,12 +60,12 @@ If you are using the stun theme and would like it to be shown here, you can fill
   $ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
   ```
 
-- Install `pug` and `stylus`
+- Install dependency `pug`
 
-  The theme depends on `pug` and `stylus`, please run follow in your hexo directory.
+  Enter your hexo directory, run this.
 
   ``` bash
-  $ npm install --save hexo-render-pug hexo-renderer-stylus
+  $ npm install --save hexo-render-pug
   ```
 
 ## :hammer: Usage

languages/en.yml

@@ -4,7 +4,6 @@ title:
   archive: Archive
   category: Category
   tag: Tag
-  about: About
 
 # Header nav
 nav:

languages/zh-CN.yml

@@ -4,7 +4,6 @@ title:
   archive: 归档
   category: 分类
   tag: 标签
-  about: 关于
 
 # 导航栏
 nav:

layout/_partials/head/head.pug

@@ -14,7 +14,6 @@
   else if (is_page())
     if (page.type === 'tags') title = __('title.tag') + title_suffix
     else if (page.type === 'categories') title = __('title.category') + title_suffix
-    else if (page.type === 'about') title = __('title.about') + title_suffix
     else title = page.title + title_suffix
   else title = page.title + title_suffix
 

layout/_partials/sidebar/sidebar.pug

@@ -27,17 +27,16 @@ section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`)
           - var item = value.split("||")
           - var socialPath = _.trim(_.get(item, "[0]"))
           - var socialIcon = _.trim(_.get(item, "[1]"))
-          span.sidebar-ov-social-item
-            a.sidebar-ov-social-item__a(href=socialPath target="_blank" rel="noopener" data-popover=__(`social.${name}`)
-              data-popover-pos=`${theme.social_setting.icon_only ? "up" : "none"}`)
+          a.sidebar-ov-social__item(href=socialPath target="_blank" rel="noopener" data-popover=__(`social.${name}`)
+            data-popover-pos=`${theme.social_setting.icon_only ? "up" : "none"}`)
 
-              if socialIcon && socialIcon.match("origin:")
-                span.sidebar-ov-social-item__a--logo!= socialIcon.split("origin:")[1]
-              else
-                i.sidebar-ov-social-item__a--icon(class=`${fa_prefix} fa-${socialIcon ? socialIcon : "question-circle-o"}`)
+            if socialIcon && socialIcon.match("origin:")
+              span.sidebar-ov-social__item--logo!= socialIcon.split("origin:")[1]
+            else
+              i.sidebar-ov-social__item--icon(class=`${fa_prefix} fa-${socialIcon ? socialIcon : "question-circle-o"}`)
 
-              if !theme.social_setting.icon_only
-                span= name
+            if !theme.social_setting.icon_only
+              span= name
 
   if theme.feed.enable
     div.sidebar-ov-feed

source/css/_common/components/sidebar/index.styl

@@ -120,52 +120,33 @@
       padding: .5rem 0;
       text-align: center;
 
-      &-item {
+      &__item {
         display: inline-block;
         margin: .2rem;
         text-align: center;
+        color: $white;
+        background-color: $sidebar-social-color;
+
+        &:hover {
+          color: $white;
+          background-color: $sidebar-social-hover-color;
+        }
 
         if (hexo-config('social_setting.icon_only')) {
           border-radius: 50%;
           width: 1.5rem;
           height: 1.5rem;
-          background-color: $sidebar-social-color;
           transition-property: background-color;
           transition-ease();
 
-          &:hover {
-            background-color: $sidebar-social-hover-color;
-          }
-
-          &__a {
-            display: inline-block;
-            width: 100%;
-            color: $white;
-
-            &:hover {
-              color: $white;
-            }
-
-            &--icon {
-              font-size: 1.2em;
-              line-height: 1.5rem;
-            }
+          &--icon {
+            font-size: 1.2em;
           }
         } else {
-          &__a {
-            display: block;
-            border-radius: 3px;
-            padding: 0 .4rem;
-            color: $white;
-            background-color: $sidebar-social-color;
-            transition-property: color, background-color;
-            transition-ease();
-
-            &:hover {
-              color: $white;
-              background-color: $sidebar-social-hover-color;
-            }
-          }
+          border-radius: 3px;
+          padding: 0 .4rem;
+          transition-property: color, background-color;
+          transition-ease();
 
           span {
             margin-left: .2rem;

source/css/_common/scaffolding/animation.styl

 // avatar animation
 // ----------------------------------------
 if (hexo-config('author.enable')) {
-  if (hexo-config('author.animation') == 'shake') {
+  if (hexo-config('author.avatar.animation') == 'shake') {
     @keyframes avatar-shake {
       0% {
         transform: scale(1);
@@ -29,7 +29,7 @@ if (hexo-config('author.enable')) {
         transform: scale(1);
       }
     }
-  } else if (hexo-config('author.animation') == 'turn') {
+  } else if (hexo-config('author.avatar.animation') == 'turn') {
     @keyframes avatar-turn {
       100% {
         transform: rotate(1turn);