diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
new file mode 100644
index 0000000..a43346d
--- /dev/null
+++ b/assets/css/_colors.scss
@@ -0,0 +1,76 @@
+:root {
+  // https://sass-lang.com/documentation/breaking-changes/css-vars
+  --body-bg-color: #{$body-bg-color};
+  --content-bg-color: #{$content-bg-color};
+  --card-bg-color: #{$card-bg-color};
+  --text-color: #{$text-color};
+  --blockquote-color: #{$blockquote-color};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
+  --brand-color: #{$brand-color};
+  --brand-hover-color: #{$brand-hover-color};
+  --table-row-odd-bg-color: #{$table-row-odd-bg-color};
+  --table-row-hover-bg-color: #{$table-row-hover-bg-color};
+  --menu-item-bg-color: #{$menu-item-bg-color};
+  --theme-color: #{$theme-color};
+
+  --btn-default-bg: #{$btn-default-bg};
+  --btn-default-color: #{$btn-default-color};
+  --btn-default-border-color: #{$btn-default-border-color};
+  --btn-default-hover-bg: #{$btn-default-hover-bg};
+  --btn-default-hover-color: #{$btn-default-hover-color};
+  --btn-default-hover-border-color: #{$btn-default-hover-border-color};
+
+  --highlight-background: #{$highlight-background};
+  --highlight-foreground: #{$highlight-foreground};
+  --highlight-gutter-background: #{$highlight-gutter-background};
+  --highlight-gutter-foreground: #{$highlight-gutter-foreground};
+
+  color-scheme: light;
+}
+
+@if $cfg_darkmode {
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --body-bg-color: #{$body-bg-color-dark};
+      --content-bg-color: #{$content-bg-color-dark};
+      --card-bg-color: #{$card-bg-color-dark};
+      --text-color: #{$text-color-dark};
+      --blockquote-color: #{$blockquote-color-dark};
+      --link-color: #{$link-color-dark};
+      --link-hover-color: #{$link-hover-color-dark};
+      --brand-color: #{$brand-color-dark};
+      --brand-hover-color: #{$brand-hover-color-dark};
+      --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
+      --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
+      --menu-item-bg-color: #{$menu-item-bg-color-dark};
+      --theme-color: #{$theme-color-dark};
+
+      --btn-default-bg: #{$btn-default-bg-dark};
+      --btn-default-color: #{$btn-default-color-dark};
+      --btn-default-border-color: #{$btn-default-border-color-dark};
+      --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
+      --btn-default-hover-color: #{$btn-default-hover-color-dark};
+      --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
+
+      --highlight-background: #{$highlight-background-dark};
+      --highlight-foreground: #{$highlight-foreground-dark};
+      --highlight-gutter-background: #{$highlight-gutter-background-dark};
+      --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
+
+      color-scheme: dark;
+    }
+
+    img {
+      opacity: .75;
+
+      &:hover {
+        opacity: .9;
+      }
+    }
+
+    iframe {
+      color-scheme: light;
+    }
+  }
+}
diff --git a/assets/css/_sitevars.scss b/assets/css/_sitevars.scss
new file mode 100644
index 0000000..256615a
--- /dev/null
+++ b/assets/css/_sitevars.scss
@@ -0,0 +1,28 @@
+// All variables from site's config content. 
+// In order not to conflict with the existing variables of SCSS and better identify, 
+// add a cfg_ prefix before the variable name
+
+{{- $P := .Site.Params -}}
+
+$cfg_scheme: {{ default $P.scheme "Gemini" }};
+$cfg_darkmode: {{ $P.darkmode }};
+
+$cfg_thm_cor_light: {{ $P.themeColor.light }}; 
+$cfg_thm_cor_dark: {{ $P.themeColor.dark }}; 
+
+$cfg_font_enable: {{ default $P.font.enable false }}; 
+$cfg_font_global_size: {{ default $P.font.global.size 1 }}; 
+$cfg_font_headings_size: {{ default $P.font.headings.size 1 }}; 
+$cfg_font_title_size: {{ default $P.font.title.size 1 }}; 
+$cfg_font_codes_size: {{ default $P.font.codes.size 1 }}; 
+$cfg_font_posts_size: {{ default $P.font.posts.size 1 }}; 
+
+$cfg_hl_light_bg: #222; 
+$cfg_hl_light_fg: #000; 
+$cfg_hl_dark_bg: #000; 
+$cfg_hl_dark_fg: #222; 
+
+$cfg_sidebar_padding: {{ default $P.sidebar.padding 18 }}; 
+$cfg_sidebar_offset: {{ default $P.sidebar.offset 12 }}; 
+
+$cfg_note_light_bg_offset: 0; 
\ No newline at end of file
diff --git a/assets/css/_variables/base.scss b/assets/css/_variables/base.scss
new file mode 100644
index 0000000..568ef01
--- /dev/null
+++ b/assets/css/_variables/base.scss
@@ -0,0 +1,395 @@
+//@use 'sass:map';
+
+//
+// Variables
+// ==================================================
+
+
+// Color system
+// --------------------------------------------------
+$whitesmoke   : #f5f5f5;
+$gainsboro    : #eee;
+$grey-lighter : #ddd;
+$grey-light   : #ccc;
+$grey         : #bbb;
+$grey-dark    : #999;
+$grey-dim     : #666;
+$black-light  : #555;
+$black-dim    : #333;
+$black-deep   : #222;
+$red          : #ff2a2a;
+$blue-bright  : #87daff;
+$blue         : #0684bd;
+$blue-deep    : #262a30;
+$orange       : #fc6423;
+
+
+// Transition
+// --------------------------------------------------
+$transition-ease     : .2s ease-in-out;
+$transition-ease-in  : .2s ease-in;
+$transition-ease-out : .2s ease-out;
+
+
+// Scaffolding
+// Settings for some of the most global styles.
+// --------------------------------------------------
+// Global text color on <body>
+$text-color                   : $black-light;
+$text-color-dark              : $grey-light;
+
+// Global link color.
+$link-color                   : $black-light;
+$link-color-dark              : $grey-light;
+$link-hover-color             : $black-deep;
+$link-hover-color-dark        : $gainsboro;
+$link-decoration-color        : $grey-dark;
+
+$blockquote-color             : $grey-dim;
+$blockquote-color-dark        : $grey;
+
+// Global border color.
+$border-color                 : $grey-light;
+
+// Background color for <body>
+$body-bg-color                : white;
+$body-bg-color-dark           : #282828;
+$content-bg-color             : white;
+$content-bg-color-dark        : $black-dim;
+
+// Selection
+$selection-bg                 : $blue-deep;
+$selection-color              : $gainsboro;
+
+// Dark mode color
+$card-bg-color                : $whitesmoke;
+$card-bg-color-dark           : $black-light;
+
+$menu-item-bg-color           : $whitesmoke;
+$menu-item-bg-color-dark      : $black-light;
+
+$theme-color                  : convert($cfg_thm_cor_light);
+$theme-color-dark             : convert($cfg_thm_cor_dark);
+
+// Typography
+// Font, line-height, and elements colors.
+// --------------------------------------------------
+@function get-font-family($config) {
+  /* $custom-family : hexo-config('font.' + $config + '.family'); */
+  $custom-family: 'Microsoft YaHei';
+  @return if(type-of($custom-family) == string, unquote($custom-family), null);
+}
+
+// Font families.
+$font-family-chinese      : 'PingFang SC', 'Microsoft YaHei';
+
+$font-family-base         : $font-family-chinese, sans-serif;
+@if get-font-family('global') {
+  $font-family-base       : join(get-font-family('global'), $font-family-base);
+}
+
+$font-family-logo         : $font-family-base;
+@if get-font-family('title') {
+  $font-family-logo       : join(get-font-family('title'), $font-family-logo);
+}
+
+$font-family-headings     : $font-family-base;
+@if get-font-family('headings') {
+  $font-family-headings   : join(get-font-family('headings'), $font-family-headings);
+}
+
+$font-family-posts        : $font-family-base;
+@if get-font-family('posts') {
+  $font-family-posts      : join(get-font-family('posts'), $font-family-posts);
+}
+
+$font-family-monospace    : consolas, Menlo, monospace, $font-family-chinese;
+@if get-font-family('codes') {
+  $font-family-monospace  : join(get-font-family('codes'), $font-family-monospace);
+}
+
+
+// Font size
+$font-size-base           : if(($cfg_font_enable and type-of($cfg_font_global_size) == number), $cfg_font_global_size * 1em, 1em);
+$font-size-smallest       : .75em;
+$font-size-smaller        : .8125em;
+$font-size-small          : .875em;
+$font-size-medium         : 1em;
+$font-size-large          : 1.125em;
+$font-size-larger         : 1.25em;
+$font-size-largest        : 1.5em;
+
+
+// Headings font size
+$font-size-headings-step  : .125em;
+$font-size-headings-base  : if(($cfg_font_enable and type-of($cfg_font_headings_size) == number), $cfg_font_headings_size * 1em, 1.625em);
+
+
+// Global line height
+$line-height-base         : 2;
+$line-height-code-block   : 1.6; // Can't be less than 1.3;
+
+
+// Z-index master list
+// --------------------------------------------------
+// Fix issue https://github.com/next-theme/theme-next-docs/issues/54
+$zindex-0       : 5;
+$zindex-1       : 10;
+$zindex-2       : 20;
+$zindex-3       : 30;
+$zindex-4       : 40;
+$zindex-5       : 50;
+
+
+// Table
+// --------------------------------------------------
+$table-border-color             : $grey-lighter;
+$table-font-size                : $font-size-small;
+$table-cell-border-bottom-color : $grey-lighter;
+$table-row-odd-bg-color         : #f9f9f9;
+$table-row-odd-bg-color-dark    : #282828;
+$table-row-hover-bg-color       : $whitesmoke;
+$table-row-hover-bg-color-dark  : #363636;
+
+
+// Code & Code Blocks
+// --------------------------------------------------
+$code-font-family               : $font-family-monospace;
+
+$highlight-background        : $cfg_hl_light_bg;
+$highlight-foreground        : $cfg_hl_light_fg;
+$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
+$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
+
+$highlight-background-dark        : $cfg_hl_dark_bg;
+$highlight-foreground-dark        : $cfg_hl_dark_bg;
+$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
+$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
+
+
+// Buttons
+// --------------------------------------------------
+$btn-default-radius                    : 0;
+$btn-default-bg                        : $black-deep;
+$btn-default-bg-dark                   : $black-deep;
+$btn-default-color                     : white;
+$btn-default-color-dark                : $text-color-dark;
+$btn-default-border-color              : $black-deep;
+$btn-default-border-color-dark         : $black-light;
+$btn-default-hover-bg                  : white;
+$btn-default-hover-bg-dark             : $grey-dim;
+$btn-default-hover-color               : $black-deep;
+$btn-default-hover-color-dark          : $text-color-dark;
+$btn-default-hover-border-color        : $black-deep;
+$btn-default-hover-border-color-dark   : $grey-dim;
+
+
+// Pagination
+// --------------------------------------------------
+$pagination-border              : $gainsboro;
+
+$pagination-link-bg             : transparent;
+$pagination-link-color          : $link-color;
+$pagination-link-border         : $gainsboro;
+
+$pagination-link-hover-bg       : transparent;
+$pagination-link-hover-color    : $link-color;
+$pagination-link-hover-border   : var(--link-hover-color);
+
+$pagination-active-bg           : $grey-light;
+$pagination-active-color        : var(--content-bg-color);
+$pagination-active-border       : $grey-light;
+
+
+// Layout sizes
+// --------------------------------------------------
+$content-desktop                : 700px;
+$content-desktop-large          : 800px;
+$content-desktop-largest        : 900px;
+
+$content-desktop-padding        : 40px;
+$content-tablet-padding         : 10px;
+$content-mobile-padding         : 8px;
+
+
+// Headband
+// --------------------------------------------------
+$headband-height                : 3px;
+$headband-bg                    : var(--theme-color);
+
+
+// Section Header
+// Variables for header section elements.
+// --------------------------------------------------
+$head-bg                        : transparent;
+
+// Site Meta
+$brand-color                    : white;
+$brand-hover-color              : white;
+$brand-color-dark               : $grey-lighter;
+$brand-hover-color-dark         : $grey-lighter;
+
+$font-size-title                : if(($cfg_font_enable and type-of($cfg_font_title_size) == number), $cfg_font_title_size * 1em, 1.375em);
+$font-size-subtitle             : $font-size-smaller;
+$subtitle-color                 : $grey-dark;
+$site-subtitle-color            : $grey-dark;
+
+
+// Posts Collpase
+// --------------------------------------------------
+$posts-collapse-margin          : 35px;
+$posts-collapse-margin-mobile   : 0;
+
+
+// Tag Cloud
+// --------------------------------------------------
+$tag-cloud-start      : #aaa;
+$tag-cloud-end        : #111;
+$tag-cloud-start-dark : #555;
+$tag-cloud-end-dark   : #eee;
+
+
+// Sidebar
+// Variables for sidebar section elements.
+// --------------------------------------------------
+
+$sidebar-padding                      : if(type-of($cfg_sidebar_padding) == number, $cfg_sidebar_padding * 1px, 18px);
+$sidebar-offset                       : if(type-of($cfg_sidebar_offset) == number, $cfg_sidebar_offset * 1px, 12px);
+$sidebar-nav-color                    : $grey-dim;
+$sidebar-nav-hover-color              : $whitesmoke;
+$sidebar-highlight                    : $blue-bright;
+
+$site-author-image-width              : 96px;
+$site-author-image-border-width       : 2px;
+$site-author-image-border-color       : $black-dim;
+
+$site-author-name-margin              : 5px 0 0;
+$site-author-name-color               : $whitesmoke;
+$site-author-name-weight              : normal;
+
+$site-description-font-size           : $font-size-medium;
+$site-description-color               : $grey-dark;
+$site-description-margin-top          : 5px;
+
+$site-state-item-count-font-size      : $font-size-larger;
+$site-state-item-name-font-size       : $font-size-small;
+$site-state-item-name-color           : inherit;
+
+
+// Components
+// --------------------------------------------------
+// Back to top
+$b2t-opacity                  : .8;
+$b2t-opacity-hover            : 1;
+$b2t-position-bottom          : -100px;
+$b2t-position-bottom-on       : 19px;
+$b2t-position-right           : 30px;
+$b2t-position-right-mobile    : 20px;
+$b2t-font-size                : 12px;
+$b2t-color                    : white;
+$b2t-bg-color                 : $black-deep;
+
+//  .post-expand .post-eof
+//  In Muse scheme, margin above and below the post separator
+$post-eof-margin-top          : 80px; //  or 160px for more white space;
+$post-eof-margin-bottom       : 60px; //  or 120px for less white space;
+
+$post-card-margin             : 1em 0 0;
+
+
+// Note colors
+// --------------------------------------------------
+// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
+$lbg : if(type-of($cfg_note_light_bg_offset) == number, $cfg_note_light_bg_offset * 1%, 0);
+$note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
+
+$note-border-radius : 3px;
+
+$note-border : (
+  'default' : #777,
+  'primary' : #6f42c1,
+  'info'    : #428bca,
+  'success' : #5cb85c,
+  'warning' : #f0ad4e,
+  'danger'  : #d9534f
+);
+
+$note-bg : (
+  'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 94% + $lbg),
+  'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 92% + $lbg),
+  'info'    : lighten(adjust-hue(map-get($note-border, 'info'), -10), 91% + $lbg),
+  'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 90% + $lbg),
+  'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 88% + $lbg),
+  'danger'  : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 92% + $lbg)
+);
+
+$note-text : (
+  'default' : map-get($note-border, 'default'),
+  'primary' : map-get($note-border, 'primary'),
+  'info'    : map-get($note-border, 'info'),
+  'success' : map-get($note-border, 'success'),
+  'warning' : map-get($note-border, 'warning'),
+  'danger'  : map-get($note-border, 'danger')
+);
+
+$note-icon : (
+  'default' : '\f0a9',
+  'primary' : '\f055',
+  'info'    : '\f05a',
+  'success' : '\f058',
+  'warning' : '\f06a',
+  'danger'  : '\f056'
+);
+
+$note-modern-border : (
+  'default' : #e1e1e1,
+  'primary' : #e1c2ff,
+  'info'    : #b3e5ef,
+  'success' : #d0e6be,
+  'warning' : #fae4cd,
+  'danger'  : #ebcdd2
+);
+
+$note-modern-bg : (
+  'default' : lighten(adjust-hue(map-get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
+  'primary' : lighten(adjust-hue(map-get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
+  'info'    : lighten(adjust-hue(map-get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
+  'success' : lighten(adjust-hue(map-get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
+  'warning' : lighten(adjust-hue(map-get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
+  'danger'  : lighten(adjust-hue(map-get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
+);
+
+$note-modern-text : (
+  'default' : $grey-dim,
+  'primary' : #6f42c1,
+  'info'    : #31708f,
+  'success' : #3c763d,
+  'warning' : #8a6d3b,
+  'danger'  : #a94442
+);
+
+$note-modern-hover : (
+  'default' : darken(adjust-hue(map-get($note-modern-text, 'default'), -10), 32%),
+  'primary' : darken(adjust-hue(map-get($note-modern-text, 'primary'), -10), 22%),
+  'info'    : darken(adjust-hue(map-get($note-modern-text, 'info'), -10), 32%),
+  'success' : darken(adjust-hue(map-get($note-modern-text, 'success'), -10), 27%),
+  'warning' : darken(adjust-hue(map-get($note-modern-text, 'warning'), -10), 18%),
+  'danger'  : darken(adjust-hue(map-get($note-modern-text, 'danger'), -10), 22%)
+);
+
+
+// Tabs border radius
+// --------------------------------------------------
+$tbr                        : 0;
+
+
+// Label colors
+// --------------------------------------------------
+$label : (
+  'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 89% + $lbg),
+  'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 87% + $lbg),
+  'info'    : lighten(adjust-hue(map-get($note-border, 'info'), -10), 86% + $lbg),
+  'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 85% + $lbg),
+  'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 83% + $lbg),
+  'danger'  : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 87% + $lbg)
+);
diff --git a/assets/css/highlight.css b/assets/css/highlight.css
deleted file mode 100644
index df224db..0000000
--- a/assets/css/highlight.css
+++ /dev/null
@@ -1,212 +0,0 @@
-/*!
-  Theme: Default
-  Description: Original highlight.js style
-  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
-  Maintainer: @highlightjs/core-team
-  Website: https://highlightjs.org/
-  License: see project LICENSE
-  Touched: 2021
-*/
-
-pre code.hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 1em
-}
-
-code.hljs {
-    padding: 3px 5px
-}
-
-.hljs {
-    background: #f3f3f3;
-    color: #444
-}
-
-.hljs-comment {
-    color: #697070
-}
-
-.hljs-punctuation,
-.hljs-tag {
-    color: #444a
-}
-
-.hljs-tag .hljs-attr,
-.hljs-tag .hljs-name {
-    color: #444
-}
-
-.hljs-attribute,
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-name,
-.hljs-selector-tag {
-    font-weight: 700
-}
-
-.hljs-deletion,
-.hljs-number,
-.hljs-quote,
-.hljs-selector-class,
-.hljs-selector-id,
-.hljs-string,
-.hljs-template-tag,
-.hljs-type {
-    color: #800
-}
-
-.hljs-section,
-.hljs-title {
-    color: #800;
-    font-weight: 700
-}
-
-.hljs-link,
-.hljs-operator,
-.hljs-regexp,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-symbol,
-.hljs-template-variable,
-.hljs-variable {
-    color: #ab5656
-}
-
-.hljs-literal {
-    color: #695
-}
-
-.hljs-addition,
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code {
-    color: #397300
-}
-
-.hljs-meta {
-    color: #1f7199
-}
-
-.hljs-meta .hljs-string {
-    color: #38a
-}
-
-.hljs-emphasis {
-    font-style: italic
-}
-
-.hljs-strong {
-    font-weight: 700
-}
-
-/*!
-  Theme: StackOverflow Dark
-  Description: Dark theme as used on stackoverflow.com
-  Author: stackoverflow.com
-  Maintainer: @Hirse
-  Website: https://github.com/StackExchange/Stacks
-  License: MIT
-  Updated: 2021-05-15
-
-  Updated for @stackoverflow/stacks v0.64.0
-  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
-  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
-*/
-@media (prefers-color-scheme: dark) {
-    pre code.hljs {
-        display: block;
-        overflow-x: auto;
-        padding: 1em
-    }
-
-    code.hljs {
-        padding: 3px 5px
-    }
-
-    .hljs {
-        color: #fff;
-        background: #1c1b1b
-    }
-
-    .hljs-subst {
-        color: #fff
-    }
-
-    .hljs-comment {
-        color: #999
-    }
-
-    .hljs-attr,
-    .hljs-doctag,
-    .hljs-keyword,
-    .hljs-meta .hljs-keyword,
-    .hljs-section,
-    .hljs-selector-tag {
-        color: #88aece
-    }
-
-    .hljs-attribute {
-        color: #c59bc1
-    }
-
-    .hljs-name,
-    .hljs-number,
-    .hljs-quote,
-    .hljs-selector-id,
-    .hljs-template-tag,
-    .hljs-type {
-        color: #f08d49
-    }
-
-    .hljs-selector-class {
-        color: #88aece
-    }
-
-    .hljs-link,
-    .hljs-regexp,
-    .hljs-selector-attr,
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-template-variable,
-    .hljs-variable {
-        color: #b5bd68
-    }
-
-    .hljs-meta,
-    .hljs-selector-pseudo {
-        color: #88aece
-    }
-
-    .hljs-built_in,
-    .hljs-literal,
-    .hljs-title {
-        color: #f08d49
-    }
-
-    .hljs-bullet,
-    .hljs-code {
-        color: #ccc
-    }
-
-    .hljs-meta .hljs-string {
-        color: #b5bd68
-    }
-
-    .hljs-deletion {
-        color: #de7176
-    }
-
-    .hljs-addition {
-        color: #76c490
-    }
-
-    .hljs-emphasis {
-        font-style: italic
-    }
-
-    .hljs-strong {
-        font-weight: 700
-    }
-}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
new file mode 100644
index 0000000..050f023
--- /dev/null
+++ b/assets/css/main.scss
@@ -0,0 +1,42 @@
+// CSS Style Guide: https://codeguide.co/#css
+
+
+//$scheme : if(hexo-config('scheme'), hexo-config('scheme'), 'Muse');
+
+
+// Variables Layer
+// --------------------------------------------------
+@import '_variables/base';
+// @import '"_variables/" + theme.scheme';
+// @import 'theme.injects.variable';
+
+// Mixins Layer
+// --------------------------------------------------
+// @import '_mixins';
+// @import 'theme.injects.mixin';
+
+// Dark mode colors
+// --------------------------------------------------
+@import '_colors';
+
+// Common Layer
+// --------------------------------------------------
+
+// Scaffolding
+// @import '_common/scaffolding';
+
+// Layout
+// @import '_common/outline';
+
+// Components
+// @import '_common/components';
+
+
+// Schemes Layer
+// --------------------------------------------------
+// @import '"_schemes/" + theme.scheme';
+
+
+// Custom Layer
+// --------------------------------------------------
+// @import 'theme.injects.style';
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index 67c9aa5..d9e8298 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -1,9 +1,19 @@
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.css" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
   <!-- NexT theme css style -->
+{{- $scssVars := resources.Get "css/_sitevars.scss"}}
+{{- $scssVars = $scssVars | resources.ExecuteAsTemplate "sitevars.scss" . }}
+{{- $scssMain := resources.Get "css/main.scss" }}
+{{- $scss := slice $scssVars $scssMain | resources.Concat "css/main.scss" }}
+{{- $css := $scss | toCSS (dict "targetPath" "/css/main_new.css" "outputStyle" "expanded") }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
 {{- $scheme := lower .Site.Params.scheme }}
 {{- $styleScheme := (printf "css/%s/style.css" $scheme) }}
   <link rel="stylesheet" href="/css/{{ $scheme }}/main.css">
 {{- $style := resources.Get $styleScheme | resources.ExecuteAsTemplate $styleScheme . }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">  
-  <link rel="stylesheet" href="/css/hover.css">
\ No newline at end of file
+  <link rel="stylesheet" href="/css/hover.css">
+
+
+
+