Improved loading performance by merging CSS files.

assets/css/_addon/syntax.scss

@@ -0,0 +1,126 @@
+/*
+* The syntax highlight.
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@import "_colors/light-syntax";
+@import "_colors/dark-syntax";
+
+
+html:not([mode]), html[mode=light] {
+  @include light-syntax;
+}
+
+html[mode=dark] {
+  @include dark-syntax;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([mode]), html[mode=dark] {
+    @include dark-syntax;
+  }
+
+  html[mode=light] {
+    @include light-syntax;
+  }
+}
+
+/*-- Codes Snippet --*/
+
+%highlight-pre-bg {
+  background: var(--highlight-bg-color);
+}
+
+%code-snippet-radius {
+  border-radius: 5px;
+}
+
+.highlighter-rouge {
+  background: var(--highlight-bg-color);
+  @extend %code-snippet-radius;
+  color: var(--highlighter-rouge-color);
+  margin-bottom: 1.2em; /* Override BS Inline-code style */
+}
+
+.highlight {
+  @extend %code-snippet-radius;
+  background: var(--highlight-bg-color);
+  @at-root figure#{&} {
+    background: var(--highlight-bg-color);
+  }
+  overflow: auto;
+  .lineno {
+    margin: .8rem 0rem;
+    padding: 0 .5rem;
+    min-width: 2.2rem;
+    text-align: right;
+    color: var(--highlight-lineno-color);
+    border-right: 1px solid var(--highlight-lineno-border-color);
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+  table {
+    padding: 0;
+    border: 0;
+    td pre {
+      overflow: visible;  /* Fixed iOS safari overflow-x */
+      word-break: normal; /* Fixed iOS safari linenos code break */
+    }
+  }
+  td {
+    padding: 0;
+    border: 0;
+  }
+  pre {
+    margin-bottom: 0;
+    font-size: .85rem;
+    line-height: 1.4rem;
+    word-wrap: normal;
+    /* Fixed Safari overflow-x */
+  }
+
+} //.highlight
+
+code {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  -moz-hyphens: none;
+  hyphens: none;
+  &.highlighter-rouge {
+    padding: 2px 4px;
+    margin: 0 .15rem;
+    border-radius: 4px;
+  }
+  @at-root a>&.highlighter-rouge {
+    padding-bottom: 0; // show link's underlinke
+  }
+  @at-root a:hover>&.highlighter-rouge {
+    border-bottom: none;
+  }
+}
+
+td.rouge-code {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Hide line numbers for defualt, console, and terminal code snippets */
+div {
+  &[class^='highlighter-rouge'],
+  &.language-console.highlighter-rouge,
+  &.language-terminal.highlighter-rouge {
+    pre.lineno {
+      display: none;
+    }
+    td.rouge-code {
+      padding: .8rem 1rem;
+    }
+  }
+}

assets/css/_addon/variables.scss

@@ -9,6 +9,9 @@
 
 /*--- ↓ width and height ----*/
 
+$tab-height: 3.3rem;
+$tab-cursor-height: 1.6rem;
+
 $sidebar-width-small: 210px;
 $sidebar-width-medium: 260px;
 $sidebar-width-large: 350px;