diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs
index e17dd4d..539a042 100644
--- a/layout/_partial/tools.ejs
+++ b/layout/_partial/tools.ejs
@@ -1,9 +1,12 @@
+<% if (theme.local_search.enable) { %>
+ <%- partial('_partial/local-search') %>
+<% } %>
\ No newline at end of file
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 60b5a94..da58544 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -259,7 +259,7 @@
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $media-max-width) {
.menu-list {
display: none;
}
diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl
index 2a8e444..76c2de9 100644
--- a/source/css/layout/_partial/local-search.styl
+++ b/source/css/layout/_partial/local-search.styl
@@ -2,29 +2,28 @@
$icon-size = 18px;
-$keyword-red = #ff2a2a;
-
.search-pop-overlay {
- background: rgba(0, 0, 0, .3);
display: none;
- height: 100%;
- left: 0;
position: fixed;
+ left: 0;
top: 0;
+ height: 100%;
width: 100%;
- z-index: 1000;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: $z-index-5;
}
.search-popup {
- background: #f5f5f5;
- border-radius: 5px;
+ background: var(--background-color);
+ border-radius: 2px;
height: 80%;
- left: calc(50% - 350px);
+ left: 50%;
+ transform: translateX(-50%);
position: fixed;
top: 10%;
- width: 700px;
- z-index: 1001;
+ width: 70%;
+ z-index: $z-index-6;
.search-icon, .popup-btn-close {
color: var(--normal-text-color);
@@ -36,14 +35,14 @@ $keyword-red = #ff2a2a;
cursor: pointer;
&:hover .fa {
- color: #222;
+ color: var(--first-text-color);
}
}
.search-header {
- background: #eee;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
+ background: var(--border-color);
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
display: flex;
padding: 10px;
}
@@ -64,20 +63,21 @@ input.search-input {
.search-popup {
+
.search-input-container {
flex-grow: 1;
padding: 2px;
}
ul.search-result-list {
- margin: 5px;
- padding: 0;
+ margin: 10px 5px;
width: 100%;
}
p.search-result {
- border-bottom: 1px dashed #ccc;
- padding: 5px 0;
+ border-bottom: 1px solid var(--border-color);
+ padding-bottom: 10px;
+ margin-bottom: 20px;
}
a.search-result-title {
@@ -85,8 +85,8 @@ input.search-input {
}
.search-keyword {
- border-bottom: 1px dashed $keyword-red;
- color: $keyword-red;
+ border-bottom: 1px dashed var(--primary-color);
+ color: var(--primary-color);
font-weight: bold;
}
@@ -98,7 +98,14 @@ input.search-input {
}
#no-result {
- color: #ccc;
+ color: var(--third-text-color);
margin: auto;
}
+}
+
+@media screen and (max-width: $media-max-width) {
+ .search-popup {
+ width: 80%;
+ }
+
}
\ No newline at end of file
diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl
index 19910d6..1b9e359 100644
--- a/source/css/layout/_partial/tools.styl
+++ b/source/css/layout/_partial/tools.styl
@@ -7,13 +7,13 @@
cursor: pointer;
padding: 5px;
border-radius: 50%;
- border: 1px solid var(--border-color);
+ border: 1px solid var(--third-text-color);
width: 26px;
height: 26px;
+ font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
- font-size: 18px;
margin-bottom: 12px;
&:hover {
@@ -25,10 +25,6 @@
margin-bottom: 0;
}
- i {
- transition: all 0.3s ease;
- }
-
}
}
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index bb2815e..ee007d4 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -26,6 +26,7 @@ button {
border: 0;
outline: none;
cursor: pointer;
+ background: transparent;
}
p {
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index dcaa3a2..e723ca5 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -5,9 +5,10 @@
// ===============================
// layout
// ===============================
-$header-height = 100px; // 头部默认高度
-$header-shrink-height = 60px; // 头部收缩高度
-$main-content-width = 70%; // 中间内容区域宽度
+$header-height = 100px; // 头部默认高度
+$header-shrink-height = 60px; // 头部收缩高度
+$main-content-width = 70%; // 中间内容区域宽度
+$media-max-width = 760px; // 媒体查询最大宽度
// ===============================
// z-index
@@ -29,7 +30,7 @@ $first-text-color = #2c3e50; // 第一文本颜色
$second-text-color = #525e6b; // 第二文本颜色
$third-text-color = #9ca3ad; // 第三文本颜色
$normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
-$border-color = #ccc; // 边框颜色
+$border-color = #eee; // 边框颜色
// dark mode color
$dark-background-color = #333; // 背景颜色
diff --git a/source/js/common.js b/source/js/common.js
index 9e501ad..e834988 100644
--- a/source/js/common.js
+++ b/source/js/common.js
@@ -5,7 +5,7 @@ const menuBar = document.querySelector('.menu-bar');
const windowMask = document.querySelector('.window-mask');
const headerHeight = header.getBoundingClientRect().height;
-window.addEventListener('scroll', function (e) {
+window.addEventListener('scroll', function (_e) {
const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
@@ -20,15 +20,10 @@ window.addEventListener('scroll', function (e) {
}
});
-menuBar.addEventListener('click', function (e) {
+menuBar.addEventListener('click', function (_e) {
header.classList.toggle('header-drawer-show');
});
-windowMask.addEventListener('click', function (e) {
+windowMask.addEventListener('click', function (_e) {
header.classList.toggle('header-drawer-show');
-});
-
-
-const searchBtn = document.querySelector('.search-btn');
-searchBtn.addEventListener('click', function (e) {
-});
+});
\ No newline at end of file
diff --git a/source/js/toggle-mode.js b/source/js/toggle-mode.js
index 643400f..7972794 100644
--- a/source/js/toggle-mode.js
+++ b/source/js/toggle-mode.js
@@ -1,7 +1,7 @@
/**
* 日间/夜间 模式切换
*/
-const modeToggleBtn = document.querySelector('.mode-toggle-btn');
+const modeToggleBtn = document.querySelector('.mode-toggle');
const iconDom = modeToggleBtn.querySelector('i');
const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
if (modeConfig) {