diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig
index 81ea112abd..424a6aa550 100644
--- a/layout/_macro/post.swig
+++ b/layout/_macro/post.swig
@@ -85,9 +85,7 @@
{{ __('post.in') }}
{%- for cat in post.categories.toArray() %}
-
- {{ cat.name }}
-
+ {{ cat.name }}
{%- set cat_length = post.categories.length %}
diff --git a/layout/_partials/header/brand.swig b/layout/_partials/header/brand.swig
index 44fa431277..81341ab4a5 100644
--- a/layout/_partials/header/brand.swig
+++ b/layout/_partials/header/brand.swig
@@ -37,5 +37,11 @@
{%- endif %}
-
+
+
+
diff --git a/source/css/_colors.styl b/source/css/_colors.styl
index c6337cbc9f..e15b1e82b1 100644
--- a/source/css/_colors.styl
+++ b/source/css/_colors.styl
@@ -1,4 +1,4 @@
-$color-scheme-light {
+:root {
--body-bg-color: $body-bg-color;
--content-bg-color: $content-bg-color;
--card-bg-color: $card-bg-color;
@@ -12,28 +12,20 @@ $color-scheme-light {
--menu-item-bg-color: $menu-item-bg-color;
}
-$color-scheme-dark {
- --body-bg-color: $body-bg-color-dark;
- --content-bg-color: $content-bg-color-dark;
- --card-bg-color: $card-bg-color-dark;
- --text-color: $text-color-dark;
- --link-color: $link-color-dark;
- --link-hover-color: $link-hover-color-dark;
- --brand-color: $brand-color-dark;
- --brand-hover-color: $brand-hover-color-dark;
- --table-row-odd-bg-color: $table-row-odd-bg-color-dark;
- --table-row-hover-bg-color: $table-row-hover-bg-color-dark;
- --menu-item-bg-color: $menu-item-bg-color-dark;
-}
-
-:root {
- @extend $color-scheme-light;
-}
-
if (hexo-config('darkmode')) {
@media (prefers-color-scheme: dark) {
:root {
- @extend $color-scheme-dark;
+ --body-bg-color: $body-bg-color-dark;
+ --content-bg-color: $content-bg-color-dark;
+ --card-bg-color: $card-bg-color-dark;
+ --text-color: $text-color-dark;
+ --link-color: $link-color-dark;
+ --link-hover-color: $link-hover-color-dark;
+ --brand-color: $brand-color-dark;
+ --brand-hover-color: $brand-hover-color-dark;
+ --table-row-odd-bg-color: $table-row-odd-bg-color-dark;
+ --table-row-hover-bg-color: $table-row-hover-bg-color-dark;
+ --menu-item-bg-color: $menu-item-bg-color-dark;
}
img {
diff --git a/source/css/_common/components/post/post-followme.styl b/source/css/_common/components/post/post-followme.styl
index 2ba8c87486..4c016cce79 100644
--- a/source/css/_common/components/post/post-followme.styl
+++ b/source/css/_common/components/post/post-followme.styl
@@ -3,10 +3,9 @@
background: var(--card-bg-color);
border-left: 3px solid $red;
color: $grey;
- display: flex;
- flex-direction: column;
margin: 2em 0 1em 0;
padding: 1em 1.5em;
+ flex-column();
.social-list {
align-items: center;
diff --git a/source/css/_common/outline/header/menu.styl b/source/css/_common/outline/header/menu.styl
index 6f29af063a..6286f17898 100644
--- a/source/css/_common/outline/header/menu.styl
+++ b/source/css/_common/outline/header/menu.styl
@@ -12,7 +12,12 @@
margin: 0 10px;
+mobile() {
+ display: block;
margin-top: 10px;
+
+ &.menu-item-search {
+ display: none;
+ }
}
a, span.exturl {
diff --git a/source/css/_common/outline/header/site-nav.styl b/source/css/_common/outline/header/site-nav.styl
index 7e33265ee2..9095533549 100644
--- a/source/css/_common/outline/header/site-nav.styl
+++ b/source/css/_common/outline/header/site-nav.styl
@@ -1,13 +1,12 @@
-.site-nav-toggle {
+.site-nav-toggle, .site-nav-right {
display: none;
+mobile() {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ flex-column();
}
.toggle {
+ color: var(--text-color);
padding: 10px;
width: 22px;
@@ -18,15 +17,6 @@
}
}
-.site-nav-right {
- display: none;
- width: 42px;
-
- +mobile() {
- display: block;
- }
-}
-
.site-nav {
display: block;
diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
index 6ae7a6ada0..2834550d9b 100644
--- a/source/css/_mixins.styl
+++ b/source/css/_mixins.styl
@@ -111,3 +111,9 @@ sidebar-inline-links-item() {
white-space: nowrap;
}
}
+
+flex-column() {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl
index 877c45b435..018b6447d7 100644
--- a/source/css/_schemes/Mist/_menu.styl
+++ b/source/css/_schemes/Mist/_menu.styl
@@ -15,7 +15,6 @@
margin: 0;
+mobile() {
- display: block;
margin-top: 5px;
}
diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl
index d3e3c81507..736c3fd9b5 100644
--- a/source/css/_schemes/Muse/_menu.styl
+++ b/source/css/_schemes/Muse/_menu.styl
@@ -9,10 +9,6 @@
}
}
-.site-nav-toggle {
- top: 50px;
-}
-
.menu {
+mobile() {
text-align: left;
@@ -30,7 +26,6 @@
.menu .menu-item {
+mobile() {
- display: block;
margin: 0 10px;
}
diff --git a/source/css/_schemes/Pisces/_header.styl b/source/css/_schemes/Pisces/_header.styl
index d5c4b5f613..4d216648d9 100644
--- a/source/css/_schemes/Pisces/_header.styl
+++ b/source/css/_schemes/Pisces/_header.styl
@@ -7,7 +7,6 @@
}
.site-meta {
- color: white;
padding: 20px 0;
}
diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl
index fe01f69d94..2da2f5de15 100644
--- a/source/css/_schemes/Pisces/_menu.styl
+++ b/source/css/_schemes/Pisces/_menu.styl
@@ -1,18 +1,14 @@
-.site-nav-toggle {
+.site-nav-toggle, .site-nav-right {
+tablet() {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ flex-column();
}
- .toggle .toggle-line {
- background: white;
- }
-}
+ .toggle {
+ color: white;
-.site-nav-right {
- +tablet() {
- display: block;
+ .toggle-line {
+ background: white;
+ }
}
}
@@ -51,6 +47,12 @@ if (!hexo-config('menu_settings.badges')) {
}
}
+ +tablet-mobile() {
+ &.menu-item-search {
+ display: none;
+ }
+ }
+
.badge {
background: $grey-light;
border-radius: 10px;
diff --git a/source/js/algolia-search.js b/source/js/algolia-search.js
index e27efbd640..7ebee4d724 100644
--- a/source/js/algolia-search.js
+++ b/source/js/algolia-search.js
@@ -95,11 +95,13 @@ window.addEventListener('DOMContentLoaded', () => {
search.start();
// Handle and trigger popup window
- document.querySelector('.popup-trigger').addEventListener('click', () => {
- document.body.style.overflow = 'hidden';
- document.querySelector('.search-pop-overlay').style.display = 'block';
- document.querySelector('.popup').style.display = 'block';
- document.querySelector('.search-input').focus();
+ document.querySelectorAll('.popup-trigger').forEach(element => {
+ element.addEventListener('click', () => {
+ document.body.style.overflow = 'hidden';
+ document.querySelector('.search-pop-overlay').style.display = 'block';
+ document.querySelector('.popup').style.display = 'block';
+ document.querySelector('.search-input').focus();
+ });
});
// Monitor main search box
diff --git a/source/js/local-search.js b/source/js/local-search.js
index 256cf979e5..53db413148 100644
--- a/source/js/local-search.js
+++ b/source/js/local-search.js
@@ -286,13 +286,11 @@ window.addEventListener('DOMContentLoaded', () => {
}
// Handle and trigger popup window
- document.querySelector('.popup-trigger').addEventListener('click', () => {
- if (isfetched === false) {
- searchFunc();
- } else {
- proceedSearch();
- }
- });
+ document.querySelectorAll('.popup-trigger').forEach(element => {
+ element.addEventListener('click', () => {
+ isfetched ? proceedSearch() : searchFunc();
+ });
+ })
// Monitor main search box
const onPopupClose = () => {