feat: valine comment verify

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: https://pic.downk.cc/item/5e1c70bc2fb38b8c3c5b0a2f.png

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 沈宇
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,6 @@
 <p align="center"><a href="https://shen-yu.gitee.io" target="_blank" rel="noopener noreferrer"><img width="100" src="logo.png" alt="ayer logo"></a></p>
 
-<h3 align="center">一个干净且优雅的 Hexo 主题</h3>
+<h3 align="center">一个安静且优雅的 Hexo 主题</h3>
 
 <p align="center">
   <a href="https://travis-ci.org/Shen-Yu/hexo-theme-ayer?branch=master" target="_blank" rel="noopener noreferrer">
@@ -14,7 +14,7 @@
   </a>
   <br>
   <a href="https://github.com/Shen-Yu/hexo-theme-ayer/releases" target="_blank" rel="noopener noreferrer">
-    <img alt="GitHub release" src="https://img.shields.io/badge/release-v1.2-blue.svg">
+    <img alt="GitHub release" src="https://img.shields.io/badge/release-v1.5-blue.svg">
   </a>
  <img alt="language" src="https://img.shields.io/badge/language-ejs--stylus-orange.svg">
   <a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener noreferrer">
@@ -33,6 +33,8 @@
 
 ### [中文说明](https://shen-yu.gitee.io/2019/ayer/)
 
+### [国内镜像](https://gitee.com/shen-yu/hexo-theme-ayer)
+
 ![Screenshot](screenshots/hexo-theme-ayer.png)
 
 ### Install
@@ -58,7 +60,7 @@ git pull
 
 ### Configuration
 
-let me know if you can’t find anything.
+let me know if you have any questions.
 
 ``` yml
 # Menu-Sidebar
@@ -100,6 +102,15 @@ nav_text:
 # Catalog in article
 toc: true
 
+# images in the article support click to fullscreen
+image_viewer: true
+
+# https://github.com/willin/hexo-wordcount
+word_count:
+  enable: true
+  # only display in article page(not in index page)
+  only_article_visit: true
+
 # Reward Setting
 # type：0-close reward； 1-only open in article which you have configured reward:true； 2-open in all articles
 reward_type: 2
@@ -214,6 +225,21 @@ pageFooter: true
   $ npm uninstall hexo-generator-index --save
   $ npm install hexo-generator-index-pin-top --save
   ```
+### Categories
+``` bash
+  hexo new page categories
+```
+Then paste following codes to file: _posts/categories/index.md
+``` md
+---
+title: categories
+type: categories
+layout: "categories"
+---
+```
+
+### Tags
+Same as categories.
 
 ### Post poster
 
@@ -262,6 +288,5 @@ Use Tocbot to parse the title tags (h1~h6) in the content and insert the directo
 
 ---
 
