Improve the style of site-nav (#1180)

* Make site-nav-toggle and badge more robust
theme-next · Oct 1, 2019 · 4142856 · 4142856
1 parent a480948
commit 4142856
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 168 deletions.
diff --git a/layout/_macro/sidebar.swig b/layout/_macro/sidebar.swig
@@ -1,10 +1,8 @@
 {% macro render(display_toc) %}
-  <div class="sidebar-toggle">
-    <div class="sidebar-toggle-line-wrap">
-      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
-      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
-      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
-    </div>
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
   </div>
 
   <aside class="sidebar">

diff --git a/layout/_partials/header/brand.swig b/layout/_partials/header/brand.swig
@@ -30,10 +30,10 @@
   </div>
 
   <div class="site-nav-toggle">
-    <button aria-label="{{ __('accessibility.nav_toggle') }}">
-      <span class="btn-bar"></span>
-      <span class="btn-bar"></span>
-      <span class="btn-bar"></span>
-    </button>
+    <div class="toggle" aria-label="{{ __('accessibility.nav_toggle') }}">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
   </div>
 </div>
diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl
@@ -63,6 +63,7 @@
 .posts-expand .post-meta {
   color: $grey-dark;
   font-family: $font-family-posts;
+  font-size: $font-size-smallest;
   margin: 3px 0 60px 0;
   text-align: center;
 
@@ -82,10 +83,6 @@
   margin: 0 .5em;
 }
 
-.post-meta .post-meta-item {
-  font-size: $font-size-smallest;
-}
-
 .post-meta-divider {
   margin: 0 .5em;
 }

diff --git a/source/css/_common/outline/header/menu.styl b/source/css/_common/outline/header/menu.styl
@@ -33,6 +33,21 @@
   .fa {
     margin-right: 8px;
   }
+
+  .badge {
+    display: inline-block;
+    font-weight: $font-weight-bolder;
+    line-height: 1;
+    margin-left: 0.35em;
+    text-align: center;
+    white-space: nowrap;
+
+    +mobile() {
+      float: right;
+      margin-left: 0;
+      margin-top: 0.35em;
+    }
+  }
 }
 
 .use-motion .menu-item {

diff --git a/source/css/_common/outline/header/site-nav.styl b/source/css/_common/outline/header/site-nav.styl
@@ -7,11 +7,17 @@
     display: block;
   }
 
-  button {
+  .toggle {
     background: transparent;
     border: 0;
     margin-top: 2px;
-    padding: 9px 10px;
+    padding: 10px;
+    width: 22px;
+
+    .toggle-line {
+      background: $text-color;
+      border-radius: 1px;
+    }
   }
 }
 

diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl
@@ -4,7 +4,6 @@
   cursor: pointer;
   height: 14px;
   left: $b2t-position-right;
-  line-height: 0;
   padding: 5px;
   position: fixed;
   width: 14px;
@@ -20,21 +19,6 @@
   }
 }
 
-.sidebar-toggle-line {
-  background: white;
-  display: inline-block;
-  height: 2px;
-  margin-top: 3px;
-  position: relative;
-  transition: all .4s;
-  vertical-align: top;
-  width: 100%;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.sidebar-toggle:hover .sidebar-toggle-line {
+.sidebar-toggle:hover .toggle-line {
   background: $sidebar-highlight;
 }
diff --git a/source/css/_common/scaffolding/buttons.styl b/source/css/_common/scaffolding/buttons.styl
@@ -26,15 +26,3 @@
     width: (18em / 14);
   }
 }
-
-.btn-bar {
-  background: $text-color;
-  border-radius: 1px;
-  display: block;
-  height: 2px;
-  width: 22px;
-
-  + .btn-bar {
-    margin-top: 4px;
-  }
-}
diff --git a/source/css/_common/scaffolding/scaffolding.styl b/source/css/_common/scaffolding/scaffolding.styl
@@ -5,6 +5,7 @@
 @import 'base';
 @import 'tables';
 @import 'buttons';
+@import 'toggles';
 @import 'highlight';
 @import 'tags';
 @import 'pagination';

