From c0b8c089c264b514710bf303f88e2902dc769fcb Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 14 Sep 2021 15:54:05 +0800
Subject: [PATCH 1/2] Custom the scrollbar on Webkit browsers

the default scrollbar on Windows looks like shit
---
 _sass/addon/commons.scss           | 20 ++++++++++++++++++++
 _sass/colors/dark-typography.scss  |  2 ++
 _sass/colors/light-typography.scss |  2 ++
 3 files changed, 24 insertions(+)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 7ca7029..c320cd0 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -53,6 +53,26 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
+/* --- Scrollbar --- */
+
+$scrollbar-size: 7px;
+
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+}
+
+::-webkit-scrollbar-track {
+  @at-root body#{&} {
+    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  border-radius: calc(#{$scrollbar-size} / 2);
+}
+
 /* --- Typography --- */
 
 h1 {
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index e8f53e1..3c0a718 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -12,6 +12,8 @@
   --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
   --footer-bg-color: var(--main-wrapper-bg);
+  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
   /* common color */
   --text-color: rgb(175, 176, 177);
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 11031eb..3e0af5e 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -24,6 +24,8 @@
   --btn-box-shadow: #eaeaea;
   --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
+  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb-bg: rgba(0,0,0,0.3);
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);

From 0267ad8d406d936112cfa44a809551c46864ef3f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 14 Sep 2021 16:44:18 +0800
Subject: [PATCH 2/2] Move sass variables

---
 _sass/colors/dark-typography.scss  | 30 +++++++++++++++---------------
 _sass/colors/light-typography.scss | 20 +++++++++++---------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 3c0a718..651ecbb 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -3,28 +3,23 @@
  */
 
 @mixin dark-scheme {
-  /* framework */
-  --main-wrapper-bg: rgb(27, 27, 30);
+  /* Framework color */
   --body-bg: var(--main-wrapper-bg);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-icon-color: rgb(100, 102, 105);
-  --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
-  --footer-bg-color: var(--main-wrapper-bg);
-  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --main-wrapper-bg: rgb(27, 27, 30);
+  --main-border-color: rgb(44, 45, 45);
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
   --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
-  /* common color */
+  /* Common color */
   --text-color: rgb(175, 176, 177);
-  --heading-color: #cccccc;
   --text-muted-color: rgb(107, 116, 124);
-  --link-color: rgb(138, 180, 248);
-  --link-underline-color: rgb(82, 108, 150);
-  --main-border-color: rgb(44, 45, 45);
-  --button-bg: rgb(39, 40, 43);
+  --heading-color: #cccccc;
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(82, 108, 150);
+  --button-bg: rgb(39, 40, 43);
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
@@ -38,8 +33,12 @@
   --nav-cursor-color: rgb(183, 182, 182);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
 
-  /* Top Bar */
+  /* Topbar */
   --topbar-text-color: var(--text-color);
+  --topbar-wrapper-bg: rgb(39, 40, 43);
+  --search-wrapper-bg: rgb(34, 34, 39);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
@@ -84,6 +83,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
+  --footer-bg-color: var(--main-wrapper-bg);
   --footer-link: rgb(171, 171, 171);
 
   .post-content img {
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 3e0af5e..7234de5 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -3,37 +3,37 @@
  */
 
 @mixin light-scheme {
-  /* Common */
+  /* Framework color */
   --body-bg: #fafafa;
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --btn-border-color: #e9ecef;
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
+
+  /* Common color */
   --text-color: #34343c;
+  --text-muted-color: gray;
   --heading-color: black;
   --blockquote-border-color: #eee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;
   --link-underline-color: #dee2e6;
-  --text-muted-color: gray;
-  --tb-odd-bg: #fbfcfd;
-  --tb-border-color: #eaeaea;
   --button-bg: #fff;
+  --btn-border-color: #e9ecef;
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
   --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
-  --scrollbar-track-bg: rgba(0,0,0,0.3);
-  --scrollbar-thumb-bg: rgba(0,0,0,0.3);
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
   --nav-cursor-color: #fcfcfc;
 
   /* Topbar */
-  --topbar-wrapper-bg: white;
   --topbar-text-color: rgb(78, 78, 78);
+  --topbar-wrapper-bg: white;
   --search-wrapper-bg: #f5f5f5;
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
@@ -57,10 +57,13 @@
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
+  --footnote-target-bg: lightcyan;
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;
   --tag-shadow: var(--btn-border-color);
   --tag-hover: rgb(222, 226, 230);
+  --tb-odd-bg: #fbfcfd;
+  --tb-border-color: #eaeaea;
   --categories-hover-bg: var(--btn-border-color);
   --dash-color: silver;
 
@@ -71,6 +74,5 @@
 
   /* Footer */
   --footer-bg-color: #ffffff;
-  --footnote-target-bg: lightcyan;
   --footer-link: #424242;
 } // light-scheme