-Inspired by [Ocean](https://github.com/zhwangart/hexo-theme-ocean)
-
-<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Ayer</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/Shen-Yu/hexo-theme-ayer" property="cc:attributionName" rel="cc:attributionURL">Eric-Shen</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
+<br/>
+<a src="https://github.com/Shen-Yu/hexo-theme-ayer">Ayer</a> by <a  href="https://github.com/Shen-Yu">Eric-Shen</a> is licensed under  <a rel="license" href="https://www.mit-license.org/">MIT</a>.

_config.yml

@@ -1,7 +1,8 @@
 # 侧边栏菜单
 menu:
   主页: /
-  目录: /archives
+  归档: /archives
+  分类: /categories
   标签: /tags
   旅行: /tags/旅行/
   摄影: http://shenyu-vip.lofter.com
@@ -36,6 +37,17 @@ nav_text:
 # 文章页是否显示目录
 toc: true
 
+# 文章中的图片是否支持点击放大
+image_viewer: true
+
+# https://github.com/willin/hexo-wordcount
+# 是否开启字数统计(关闭请设置enable为false)
+# 也可以单独在md文件里Front-matter设置`no_word_count: true`属性，来自定义关闭字数统计
+word_count:
+  enable: true
+  # 只在文章详情显示(不在首页显示)
+  only_article_visit: true
+
 # 打赏
 # 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
 reward_type: 2
@@ -63,6 +75,7 @@ leancloud:
 # Valine配置
 valine:
   enable: true # 是否启用
+  verify: false # 是否启用防垃圾验证
   avatar: mp # 头像样式(https://valine.js.org/avatar.html)
   placeholder: 给我的文章加点评论吧~ # placeholder
 

layout/_partial/after-footer.ejs

@@ -3,24 +3,28 @@
 <%- js('/js/lazyload.min') %>
 <%- js('/js/busuanzi-2.3.pure.min') %>
 <% if (theme.fancybox){ %>
-  <%- js('fancybox/jquery.fancybox.min') %>
+<%- js('fancybox/jquery.fancybox.min') %>
 <% } %>
 
 <% if (theme.toc && is_post()){ %>
-  <%- js('/js/tocbot.min') %>
-  <script>
-    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
-    tocbot.init({
-      tocSelector: '.tocbot',
-      contentSelector: '.article-entry',
-      headingSelector: 'h1, h2, h3, h4, h5, h6',
-      hasInnerContainers: true,
-      scrollSmooth: true,
-      positionFixedSelector: '.tocbot',
-      positionFixedClass: 'is-position-fixed',
-      fixedSidebarOffset: 'auto',
-    });
-  </script>
+<%- js('/js/tocbot.min') %>
+<script>
+  // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
+  tocbot.init({
+    tocSelector: '.tocbot',
+    contentSelector: '.article-entry',
+    headingSelector: 'h1, h2, h3, h4, h5, h6',
+    hasInnerContainers: true,
+    scrollSmooth: true,
+    positionFixedSelector: '.tocbot',
+    positionFixedClass: 'is-position-fixed',
+    fixedSidebarOffset: 'auto',
+    onClick: (e) => {
+      document.getElementById(e.target.innerText).scrollIntoView()
+      return false;
+    }
+  });
+</script>
 <% } %>
 
 <script>
@@ -34,10 +38,12 @@
 <script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
 
-<% if (theme.mathjax){ %>
-  <%- partial('mathjax') %>
+<% if (theme.image_viewer){ %>
+<%- partial('viewer') %>
 <% } %>
 
-<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
-  
-  
+<% if (theme.mathjax){ %>
+<%- partial('mathjax') %>
+<% } %>
+
+<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>

layout/_partial/archive.ejs

@@ -9,8 +9,9 @@
       else title = __('archive_a');
     }
     %>
+    <% if (pagination !== 2){ %>
     <h1 class="page-type-title"><%- title %></h1>
-
+    <% } %>
     <% if (pagination == 2){ %>
     <% page.posts.each(function(post){ %>
     <%- partial('article', {post: post, index: true}) %>

layout/_partial/article.ejs

@@ -12,6 +12,9 @@
     <div class="article-meta">
       <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
       <%- partial('post/category') %>
+      <% if(theme.word_count && theme.word_count.enable && !post.no_word_count){%>
+      <%- partial('post/word') %>
+      <% } %>
     </div>
     <% } %>
 
@@ -31,11 +34,11 @@
       <%- post.content %>
       <% } %>
       <!-- 打赏 -->
-      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
-        <div id="reward-btn">
-          打赏
-        </div>
-        <% } %>
+      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index && !post.no_reward){ %>
+      <div id="reward-btn">
+        打赏
+      </div>
+      <% } %>
     </div>
     <footer class="article-footer">
       <a data-url="<%- post.permalink %>" data-id="<%= post._id %>"
@@ -49,7 +52,7 @@
   <%- partial('post/nav') %>
   <% } %>
 
