Upgrade Sass architecture

.gitignore

@@ -23,5 +23,5 @@ package-lock.json
 !.vscode/tasks.json
 
 # Misc
-_sass/dist
+_sass/vendors
 assets/js/dist

.stylelintrc.json

@@ -1,4 +1,5 @@
 {
+  "ignoreFiles": ["_sass/vendors/**"],
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "no-descending-specificity": null,

_includes/head.html

@@ -70,7 +70,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].3/dist/css/bootstrap.min.css">
   {% endunless %}
 
   <!-- Theme style -->

_posts/2019-08-09-getting-started.md

@@ -93,8 +93,6 @@ Social contact options are displayed at the bottom of the sidebar. You can enabl
 
 To customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
 
-Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main SASS file `_sass/main.scss`{: .filepath} to the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign your new values there.
-
 ### Customizing Static Assets
 
 Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in `_data/origin/cors.yml`{: .filepath }. You can replace some of them based on the network conditions in the region where your website is published.

_sass/abstracts/_breakpoints.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+
+$-breakpoints: (
+  // 1 column
+  sm: 576px,
+  md: 768px,
+  // 2 columns
+  lg: 850px,
+  // 3 columns
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1650px
+);
+
+@function get($breakpoint) {
+  @return map.get($-breakpoints, $breakpoint);
+}
+
+/* Less than the given width */
+@mixin lt($width) {
+  @media all and (max-width: calc(#{$width} - 1px)) {
+    @content;
+  }
+}
+
+/* Less than or equal to the given width */
+@mixin lte($width) {
+  @media all and (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media all and (min-width: get(sm)) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media all and (min-width: get(md)) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media all and (min-width: get(lg)) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media all and (min-width: get(xl)) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  @media all and (min-width: get(xxl)) {
+    @content;
+  }
+}
+
+@mixin xxxl {
+  @media all and (min-width: get(xxxl)) {
+    @content;
+  }
+}
+
+@mixin between($min, $max) {
+  @media all and (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}

_sass/abstracts/_index.scss

@@ -0,0 +1,4 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'placeholders';
+@forward 'breakpoints';

_sass/abstracts/_mixins.scss

@@ -0,0 +1,80 @@
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
+@mixin pl-pr($val, $important: false) {
+  @if $important {
+    padding-left: $val !important;
+    padding-right: $val !important;
+  } @else {
+    padding-left: $val;
+    padding-right: $val;
+  }
+}
+
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
+  opacity: 0.6;
+}
+
+@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
+  color: $color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
+  &.prompt-#{$type} {
+    background-color: var(--prompt-#{$type}-bg);
+
+    &::before {
+      content: $fa-content;
+      color: var(--prompt-#{$type}-icon-color);
+      font: var(--fa-font-#{$fa-style});
+
+      @if $rotate != 0 {
+        transform: rotate(#{$rotate}deg);
+      }
+    }
+  }
+}
+
+@mixin slide($append: null) {
+  $basic: transform 0.4s ease;
+
+  @if $append {
+    transition: $basic, $append;
+  } @else {
+    transition: $basic;
+  }
+}
+
+@mixin max-w-100 {
+  max-width: 100%;
+}

_sass/addon/module.scss → _sass/abstracts/_placeholders.scss

@@ -1,13 +1,10 @@
-/*
-* Mainly scss modules, only imported to `assets/css/main.scss`
-*/
-
-/* ---------- scss placeholder --------- */
+@use 'variables' as v;
+@use 'mixins' as mx;
 
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: $font-family-heading;
+  font-family: v.$font-family-heading;
   scroll-margin-top: 3.5rem;
 }
 
@@ -82,7 +79,7 @@
 }
 
 %rounded {
-  border-radius: $radius-lg;
+  border-radius: v.$radius-lg;
 }
 
 %img-caption {
@@ -112,14 +109,8 @@
   -webkit-box-orient: vertical;
 }
 
-@mixin text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 %text-ellipsis {
-  @include text-ellipsis;
+  @include mx.text-ellipsis;
 }
 
 %text-highlight {
@@ -151,65 +142,15 @@
   }
 }
 
-/* ---------- scss mixin --------- */
-
-@mixin mt-mb($value) {
-  margin-top: $value;
-  margin-bottom: $value;
+%code-snippet-bg {
+  background-color: var(--highlight-bg-color);
 }
 
-@mixin ml-mr($value) {
-  margin-left: $value;
-  margin-right: $value;
+%code-snippet-padding {
+  padding-left: 1rem;
+  padding-right: 1.5rem;
 }
 
-@mixin pt-pb($val) {
-  padding-top: $val;
-  padding-bottom: $val;
-}
-
-@mixin pl-pr($val, $important: false) {
-  @if $important {
-    padding-left: $val !important;
-    padding-right: $val !important;
-  } @else {
-    padding-left: $val;
-    padding-right: $val;
-  }
-}
-
-@mixin placeholder {
-  color: var(--text-muted-color) !important;
-}
-
-@mixin placeholder-focus {
-  opacity: 0.6;
-}
-
-@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
-  color: $color;
-  font-size: $font-size;
-  font-weight: $font-weight;
-}
-
-@mixin align-center {
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
-  &.prompt-#{$type} {
-    background-color: var(--prompt-#{$type}-bg);
-
-    &::before {
-      content: $fa-content;
-      color: var(--prompt-#{$type}-icon-color);
-      font: var(--fa-font-#{$fa-style});
-
-      @if $rotate != 0 {
-        transform: rotate(#{$rotate}deg);
-      }
-    }
-  }
+%max-w-100 {
+  max-width: 100%;
 }

_sass/addon/variables.scss → _sass/abstracts/_variables.scss

@@ -1,7 +1,3 @@
-/*
- * The SCSS variables
- */
-
 /* sidebar */
 
 $sidebar-width: 260px !default; /* the basic width */