feat: tidy style and layout

assets/css/_core/_base.scss

@@ -11,11 +11,11 @@ html {
 
   &::-webkit-scrollbar-thumb {
     height: 40px;
-    background-color: #eee;
+    background-color: #87878D;
     border-radius: 16px;
 
     &:hover {
-      background-color: #C2C2C2;
+      background-color: #A9A9B3;
     }
   }
 }
@@ -73,11 +73,3 @@ a {
     }
   }
 }
-
-.navbar {
-  background-color: $navbar-background-color;
-
-  .dark-theme & {
-    background-color: $navbar-background-color-dark;
-  }
-}

assets/css/_core/_layout.scss

@@ -1,5 +1,4 @@
-  /** Layout **/
-
+/** Layout **/
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -7,24 +6,6 @@
   width: 100%;
 }
 
-.navbar {
-  display: block !important;
-  position: fixed;
-  width: 100%;
-  z-index: 100;
-  height: 4rem;
-  line-height: 4rem;
-
-  .container {
-    width: auto;
-    max-width: 1200px;
-    text-align: center;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
 .main {
   flex: 1 0 auto;
 }

assets/css/_core/_media.scss

@@ -1,192 +1,49 @@
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-  .navbar {
-    display: none !important;
-  }
-
-  .post-toc {
-    display: none !important;
-  }
-
-  .navbar-mobile {
-    display: block !important;
-    position: fixed !important;
-    width: 100% !important;
-    z-index: 100 !important;
-    transition: all 0.3s ease 0s !important;
-
-    .container {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 4.5em !important;
-      line-height: 4.5em !important;
-      background: $global-background-color !important;
-
-      .navbar-header {
-        display: flex !important;
-        justify-content: space-between !important;
-        align-items: center !important;
-        width: 100% !important;
-        font-size: 18px !important;
-        padding-right: 1em !important;
-        padding-left: 1em !important;
-        box-sizing: border-box !important;
-
-        .menu-toggle {
-          cursor: pointer !important;
-          line-height: 4.5em !important;
-
-          span {
-            display: block !important;
-            background: #000 !important;
-            width: 36px !important;
-            height: 2px !important;
-            -webkit-border-radius: 3px !important;
-            -moz-border-radius: 3px !important;
-            border-radius: 3px !important;
-            -webkit-transition: .2s margin .2s, .2s transform !important;
-            -moz-transition: .2s margin .2s, .2s transform !important;
-            transition: .2s margin .2s, .2s transform !important;
-
-            .dark-theme & {
-              background: $global-font-color-dark !important;
-            }
-          }
-
-          span:nth-child(1) {
-            margin-bottom: 8px !important;
-          }
-
-          span:nth-child(3) {
-            margin-top: 8px !important;
-          }
-
-          &.active {
-            span {
-              -webkit-transition: .2s margin, .2s transform .2s !important;
-              -moz-transition: .2s margin, .2s transform .2s !important;
-              transition: .2s margin, .2s transform .2s !important;
-            }
-
-            span:nth-child(1) {
-              -moz-transform: rotate(45deg) translate(4px, 6px) !important;
-              -ms-transform: rotate(45deg) translate(4px, 6px) !important;
-              -webkit-transform: rotate(45deg) translate(4px, 6px) !important;
-              transform: rotate(45deg) translate(4px, 6px) !important;
-            }
-
-            span:nth-child(2) {
-              opacity: 0
-            }
-
-            span:nth-child(3) {
-              -moz-transform: rotate(-45deg) translate(8px, -10px) !important;
-              -ms-transform: rotate(-45deg) translate(8px, -10px) !important;
-              -webkit-transform: rotate(-45deg) translate(8px, -10px) !important;
-              transform: rotate(-45deg) translate(8px, -10px) !important;
-            }
-          }
-        }
-      }
-
-      .menu {
-        text-align: center !important;
-        background: $global-background-color !important;
-        border-top: 2px solid $global-font-color !important;
-        display: none !important;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
-
-        a {
-          display: block !important;
-          line-height: 2.5em !important;
-        }
-
-        &.active {
-          display: block !important;
-        }
-
-        .dark-theme & {
-          background: $global-background-color-dark !important;
-          border-top: 2px solid $global-font-color-dark !important;
-        }
-      }
-
-      .dark-theme & {
-        background: $global-background-color-dark !important;
-      }
-    }
-  }
-
-  #dynamic-to-top {
-    display: none !important;
-  }
-
+/* iPads (landscape) ----------- */
+@media only screen and (max-width: 1300px) {
   .post-warp {
-    .categories-card {
-      .card-item {
-        width: 95% !important;
-      }
+    max-width: 560px;
+
+    .post-toc {
+      margin-left: 580px;
     }
   }
 }
 
 /* iPads (portrait) ----------- */
-
-@media only screen and (min-width: 768px) {
+@media only screen and (max-width: 1080px) {
   .post-warp {
-    max-width: 600px !important;
-  }
+    max-width: 80%;
 
-  .navbar-mobile {
-    display: none !important;
-  }
+    .post-toc {
+      display: none;
+    }
 
-  .post-toc {
-    display: none !important;
-  }
-
-  .post-toc-mobile {
-    display: block !important;
+    .post-toc-mobile {
+      display: block;
+    }
   }
 }
 
-/* iPads (landscape) ----------- */
-
-@media only screen and (min-width: 1080px) {
-  .post-warp {
-    max-width: 560px !important;
-  }
-
-  .post-toc {
-    display: block !important;
-    margin-left: 580px !important;
+@media only screen and (max-width: 400px) {
+  .navbar {
+    display: none;
   }
 
   .navbar-mobile {
-    display: none !important;
+    display: block;
   }
 
-  .post-toc-mobile {
-    display: none !important;
-  }
-}
-
-/* Desktops and laptops ----------- */
-
-@media only screen and (min-width: 1300px) {
   .post-warp {
-    max-width: 780px !important;
+    max-width: 100%;
+
+    .categories-card {
+      .card-item {
+        width: 95%;
+      }
+    }
   }
 
-  .post-toc {
-    display: block !important;
-    margin-left: 800px !important;
-  }
-
-  .navbar-mobile {
-    display: none !important;
-  }
-
-  .post-toc-mobile {
+  .dynamic-to-top {
     display: none !important;
   }
 }

assets/css/_custom.scss

@@ -2,10 +2,3 @@
 // Custom style
 // ==============================
 // You can override the variables in _variables.scss to customize the style
-
-.since {
-  padding: 30px;
-  text-align:center;
-  font-size: 30px;
-  line-height: 50px;
-}

assets/css/_page/_home.scss

@@ -1,13 +1,13 @@
 /** Home **/
-.intro {
+.home-intro {
   transform: translateY(25vh);
   text-align: center;
 
-  .avatar {
-    padding: 10px;
+  .home-avatar {
+    padding: 0.6rem;
 
     img {
-      width: 128px;
+      width: 8rem;
       height: auto;
       display: inline-block;
       -webkit-border-radius: 100%;
@@ -23,35 +23,35 @@
 
       &:hover {
         position: relative;
-        -webkit-transform: translateY(-0.75em);
-        -moz-transform: translateY(-0.75em);
-        -ms-transform: translateY(-0.75em);
-        -o-transform: translateY(-0.75em);
-        transform: translateY(-0.75em);
+        -webkit-transform: translateY(-0.75rem);
+        -moz-transform: translateY(-0.75rem);
+        -ms-transform: translateY(-0.75rem);
+        -o-transform: translateY(-0.75rem);
+        transform: translateY(-0.75rem);
         cursor: pointer;
       }
     }
   }
-}
 
-h2.description {
-  font-size: 1em;
-  font-weight: normal;
-  padding: 5px;
-}
+  .home-description {
+    font-size: 1rem;
+    font-weight: normal;
+    padding: .4rem;
+  }
 
-.social-links {
-  a {
+  .home-social-links {
+    padding-top: .6rem;
 
-    padding: 0 5px;
+    a {
+      padding: 0 .4rem;
 
-    &:hover {
+      &:hover {
+        background-color: transparent;
+      }
+    }
 
-      background-color: transparent;
+    i {
+      font-size: 1.4rem;
     }
   }
-
-  i {
-    font-size: 1.4em;
-  }
 }

assets/css/_page/_index.scss

@@ -14,9 +14,16 @@
 .archive {
   .post-title {
     text-align: right;
-    padding-bottom: 2em;
+    padding-bottom: 2rem;
   }
 
   @import "_terms";
   @import "_tags";
+}
+
+.single {
+  .post-title {
+    text-align: right;
+    padding-bottom: 2rem;
+  }
 }

assets/css/_page/_post.scss

@@ -1,10 +1,8 @@
 /** Post **/
-.post-header {
-  .post-title {
-    margin: 0 !important;
-    font-size: 2rem;
-    line-height: 3rem;
-  }
+.post-title {
+  margin: 0 !important;
+  font-size: 2rem;
+  line-height: 3rem;
 }
 
 .post-meta {
@@ -42,9 +40,18 @@
 
 .post-featured-image {
   padding-top: .6rem;
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+    overflow: hidden;
+  }
 }
 
 .post-toc {
+  display: block;
   position: absolute;
   width: 240px;
   max-width: 300px;
@@ -90,6 +97,7 @@
 }
 
 .post-toc-mobile {
+  display: none;
   padding-top: .8rem;
 
   details {
@@ -147,14 +155,6 @@
   }
 }
 
-.featured_image {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
 .post-content {
   a.post-title-target:target {
     display: block;
@@ -192,6 +192,12 @@
     }
   }
 
+  p {
+    font-size: 1em;
+    margin: .5em 0 .5em 0;
+    text-align: justify;
+  }
+
   a {
     color: $post-link-color;
 
@@ -343,6 +349,8 @@
   }
 
   .echarts {
+    width: 100%;
+    height: 30rem;
     margin: 3% auto;
     text-align: center;
   }
@@ -443,12 +451,26 @@
       }
     }
   }
-}
 
-p {
-  font-size: 1em;
-  margin: .5em 0 .5em 0;
-  text-align: justify;
+  .align-left {
+    text-align: left;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
 }
 
 .post-footer {
@@ -547,24 +569,4 @@ p {
 
 .post-comment {
   padding: 3em 0;
-}
-
-.align-left {
-  text-align: left;
-}
-
-.align-center {
-  text-align: center;
-}
-
-.align-right {
-  text-align: right;
-}
-
-.float-left {
-  float: left;
-}
-
-.float-right {
-  float: right;
 }

assets/css/_page/_posts.scss

@@ -1,19 +1,18 @@
-.intro {
+.home-intro {
   transform: translateY(0);
-  padding: 2em 0 2em 0;
+  padding: 2rem 0 2rem 0;
 
-  .avatar {
+  .home-avatar {
     img {
-      width: 96px;
+      width: 6rem;
     }
   }
 }
 
 .post {
-  padding-top: 0.8em;
-  padding-bottom: 0.8em;
+  padding-top: 1rem;
+  padding-bottom: .8rem;
   color: $global-font-color;
-  border-top: 1px dashed $global-border-color;
   border-bottom: 1px dashed $global-border-color;
 
   .dark-theme & {
@@ -25,7 +24,7 @@
     width: 100%;
     padding: 30% 0 0;
     position: relative;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 
     img {
       position: absolute;
@@ -36,11 +35,11 @@
   }
 
   .post-list-title {
-    font-size: 1.6em;
+    font-size: 1.6rem;
   }
 
   .post-meta {
-    font-size: 14px !important;
+    font-size: .875rem !important;
     a {
       color: $global-font-secondary-color !important;
 
@@ -59,10 +58,10 @@
   }
 
   .post-content {
-    padding-top: .2em;
-    font-size: 0.9em;
+    padding-top: .2rem;
+    font-size: .9rem;
     width: 100%;
-    max-height: 108px;
+    max-height: 6.8rem;
     overflow: hidden;
 
     h2,
@@ -70,25 +69,25 @@
     h4,
     h5,
     h6 {
-      font-size: 1em;
-      line-height: 1em;
-      padding-top: .3em;
-      padding-bottom: .3em;
+      font-size: 1rem;
+      line-height: 1rem;
+      padding-top: .3rem;
+      padding-bottom: .3rem;
     }
 
     p {
     margin: 0;
-    padding-top: .3em;
-    padding-bottom: .3em;
+    padding-top: .3rem;
+    padding-bottom: .3rem;
     }
   }
 
   .post-footer {
-    margin-top: 0.5em;
+    margin-top: .5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 14px !important;
+    font-size: .875rem !important;
 
     a {
       color: $post-link-color !important;

assets/css/_page/_terms.scss

@@ -4,23 +4,23 @@
 
 .categories-card {
   margin: 0 auto;
-  margin-top: 3em;
+  margin-top: 3rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 2.5em;
-  line-height: 1.6em;
+  padding: 0 2.5rem;
+  line-height: 1.6rem;
 
   .card-item {
-    font-size: 14px;
+    font-size: .875rem;
     text-align: left;
     width: 45%;
     display: flex;
     align-items: flex-start;
-    margin-top: 2em;
-    min-height: 10em;
+    margin-top: 2rem;
+    min-height: 10rem;
     padding: 0 2%;
     position: relative;
 
@@ -78,6 +78,6 @@
 
   span {
     float: right;
-    padding-right: 1em;
+    padding-right: 1rem;
   }
 }

assets/css/_partial/_footer.scss

@@ -1,26 +1,25 @@
 /**Footer**/
-
 .copyright {
-  font-size: 14px;
+  font-size: .875rem;
 }
 
-#dynamic-to-top {
+.dynamic-to-top {
   display: none;
   overflow: hidden;
   width: auto;
   z-index: 90;
   position: fixed;
-  bottom: 2em;
-  right: 2em;
+  bottom: 2rem;
+  right: 2rem;
   top: auto;
   left: auto;
   font-family: sans-serif;
-  font-size: 1em;
+  font-size: 1rem;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 1px 0 #333;
   font-weight: bold;
-  padding: 17px 16px;
+  padding: 1rem 1rem;
   border: 1px solid $global-border-color;
   background: #222;
   &:hover {
@@ -38,8 +37,8 @@
   span {
     display: block;
     overflow: hidden;
-    width: 14px;
-    height: 12px;
+    width: .875rem;
+    height: .75rem;
     background: url('data:image/png;base64,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') no-repeat center center;
   }
 

assets/css/_partial/_navbar.scss

@@ -1,27 +1,152 @@
-.header-logo a {
-  padding: 0;
-
-  i {
-    line-height: 2em;
-  }
-}
-
-.navbar .menu a {
-
-  padding: 0 8px;
-}
-
-.navbar .menu .active {
-  font-weight: 900;
-  color: $navbar-active-color;
+.navbar {
+  display: block;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  height: 4rem;
+  line-height: 4rem;
+  background-color: $navbar-background-color;
 
   .dark-theme & {
-    color: $navbar-active-color-dark;
+    background-color: $navbar-background-color-dark;
+  }
+
+  .navbar-container {
+    width: auto;
+    max-width: 1200px;
+    text-align: center;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+
+    .navbar-header a {
+      padding: 0 8px;
+
+      i {
+        line-height: 2em;
+      }
+    }
+
+    .navbar-menu a {
+      padding: 0 8px;
+
+      &.active {
+        font-weight: 900;
+        color: $navbar-active-color;
+
+        .dark-theme & {
+          color: $navbar-active-color-dark;
+        }
+      }
+    }
   }
 }
 
-.navbar-header a:hover,
-.navbar .menu a:hover {
+.navbar-mobile {
+  display: none;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  transition: all 0.3s ease 0s;
 
-  background-color: transparent;
+  .navbar-container {
+    padding: 0;
+    margin: 0;
+    height: 4.5em;
+    line-height: 4.5em;
+    background: $global-background-color;
+
+    .navbar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      font-size: 18px;
+      padding-right: 1em;
+      padding-left: 1em;
+      box-sizing: border-box;
+
+      .menu-toggle {
+        cursor: pointer;
+        line-height: 4.5em;
+
+        span {
+          display: block;
+          background: #000;
+          width: 36px;
+          height: 2px;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          border-radius: 3px;
+          -webkit-transition: .2s margin .2s, .2s transform;
+          -moz-transition: .2s margin .2s, .2s transform;
+          transition: .2s margin .2s, .2s transform;
+
+          .dark-theme & {
+            background: $global-font-color-dark;
+          }
+        }
+
+        span:nth-child(1) {
+          margin-bottom: 8px;
+        }
+
+        span:nth-child(3) {
+          margin-top: 8px;
+        }
+
+        &.active {
+          span {
+            -webkit-transition: .2s margin, .2s transform .2s;
+            -moz-transition: .2s margin, .2s transform .2s;
+            transition: .2s margin, .2s transform .2s;
+          }
+
+          span:nth-child(1) {
+            -moz-transform: rotate(45deg) translate(4px, 6px);
+            -ms-transform: rotate(45deg) translate(4px, 6px);
+            -webkit-transform: rotate(45deg) translate(4px, 6px);
+            transform: rotate(45deg) translate(4px, 6px);
+          }
+
+          span:nth-child(2) {
+            opacity: 0
+          }
+
+          span:nth-child(3) {
+            -moz-transform: rotate(-45deg) translate(8px, -10px);
+            -ms-transform: rotate(-45deg) translate(8px, -10px);
+            -webkit-transform: rotate(-45deg) translate(8px, -10px);
+            transform: rotate(-45deg) translate(8px, -10px);
+          }
+        }
+      }
+    }
+
+    .navbar-menu {
+      text-align: center;
+      background: $global-background-color;
+      border-top: 2px solid $global-font-color;
+      display: none;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
+
+      a {
+        display: block;
+        line-height: 2.5em;
+      }
+
+      &.active {
+        display: block;
+      }
+
+      .dark-theme & {
+        background: $global-background-color-dark;
+        border-top: 2px solid $global-font-color-dark;
+      }
+    }
+
+    .dark-theme & {
+      background: $global-background-color-dark;
+    }
+  }
 }

assets/css/_partial/_pagination.scss

@@ -1,5 +1,4 @@
   /** pagination **/
-
 .pagination {
   display: flex;
   flex-direction: row;
@@ -7,13 +6,13 @@
   list-style: none;
   white-space: nowrap;
   width: 100%;
-  padding-top: 1em;
+  padding-top: 1rem;
 
   a {
     -webkit-font-smoothing: antialiased;
-    font-size: 0.8em;
+    font-size: .8rem;
     color: #bfbfbf;
-    letter-spacing: 0.1em;
+    letter-spacing: .1rem;
     font-weight: 700;
     padding: 5px 5px;
     text-decoration: none;

assets/css/lib/VERSION

@@ -1,4 +1,5 @@
 fontawesome-free@5.10.1
 gittalk@1.5.0
 katex@0.11.0
-aplayer@1.10.1
+aplayer@1.10.1
+animate.css@3.7.2

assets/js/blog.js

@@ -5,8 +5,8 @@ jQuery(function($) {
     var _Blog = window._Blog || {};
 
     _Blog.toggleMobileMenu = function() {
-        $('.menu-toggle').on('click', () => {
-            $('.menu-toggle').toggleClass('active');
+        $('#menu-toggle').on('click', () => {
+            $('#menu-toggle').toggleClass('active');
             $('#mobile-menu').toggleClass('active');
         });
     };
@@ -32,29 +32,48 @@ jQuery(function($) {
 
     _Blog.dynamicToTop = function() {
         const min = 300;
-        const speed = 300;
-        const fade_in = 600;
-        const fade_out = 400;
         var $toTop = $('#dynamic-to-top');
-        $toTop.click(function() {
-          $('html, body').stop().animate({
-            scrollTop: 0
-          }, speed, 'linear');
-          return false;
-        });
         $(window).scroll(function() {
-          var scrollTop = $(window).scrollTop();
-          if (typeof document.body.style.maxHeight === 'undefined') {
-            $toTop.css({
-              'position': 'absolute',
-              'top': scrollTop + $(window).height() - 20,
-            });
-          }
-          if (scrollTop > min) {
-            $toTop.fadeIn(fade_in);
-          } else {
-            $toTop.fadeOut(fade_out);
-          }
+            var scrollTop = $(window).scrollTop();
+            if (typeof document.body.style.maxHeight === 'undefined') {
+                $toTop.css({
+                    'position': 'absolute',
+                    'top': scrollTop + $(window).height() - 20,
+                });
+            }
+            if (scrollTop > min) {
+                (function fadeIn(el, display){
+                    display = display || "block";
+                    if (el.style.display !== display) {
+                        el.style.opacity = 0;
+                        el.style.display = display;
+                        (function fade() {
+                            var val = parseFloat(el.style.opacity);
+                            if (!((val += .1) > 1)) {
+                                el.style.opacity = val;
+                                requestAnimationFrame(fade);
+                            }
+                        })();
+                    }
+                })(document.getElementById('dynamic-to-top'));
+            } else {
+                (function fadeOut(el){
+                    if (el.style.display !== "none") {
+                        el.style.opacity = 1;
+                        (function fade() {
+                            if ((el.style.opacity -= .1) < 0) {
+                                el.style.display = "none";
+                            } else {
+                                requestAnimationFrame(fade);
+                            }
+                        })();
+                    }
+                })(document.getElementById('dynamic-to-top'));
+            }
+        });
+        new SmoothScroll('#dynamic-to-top', {
+            speed: 300,
+            speedAsDuration: true,
         });
     };
 
@@ -106,10 +125,10 @@ jQuery(function($) {
     };
 
     _Blog._initToc = function() {
-        const $toc = $('.post-toc');
+        const $toc = $('#post-toc');
         if ($toc.length && $toc.css('display') !== 'none') {
             const SPACING = 100;
-            const $footer = $('.post-footer');
+            const $footer = $('#post-footer');
             const minTop = $toc.position().top;;
             const mainTop = $('main').position().top;
             const minScrollTop = minTop + mainTop - SPACING;
@@ -212,25 +231,28 @@ jQuery(function($) {
             }
             echartsArr = [];
             Object.keys(echartsMap).forEach(function(id) {
-                let myChart = echarts.init(document.getElementById(id), isDark ? 'dark' : 'light');
+                let myChart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
                 myChart.setOption(echartsMap[id]);
                 echartsArr.push(myChart);
             });
+            window.addEventListener("resize", function() {
+                this.setTimeout(function(){
+                    for (let i = 0; i < echartsArr.length; i++) {
+                        echartsArr[i].resize();
+                    }
+                }, 0);
+            }, false);
         }
     }
 
     _Blog.countdown = function() {
         if (window.countdownMap) {
             Object.keys(countdownMap).forEach(function(id) {
-              $(`#${id}`).countdown(countdownMap[id], {elapse: true})
-                .on('update.countdown', function(event) {
-                  var $this = $(this).html(event.strftime(''
-                    + '<span>%D</span> 天 <br />'
-                    + '<span>%H</span> 时 '
-                    + '<span>%M</span> 分 '
-                    + '<span>%S</span> 秒'));
-              });
-          });
+                $(`#${id}`).countdown(countdownMap[id]['date'], {elapse: true})
+                    .on('update.countdown', function(event) {
+                    $(this).html(event.strftime(countdownMap[id]['pattern']));
+                });
+            });
         }
     };
 

assets/js/lib/VERSION

@@ -8,4 +8,5 @@ echarts@4.2.1
 typeit@6.0.3
 jquery-countdown@2.2.0
 aplayer@1.10.1
-meting@2.0.1
+meting@2.0.1
+smooth-scroll@16.1.0

assets/js/lib/echarts/macarons.js

@@ -0,0 +1,217 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));