1. new look of the mobile menu

2. fix bugs

source/css/_global/index.styl

@@ -85,11 +85,11 @@ hr
 
   &:before
     position: absolute
-    top: -10px
+    top: $hr-icon-top
     left: 5%
     z-index: 1
     color: $light-blue
-    content: "\f0c4"
+    content: $hr-icon
     font: normal normal normal 14px / 1 FontAwesome
     font-size: 20px
     transition: all 1s ease-in-out
@@ -349,6 +349,6 @@ table
   display: block !important
 
 .fireworks
-  position: fixed;
-  z-index: -1;
-  pointer-events: none;
+  position: fixed
+  z-index: -1
+  pointer-events: none

source/css/_layout/aside.styl

@@ -223,6 +223,13 @@
     list-style: none
     margin-bottom: -3px
     margin-block-start: 0.2rem
+  
+  .aside_category_item.child
+    margin-bottom: -3px
+    margin-block-start: 0rem
+
+    .aside_category_list
+      margin-left: -50px
 
   .aside_category_list,.archive-list-item
     margin-left: -40px
@@ -234,6 +241,18 @@
     a
       text-decoration: none
       color: #4c4948
+  
+  .aside_category_list_name,.archive-list-link
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    flex: auto
+
+  .aside_category_list_link,.archive-list-item
+    display: flex
+  
+
+
 
   .aside_category_list_length,.archive-list-count
     float: right 
@@ -267,14 +286,11 @@
 
 
 @keyframes announ_animation{
-
   0%,to{
     color: #4c4948
-
 }
   50%{
     color: #FF0000
-
     }
     }
 

source/css/_layout/head.styl

@@ -31,9 +31,11 @@
         color: $white
 
 #site-info
-  position: absolute
+  // position: absolute
   width: 100%
-  top: 43%
+  // top: 43%
+  padding-top: 43%
+  padding-bottom: 43%
 
 #site-title,
 #site-sub-title
@@ -102,7 +104,36 @@
       .menu-icon-third 
         -webkit-transform: rotate(-45deg) translate(4px, -4px)
         transform: rotate(-45deg) translate(4px, -4px)
+  
+  .menus  
+    .mobile_author_icon
+      display: none
+      padding: 3rem 1.5rem 0
+      text-align: center
+  
+      img
+        height: 120px
+        width: 120px
+        display: inline-block
+        vertical-align: top
+        border-radius: 70px
+        -webkit-transition: all .3s
+        -moz-transition: all .3s
+        -o-transition: all .3s
+        -ms-transition: all .3s
+        transition: all .3s
 
+    hr         
+      margin: 1rem auto
+      display: none
+    
+    &.menu_open
+      display: block
+      animation: menu_open .3s
+
+    &.menu_close
+      animation: menu_close .3s
+      display: block
 
 
 
@@ -122,6 +153,7 @@
     text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
     font-size: 0.7rem
     cursor: pointer
+    margin-left: 1rem
 
     &::after
       position: absolute
@@ -191,29 +223,46 @@
       display: block
 
     .menus
-      position: absolute
-      top: 3rem
-      right: 0.8rem
-      display: none
-      width: 8rem
-      background: alpha($white, 0.9)
+      position: fixed
+      top: 0
+      right: 0
+      width: 100%
+      height 101vh
+      background: $white
       cursor: pointer
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
+      z-index: -1
+      overflow: auto
+      display: none
 
       a
-        display: block !important
+        display: inline-block !important
         opacity: 1 !important
-        margin-left: 0
-        padding-top: 0.3rem
-        padding-bottom: 0.3rem
-        padding-left: 0.6rem
+        // margin-left: 0
+        // padding-top: 0.3rem
+        // padding-bottom: 0.3rem
+        // padding-left: 0.6rem
+        margin: 0
+        padding: .5rem 1rem
         color: $font-black
         text-shadow: none
         font-size: 0.8rem
         z-index: 0
 
+
         &:hover
           color: $light-blue
+      
+      .mobile_author_icon
+        display: block
+     
+      .menus_item 
+          padding: 0 .5rem
+          margin-bottom: 4rem
+          text-align: center 
+              
+      hr
+        display: block 
 
     .search 
       right: 0.5rem
