Separate the major variables.

assets/css/_variables.scss

@@ -0,0 +1,22 @@
+/*
+* Mainly scss variables
+*
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+$sidebar-width-small: 210px;
+$sidebar-width-medium: 260px;
+$sidebar-width-large: 350px;
+
+$topbar-height: 3rem;
+
+$footer-height: 5rem;
+
+$main-content-max-width: 1150px;
+
+$panel-max-width: 300px;
+
+$post-extend-min-height: 35rem;

assets/css/main.scss

@@ -11,6 +11,7 @@
 @import "_fonts";
 @import "_dark/dark-main";
 @import "_module";
+@import "_variables";
 
 html, body {
   height: 100%;
@@ -43,7 +44,7 @@ $tab-count: {{ site.data.tabs | size }};
   left: 0;
   height: 100%;
   overflow-y: auto;
-  width: 260px;
+  width: $sidebar-width-medium;
   z-index: 99;
   -webkit-transition: transform 0.4s ease;
   transition: transform 0.4s ease;
@@ -253,7 +254,7 @@ $tab-count: {{ site.data.tabs | size }};
 /*--- top-bar ---*/
 
 #topbar-wrapper {
-  height: 3rem;
+  height: $topbar-height;
   position: fixed;
   top: 0;
   left: 260px; /* same as sidebar width */
@@ -417,8 +418,6 @@ $tab-count: {{ site.data.tabs | size }};
 
 /*--- main wrapper ---*/
 
-$footer-height: 5rem;
-
 #main-wrapper {
   background-color: var(--main-wrapper-bg, white);
   position: relative;
@@ -432,17 +431,17 @@ $footer-height: 5rem;
 
 #main>div.row:first-child>div {
   &:nth-child(1), &:nth-child(2) {
-    margin-top: 3rem; /* same as the height of topbar */
+    margin-top: $topbar-height; /* same as the height of topbar */
   }
   &:first-child {
     /* 3rem for topbar, 6rem for footer */
-    min-height: calc(100vh - 3rem - 6rem);
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
   }
 }
 
 #post-wrapper {
-  /* 350px for post extended block  */
-  min-height: calc(100vh - 3rem - 6rem - 470px) !important;
+  min-height: calc(100vh - #{$topbar-height}
+    - #{$footer-height} - #{$post-extend-min-height})!important;
   .post-content {
     a:hover {
       @extend %link-hover;
@@ -923,12 +922,15 @@ table {
 
 @media all and (max-width: 576px) {
 
+  $footer-height: 6rem; // overwrite
+
   #main>div.row:first-child>div:first-child {
-    min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
   #post-wrapper {
-    min-height: calc(100vh - 3rem - 10rem - 470px) !important;
+    min-height: calc(100vh - #{$topbar-height}
+      - #{$footer-height} - #{$post-extend-min-height}) !important;
     h1 {
       margin-top: 2.2rem;
       font-size: 1.55rem;
@@ -955,8 +957,6 @@ table {
     word-wrap: break-word;
   }
 
-  $footer-height: 6rem;
-
   #main-wrapper {
     padding-bottom: $footer-height;
   }
@@ -1028,13 +1028,13 @@ table {
   .sidebar-expand {
     transform: translateX(0) !important;
     ~#main-wrapper {
-      transform: translateX(260px) !important;
+      transform: translateX(#{$sidebar-width-medium}) !important;
     }
   }
 
   #sidebar {
-    transform: translateX(-260px); // hide
-    -webkit-transform: translateX(-260px);
+    transform: translateX(-#{$sidebar-width-medium}); // hide
+    -webkit-transform: translateX(-#{$sidebar-width-medium});
     .cursor {
       -webkit-transition: none;
       -moz-transition: none;
@@ -1137,7 +1137,7 @@ table {
 @media all and (min-width: 832px) and (max-width: 1199px) {
 
   #sidebar {
-    width: 210px;
+    width: $sidebar-width-small;
     .sidebar-bottom {
       @include ml-mr(1.5rem);
       .icon-border {
@@ -1218,7 +1218,7 @@ table {
   }
 
   #panel-wrapper {
-    max-width: 300px;
+    max-width: $panel-max-width;
   }
 
   #back-to-top {
@@ -1258,7 +1258,7 @@ table {
 @media all and (min-width: 1400px) {
 
   #main>div.row {
-    padding-left: calc((100% - 1150px) / 2);
+    padding-left: calc((100% - #{$main-content-max-width}) / 2);
     >div.col-xl-8 {
       max-width: 850px;
     }
@@ -1297,22 +1297,20 @@ table {
     }
   }
 
-  $side-bar-width: 350px;
-
   #main-wrapper {
-    margin-left: $side-bar-width
+    margin-left: $sidebar-width-large;
   }
 
   #panel-wrapper {
-    margin-left: calc((100% - 1150px) / 10);
+    margin-left: calc((100% - #{$main-content-max-width}) / 10);
   }
 
   #topbar-wrapper {
-    left: $side-bar-width
+    left: $sidebar-width-large;
   }
 
   #topbar {
-    max-width: 1150px;
+    max-width: #{$main-content-max-width};
   }
 
   #search-wrapper {
@@ -1367,7 +1365,7 @@ table {
   }
 
   #sidebar {
-    width: $side-bar-width;
+    width: $sidebar-width-large;
     ul {
       margin-left: 5%;
       >li>a {
@@ -1435,9 +1433,9 @@ table {
   }
 
   #search-result-wrapper {
-    width: calc(100% - 350px); // 350px is the with of sidebar
+    width: calc(100% - #{$sidebar-width-large});
     >div {
-      max-width: 1150px;
+      max-width: #{$main-content-max-width};
     }
   }
 
@@ -1445,11 +1443,12 @@ table {
 
 @media all and (min-width: 1700px) {
   #topbar-wrapper {
-    padding-right: calc(100% - 350px - 1570px) /* 100% - 350px - (1920px - 350px); */
+    padding-right: calc(100% - #{$sidebar-width-large}
+     - (1920px - #{$sidebar-width-large}) ) /* 100% - 350px - (1920px - 350px); */
   }
 
   #main>div.row {
-    padding-left: calc((100% - 1150px - 2%) / 2);
+    padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
   }
 
   #panel-wrapper {
@@ -1458,7 +1457,7 @@ table {
 
   footer {
     padding-left: 0;
-    padding-right: calc(100% - 350px - 1180px);
+    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
   }
 
   #back-to-top {
@@ -1473,7 +1472,7 @@ table {
   }
 
   #search-result-wrapper {
-    padding-right: calc(100% - 350px - 1530px);
+    padding-right: calc(100% - #{$sidebar-width-large} - 1530px);
   }
 
   #panel-wrapper {