fix bugs

source/css/_global/index.styl

@@ -153,11 +153,11 @@ table
     font-size: 0.65rem
 
   button 
-    font-size: .7rem;
-    padding: .3rem 1rem;
-    background-color: #49b1f5;
-    color: #fff;
-    border-color: #fff;
+    font-size: .7rem
+    padding: .3rem 1rem
+    background-color: $light-blue
+    color: #fff
+    border-color: #fff
 
   textarea 
     font-size: 0.7rem
@@ -223,7 +223,7 @@ table
   #readmode,#font_plus,#font_minus
     width: 30px
     height: 30px
-    background-color: #49b1f5
+    background-color: $light-blue
     color: #e3e8ee
     text-align: center
     line-height: 29px
@@ -239,7 +239,7 @@ table
   .translate_chn_to_cht
     width: 30px
     height: 30px
-    background-color: #49b1f5
+    background-color: $light-blue
     color: #e3e8ee
     text-align: center
     line-height: 29px
@@ -252,7 +252,7 @@ table
   .nightshift
     width: 30px
     height: 30px
-    background-color: #49b1f5
+    background-color: $light-blue
     color: #e3e8ee
     text-align: center
     font-size: 17px
@@ -346,4 +346,9 @@ table
   text-align: right 
 
 .is_visible
-  display: block !important
+  display: block !important
+
+.fireworks
+  position: fixed;
+  z-index: -1;
+  pointer-events: none;

source/css/_highlight/highlight.styl

@@ -2,7 +2,7 @@
 @require "theme"
 @require "diff"
 
-languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "gradle" "groovy" "ejs" "swig"
+languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown"
 wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
 
 loopForLanguages()
@@ -39,7 +39,7 @@ blockquote
   padding: 0.1rem 0.8rem
   border-left: 0.2rem solid $blockquote-padding-color
   color: $blockquote-color
-  background-color: $blockquote-background-color
+  background-color: lighten($blockquote-padding-color,33)
 
 .article-container
   pre,

source/css/_layout/aside.styl

@@ -87,7 +87,7 @@
       margin-top: .2rem
       padding: 0 1rem
       height: 1.6rem
-      background: #49b1f5
+      background: $light-blue
       color: #fff
       text-decoration: none
       line-height: 1.6rem
@@ -96,7 +96,7 @@
       z-index: 1
 
     .toggle_change--primary,.bookmark--primary 
-      color: $cyan
+      color: $ruby
     
     .toggle_change--animated,.bookmark--animated 
       transition-property: color
@@ -109,7 +109,7 @@
         left: 0
         right: 0
         bottom: 0
-        background: $cyan
+        background: $ruby
         transform: scaleX(0)
         transform-origin: 0 50%
         transition-property: transform

source/css/_layout/flink.styl

@@ -0,0 +1,133 @@
+.flink
+  .md-links 
+    min-height: calc(100% - 120px - 5pc - 6em)
+    text-align: center
+    overflow: auto
+    padding: 0
+    margin: 0 auto
+
+    a 
+      color: #333
+      text-decoration: none
+  
+    li 
+      width: calc(100%/3 - 14px)
+      float: left
+      list-style: none
+    
+  .md-links-item 
+    height: 90px
+    line-height: 17px
+    margin: 20px 7px
+    padding: 0px 0px
+    transition: box-shadow 0.25s
+    text-overflow: ellipsis
+    overflow: hidden
+    border-radius: 8px
+    -webkit-transform: perspective(1px) translateZ(0)
+    transform: perspective(1px) translateZ(0)
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
+    position: relative
+    -webkit-transition-property: color
+    transition-property: color
+    -webkit-transition-duration: 0.3s
+    transition-duration: 0.3s                      
+    
+    img 
+      float: left
+      border-radius: 35px
+      margin: 11px 10px
+      width: 70px
+      height: 70px
+      border: 0px solid #eaeefb       
+  
+    &:hover 
+      img
+        filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
+        -moz-transform: rotate(540deg)
+        -o-transform: rotate(540deg)
+        -webkit-transform: rotate(540deg)
+        transform: rotate(540deg)
+    
+    &:before
+      content: ""
+      position: absolute
+      z-index: -1
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background: $light-blue !important
+      -webkit-transform: scale(0)
+      transform: scale(0)
+      -webkit-transition-property: transform
+      transition-property: transform
+      -webkit-transition-duration: 0.3s
+      transition-duration: 0.3s
+      -webkit-transition-timing-function: ease-out
+      transition-timing-function: ease-out
+
+  .md-links-item:hover, 
+  .md-links-item:focus, 
+  .md-links-item:active 
+    color: white
+
+  .md-links-item:hover:before, 
+  .md-links-item:focus:before, 
+  .md-links-item:active:before 
+      -webkit-transform: scale(1)
+      transform: scale(1)
+  
+  .md-links-item a:hover
+    cursor: pointer
+  
+  .md-links-title 
+      padding-top: 16px
+      padding-right: 10px
+      font-size: 20px
+      font-weight: bold
+      height:40px
+      overflow: hidden
+      white-space: nowrap
+      text-overflow: ellipsis
+
+  .post-cards 
+      margin-top: 5px
+      min-height: 100px
+      padding: 15px
+      border-radius: 15px
+  
+  .comment-word
+      font-weight:bold
+      font-size:1.7em
+  
+  .md-links-des
+      padding: 16px 10px  
+      font-size:13px 
+      overflow: hidden
+      height:50px
+      white-space: nowrap
+      text-overflow: ellipsis
+
+@media screen and (max-width:1100px)
+  .flink
+    .post-cards 
+      position: relative
+      margin: -20px -16px 0
+      border-radius: 18px
+      padding: 16px
+    
+    .md-links 
+      li 
+        width: calc(100%/2 - 14px)   
+
+
+
+@media screen and (max-width:600px)
+  .flink
+    .md-links 
+      li 
+        width: calc(100%/1 - 14px) 
+
+
+

