New mixin toggle-arrow & toggle-close

_config.yml

@@ -610,7 +610,7 @@ valine:
   appKey: # Your leancloud application appkey
   placeholder: Just go go # Comment box placeholder
   avatar: mm # Gravatar style
-  meta: [nick, mail, link] # Custom comment header
+  meta: [] # Custom comment header: [nick, mail, link]
   pageSize: 10 # Pagination size
   language: # Language, available values: en, zh-cn
   visitor: false # Article reading statistic
@@ -618,7 +618,7 @@ valine:
   recordIP: false # Whether to record the commenter IP
   serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
   enableQQ: false # Whether to enable the Nickname box to automatically get QQ Nickname and QQ Avatar
-  requiredFields: [] # Set required fields: ['nick'] | ['nick','mail']
+  requiredFields: [] # Set required fields: [nick] | [nick, mail]
   #post_meta_order: 0
 
 # LiveRe comments system

source/css/_common/components/post/post-collapse.styl

@@ -1,4 +1,5 @@
 .posts-collapse {
+  margin-bottom: $posts-collapse-margin;
   margin-left: $posts-collapse-margin;
   position: relative;
 
@@ -40,7 +41,7 @@
 
   .collection-header {
     display: block;
-    margin: 0 0 0 20px;
+    margin-left: 20px;
 
     small {
       color: $grey;
@@ -101,6 +102,7 @@
     height: 100%;
     margin-left: -2px;
     position: absolute;
+    // 1.25em is inaccurate when .collection-title has line breaks on mobile
     top: 1.25em;
     width: 4px;
   }

source/css/_common/outline/sidebar/sidebar-toggle.styl

@@ -10,10 +10,16 @@
   background: $sidebar-highlight;
 }
 
+// Fix issue #75
+// @extends does not seem to work inside @media
+// So we use a mixin here
+// https://github.com/stylus/stylus/issues/609
+@media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
-  @extend .toggle.toggle-arrow;
+    toggle-arrow(hexo-config('sidebar.position'));
+  }
 }
 
 .sidebar-active .sidebar-toggle {
-  @extend .toggle.toggle-close;
+  toggle-close(hexo-config('sidebar.position'));
 }

source/css/_common/scaffolding/toggles.styl

@@ -17,75 +17,10 @@
   }
 }
 
-if (hexo-config('sidebar.position') == 'right') {
 .toggle.toggle-arrow {
-    .toggle-line:first-child {
-      top: 2px;
-      transform: rotate(-45deg);
-      width: 50%;
-    }
-
-    .toggle-line:nth-child(2) {
-      width: 90%;
-    }
-
-    .toggle-line:last-child {
-      top: -2px;
-      transform: rotate(45deg);
-      width: 50%;
-    }
+  toggle-arrow(hexo-config('sidebar.position'));
 }
 
 .toggle.toggle-close {
-    .toggle-line:first-child {
-      top: 5px;
-      transform: rotate(-45deg);
-    }
-
-    .toggle-line:nth-child(2) {
-      opacity: 0;
-    }
-
-    .toggle-line:last-child {
-      top: -5px;
-      transform: rotate(45deg);
-    }
-  }
-} else {
-  .toggle.toggle-arrow {
-    .toggle-line:first-child {
-      left: 50%;
-      top: 2px;
-      transform: rotate(45deg);
-      width: 50%;
-    }
-
-    .toggle-line:nth-child(2) {
-      left: 2px;
-      width: 90%;
-    }
-
-    .toggle-line:last-child {
-      left: 50%;
-      top: -2px;
-      transform: rotate(-45deg);
-      width: 50%;
-    }
-  }
-
-  .toggle.toggle-close {
-    .toggle-line:first-child {
-      transform: rotate(-45deg);
-      top: 5px;
-    }
-
-    .toggle-line:nth-child(2) {
-      opacity: 0;
-    }
-
-    .toggle-line:last-child {
-      transform: rotate(45deg);
-      top: -5px;
-    }
-  }
+  toggle-close(hexo-config('sidebar.position'));
 }

source/css/_mixins.styl

@@ -149,3 +149,61 @@ round-icon($diameter) {
   height: $diameter;
   width: $diameter;
 }
+
+toggle-arrow($position) {
+  if ($position == 'right') {
+    .toggle-line:first-child {
+      top: 2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+
+    .toggle-line:last-child {
+      top: -2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+  } else {
+    .toggle-line:first-child {
+      left: 50%;
+      top: 2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+
+    .toggle-line:last-child {
+      left: 50%;
+      top: -2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+  }
+}
+
+toggle-close($position) {
+  .toggle-line:nth-child(2) {
+    opacity: 0;
+  }
+
+  if ($position == 'right') {
+    .toggle-line:first-child {
+      top: 5px;
+      transform: rotate(-45deg);
+    }
+
+    .toggle-line:last-child {
+      top: -5px;
+      transform: rotate(45deg);
+    }
+  } else {
+    .toggle-line:first-child {
+      top: 5px;
+      transform: rotate(45deg);
+    }
+
+    .toggle-line:last-child {
+      top: -5px;
+      transform: rotate(-45deg);
+    }
+  }
+}