@@ -225,7 +274,3 @@
       .search
         display: inline-block;
         opacity: 1;
-
-
-#page-header .site-page
-  margin-left: 1rem

source/css/_layout/nightshift.styl

@@ -199,6 +199,9 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       
     &::-webkit-scrollbar-thumb
       background: lighten(#2d3035,5)
+
+    .more
+      background-color: #616a6b
     
   @media screen and (max-width: 768px)
     .night-mode
@@ -206,15 +209,14 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       background-color: rgb(45, 48, 53)
 
       #page-header
-        .menus 
-          a
-            color: #99a9bf 
-            background: #2d3035
-        &.fixed
-          .menu-icon-first,
-          .menu-icon-second,
-          .menu-icon-third
-            background-color: #99a9bf;
+        .menus
+          background: #2d3035
+        a
+          color: #99a9bf !important        
+        .menu-icon-first,
+        .menu-icon-second,
+        .menu-icon-third
+          background-color: #99a9bf !important
 
 
   @media screen and (min-width: 768px)

source/css/_layout/z-other.styl

@@ -277,6 +277,8 @@ footer
   position: absolute
   color: #fff
 
+.is_hidden
+  overflow: hidden
 @keyframes pulse{
 
   0%,to{
@@ -350,3 +352,24 @@ footer
   80%{transform:scale(.98)}
   100%{transform:scale(1)}}
 
+
+
+@keyframes menu_open{
+  0% {
+    transform: scale(0)
+  }
+  100% {
+    transform: scale(1)
+  }  
+  }
+
+@keyframes menu_close{
+0% {
+  transform: scale(1)
+  display: block
+}
+100% {
+  transform: scale(0)
+  display: none
+}
+}

source/css/var.styl

@@ -9,7 +9,9 @@ $theme-hr-color = #A4D8FA
 $theme-read-mode-bg-color = #FAF9DE
 $font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 $code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
-
+//hr icon
+$hr-icon = '\f0c4'
+$hr-icon-top = -10px
 
 if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -25,6 +27,11 @@ if hexo-config("font") && hexo-config("font.enable")
   $font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
   $code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'
 
+if hexo-config("hr") && hexo-config("hr.enable")
+  $hr-icon = hexo-config("hr.icon") || '\f0c4'
+  $hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
+
+
 // Global Variables
 $font-size = 14px
 $font-color = #1F2D3D
@@ -90,3 +97,5 @@ $img-border-padding = 4px
 // sidebar
 $sidebar-width = 300px
 $sidebar-background = #f6f8fa
+
+

source/js/main.js

@@ -1,5 +1,5 @@
 $(function () {
-  if ($('#sidebar').hasClass('auto_open')) {
+  if ($('#sidebar').hasClass('auto_open') ) {
     if ($(".sidebar-toc__content").children().length > 0) {
       $(".layout_post").animate({}, function () {
         {
@@ -309,30 +309,72 @@ $(function () {
   //---------------------------------------------------------------------------------------------------------
   /** head点击*/
   $('.toggle-menu').on('click', function () {
-    if (!$('.menus').is(':visible')) {
+
+    if ($(".toggle-menu").hasClass("open")) {
       $(".toggle-menu").removeClass("open").addClass("close");
-      $('.menus').slideDown(300)
+      $("#page-header #site-name,#page-header .search").css({'color':'#3b3a3a','text-shadow': 'none'})
+      $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' });
+      $('body').addClass("is_hidden");
+      $('.menus').addClass("menu_open");
     } else {
       $(".toggle-menu").removeClass("close").addClass("open");
-      $('.menus').slideUp(200)
-    }
-  })
-
-  $(document).on('click touchstart', function (e) {
-    var flag = $('.menus')[0].contains(e.target) || $('.toggle-menu')[0].contains(e.target)
-    if (!flag && $('.toggle-menu').is(':visible')) {
-      $(".toggle-menu").removeClass("close").addClass("open");
-      $('.menus').slideUp(200)
+      $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
+      $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
+      $('body').removeClass("is_hidden");
+      $('.menus').removeClass("menu_open").addClass('menu_close');
+      setTimeout(function () {
+        $('.menus').removeClass("menu_close")
+        
+      }, 300)
     }
   })
 
+  const fixScroll = (scrollEl) => {
+    let startY
+    scrollEl.addEventListener('touchstart', function (event) {
+      // 如果多於1根手指點擊屏幕,則不處理
+      if (event.targetTouches.length > 1) {
+        return
+      }
+      // 儲存手指的初始位置
+      startY = event.targetTouches[0].clientY
+    }, false)
+    scrollEl.addEventListener('touchmove', function (event) {
+      if (event.targetTouches.length > 1) {
+        return
+      }
+      // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
+      const y = event.targetTouches[0].clientY - startY
+      // 如果到頂時繼續向下拉
+      if (scrollEl.scrollTop <= 0 && y > 0) {
+        // 重置滾動距離為最小值
+        scrollEl.scrollTop = 0
+        // 阻止滾動
+        event.preventDefault()
+      }
+      // 如果到底時繼續上滑  
+      const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
+      if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
+        scrollEl.scrollTop = maxScrollTop
+        event.preventDefault()
+      }
+    }, {
+      passive: false
+    })
+  }
+  const scrollEl = document.querySelector(".menus");
+  fixScroll(scrollEl)
+  
 
   $(window).on('resize', function (e) {
     if (!$('.toggle-menu').is(':visible')) {
-      if (!$('.menus').is(':visible')) {
-        $(".toggle-menu").removeClass("open").addClass("close");
-        $('.menus').slideDown(300)
-      }
+      if ($(".toggle-menu").hasClass("close")) {
+      $(".toggle-menu").removeClass("close").addClass("open");
+      $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
+      $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
+      $('body').removeClass("is_hidden");
+        $('.menus').removeClass("menu_open");
+    }     
     }
   })
 
@@ -351,52 +393,55 @@ $(function () {
       findHeadPosition(currentTop)
     }
     var isUp = scrollDirection(currentTop)
-    if (currentTop > 56) {
-      if (isUp) {
-        $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+
+    if($(".toggle-menu").hasClass("open")){
+      if (currentTop > 56) {
+        
+        if (isUp) {
+          $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+        } else {
+          $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
+        }
+        $('#page-header').addClass('fixed')
+        if ($('#go-up').css('opacity') === '0') {
+
+          $('#go-up').animate({}, function () {
+            $('#go-up').css({
+              'opacity': '1',
+              'transform': 'translateX(-30px) rotateZ(360deg)'
+            })
+          })
+        }
+        if ($('#rightside').css('opacity') === '0') {
+
+          $('#rightside').animate({}, function () {
+            $('#rightside').css({
+              'opacity': '1',
+              'transform': 'translateX(-38px)'
+            })
+          })
+        }
+
+
       } else {
-        $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
-      }
-      $('#page-header').addClass('fixed')
-      if ($('#go-up').css('opacity') === '0') {
+        if (currentTop === 0) {
+          $('#page-header').removeClass('fixed').removeClass('visible')
+        }
 
         $('#go-up').animate({}, function () {
           $('#go-up').css({
-            'opacity': '1',
-            'transform': 'translateX(-30px) rotateZ(360deg)'
+            'opacity': '0',
+            'transform': 'translateX(0) rotateZ(180deg) '
           })
         })
-      }
-      if ($('#rightside').css('opacity') === '0') {
 
         $('#rightside').animate({}, function () {
           $('#rightside').css({
-            'opacity': '1',
-            'transform': 'translateX(-38px)'
+            'opacity': '0',
+            'transform': 'translateX(0)'
           })
         })
       }
-
-
-    } else {
-      if (currentTop === 0) {
-        $('#page-header').removeClass('fixed').removeClass('visible')
-      }
-
-      $('#go-up').animate({}, function () {
-        $('#go-up').css({
-          'opacity': '0',
-          'transform': 'translateX(0) rotateZ(180deg) '
-        })
-      })
-
-      $('#rightside').animate({}, function () {
-        $('#rightside').css({
-          'opacity': '0',
-          'transform': 'translateX(0)'
-        })
-      })
-
     }
   }, 50, 100))