From a589831812062c7f9cc7c2a6192d4c2c0e5b3927 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 16 Oct 2019 23:20:51 +0800
Subject: [PATCH] Improved the compatibility in Firefox.

---
 _includes/sidebar.html    |  1 -
 assets/css/_src/main.scss | 88 +++++++++++++++++++++------------------
 2 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 6d609b1..fb1b89c 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -43,7 +43,6 @@
     </li> <!-- .nav-item -->
   {% endfor %}
 
-    <span class="cursor"></span>
   </ul> <!-- ul.nav.flex-column -->
 
 </div><!-- #nav-wrap -->
diff --git a/assets/css/_src/main.scss b/assets/css/_src/main.scss
index cb6c943..2094d91 100644
--- a/assets/css/_src/main.scss
+++ b/assets/css/_src/main.scss
@@ -1,4 +1,3 @@
-
 /*!
 * The main styles.
 * © 2018-2019 Cotes Chung
@@ -7,6 +6,7 @@
 
 html, body {
   height: 100%;
+  font-size: 16px;
 }
 
 /* Solved jumping scrollbar */
@@ -46,7 +46,6 @@ body {
 
 #sidebar .nav-item {
   height: 20%;
-  padding: 0 2rem;
 }
 
 #sidebar .nav-link {
@@ -70,47 +69,53 @@ body {
   display: -ms-flexbox;
 }
 
-.cursor {
-  background: #fcfcfc;
+#sidebar ul > li.active:nth-child(1) ~ li:last-child::after,
+#sidebar ul > li.nav-item:nth-child(1):hover ~ li:last-child::after {
+  top: calc(-400% + (26px / 2));
+  visibility: visible;
+}
+
+#sidebar ul > li.active:nth-child(2) ~ li:last-child::after,
+#sidebar ul > li.nav-item:nth-child(2):hover ~ li:last-child::after {
+  top: calc(-300% + (26px / 2));
+  visibility: visible;
+}
+
+#sidebar ul > li.active:nth-child(3) ~ li:last-child::after,
+#sidebar ul > li.nav-item:nth-child(3):hover ~ li:last-child::after {
+  top: calc(-200% + (26px / 2));
+  visibility: visible;
+}
+
+#sidebar ul > li.active:nth-child(4) ~ li:last-child::after,
+#sidebar ul > li.nav-item:nth-child(4):hover ~ li:last-child::after {
+  top: calc(-100% + (26px / 2));
+  visibility: visible;
+}
+
+#sidebar ul > li.active:nth-child(5):last-child::after,
+#sidebar ul > li.nav-item:nth-child(5):last-child:hover::after {
+  top: calc(26px / 2);
+  visibility: visible;
+}
+
+#sidebar ul > li:last-child > a {
+  margin-right: -3px;
+  max-width: calc(100% - 3px);
+}
+
+#sidebar ul > li:last-child::after {
+  visibility: hidden;
+  content: "";
   position: relative;
-  display: none;
-  top: 0;
-  left: 98.5%;
   width: 3px;
-  height: 10%;
-  -webkit-transition: top 0.5s ease;
-  -moz-transition: top 0.5s ease;
-  transition: top 0.5s ease;
-}
-
-#sidebar ul>li.active:nth-child(1)~.cursor,
-#sidebar ul>li.nav-item:nth-child(1):hover~.cursor {
-  top: -95%;
-  display: block;
-}
-
-#sidebar ul>li.active:nth-child(2)~.cursor,
-#sidebar ul>li.nav-item:nth-child(2):hover~.cursor {
-  top: -75%;
-  display: block;
-}
-
-#sidebar ul>li.active:nth-child(3)~.cursor,
-#sidebar ul>li.nav-item:nth-child(3):hover~.cursor {
-  top: -55%;
-  display: block;
-}
-
-#sidebar ul>li.active:nth-child(4)~.cursor,
-#sidebar ul>li.nav-item:nth-child(4):hover~.cursor {
-  top: -35%;
-  display: block;
-}
-
-#sidebar ul>li.active:nth-child(5)~.cursor,
-#sidebar ul>li.nav-item:nth-child(5):hover~.cursor {
-  top: -15%;
-  display: block;
+  height: 26px;
+  background: #fcfcfc;;
+  pointer-events: none;
+  -webkit-transition: top .5s ease;
+  -moz-transition: top .5s ease;
+  -o-transition: top .5s ease;
+  transition: top .5s ease;
 }
 
 #nav-wrap {
@@ -996,6 +1001,7 @@ a.tag:hover {
 }
 
 #archives .date {
+  white-space: nowrap;
   display: inline-block;
 }