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() %} - + {%- 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 = () => {