diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 337b1c6..8c542ca 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -596,8 +596,6 @@ figure .mfp-title {
 
 /* --- sidebar layout --- */
 
-$tab-count: 5 !default;
-
 $sidebar-display: "sidebar-display";
 
 #sidebar {
@@ -608,7 +606,7 @@ $sidebar-display: "sidebar-display";
   left: 0;
   height: 100%;
   overflow-y: auto;
-  width: $sidebar-width-medium;
+  width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
 
@@ -717,7 +715,6 @@ $sidebar-display: "sidebar-display";
       width: 100%;
 
       &:last-child {
-        $cursor-width: 3px;
 
         a {
           position: relative;
@@ -846,7 +843,7 @@ $sidebar-display: "sidebar-display";
   height: $topbar-height;
   position: fixed;
   top: 0;
-  left: 260px; /* same as sidebar width */
+  left: $sidebar-width; /* same as sidebar width */
   right: 0;
   transition: top 0.2s ease-in-out;
   z-index: 50;
@@ -1090,7 +1087,7 @@ $sidebar-display: "sidebar-display";
 
 @media all and (max-width: 576px) {
 
-  $footer-height: 6rem; // overwrite
+  $footer-height: $footer-height-mobile; // overwrite
 
   #main > div.row:first-child > div:first-child {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
@@ -1164,7 +1161,7 @@ $sidebar-display: "sidebar-display";
 
     #topbar-wrapper,
     #main-wrapper {
-      transform: translateX(#{$sidebar-width-medium});
+      transform: translateX(#{$sidebar-width});
     }
 
   }
@@ -1172,8 +1169,8 @@ $sidebar-display: "sidebar-display";
   #sidebar {
     @extend %slide;
 
-    transform: translateX(-#{$sidebar-width-medium}); // hide
-    -webkit-transform: translateX(-#{$sidebar-width-medium});
+    transform: translateX(-#{$sidebar-width}); // hide
+    -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
       -webkit-transition: none;
@@ -1271,7 +1268,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #main-wrapper {
-    margin-left: $sidebar-width-medium;
+    margin-left: $sidebar-width;
   }
 
   .profile-wrapper {
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 3651c48..2ad456a 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -39,8 +39,6 @@ html[mode=dark] {
   padding: 1.5rem;
 }
 
-$code-font-size: 0.85rem;
-
 div > pre {
   @extend %code-snippet-bg;
   @extend %code-snippet-radius;
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 1d7e867..26d0fcf 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -1,22 +1,34 @@
 /*
-* Mainly scss variables
-*/
+ * The SCSS variables
+ */
 
-/* --- ↓ width and height ---- */
+/* sidebar */
 
-$tab-height: 3.2rem;
-$tab-cursor-height: 1.6rem;
+$sidebar-width: 260px !default;        // the basic width
+$sidebar-width-small: 210px !default;  // screen width: >= 850px, <= 1199px (iPad landscape)
+$sidebar-width-large: 350px !default;  // screen width: >= 1650px
 
-$sidebar-width-small: 210px;
-$sidebar-width-medium: 260px;
-$sidebar-width-large: 350px;
+/* tabs of sidebar */
 
-$topbar-height: 3rem;
+$tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
+$tab-height: 3.2rem !default;
+$tab-cursor-height: 1.6rem !default;
 
-$footer-height: 5rem;
+$cursor-width: 3px !default;    // the cursor width of the selected tab
 
-$main-content-max-width: 1150px;
+/* other framework sizes */
 
-$panel-max-width: 300px;
+$topbar-height: 3rem !default;
 
-$post-extend-min-height: 35rem;
+$footer-height: 5rem !default;
+$footer-height-mobile: 6rem !default;   // screen width: <= 576px
+
+$main-content-max-width: 1150px !default;
+
+$panel-max-width: 300px !default;
+
+$post-extend-min-height: 35rem !default;
+
+/* syntax highlight */
+
+$code-font-size: 0.85rem !default;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d437fb5..236b5de 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,7 +1,6 @@
 ---
 ---
 
-// see: /_sass/addon/commons.scss
-$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
+{% include_relative variables-hook.scss %}
 
 @import "jekyll-theme-chirpy";
diff --git a/assets/css/variables-hook.scss b/assets/css/variables-hook.scss
new file mode 100644
index 0000000..22d4ab2
--- /dev/null
+++ b/assets/css/variables-hook.scss
@@ -0,0 +1,5 @@
+/*
+  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
+*/
+
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab