feat: 增加回到顶部功能

layout/_partial/scripts.ejs

@@ -1 +1 @@
-<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %>
+<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js', 'js/scroll-to-top.js']) %>

layout/_partial/tools.ejs

@@ -9,5 +9,10 @@
         <li class="mode-toggle">
             <i class="fa fa-moon-o"></i>
         </li>
+        <li class="scroll-to-top-value">
+        </li>
+        <li class="scroll-to-top">
+            <i class="fa fa-arrow-up"></i>
+        </li>
     </ul>
 </div>

source/css/layout/_partial/valine.styl

@@ -3,60 +3,102 @@
 
   #vcomments {
 
-    .vheader {
+    .vwrap {
 
-      .vinput {
+      border: 1px solid var(--third-text-color);
 
-        &:focus {
+      .vheader {
-          border-bottom: 1px solid $primary-color !important;
+
+        .vinput {
+
+          color: var(--normal-text-color);
+          border-color: var(--third-text-color);
+
+          &:focus {
+            border-bottom: 1px solid var(--primary-color) !important;
+          }
         }
       }
-    }
 
 
-    .vcontrol {
+      .vedit {
-      .col-20 a {
-        display: none;
-      }
 
-      .col-80 {
+        .veditor {
-        button.vsubmit {
+          color: var(--normal-text-color);
-          background: transparent !important;
+        }
-          color: var(--normal-text-color); !important;
-          border: 1px solid var(--normal-text-color); !important;
 
-
+        .vctrl {
-          &:hover {
+          span {
-            color: $primary-color !important;
+            color: var(--normal-text-color);
-            border: 1px solid $primary-color !important;
           }
         }
 
       }
 
+      .vcontrol {
+        .col-20 a {
+          display: none;
+        }
+
+        .col-80 {
+          button.vsubmit {
+            background: transparent !important;
+            color: var(--normal-text-color) !important;
+            border: 1px solid var(--normal-text-color) !important;
+
+            &:hover {
+              color: var(--primary-color) !important;
+              border: 1px solid var(--primary-color) !important;
+            }
+          }
+        }
+      }
+
 
     }
 
 
+    .vcount {
+      color: var(--normal-text-color);
+
+      .vnum {
+        color: var(--second-text-color);
+      }
+    }
+
     .vlist {
       .vcard {
         .vhead {
           .vnick {
 
             &::before {
-              background: $primary-color !important;
+              background: var(--primary-color) !important;
             }
-            color: $primary-color;
+            color: var(--primary-color);
+          }
+
+          .vsys {
+            color: var(--normal-text-color);
+            background: var(--border-color) !important;
+            opacity: 0.8;
+          }
+        }
+
+        .vcontent {
+          P {
+            color: var(--normal-text-color);
           }
         }
       }
     }
 
+
     .info {
       .txt-right {
         display none
       }
     }
+
   }
 
 

source/css/layout/common/highlight/highlight.styl

@@ -4,24 +4,24 @@ $code-block {
   overflow: auto;
   margin: 20px 0;
   padding: 0;
-  font-size 1em;
+  font-size 0.95em;
   color: var(--highlight-foreground);
   background: var(--highlight-background);
-  line-height: 1.6em;
+  line-height: 1.5em;
   transition: all 0.5s ease;
 
-  &::-webkit-scrollbar {
+  //&::-webkit-scrollbar {
-    height: 8px;
+  //  height: 8px;
-  }
+  //}
-
+  //
-  &::-webkit-scrollbar-thumb {
+  //&::-webkit-scrollbar-thumb {
-    border-radius: 5px;
+  //  border-radius: 5px;
-    background: rgba(0, 0, 0, 0.2)
+  //  background: rgba(0, 0, 0, 0.2)
-  }
+  //}
-
+  //
-  &::-webkit-scrollbar-track {
+  //&::-webkit-scrollbar-track {
-    background: transparent;
+  //  background: transparent;
-  }
+  //}
 
 }
 

source/css/layout/common/variables.styl

@@ -25,7 +25,7 @@ $z-index-6 = 1006;
 // color
 // ===============================
 // normal mode color
-$primary-color = #30a103; // 主题颜色
+$primary-color = #a13b17; // 主题颜色
 $background-color = #fcfcfc; // 背景颜色
 $normal-text-color = #515061; // 通用文本颜色（默认字体颜色）
 $first-text-color = darken($normal-text-color, 20%); // 第一文本颜色

source/js/common.js

@@ -6,9 +6,7 @@ const windowMask = document.querySelector('.window-mask');
 const headerHeight = header.getBoundingClientRect().height;
 
 window.addEventListener('scroll', function (_e) {
-
+    const scrollTop = document.body.scrollHeight || document.documentElement.scrollHeight;
-    const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
-
     if (!isHeaderShrink && scrollTop > headerHeight) {
         isHeaderShrink = true;
         header.classList.add('header-wrapper-shrink');
@@ -27,3 +25,5 @@ menuBar.addEventListener('click', function (_e) {
 windowMask.addEventListener('click', function (_e) {
     header.classList.toggle('header-drawer-show');
 });
+
+

source/js/scroll-to-top.js

@@ -0,0 +1,28 @@
+const scrollToTop = document.querySelector('.scroll-to-top');
+const scrollToTopValue = document.querySelector('.scroll-to-top-value');
+scrollToTop.addEventListener('click', () => {
+    let scrollTopTimer = setInterval(function () {
+        let top = document.body.scrollTop || document.documentElement.scrollTop;
+        let speed = top / 5;
+        if (document.body.scrollTop !== 0) {
+            document.body.scrollTop -= speed;
+        } else {
+            document.documentElement.scrollTop -= speed;
+        }
+        if (top === 0) {
+            clearInterval(scrollTopTimer);
+        }
+    }, 30);
+});
+
+
+const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
+const clientHeight = window.innerHeight || document.documentElement.clientHeight;
+window.addEventListener('scroll', function (_e) {
+    var validH = scrollHeight - clientHeight;
+    var scrollH = document.body.scrollTop || document.documentElement.scrollTop;
+    scrollToTopValue.innerHTML = Math.round(scrollH / validH * 100).toFixed(0) + '%';
+
+});
+
+