refactor: Perfect the anime & layout

layout/_components/reward.pug

 div#reward
   div.reward-button!= _p("reward.btn_text")
-  div.reward-qr.qr-hide
-    span.reward-qr-alipay
-      img(src=theme.reward.alipay)
-      div.reward-qr-alipay-text!= _p("reward.alipay")
-    span.reward-qr-wechat
-      img(src=theme.reward.wechat)
-      div.reward-qr-wechat-text!= _p("reward.wechat")
+  div.reward-qr-wrapper
+    div.reward-qr
+      span.reward-qr-alipay
+        img(src=theme.reward.alipay)
+        div.reward-qr-alipay-text!= _p("reward.alipay")
+      span.reward-qr-wechat
+        img(src=theme.reward.wechat)
+        div.reward-qr-wechat-text!= _p("reward.wechat")

layout/_third-party/search/algolia.pug

-link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css")
-script(defer src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js")
+link(href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css" rel="stylesheet" type="text/css")
+script(src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer)

source/css/_common/header.styl

@@ -99,10 +99,6 @@ $header-nav-item
   &.show
     opacity: 1
     visibility: visible
-    
-  &.hide
-    opacity: 0
-    visibility: hidden
 
 .header-nav-search
   float: right

source/css/_components/reward.styl

@@ -15,6 +15,9 @@
   &:hover
     background-color: $reward-btn-hover-color
 
+.reward-qr-wrapper
+  display: none
+
 .reward-qr
   display: flex
 
@@ -37,9 +40,3 @@
 
   &-wechat-text
     color: $reward-wechat-color
-
-  &.qr-hide
-    display: none
-
-  &.qr-show
-    display: flex

source/js/algolia-search.js

-$(document).ready(function () {
+$(document).ready(function() {
   $('.header-nav-search').click(function() {
     $('body').css('overflow', 'hidden');
     $('.algolia-popup').velocity('stop')

source/js/header.js

@@ -2,7 +2,7 @@ $(document).ready(function() {
   var $menu = $('.header-nav-menu');
 
   $(document).click(function() {
-    menuHide();
+    $menu.removeClass('show');
   });
 
   $('.header-nav-menu a').click(function(e) {
@@ -11,22 +11,8 @@ $(document).ready(function() {
   });
 
   $('.header-nav-menu-icon').click(function() {
-    if ($menu.css('visibility') === 'hidden') {
-      menuShow();
-    } else {
-      menuHide();
-    }
+    $menu.toggleClass('show');
 
     return false;
   });
-
-  function menuShow() {
-    $menu.removeClass('hide');
-    $menu.addClass('show');
-  }
-
-  function menuHide() {
-    $menu.removeClass('show');
-    $menu.addClass('hide');
-  }
 });

source/js/post.js

 $(document).ready(function() {
   $('img').each(function(index, img) {
     if (img.src.includes('?size=')) {
-      var size =
-        img.src.split('?size=')[1] && img.src.split('?size=')[1].toLowerCase();
+      var size = img.src.split('?size=')[1] &&
+        img.src.split('?size=')[1].toLowerCase();
       var w = size.split('x')[0];
       var h = size.split('x')[1];
 
@@ -12,8 +12,14 @@ $(document).ready(function() {
   });
 
   $('.reward-button').click(function() {
-    $('.reward-qr').toggleClass('qr-show');
-    $('.reward-qr').toggleClass('qr-hide');
+    if ($('.reward-qr-wrapper').css('display') === 'block') {
+      $('.reward-qr-wrapper').css('display', 'none');
+    } else {
+      $('.reward-qr-wrapper').velocity('stop')
+        .velocity('transition.slideDownBigIn', {
+          duration: 300
+        });
+    }
   });
 
   $(document).on('keydown', function(e) {

source/js/scroll.js

-$(document).ready(function () {
+$(document).ready(function() {
   // The previous distance from the page to the top.
   var prevScrollTop = 0;
   
@@ -26,10 +26,11 @@ $(document).ready(function () {
   });
 
   $('#back-top').click(function () {
-    $('body').velocity('stop').velocity('scroll', {
-      duration: 500,
-      easing: 'easeOutQuart'
-    });
+    $('body').velocity('stop')
+      .velocity('scroll', {
+        duration: 500,
+        easing: 'easeOutQuart'
+      });
 
     if (CONFIG.back2top_animation) {
       $('#back-top').velocity({
@@ -70,8 +71,7 @@ $(document).ready(function () {
   }
 
   function scrollHeadingToTop(anchor) {
-    $(anchor)
-      .velocity('stop')
+    $(anchor).velocity('stop')
       .velocity('scroll', {
         duration: 500,
         easing: 'easeOutSine'

source/js/sidebar.js

-$(document).ready(function () {
+$(document).ready(function() {
   var $toc = $('.sidebar-toc');
   var $view = $('.sidebar-overview');
   
@@ -58,7 +58,7 @@ $(document).ready(function () {
 
   if ($('.main-content, .main-content-layout').height() <
       $('#sidebar').height()) {
-    $('#main').css('height', $('#main').height());
+    $('#main').css('min-height', $('#main').height());
   }
 
   // Automatically expand items in the article directory
@@ -112,8 +112,8 @@ $(document).ready(function () {
     }
     
     if (isTocScroll) {
-      $currLink
-        .velocity('stop').velocity('scroll', {
+      $currLink.velocity('stop')
+        .velocity('scroll', {
           container: $toc,
           offset: -($toc.height() / 2),
           duration: 500,