diff --git a/source/css/_common/scaffolding/toggles.styl b/source/css/_common/scaffolding/toggles.styl
@@ -0,0 +1,93 @@
+.toggle {
+  line-height: 0;
+
+  .toggle-line {
+    background: white;
+    display: inline-block;
+    height: 2px;
+    left: 0px;
+    margin-top: 3px;
+    position: relative;
+    top: 0px;
+    transition: all .4s;
+    vertical-align: top;
+    width: 100%;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+if (hexo-config('sidebar.position') == 'right') {
+  .toggle.toggle-arrow {
+    .toggle-line-first {
+      top: 2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+
+    .toggle-line-middle {
+      width: 90%;
+    }
+
+    .toggle-line-last {
+      top: -2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+  }
+
+  .toggle.toggle-close {
+    .toggle-line-first {
+      top: 5px;
+      transform: rotate(-45deg);
+    }
+
+    .toggle-line-middle {
+      opacity: 0;
+    }
+
+    .toggle-line-last {
+      top: -5px;
+      transform: rotate(45deg);
+    }
+  }
+} else {
+  .toggle.toggle-arrow {
+    .toggle-line-first {
+      left: 50%;
+      top: 2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+
+    .toggle-line-middle {
+      left: 2px;
+      width: 90%;
+    }
+
+    .toggle-line-last {
+      left: 50%;
+      top: -2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+  }
+
+  .toggle.toggle-close {
+    .toggle-line-first {
+      transform: rotate(-45deg);
+      top: 5px;
+    }
+
+    .toggle-line-middle {
+      opacity: 0;
+    }
+
+    .toggle-line-last {
+      transform: rotate(45deg);
+      top: -5px;
+    }
+  }
+}
diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl
@@ -38,25 +38,6 @@
       margin-top: 5px;
     }
 
-    .badge {
-      background-color: white;
-      border-radius: 10px;
-      color: $black-light;
-      display: inline-block;
-      font-weight: $font-weight-bolder;
-      line-height: 1;
-      margin-left: 5px;
-      padding: 1px 4px;
-      text-align: center;
-      text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
-      white-space: nowrap;
-
-      +mobile() {
-        float: right;
-        margin: .35em 0 0 0;
-      }
-    }
-
     a, span.exturl {
       border-radius: 2px;
       padding: 0 10px;
@@ -70,6 +51,14 @@
         @extend .menu-item-active a;
       }
     }
+
+    .badge {
+      background-color: white;
+      border-radius: 10px;
+      color: $black-light;
+      padding: 1px 4px;
+      text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+    }
   }
 
   a::before {

diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl
@@ -36,22 +36,6 @@
     vertical-align: top;
   }
 
-  .badge {
-    background-color: $gainsboro;
-    display: inline-block;
-    font-weight: $font-weight-bolder;
-    line-height: 1;
-    margin-left: 5px;
-    padding: 1px 4px;
-    text-align: center;
-    white-space: nowrap;
-
-    +mobile() {
-      float: right;
-      margin: .35em 0 0 0;
-    }
-  }
-
   a, span.exturl {
     +mobile() {
       padding: 5px 10px;
@@ -77,4 +61,9 @@
       width: 100%;
     }
   }
+
+  .badge {
+    background-color: $gainsboro;
+    padding: 1px 4px;
+  }
 }
diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
@@ -55,19 +55,11 @@
   box-shadow: $box-shadow-inner;
   box-sizing: border-box;
   float: right;
-  min-height: 700px;
   padding: $content-desktop-padding;
   width: $content-wrap;
 
-  +tablet() {
-    border-radius: initial;
-    padding: 20px;
-    width: 100%;
-  }
-
-  +mobile() {
+  +tablet-mobile() {
     border-radius: initial;
-    min-height: auto;
     padding: 20px;
     width: 100%;
   }

diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl
@@ -6,6 +6,10 @@
   +tablet() {
     display: block;
   }
+
+  .toggle .toggle-line {
+    background-color: white;
+  }
 }
 
 .site-nav {
@@ -55,19 +59,9 @@
     background-color: $grey-light;
     border-radius: 10px;
     color: white;
-    display: inline-block;
     float: right;
-    font-weight: $font-weight-bolder;
-    line-height: 1;
-    margin: .35em 0 0 0;
     padding: 2px 5px;
-    text-align: center;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
     vertical-align: middle;
-    white-space: nowrap;
   }
 }
-
-.btn-bar {
-  background-color: white;
-}
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
@@ -8,20 +8,20 @@ NexT.boot.registerEvents = function() {
   NexT.utils.registerCanIUseTag();
 
   // Mobile top menu bar.
-  document.querySelector('.site-nav-toggle button').addEventListener('click', () => {
+  document.querySelector('.site-nav-toggle .toggle').addEventListener('click', () => {
+    event.currentTarget.classList.toggle('toggle-close');
     var siteNav = document.querySelector('.site-nav');
-    var ON_CLASS_NAME = 'site-nav-on';
-    var animateAction = siteNav.classList.contains(ON_CLASS_NAME) ? 'slideUp' : 'slideDown';
+    var animateAction = siteNav.classList.contains('site-nav-on') ? 'slideUp' : 'slideDown';
 
     if (typeof Velocity === 'function') {
       Velocity(siteNav, animateAction, {
         duration: 200,
         complete: function() {
-          siteNav.classList.toggle(ON_CLASS_NAME);
+          siteNav.classList.toggle('site-nav-on');
         }
       });
     } else {
-      siteNav.classList.toggle(ON_CLASS_NAME);
+      siteNav.classList.toggle('site-nav-on');
     }
   });