source/css/_layout/footer.styl

@@ -1,8 +1,6 @@
 footer
-  $bg-svg += ""
   margin-top: 1rem
   background: $light-blue
-  // background-image: url($bg-svg)
   background-attachment: local
 
   &.footer-bg

source/css/_layout/head.styl

@@ -14,11 +14,6 @@
     background-attachment: local
 
 
-  &.no-bg
-    $bg-svg += ""
-    background-image: url($bg-svg) !important
-    background-size: initial
-
   #site-social-icons
     margin: 0 auto
     width: 15rem

source/css/_layout/nightshift.styl

@@ -65,6 +65,7 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
     blockquote
         border-left: 0.2rem solid #7A5353 
         color: #99a9bf
+        background-color: #2f3d49
 
     hr
         background: 0

source/css/_layout/post.styl

@@ -1,16 +1,6 @@
 #post-title
   font-size: 1.4rem
 
-  &.plain
-    margin-bottom: 0.3rem
-    border-bottom: 1px solid $light-grey
-    cursor: pointer
-    transition: all 0.2s ease-in-out
-
-    &:hover
-      border-bottom: 1px solid $light-blue
-      color: $light-blue
-
 #post
   overflow: hidden
 
@@ -47,16 +37,6 @@
     background-color: #394245;
     background-image: linear-gradient(234deg, #394245 0%, #000 100%);
 
-  &.no-bg
-    $bg-svg += ""
-    background-color: $light-blue
-    background-image: url($bg-svg) !important
-    background-size: auto
-
-  &.plain
-    margin-bottom: 1rem
-    height: 56px
-
   a
     color: $light-grey
     text-decoration: none
@@ -229,8 +209,6 @@ img
     a
       word-break: break-word
 
-.post-adv
-  margin: 1rem 0
 
 @media screen and (max-width: $sm)
   .layout

source/css/_layout/relatedposts.styl

@@ -51,7 +51,7 @@
       margin: 0 auto
       text-align: center
 
-  .relatedPosts_headling
+  .relatedPosts_headline
     font-size: 20px
     font-weight: 700
     margin-bottom: 5px

source/css/_layout/reward.styl

@@ -11,11 +11,11 @@
     cursor: pointer
     color: #fff
     line-height: 36px
-    background: #49b1f5
+    background: $light-blue
     width: 80px
     
     &:hover
-      background: #00c4b6
+      background: darken($light-blue,30)
       
       .reward-main
         display: block

source/css/_layout/z-other.styl

@@ -82,6 +82,7 @@ a.article-meta__categories
   text-transform: uppercase
   overflow: hidden
   z-index: 1
+  background-color: $light-blue
 
   &:focus {
     outline: none
@@ -89,17 +90,13 @@ a.article-meta__categories
 }
 
 .more--primary {
-  color: lightslategray
+  color: $white
 }
 
 .more--animated {
   transition-property: color
   transition-duration: 0.5s
 
-  &.more--border.more--primary {
-    border: 1px solid lightslategray
-  }
-
   &:before {
     content: ""
     position: absolute
@@ -107,7 +104,7 @@ a.article-meta__categories
     left: 0
     right: 0
     bottom: 0
-    background: lightslategray
+    background: $ruby
     transform: scaleX(0)
     transform-origin: 0 50%
     transition-property: transform

source/js/runtimeshow.js

@@ -3,21 +3,13 @@ var start_date = document.getElementById("runtionshow").getAttribute("start_date
 
 function show_date_time() {
     window.setTimeout("show_date_time()", 1000);
-    BirthDay=new Date(start_date);//這個日期是可以修改的
+    BirthDay=new Date(start_date);
     today=new Date();
-    timeold=(today.getTime()-BirthDay.getTime());//其實僅僅改了這裏
-    // sectimeold=timeold/1000
-    // secondsold=Math.floor(sectimeold);
+    timeold=(today.getTime()-BirthDay.getTime());
     msPerDay=24*60*60*1000
     e_daysold=timeold/msPerDay
     daysold=Math.floor(e_daysold);
-    // e_hrsold=(e_daysold-daysold)*24;
-    // hrsold=Math.floor(e_hrsold);
-    // e_minsold=(e_hrsold-hrsold)*60;
-    // minsold=Math.floor((e_hrsold-hrsold)*60);
-    // seconds=Math.floor((e_minsold-minsold)*60);
-    // span_dt_dt.innerHTML = "已運行  " + daysold + " 天 " + hrsold + " 時 " + minsold + " 分 " + seconds + " 秒";
-    webinfo_runtime_count.innerHTML= daysold + " 天"
+    webinfo_runtime_count.innerHTML= daysold + " " + GLOBAL_CONFIG.runtime_unit
 }
     
 show_date_time()

source/js/third-party/fireworks.js

@@ -0,0 +1,129 @@
+var canvasEl = document.querySelector('.fireworks')
+if (canvasEl) {
+  var ctx = canvasEl.getContext('2d')
+  var numberOfParticules = 30
+  var pointerX = 0
+  var pointerY = 0
+  // var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
+  // Fixed the mobile scroll
+  var tap = 'mousedown'
+  var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
+
+  var setCanvasSize = debounce(function () {
+    canvasEl.width = window.innerWidth
+    canvasEl.height = window.innerHeight
+    canvasEl.style.width = window.innerWidth + 'px'
+    canvasEl.style.height = window.innerHeight + 'px'
+    canvasEl.getContext('2d').scale(1, 1)
+  }, 500)
+
+  var render = anime({
+    duration: Infinity,
+    update: function () {
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
+    }
+  })
+
+  document.addEventListener(tap, function (e) {
+    if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
+      render.play()
+      updateCoords(e)
+      animateParticules(pointerX, pointerY)
+    }
+  }, false)
+
+  setCanvasSize()
+  window.addEventListener('resize', setCanvasSize, false)
+}
+
+function updateCoords (e) {
+  pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
+  pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
+}
+
+function setParticuleDirection (p) {
+  var angle = anime.random(0, 360) * Math.PI / 180
+  var value = anime.random(50, 180)
+  var radius = [-1, 1][anime.random(0, 1)] * value
+  return {
+    x: p.x + radius * Math.cos(angle),
+    y: p.y + radius * Math.sin(angle)
+  }
+}
+
+function createParticule (x, y) {
+  var p = {}
+  p.x = x
+  p.y = y
+  p.color = colors[anime.random(0, colors.length - 1)]
+  p.radius = anime.random(16, 32)
+  p.endPos = setParticuleDirection(p)
+  p.draw = function () {
+    ctx.beginPath()
+    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+    ctx.fillStyle = p.color
+    ctx.fill()
+  }
+  return p
+}
+
+function createCircle (x, y) {
+  var p = {}
+  p.x = x
+  p.y = y
+  p.color = '#F00'
+  p.radius = 0.1
+  p.alpha = 0.5
+  p.lineWidth = 6
+  p.draw = function () {
+    ctx.globalAlpha = p.alpha
+    ctx.beginPath()
+    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+    ctx.lineWidth = p.lineWidth
+    ctx.strokeStyle = p.color
+    ctx.stroke()
+    ctx.globalAlpha = 1
+  }
+  return p
+}
+
+function renderParticule (anim) {
+  for (var i = 0; i < anim.animatables.length; i++) {
+    anim.animatables[i].target.draw()
+  }
+}
+
+function animateParticules (x, y) {
+  var circle = createCircle(x, y)
+  var particules = []
+  for (var i = 0; i < numberOfParticules; i++) {
+    particules.push(createParticule(x, y))
+  }
+  anime.timeline().add({
+    targets: particules,
+    x: function (p) {
+      return p.endPos.x
+    },
+    y: function (p) {
+      return p.endPos.y
+    },
+    radius: 0.1,
+    duration: anime.random(1200, 1800),
+    easing: 'easeOutExpo',
+    update: renderParticule
+  })
+    .add({
+      targets: circle,
+      radius: anime.random(80, 160),
+      lineWidth: 0,
+      alpha: {
+        value: 0,
+        easing: 'linear',
+        duration: anime.random(600, 800)
+      },
+      duration: anime.random(1200, 1800),
+      easing: 'easeOutExpo',
+      update: renderParticule,
+      offset: 0
+    })
+}