-  <% if (theme.valine && theme.valine.enable){ %>
+  <% if (theme.valine && theme.valine.enable && !post.no_valine){ %>
   <%- partial('post/valine', {
             key: post.slug,
             title: post.title,

layout/_partial/ayer.ejs

@@ -25,7 +25,7 @@
     </div>
   </div>
   <div class="cover-learn-more">
-    <a href="#main" class="anchor"><i class="ri-arrow-down-line"></i></a>
+    <a href="javascript:void(0)" class="anchor"><i class="ri-arrow-down-line"></i></a>
   </div>
 </section>
 <% } %>

layout/_partial/footer.ejs

@@ -8,7 +8,7 @@
       </li>
       <li>
         <% if (theme.pageFooter){ %>
-          Power by
+          Powered by
         <% var hexoLink = '<a href="https://hexo.io" target="_blank">Hexo</a>'; %>
         <% var themeLink = '<a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>'; %>
         <%- hexoLink %> Theme <%- themeLink %>

layout/_partial/post/valine.ejs

@@ -10,7 +10,7 @@
     new Valine({
         el: '#vcomments',
         notify: false,
-        verify: false,
+        verify: '<%- theme.leancloud.verify %>',
         app_id: '<%- theme.leancloud.app_id %>',
         app_key: '<%- theme.leancloud.app_key %>',
         path: window.location.pathname,

layout/_partial/post/word.ejs

@@ -0,0 +1,20 @@
+<% if (!theme.word_count.only_article_visit || (!index && theme.word_count.only_article_visit)){ %>
+<div class="word_count">
+    <span class="post-time">
+        <span class="post-meta-item-icon">
+            <i class="ri-quill-pen-line"></i>
+            <span class="post-meta-item-text"> 字数统计:</span>
+            <span class="post-count"><%= wordcount(post.content) %>字</span>
+        </span>
+    </span>
+
+    <span class="post-time">
+        &nbsp; | &nbsp;
+        <span class="post-meta-item-icon">
+            <i class="ri-book-open-line"></i>
+            <span class="post-meta-item-text"> 阅读时长≈</span>
+            <span class="post-count"><%= min2read(post.content) %>分钟</span>
+        </span>
+    </span>
+</div>
+<% } %>

layout/_partial/viewer.ejs

@@ -0,0 +1,106 @@
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                        <div class="pswp__preloader__cut">
+                            <div class="pswp__preloader__donut"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div>
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
+
+<script>
+    function viewer_init() {
+        let pswpElement = document.querySelectorAll('.pswp')[0];
+        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))
+
+        $imgArr.forEach(($em, i) => {
+            $em.onclick = () => {
+                // slider展开状态
+                // todo: 这样不好，后面改成状态
+                if (document.querySelector('.left-col.show')) return
+                let items = []
+                $imgArr.forEach(($em2, i2) => {
+                    let img = $em2.getAttribute('data-idx', i2)
+                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
+                    let title = $em2.getAttribute('alt')
+                    // 获得原图尺寸
+                    const image = new Image()
+                    image.src = src
+                    items.push({
+                        src: src,
+                        w: image.width || $em2.width,
+                        h: image.height || $em2.height,
+                        title: title
+                    })
+                })
+                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
+                    index: parseInt(i)
+                });
+                gallery.init()
+            }
+        })
+    }
+    viewer_init()
+</script>

layout/categories.ejs

@@ -1,6 +1,17 @@
 <section class="outer">
   <% if (site.categories.length){ %>
     <h1 class="page-type-title"><%= __('categories') %></h1>
-    <%- list_categories({show_count: theme.show_count}) %>
+    <!-- <%- list_categories({show_count: theme.show_count}) %> -->
+    <ul class="category-list">
+      <% site.categories.sort('name').each(function(item){ %>
+        <% if(item.posts.length){ %> 
+          <a class="category-list-link" href="<%- config.root %><%- item.path %>" title="<%= item.name %>">
+            <li class="category-list-item">
+            <%= item.name %><i><%= item.posts.length %></i>
+            </li>
+          </a>
+        <% } %>
+      <% }); %>
+      </ul>
   <% } %>
 </section>

layout/layout.ejs

@@ -9,11 +9,7 @@
         <%- partial('_partial/totop') %>
       </div>
     </main>
-    <% if (theme.toc && is_post()){ %>
-    <aside class="sidebar">
-      <% } else { %>
       <aside class="sidebar">
-        <% } %>
         <%- partial('_partial/sidebar') %>
       </aside>
       <%- partial('_partial/modal') %>

scripts/default_config.js

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+  
+  // 生成meta `generator`
+  meta_generator: true
+
+};

scripts/filters/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const metaGeneratorPath = './meta_generator';
+
+module.exports = hexo => {
+  /* const {
+    filter
+  } = hexo.extend; */
+  // filter.register('after_render:html', require('./meta_generator'));
+};
+
+// 保持过滤器最先执行
+hexo.extend.filter.register('after_render:html', require(metaGeneratorPath), 1);

scripts/filters/meta_generator.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const defaultConfig = require('../default_config');
+
+function hexoMetaGeneratorInject(data) {
+  const config = defaultConfig;
+  if (!config.meta_generator || !data ||
+    data.match(/<meta\s+name=['|"]?generator['|"]?/i)) {
+    return;
+  }
+
+  const hexoGeneratorTag = `\n  <meta name="generator" content="hexo-theme-yilia-plus">`;
+
+  return data.replace('</title>', '</title>' + hexoGeneratorTag);
+}
+
+module.exports = hexoMetaGeneratorInject;

scripts/helpers/ayer-plus-vendors.js

@@ -0,0 +1,9 @@
+/* global hexo */
+
+'use strict';
+
+/** 自定义链接生成 */
+hexo.extend.helper.register('ayer_plus_vendors', function (url) {
+  if (url.startsWith('//')) return url;
+  return this.url_for(`${url}`);
+});

scripts/helpers/wordcount.js

@@ -0,0 +1,39 @@
+var util = require('hexo-util');
+var stripHTML = util.stripHTML;
+
+var counter = function (content) {
+  content = stripHTML(content);
+  const cn = (content.match(/[\u4E00-\u9FA5]/g) || []).length;
+  const en = (content.replace(/[\u4E00-\u9FA5]/g, '').match(/[a-zA-Z0-9_\u0392-\u03c9\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|[\u00E4\u00C4\u00E5\u00C5\u00F6\u00D6]+|\w+/g) || []).length;
+  return [cn, en];
+};
+
+hexo.extend.helper.register('min2read', function (content, {
+  cn = 300,
+  en = 160
+} = {}) {
+  var len = counter(content);
+  var readingTime = len[0] / cn + len[1] / en;
+  return readingTime < 1 ? '1' : parseInt(readingTime, 10);
+});
+
+hexo.extend.helper.register('wordcount', function (content) {
+  var len = counter(content);
+  var count = len[0] + len[1];
+  if (count < 1000) {
+    return count;
+  }
+  return Math.round(count / 100) / 10 + 'k';
+});
+
+hexo.extend.helper.register('totalcount', function (site) {
+  var count = 0;
+  site.posts.forEach(function (post) {
+    var len = counter(post.content);
+    count += len[0] + len[1];
+  });
+  if (count < 1000) {
+    return count;
+  }
+  return Math.round(count / 100) / 10 + 'k';
+});

scripts/lib/core.js

@@ -0,0 +1,25 @@
+/* global hexo */
+
+'use strict';
+
+// Hexo事件:https://hexo.io/zh-cn/api/events
+
+/** 在静态文件生成前发布 */
+hexo.on('generateBefore', () => {
+  // Merge config.
+  //require('./../filters/index')(hexo);
+});
+
+/** 在文章文件建立后发布。该事件返回文章参数。 */
+hexo.on('new', function (post) {
+  //console.log(post)
+});
+
+/** 在文章开始渲染前执行 */
+hexo.extend.filter.register('before_post_render', function (data) {
+  //var config = hexo.config;
+  //console.log(3);
+  //console.log(config);
+  //console.log(hexo.theme.config);
+
+});

source/css/_extend.styl

@@ -34,8 +34,7 @@ $base-style
   acronym, abbr
     border-bottom border-width border-color dotted
   ul, ol, dl
-    margin 1.5rem 0
-    line-height line-height
+    margin 1.5rem 0 1.5rem 2rem
 
   p, table, blockquote
     margin 1.5rem 0

source/css/_partial/archive.styl

@@ -46,7 +46,7 @@
     padding-left 3rem
     .archive-article-title
       text-decoration: none
-      font-size 1.5rem
+      font-size 1.8rem
 
 .archive-article-footer
   margin-top: 1.5rem

source/css/_partial/article.styl

@@ -32,7 +32,7 @@
   @extend $block-caption
   &::before
     content '\eaf2'
-    margin-right .5rem
+    margin-right .15rem
     font-family remixicon
     opacity .5
 
@@ -42,7 +42,7 @@
   &:before
     content "\efde"
     font-family remixicon
-    margin-right .5rem
+    margin-right .15rem
     opacity 0.6
   .article-category-link
     @extend $block-caption
@@ -53,7 +53,7 @@
 
 .article-entry
   font-size 110%
-  margin-top 1rem
+  margin-top .5rem
   clearfix()
   @extend $base-style
   color body-color

source/css/_partial/ayer.styl

@@ -71,6 +71,12 @@
   z-index 9998
   display none
 
+.word_count
+  margin-top 5px
+  color darken(gray,30%)
+  padding-bottom 1rem
+  border-bottom 1px solid darken(froth-light,2%)
+
 // Media Query
 @media (max-width: 768px)
   .cover-inner

source/css/_partial/categories.styl

@@ -4,10 +4,41 @@
   list-unstyled()
   margin-right -.5rem
   margin-left -.5rem
-  > .category-list-item
-    display inline-block
-    padding .5rem 1rem
+  .category-list-item
+    margin: 10px 10px;
+    padding: 0 14px;
+    display: inline-block;
+    text-align: center;
+    height: 38px;
+    min-width: 80px;
+    line-height: 38px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    border-radius: 5px;
+    word-wrap: break-word;
+    cursor: pointer;
+    box-shadow: 0px 3px 5px rgba(0,0,0,0.08);
+    border: 1px solid #e7e7eb
     &:before
       content "\efde"
       font-family remixicon
-      margin-right .5rem
+      margin-right .5rem
+      display inline-block
+      vertical-align middle
+    i 
+      font-style normal
+      margin-left 10px
+      color: darken(water,20%)
+  a 
+    display inline-block
+    vertical-align middle
+    text-decoration: none 
+    color: body-color
+    &:hover
+      .category-list-item
+        border: 1px solid darken(water,20%)
+        box-shadow:  0 3px 5px water
+        color: darken(water,30%);
+      &:before
+        color: darken(water,30%);
+    

source/css/_partial/tag.styl

@@ -11,4 +11,22 @@
     &:before
       content "\eec3"
       font-family remixicon
-      margin-right .5rem
+      margin-right .5rem
+      display inline-block
+      vertical-align middle
+      color: tag-color
+    .tag-list-link
+      display inline-block
+      vertical-align middle
+      text-decoration: none
+      height 30px
+      line-height 30px
+      padding: 0 15px
+      font-size: 1.5rem
+      border-radius: 15px
+      background-color tag-color
+      color white
+      box-shadow: 0 3px 5px rgba(0,0,0,0.12)
+      transition: .2s
+      &:hover
+        transform: scale(1.1)

source/css/_variables.styl

@@ -51,7 +51,7 @@ border-width    = 0.1rem
 border-color    = froth
 
 // Layout
-aside-width      = 7rem
+aside-width      = 8rem
 wrap-width       = 70rem
 years-width      = 6rem
 logo-size        = 4.2rem

source/js/ayer.js

@@ -137,11 +137,11 @@
     margins: 5
   });
 
-  //
+  // scroll down
   $(document).ready(function ($) {
-    $('.anchor').click(function (event) {
-      event.preventDefault();
-      $('main').animate({ scrollTop: $(this.hash).offset().top }, 'smooth');
+    $('.anchor').click(function (e) {
+      e.preventDefault();
+      $('main').animate({ scrollTop: $('.cover').height() }, 'smooth');
     });
   });
 
@@ -176,30 +176,14 @@
 
   // Mobile nav
   var $content = $('.content'),
-    $sidebar = $('.sidebar'),
-    isMobileNavAnim = false,
-    mobileNavAnimDuration = 200;
-
-  var startMobileNavAnim = function () {
-    isMobileNavAnim = true;
-  };
-
-  var stopMobileNavAnim = function () {
-    setTimeout(function () {
-      isMobileNavAnim = false;
-    }, mobileNavAnimDuration);
-  };
+    $sidebar = $('.sidebar');
 
   $('.navbar-toggle').on('click', function () {
-    if (isMobileNavAnim) return;
-    startMobileNavAnim();
     $content.toggleClass('on');
     $sidebar.toggleClass('on');
-    stopMobileNavAnim();
   });
 
   $($content).on('click', function () {
-    if (isMobileNavAnim || !$content.hasClass('on')) return;
     $content.removeClass('on');
     $sidebar.removeClass('on');
   });