Improved the compatibility in Firefox.

cotes2020 · cotes2020 · commit cbd4b10a39fb · 2019-11-20T01:50:55.000+08:00
diff --git 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
@@ -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;
-  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) ~ 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(1)~.cursor,
-#sidebar ul>li.nav-item:nth-child(1):hover~.cursor {
-  top: -95%;
-  display: block;
+#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(2)~.cursor,
-#sidebar ul>li.nav-item:nth-child(2):hover~.cursor {
-  top: -75%;
-  display: block;
+#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(3)~.cursor,
-#sidebar ul>li.nav-item:nth-child(3):hover~.cursor {
-  top: -55%;
-  display: block;
+#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(4)~.cursor,
-#sidebar ul>li.nav-item:nth-child(4):hover~.cursor {
-  top: -35%;
-  display: block;
+#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.active:nth-child(5)~.cursor,
-#sidebar ul>li.nav-item:nth-child(5):hover~.cursor {
-  top: -15%;
-  display: block;
+#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;
+  width: 3px;
+  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;
 }
 
