From 26db2a61a5c0c7828a3f6ffd5e846a4aa63235ae Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 3 Apr 2020 23:52:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9B=9E=E5=88=B0?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/_partial/scripts.ejs | 2 +- layout/_partial/tools.ejs | 5 ++ source/css/layout/_partial/valine.styl | 82 ++++++++++++++----- .../layout/common/highlight/highlight.styl | 28 +++---- source/css/layout/common/variables.styl | 2 +- source/js/common.js | 8 +- source/js/scroll-to-top.js | 28 +++++++ 7 files changed, 115 insertions(+), 40 deletions(-) create mode 100644 source/js/scroll-to-top.js diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 7bdcf42..01ec8e9 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -1 +1 @@ -<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %> \ No newline at end of file +<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js', 'js/scroll-to-top.js']) %> \ No newline at end of file diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs index 539a042..4b083dc 100644 --- a/layout/_partial/tools.ejs +++ b/layout/_partial/tools.ejs @@ -9,5 +9,10 @@
    • +
  • +
    • +
  • + +
    • diff --git a/source/css/layout/_partial/valine.styl b/source/css/layout/_partial/valine.styl index 74e6af8..431a084 100644 --- a/source/css/layout/_partial/valine.styl +++ b/source/css/layout/_partial/valine.styl @@ -3,60 +3,102 @@ #vcomments { - .vheader { + .vwrap { - .vinput { + border: 1px solid var(--third-text-color); - &:focus { - border-bottom: 1px solid $primary-color !important; + .vheader { + + .vinput { + + color: var(--normal-text-color); + border-color: var(--third-text-color); + + &:focus { + border-bottom: 1px solid var(--primary-color) !important; + } } } - } - .vcontrol { - .col-20 a { - display: none; - } + .vedit { - .col-80 { - button.vsubmit { - background: transparent !important; - color: var(--normal-text-color); !important; - border: 1px solid var(--normal-text-color); !important; + .veditor { + color: var(--normal-text-color); + } - - &:hover { - color: $primary-color !important; - border: 1px solid $primary-color !important; + .vctrl { + span { + color: var(--normal-text-color); } } } + .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 } } + } diff --git a/source/css/layout/common/highlight/highlight.styl b/source/css/layout/common/highlight/highlight.styl index d254ad0..beef517 100644 --- a/source/css/layout/common/highlight/highlight.styl +++ b/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 { - height: 8px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 5px; - background: rgba(0, 0, 0, 0.2) - } - - &::-webkit-scrollbar-track { - background: transparent; - } + //&::-webkit-scrollbar { + // height: 8px; + //} + // + //&::-webkit-scrollbar-thumb { + // border-radius: 5px; + // background: rgba(0, 0, 0, 0.2) + //} + // + //&::-webkit-scrollbar-track { + // background: transparent; + //} } diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index 6d614bb..8a81a79 100644 --- a/source/css/layout/common/variables.styl +++ b/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%); // 第一文本颜色 diff --git a/source/js/common.js b/source/js/common.js index e834988..99389ee 100644 --- a/source/js/common.js +++ b/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 = Math.max(document.body.scrollTop, document.documentElement.scrollTop); - + const scrollTop = document.body.scrollHeight || document.documentElement.scrollHeight; if (!isHeaderShrink && scrollTop > headerHeight) { isHeaderShrink = true; header.classList.add('header-wrapper-shrink'); @@ -26,4 +24,6 @@ menuBar.addEventListener('click', function (_e) { windowMask.addEventListener('click', function (_e) { header.classList.toggle('header-drawer-show'); -}); \ No newline at end of file +}); + + diff --git a/source/js/scroll-to-top.js b/source/js/scroll-to-top.js new file mode 100644 index 0000000..4a7e75f --- /dev/null +++ b/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) + '%'; + +}); + +