theme-next · stevenjoezhang · Feb 23, 2020 · Feb 23, 2020 · Feb 23, 2020 · Feb 23, 2020
diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig
@@ -85,9 +85,7 @@
               <span class="post-meta-item-text">{{ __('post.in') }}</span>
               {%- for cat in post.categories.toArray() %}
                 <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
-                  <a href="{{ url_for(cat.path) }}" itemprop="url" rel="index">
-                    <span itemprop="name">{{ cat.name }}</span>
-                  </a>
+                  <a href="{{ url_for(cat.path) }}" itemprop="url" rel="index"><span itemprop="name">{{ cat.name }}</span></a>
                 </span>
 
                 {%- set cat_length = post.categories.length %}

diff --git a/layout/_partials/header/brand.swig b/layout/_partials/header/brand.swig
@@ -37,5 +37,11 @@
     {%- endif %}
   </div>
 
-  <div class="site-nav-right"></div>
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+      {%- if theme.algolia_search.enable or theme.local_search.enable %}
+        <i class="fa fa-search fa-fw fa-lg"></i>
+      {%- endif %}
+    </div>
+  </div>
 </div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,6 @@ @@
     }
     .site-meta {
-      color: white;
       padding: 20px 0;
     }
@@ Expand Down @@