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/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