From b8d1b156cce78355c7f8cc5abaf8f2bd40ff30dd Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 2 Apr 2020 11:01:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=A4=9C=E9=97=B4=E6=A8=A1=E5=BC=8F=EF=BC=8C=E5=8F=AF=E8=87=AA?= =?UTF-8?q?=E7=94=B1=E5=88=87=E6=8D=A2=E6=97=A5=E9=97=B4/=E5=A4=9C?= =?UTF-8?q?=E9=97=B4=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/_partial/tools.ejs | 6 ++ layout/page.ejs | 4 + .../layout/_partial/article-meta-info.styl | 4 +- source/css/layout/_partial/footer.styl | 4 +- source/css/layout/_partial/header.styl | 24 ++--- source/css/layout/_partial/local-search.styl | 2 +- source/css/layout/_partial/tools.styl | 12 +++ source/css/layout/_partial/valine.styl | 4 +- source/css/layout/archive-content.styl | 4 +- source/css/layout/article-content.styl | 2 +- source/css/layout/category-content.styl | 2 +- source/css/layout/common/basic.styl | 10 +- source/css/layout/common/markdown.styl | 14 +-- source/css/layout/common/variables.styl | 95 +++++++++++-------- source/css/layout/home-content.styl | 4 +- source/css/layout/page.styl | 15 +++ source/css/layout/tag-content.styl | 2 +- source/css/style.styl | 1 + source/js/common.js | 17 ++++ 19 files changed, 150 insertions(+), 76 deletions(-) create mode 100644 layout/_partial/tools.ejs create mode 100644 source/css/layout/_partial/tools.styl diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs new file mode 100644 index 0000000..965f72d --- /dev/null +++ b/layout/_partial/tools.ejs @@ -0,0 +1,6 @@ +
+ +
diff --git a/layout/page.ejs b/layout/page.ejs index add2fb5..d821a4f 100644 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -23,7 +23,11 @@ <%- partial('about') %> <% } %> +
+ <%- partial('_partial/tools') %> +
+
<%- partial('_partial/footer') %>
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl index c53662d..4573fe4 100644 --- a/source/css/layout/_partial/article-meta-info.styl +++ b/source/css/layout/_partial/article-meta-info.styl @@ -4,7 +4,7 @@ $article-meta-info-font-size = 12px; .article-meta-info { - color: $third-text-color; + color: var(--third-text-color);; font-size: $article-meta-info-font-size; .article-meta-item { @@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px; } a { - color: $third-text-color; + color: var(--third-text-color);; &:hover { color: $primary-color; diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl index 013f704..759192b 100644 --- a/source/css/layout/_partial/footer.styl +++ b/source/css/layout/_partial/footer.styl @@ -1,10 +1,10 @@ @require '../common/variables.styl' .footer { - color: $third-text-color; + color: var(--third-text-color);; a { - color: $third-text-color; + color: var(--third-text-color);; &:hover { color: $primary-color; diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index a8740df..c89a500 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -4,7 +4,7 @@ width: 100%; height: 100%; box-sizing: border-box; - background: #fff; + background: var(--background-color); display: flex; align-items: center; justify-content: center; @@ -25,7 +25,7 @@ font-size: 28px; font-weight: bold; letter-spacing: 1px; - color: $first-text-color; + color: var(--first-text-color); transform-origin: left center; transition: all 0.5s ease; } @@ -47,7 +47,7 @@ &:hover { - color: $normal-text-color; + color: var(--normal-text-color);; &::after { content: ''; @@ -66,7 +66,7 @@ .active { - color: $second-text-color; + color: var(--second-text-color);; font-weight: bold; transition: all 0.5s ease; @@ -97,7 +97,7 @@ height: 2px; margin: 6px 0; position: relative; - background: $normal-text-color; + background: var(--normal-text-color);; transition: all 0.3s ease; &::before { @@ -107,7 +107,7 @@ left: 0; width: 100%; height: 2px; - background: $normal-text-color; + background: var(--normal-text-color);; transition: all 0.3s ease; } @@ -118,7 +118,7 @@ left: 0; width: 100%; height: 2px; - background: $normal-text-color; + background: var(--normal-text-color);; transition: all 0.3s ease; } } @@ -134,7 +134,7 @@ left: 0; transform: scaleY(0); transform-origin: top; - background: $background-color; + background: var(--background-color);; transition: all 0.5s ease; z-index: $z-index-2; @@ -154,18 +154,18 @@ border-radius: 20px; text-align: center; line-height: 34px; - color: $normal-text-color; + color: var(--normal-text-color);; transition: all 0.5s ease; &:hover { - color: $second-text-color; + color: var(--second-text-color);; font-weight: bold; } } .active { border: 1px solid $primary-color; - color: $second-text-color; + color: var(--second-text-color);; font-weight: bold; } @@ -224,7 +224,7 @@ .header-wrapper-shrink { - background: $background-color; + background: var(--background-color);; box-shadow: 0 1px 2px $border-color; .header-content { diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index 2bd527b..492f0bd 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -27,7 +27,7 @@ $keyword-red = #ff2a2a; z-index: 1001; .search-icon, .popup-btn-close { - color: $normal-text-color; + color: var(--normal-text-color);; font-size: $icon-size; padding: 0 10px; } diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl new file mode 100644 index 0000000..eb9eee8 --- /dev/null +++ b/source/css/layout/_partial/tools.styl @@ -0,0 +1,12 @@ +.tools-container { + ul { + li { + cursor: pointer; + i { + font-size: 20px; + margin: 6px 0; + } + } + } + +} \ No newline at end of file diff --git a/source/css/layout/_partial/valine.styl b/source/css/layout/_partial/valine.styl index 387131e..74e6af8 100644 --- a/source/css/layout/_partial/valine.styl +++ b/source/css/layout/_partial/valine.styl @@ -22,8 +22,8 @@ .col-80 { button.vsubmit { background: transparent !important; - color: $normal-text-color !important; - border: 1px solid $normal-text-color !important; + color: var(--normal-text-color); !important; + border: 1px solid var(--normal-text-color); !important; &:hover { diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index 6cf38bb..0c69ad2 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -12,7 +12,7 @@ $article-date-font-size = 14px; .archive-item-header { .archive-year { font-size: $archive-year-font-size; - color: $second-text-color; + color: var(--second-text-color);; font-weight: 600; margin-right: 20px; } @@ -28,7 +28,7 @@ $article-date-font-size = 14px; font-size: $article-title-font-size; a.article-title { - color: $normal-text-color; + color: var(--normal-text-color);; &:hover { color: $primary-color; diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index effc3bf..cd5a26c 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -11,7 +11,7 @@ } a { - color: $second-text-color; + color: var(--second-text-color);; } } diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index d2a516e..efd5dd9 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -2,7 +2,7 @@ .category-container { .category-name { - color: $second-text-color + color: var(--second-text-color); font-size 20px font-weight 600 margin-bottom 10px diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl index 0fe8219..7b64390 100644 --- a/source/css/layout/common/basic.styl +++ b/source/css/layout/common/basic.styl @@ -4,8 +4,8 @@ html, body { margin: 0; padding: 0; - color: $normal-text-color; - background: $background-color; + color: var(--normal-text-color);; + background: var(--background-color);; font-size: $default-font-size; font-family: $default-font-family; font-weight: $default-font-weight; @@ -33,7 +33,7 @@ p { a { text-decoration: none; - color: $normal-text-color; + color: var(--normal-text-color);; } a:hover, a:active { @@ -64,7 +64,7 @@ a:hover, a:active { .article-title-hover-animation { display: inline-block; position: relative; - color: $second-text-color; + color: var(--second-text-color);; border-bottom: none; line-height: 1.3; vertical-align: top; @@ -76,7 +76,7 @@ a:hover, a:active { height: 2px; bottom: -4px; left: 0; - background-color: $second-text-color; + background-color: var(--second-text-color);; visibility: hidden; transform: scaleX(0); the-transition(); diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl index df7c378..25e3fff 100644 --- a/source/css/layout/common/markdown.styl +++ b/source/css/layout/common/markdown.styl @@ -3,7 +3,7 @@ .markdown { blockquote { - border-left: 5px solid $normal-text-color; + border-left: 5px solid var(--normal-text-color);; margin: 0; padding: 0 0 0 10px; background: $border-color; @@ -21,39 +21,39 @@ h1 { - color: $second-text-color; + color: var(--second-text-color);; font-size: 2.2em; font-weight: 700; } h2 { - color: $second-text-color; + color: var(--second-text-color);; font-size: 2em; font-weight: 650; } h3 { - color: $second-text-color; + color: var(--second-text-color);; font-size: 1.8em; font-weight: 600; } h4 { - color: $second-text-color; + color: var(--second-text-color);; font-size: 1.6em; font-weight: 550; } h5 { - color: $second-text-color; + color: var(--second-text-color);; font-size: 1.4em; font-weight: 500; } h6 { - color: $second-text-color; + color: var(--second-text-color);; font-size: 1.2em; font-weight: 500; } diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index 77b379d..6f3da00 100644 --- a/source/css/layout/common/variables.styl +++ b/source/css/layout/common/variables.styl @@ -2,52 +2,71 @@ // ils-x variables // ================================== -// 头部默认高度 -$header-height = 100px - -// 头部收缩高度 -$header-shrink-height = 60px - -// 中间内容区域宽度 -$main-content-width = 70% +// =============================== +// layout +// =============================== +$header-height = 100px; // 头部默认高度 +$header-shrink-height = 60px; // 头部收缩高度 +$main-content-width = 70%; // 中间内容区域宽度 +// =============================== // z-index -$z-index-1 = 1001 -$z-index-2 = 1002 -$z-index-3 = 1003 -$z-index-4 = 1004 -$z-index-5 = 1005 +// =============================== +$z-index-1 = 1001; +$z-index-2 = 1002; +$z-index-3 = 1003; +$z-index-4 = 1004; +$z-index-5 = 1005; +$z-index-6 = 1006; -// 主题颜色 -$primary-color = #ce3e29 -// 第一文本颜色 -$first-text-color = #2c3e50 +// =============================== +// color +// =============================== +$primary-color = #ce3e29; // 主题颜色 +$background-color = #fff; // 背景颜色 +$first-text-color = #2c3e50; // 第一文本颜色 +$second-text-color = #525e6b; // 第二文本颜色 +$third-text-color = #9ca3ad; // 第三文本颜色 +$normal-text-color = #616161; // 通用文本颜色（默认字体颜色） +$border-color = #ccc; // 边框颜色 -// 第二文本颜色 -$second-text-color = #525e6b -// 第三文本颜色 -$third-text-color = #9ca3ad +// =============================== +// font +// =============================== +//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'; +//$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light'; +//$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif; +$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial"; +$default-font-size = 14px; +$default-font-line-height = 20px; +$default-font-weight = 400; -// 通用文本颜色（默认字体颜色） -$normal-text-color = #616161 -// 背景颜色 -$background-color = #fff +:root { + --background-color: #fff; + --first-text-color: #3e3d4f; + --second-text-color: #525e6b; + --third-text-color: #9ca3ad; + --normal-text-color: #616161; +} -// 边框颜色 -$border-color = #ccc +@media (prefers-color-scheme: dark) { + :root { + --background-color: #444; + --first-text-color: #edf2f9; + --second-text-color: #e0e3ec; + --third-text-color: #9ca3ad; + --normal-text-color: #f8f8f8; + } +} -// 默认字体样式 -//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei' -$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial", 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light', 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif -// 默认字体大小 -$default-font-size = 14px - -// 默认字体行高 -$default-font-line-height = 20px - -// 默认字体加粗程度 -$default-font-weight = 400 \ No newline at end of file +.dark-mode { + --background-color: #444; + --first-text-color: #edf2f9; + --second-text-color: #e0e3ec; + --third-text-color: #9ca3ad; + --normal-text-color: #f8f8f8; +} \ No newline at end of file diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 5f9d7be..4483fce 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -25,12 +25,12 @@ } font-weight: 600; - color: $second-text-color; + color: var(--second-text-color);; font-size: 22px; margin: 0; a { - color: $second-text-color; + color: var(--second-text-color);; } } diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index a4e3c55..f36b059 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -2,6 +2,8 @@ .page-template { padding-top: $header-height; + position: relative; + .page-top { position: fixed; @@ -24,6 +26,15 @@ position: relative; padding: 40px 0; } + + + .sidebar-tools { + position: fixed; + top: $header-height + 30px; + right: 5%; + transition: all 0.5s ease; + } + } .page-bottom { @@ -37,4 +48,8 @@ .page-top { height: $header-shrink-height; } + + .sidebar-tools { + top: $header-shrink-height + 30px !important; + } } \ No newline at end of file diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index bf719c0..004f55a 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -2,7 +2,7 @@ .tag-container { .tag-name { - color: $second-text-color + color: var(--second-text-color); font-size 20px font-weight 600 margin-bottom 10px diff --git a/source/css/style.styl b/source/css/style.styl index 4691b94..cfb0bf3 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -7,6 +7,7 @@ @import "layout/_partial/local-search.styl" @import "layout/_partial/valine.styl" @import "layout/_partial/header.styl" +@import "layout/_partial/tools.styl" @import "layout/_partial/footer.styl" @import "layout/_partial/article-meta-info.styl" @import "layout/home-content.styl" diff --git a/source/js/common.js b/source/js/common.js index 017e38c..ef6b5c0 100644 --- a/source/js/common.js +++ b/source/js/common.js @@ -28,3 +28,20 @@ windowMask.addEventListener('click', function (e) { header.classList.toggle('header-drawer-show'); }); + +const searchBtn = document.querySelector('.search-btn'); +searchBtn.addEventListener('click', function (e) { + +}); + +const modeToggleBtn = document.querySelector('.mode-toggle-btn'); +modeToggleBtn.addEventListener('click', function (e) { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + console.log('dark mode'); + } else { + document.body.classList.toggle('dark-mode'); + } +}); \ No newline at end of file