From 32d838fede1fb82a951f17d329e2b45bed2a8a60 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 17 Feb 2020 03:06:38 +0800
Subject: [PATCH] Prettified the mode toggle switch.

---
 _includes/sidebar.html |  2 +-
 assets/css/main.scss   | 52 ++++++++++++++++++++++++++++++------------
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 188ffdd..650e444 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -58,7 +58,7 @@
 <div class="sidebar-bottom d-flex justify-content-around mt-4">
 
   {% if site.theme_mode == "dual" %}
-  <span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
+  <span id="mode-toggle-wrapper">
     {% include mode-toggle.html %}
   </span>
   {% endif %}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 3272d21..972a73a 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -11,6 +11,19 @@
 @import "_fonts";
 @import "_dark/dark-main";
 
+@mixin sidebar-icon {
+  color: rgba(255, 255, 255, 0.5);
+  transition: color 0.35s ease-in-out;
+  user-select: none;
+}
+
+@mixin icon-round($diameter) {
+  border: 1px solid;
+  border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+}
+
 html, body {
   height: 100%;
   font-size: 16px;
@@ -49,8 +62,7 @@ body {
 }
 
 #sidebar a {
-  color: rgba(255, 255, 255, 0.5);
-  transition: color 0.35s ease-in-out;
+  @include sidebar-icon;
 }
 
 #sidebar .nav-item {
@@ -237,17 +249,20 @@ body {
 }
 
 #mode-toggle-wrapper {
-  color: rgb(103, 107, 109);
+  @include sidebar-icon;
   font-size: 1.05rem;
-  user-select: none;
-  transition: color 0.35s ease-in-out;
+  text-align: center;
 }
 
-#sidebar #mode-toggle-wrapper>i::after {
+#mode-toggle-wrapper::after {
   content: "";
-  color: #525354;
-  border-right: 1px solid;
-  padding-left: .6rem;
+  background: #525354;
+  width: 1px;
+  height: 8px;
+  margin-left: 7px;
+  margin-right: -6px;
+  margin-bottom: 3px;
+  display: inline-block;
 }
 
 
@@ -1370,10 +1385,7 @@ table tbody td {
   }
 
   #sidebar .nav-link>i {
-    border: 1px solid;
-    border-radius: 50%;
-    width: 1.65rem;
-    height: 1.65rem;
+    @include icon-round(1.65rem);
     line-height: 1rem;
     font-size: .6rem;
     padding: .5em 0 0 .1em;
@@ -1382,7 +1394,7 @@ table tbody td {
 
   .sidebar-bottom {
     margin-left: 3.5rem;
-    margin-right: 4.5rem;
+    margin-right: 3rem;
     font-size: 1.3rem;
     padding-bottom: 1rem;
   }
@@ -1403,7 +1415,17 @@ table tbody td {
   }
 
   #mode-toggle-wrapper {
-    font-size: 1.6rem;
+    font-size: .9rem;
+  }
+
+  #mode-toggle-wrapper>i {
+    @include icon-round(2rem);
+    padding-top: 0.5rem;
+  }
+
+  #mode-toggle-wrapper::after {
+    height: 14px;
+    margin-bottom: 0;
   }
 
   footer>div.d-flex {