From 6b9b175d2adc6cb011bc9a3cbf59652c5cc9a648 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Mon, 3 Aug 2020 21:44:32 +0800
Subject: [PATCH] New mixin toggle-arrow & toggle-close

---
 _config.yml                                   |  4 +-
 .../components/post/post-collapse.styl        |  4 +-
 .../outline/sidebar/sidebar-toggle.styl       | 12 ++-
 source/css/_common/scaffolding/toggles.styl   | 77 ++-----------------
 source/css/_mixins.styl                       | 58 ++++++++++++++
 5 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/_config.yml b/_config.yml
index 4c523c7..b91a1e0 100644
--- a/_config.yml
+++ b/_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
diff --git a/source/css/_common/components/post/post-collapse.styl b/source/css/_common/components/post/post-collapse.styl
index d025b05..038964c 100644
--- a/source/css/_common/components/post/post-collapse.styl
+++ b/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;
   }
diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl
index 6fb5aa3..01ae35f 100644
--- a/source/css/_common/outline/sidebar/sidebar-toggle.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl
@@ -10,10 +10,16 @@
   background: $sidebar-highlight;
 }
 
-body:not(.sidebar-active) .sidebar-toggle:hover {
-  @extend .toggle.toggle-arrow;
+// 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 {
+    toggle-arrow(hexo-config('sidebar.position'));
+  }
 }
 
 .sidebar-active .sidebar-toggle {
-  @extend .toggle.toggle-close;
+  toggle-close(hexo-config('sidebar.position'));
 }
diff --git a/source/css/_common/scaffolding/toggles.styl b/source/css/_common/scaffolding/toggles.styl
index 75ab86f..3b9eea5 100644
--- a/source/css/_common/scaffolding/toggles.styl
+++ b/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.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.toggle-arrow {
+  toggle-arrow(hexo-config('sidebar.position'));
+}
+
+.toggle.toggle-close {
+  toggle-close(hexo-config('sidebar.position'));
 }
diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
index 3baf4b1..c422308 100644
--- a/source/css/_mixins.styl
+++ b/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);
+    }
+  }
+}