Merge a4812e4a1f into 65f960c31a

.github/FUNDING.yml

@@ -1 +1,2 @@
 ko_fi: coteschung
+custom: https://sponsor.cotes.page

.github/workflows/cd.yml

@@ -14,14 +14,14 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
 
       - uses: ruby/setup-ruby@v1
         with:
           ruby-version: 3.3
           bundler-cache: true
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
 

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # for posts's lastmod
 
@@ -42,7 +42,7 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
 

.github/workflows/codeql.yml

@@ -24,11 +24,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v4
+        uses: github/codeql-action/init@v3
         with:
           languages: "${{ matrix.language }}"
           config-file: .github/codeql/codeql-config.yml
@@ -36,9 +36,9 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v4
+        uses: github/codeql-action/autobuild@v3
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v4
+        uses: github/codeql-action/analyze@v3
         with:
           category: "/language:${{ matrix.language }}"

.github/workflows/commitlint.yml

@@ -11,5 +11,5 @@ jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - uses: wagoid/commitlint-github-action@v6

.github/workflows/lint-js.yml

@@ -1,30 +0,0 @@
-name: Lint JS
-
-on:
-  push:
-    paths:
-      - "_javascript/**/*.js"
-      - ".github/workflows/scripts/**/*.js"
-      - "*.js"
-  pull_request:
-    paths:
-      - "_javascript/**/*.js"
-      - ".github/workflows/scripts/*.js"
-      - "*.js"
-
-jobs:
-  lint-js:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: lts/*
-
-      - name: Install Dependencies
-        run: npm i
-
-      - name: Lint JS
-        run: npm run lint:js

.github/workflows/lint-scss.yml

@@ -1,26 +0,0 @@
-name: Lint SCSS
-
-on:
-  push:
-    paths:
-      - "_sass/**/*.scss"
-  pull_request:
-    paths:
-      - "_sass/**/*.scss"
-
-jobs:
-  lint-scss:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: lts/*
-
-      - name: Install Dependencies
-        run: npm i
-
-      - name: Lint SCSS
-        run: npm run lint:scss

.github/workflows/pr-filter.yml

@@ -13,13 +13,13 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Check PR Content
         id: intercept
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            const { default: filter } = await import('${{ github.workspace }}/.github/workflows/scripts/pr-filter.js');
-            await filter({ github, context, core });
+            const script = require('.github/workflows/scripts/pr-filter.js');
+            await script({ github, context, core });

.github/workflows/scripts/pr-filter.js

@@ -9,7 +9,7 @@ function hasDescription(markdown) {
   );
 }
 
-export default async ({ github, context, core }) => {
+module.exports = async ({ github, context, core }) => {
   const pr = context.payload.pull_request;
   const body = pr.body === null ? '' : pr.body;
   const markdown = body.replace(/<!--[\s\S]*?-->/g, '');

.github/workflows/stale.yml

@@ -20,7 +20,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v10
+      - uses: actions/stale@v9
         with:
           # 60 days before marking issues/PRs stale
           days-before-close: -1 # does not close automatically

.github/workflows/style-lint.yml

@@ -0,0 +1,25 @@
+name: Style Lint
+
+on:
+  push:
+    branches:
+      - master
+      - "hotfix/*"
+    paths: ["_sass/**/*.scss"]
+  pull_request:
+    paths: ["_sass/**/*.scss"]
+
+jobs:
+  stylelint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - run: npm i
+      - run: npm test

.gitignore

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

.stylelintrc.json

@@ -1,29 +0,0 @@
-{
-  "ignoreFiles": ["_sass/vendors/**"],
-  "extends": "stylelint-config-standard-scss",
-  "rules": {
-    "no-descending-specificity": null,
-    "shorthand-property-no-redundant-values": null,
-    "at-rule-no-vendor-prefix": null,
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null,
-    "selector-not-notation": "simple",
-    "color-hex-length": "long",
-    "declaration-block-single-line-max-declarations": 3,
-    "scss/operator-no-newline-after": null,
-    "rule-empty-line-before": [
-      "always",
-      {
-        "ignore": ["after-comment", "first-nested"]
-      }
-    ],
-    "value-keyword-case": [
-      "lower",
-      {
-        "ignoreProperties": ["/^\\$/"]
-      }
-    ],
-    "media-feature-range-notation": "prefix"
-  }
-}

_config.yml

@@ -8,7 +8,7 @@ theme: jekyll-theme-chirpy
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# Change to your timezone › https://zones.arilyn.cc
+# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker
 timezone: Asia/Shanghai
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
@@ -36,7 +36,6 @@ social:
   # It will be displayed as the default author of the posts and the copyright owner in the Footer
   name: your_full_name
   email: example@domain.com # change to your email address
-  fediverse_handle: "@you@domain.com" # change to your fediverse handle or leave empty
   links:
     # The first element serves as the copyright owner's link
     - https://twitter.com/username # change to your Twitter homepage
@@ -213,9 +212,8 @@ exclude:
   - tools
   - README.md
   - LICENSE
-  - purgecss.js
   - "*.config.js"
-  - "package*.json"
+  - package*.json
 
 jekyll-archives:
   enabled: [categories, tags]

_data/locales/ca-ES.yml

@@ -1,84 +0,0 @@
-# The layout text of site
-
-# ----- Commons label -----
-
-layout:
-  post: Entrada
-  category: Categoria
-  tag: Etiqueta
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: Inici
-  categories: Categories
-  tags: Etiquetes
-  archives: Arxiu
-  about: Sobre
-
-# the text displayed in the search bar & search results
-search:
-  hint: Cercar
-  cancel: Cancel·lar
-  no_results: Ups! No s'han trobat resultats.
-
-panel:
-  lastmod: Actualitzat recentment
-  trending_tags: Etiquetes populars
-  toc: Taula de continguts
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: Aquesta entrada està llicenciada sota :LICENSE_NAME per l'autor.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: Alguns drets reservats.
-  verbose: >-
-    Excepte que s'indiqui explícitament, les entrades d'aquest blog estan llicenciades
-    sota la llicència Creative Commons Attribution 4.0 International (CC BY 4.0) per l'autor.
-
-meta: Fet amb :PLATFORM utilitzant el tema :THEME
-
-not_found:
-  statement: Ho sentim, hem perdut aquesta URL o apunta a alguna cosa que no existeix.
-
-notification:
-  update_found: Hi ha una nova versió de contingut disponible.
-  update: Actualitzar
-
-# ----- Posts related labels -----
-
-post:
-  written_by: Per
-  posted: Publicat
-  updated: Actualitzat
-  words: paraules
-  pageview_measure: visites
-  read_time:
-    unit: min
-    prompt: " de lectura"
-  relate_posts: Entrades relacionades
-  share: Compartir
-  button:
-    next: Següent
-    previous: Anterior
-    copy_code:
-      succeed: Copiat!
-    share_link:
-      title: Copiar enllaç
-      succeed: Enllaç copiat!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%Y/%m/%d"
-    dayjs: "YYYY/MM/DD"
-
-# categories page
-categories:
-  category_measure: categories
-  post_measure: entrades

_data/locales/da-DK.yml

@@ -1,86 +0,0 @@
-# The layout text of site
-
-# ----- Commons label -----
-
-layout:
-  post: Opslag
-  category: Kategori
-  tag: Tag
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: Hjem
-  categories: Kategorier
-  tags: Tags
-  archives: Arkiv
-  about: Om siden
-
-# the text displayed in the search bar & search results
-search:
-  hint: søg
-  cancel: Afbryd
-  no_results: Ups! Ingen resultater fundet.
-
-panel:
-  lastmod: Senest opdateret
-  trending_tags: Populære tags
-  toc: Indhold
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: Dette opslag er licenseret under :LICENSE_NAME af forfatteren.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: Nogle rettigheder forbeholdes.
-  verbose: >-
-    Medmindre andet er angivet, er opslag på denne side beskyttet
-    under Creative Commons Attribution 4.0 International (CC BY 4.0) licensen af forfatteren.
-
-# meta: Using the :THEME theme for :PLATFORM.
-
-not_found:
-  statement: Beklager, vi har malpaceret denne URL, eller den peger på et sted, som ikke findes.
-
-notification:
-  update_found: En ny version af indholdet er fundet!
-  update: Opdater
-
-# ----- Posts related labels -----
-
-post:
-  written_by: Af
-  posted: Udgivet
-  updated: Opdateret
-  words: ord
-  pageview_measure: visninger
-  read_time:
-    unit: min
-    prompt: læsetid
-  relate_posts: Læs videre
-  share: Del
-  button:
-    next: Nyere
-    previous: Ældre
-    copy_code:
-      succeed: Kopieret!
-    share_link:
-      title: Kopier link
-      succeed: Link kopieret!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%Y/%m/%d"
-    dayjs: "YYYY/MM/DD"
-
-# categories page
-categories:
-  category_measure:
-    singular: kategori
-    plural: kategorier
-  post_measure: opslag

_data/locales/dv‑MV.yml

@@ -1,90 +0,0 @@
-# The layout text of site in Dhivehi (Maldives)
-
-# ----- Commons label -----
-
-layout:
-  post: ޕޯސްޓް
-  category: ނަތީޖާ
-  tag: ޓެގް
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: ހުންނަ
-  categories: ނަތީޖާތައް
-  tags: ޓެގްތައް
-  archives: އާރޗިވްސް
-  about: އިންސާން
-
-# the text displayed in the search bar & search results
-search:
-  hint: ސާރޗް
-  cancel: ކެންސަލް
-  no_results: އޮޕްސް! އެއްވެސް ނުފެނުނީ.
-
-panel:
-  lastmod: އާދަމާ އޮޕްޑޭޓްކުރި
-  trending_tags: މަރާހު ޓެގްތައް
-  toc: ކޮންޓެންސް
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: މި ޕޯސްޓް :LICENSE_NAME އިން ލައިސަންސްކުރާ ނުވަތަ މުޤައްރާއަށް.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: އެކީ ބާރަށް ހުށަހަޅާ.
-  verbose: >-
-    އަދި އެ ރަނގަޅުގައި ނުލާހެވެސް، މި ސައިޓުގެ ޕޯސްޓްތައް
-    މުޤައްރާއަށް Creative Commons Attribution 4.0 International (CC BY 4.0) ލައިސަންސްކުރަނީ.
-
-meta: :PLATFORM އަށް :THEME ތީމް ބަލާލާށެވެ.
-
-not_found:
-  statement: ސޯރީ، މި ޔޫ.އާރއެލް މަށެވެއްނެ ނުވަތަ އެކަމެއް ނުވެއެވެ.
-
-notification:
-  update_found: ޔޫ ވާރޝަން ހުރިހާ.
-  update: އޮޕްޑޭޓް
-
-# ----- Posts related labels -----
-
-post:
-  written_by: ލެކްއޯލް
-  posted: ޕޯސްޓްކުރެވި
-  updated: އޮޕްޑޭޓްކުރެވި
-  words: ބަސް
-  pageview_measure: ބަނޑުކުރާ
-  read_time:
-    unit: މިނެޓް
-    prompt: އިސްކާރު
-  relate_posts: އެއްޗެހި ފަހުރަށްދަން
-  share: ސެއާރް
-  button:
-    next: އަދާވަނަ
-    previous: ކޮނޯނި
-    copy_code:
-      succeed: ކޮޕީ ކުރެވި!
-    share_link:
-      title: ލިންކް ކޮޕީ ކުރު
-      succeed: ލިންކް ހަދަންކުރެވި!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%b %e, %Y"
-    dayjs: "ll"
-  archives:
-    strftime: "%b"
-    dayjs: "MMM"
-
-categories:
-  category_measure:
-    singular: ނަތީޖާ
-    plural: ނަތީޖާތައް
-  post_measure:
-    singular: ޕޯސްޓް
-    plural: ޕޯސްޓްތައް

_data/locales/fa-IR.yml

@@ -1,91 +0,0 @@
-# The layout text of site
-
-# ----- Commons label -----
-
-layout:
-  post: پست
-  category: دسته‌بندی
-  tag: برچسب
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: خانه
-  categories: دسته‌بندی‌ها
-  tags: برچسب‌ها
-  archives: آرشیو
-  about: درباره
-
-# the text displayed in the search bar & search results
-search:
-  hint: جستجو
-  cancel: لغو
-  no_results: متأسفیم! هیچ نتیجه‌ای یافت نشد.
-
-panel:
-  lastmod: آخرین به‌روزرسانی
-  trending_tags: برچسب‌های پرطرفدار
-  toc: فهرست مطالب
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: این پست تحت مجوز :LICENSE_NAME توسط نویسنده منتشر شده است.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: برخی حقوق محفوظ است.
-  verbose: >-
-    به‌جز مواردی که خلاف آن ذکر شده باشد، محتوای پست‌های این وبلاگ
-    تحت مجوز Creative Commons Attribution 4.0 International (CC BY 4.0) توسط نویسنده منتشر شده‌اند.
-
-meta: با استفاده از قالب :THEME برای :PLATFORM
-
-not_found:
-  statement: متأسفیم، لینک زیر معتبر نیست یا به صفحه‌ای که وجود ندارد اشاره می‌کند.
-
-notification:
-  update_found: نسخه جدیدی از محتوا موجود است.
-  update: به‌روزرسانی
-
-# ----- Posts related labels -----
-
-post:
-  written_by: نوشته شده توسط
-  posted: منتشر شده
-  updated: به‌روزرسانی شده
-  words: کلمه
-  pageview_measure: بازدید
-  read_time:
-    unit: "دقیقه "
-    prompt: " زمان مطالعه"
-  relate_posts: بیشتر بخوانید
-  share: اشتراک‌گذاری
-  button:
-    next: جدیدتر
-    previous: قدیمی‌تر
-    copy_code:
-      succeed: کپی شد!
-    share_link:
-      title: کپی لینک
-      succeed: لینک با موفقیت کپی شد!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%b %e, %Y"
-    dayjs: "ll"
-  archives:
-    strftime: "%b"
-    dayjs: "MMM"
-
-# categories page
-categories:
-  category_measure:
-    singular: دسته‌بندی
-    plural: دسته‌بندی‌
-  post_measure:
-    singular: پست
-    plural: پست‌

_data/locales/ja-JP.yml

@@ -1,84 +0,0 @@
-# The layout text of site
-
-# ----- Commons label -----
-
-layout:
-  post: 投稿
-  category: カテゴリー
-  tag: タグ
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: ホーム
-  categories: カテゴリー
-  tags: タグ
-  archives: アーカイブ
-  about: このサイトについて
-
-# the text displayed in the search bar & search results
-search:
-  hint: 検索
-  cancel: キャンセル
-  no_results: 該当なし
-
-panel:
-  lastmod: 最近更新された投稿
-  trending_tags: トレンドのタグ
-  toc: コンテンツ
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: この投稿は投稿者によって :LICENSE_NAME の下でライセンスされています。
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: Some rights reserved.
-  verbose: >-
-    Except where otherwise noted, the blog posts on this site are licensed
-    under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
-
-meta: :PLATFORM 用の :THEME を使用しています。
-
-not_found:
-  statement: このURLは存在しないものを指し示しています。
-
-notification:
-  update_found: 新しいバージョンが利用可能です。
-  update: 更新
-
-# ----- Posts related labels -----
-
-post:
-  written_by: 投稿者
-  posted: 投稿日
-  updated: 更新日
-  words: 語
-  pageview_measure: 回閲覧
-  read_time:
-    unit: 分
-    prompt: で読めます
-  relate_posts: さらに読む
-  share: シェア
-  button:
-    next: 次
-    previous: 前
-    copy_code:
-      succeed: コピーしました
-    share_link:
-      title: リンクをコピー
-      succeed: リンクをコピーしました
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%Y/%m/%d"
-    dayjs: "YYYY/MM/DD"
-
-# categories page
-categories:
-  category_measure: カテゴリー
-  post_measure: 投稿

_data/locales/ku-IQ.yml

@@ -1,91 +0,0 @@
-# The layout text of site in Kurdish (Sorani)
-
-# ----- Commons label -----
-
-layout:
-  post: بابەت
-  category: هاوپۆل
-  tag: تاگ
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: سەرەکی
-  categories: هاوپۆلەکان
-  tags: تاگەکان
-  archives: ئەرشیف
-  about: دەربارە
-
-# the text displayed in the search bar & search results
-search:
-  hint: گەڕان
-  cancel: هەڵوەشاندنەوە
-  no_results: ببوورە! هیچ ئەنجامێک نەدۆزرایەوە.
-
-panel:
-  lastmod: دوایین نوێکردنەوەکان
-  trending_tags: تاگە باوەکان
-  toc: ناوەڕۆک
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: ئەم بابەتە لەلایەن نووسەرەوە بە مۆڵەتی :LICENSE_NAME بڵاوکراوەتەوە.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: هەندێک مافی پارێزراوە.
-  verbose: >-
-    تەنها لەو شوێنانەی کە بە پێچەوانەوە ئاماژەی پێدراوە، بابەتەکانی بڵۆگ لەم سایتەدا
-    لەژێر مۆڵەتی Creative Commons Attribution 4.0 International (CC BY 4.0) لەلایەن نووسەرەوە مۆڵەتیان پێدراوە.
-
-meta: بە بەکارهێنانی :PLATFORM لەگەڵ ڕووکاری :THEME
-
-not_found:
-  statement: ببوورە، ئەم بەستەرە نادۆزرێتەوە یان ئاماژە بە شتێک دەکات کە بوونی نییە.
-
-notification:
-  update_found: وەشانێکی نوێی ناوەڕۆک بەردەستە.
-  update: نوێکردنەوە
-
-# ----- Posts related labels -----
-
-post:
-  written_by: نووسەر
-  posted: بڵاوکراوەتەوە
-  updated: نوێکراوەتەوە
-  words: وشە
-  pageview_measure: بینین
-  read_time:
-    unit: خولەک
-    prompt: خوێندنەوە
-  relate_posts: بابەتی پەیوەندیدار
-  share: بڵاوکردنەوە
-  button:
-    next: نوێتر
-    previous: کۆنتر
-    copy_code:
-      succeed: کۆپی کرا!
-    share_link:
-      title: کۆپی بەستەر
-      succeed: بەستەر بە سەرکەوتوویی کۆپی کرا!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%d %b, %Y"
-    dayjs: "DD MMM, YYYY"
-  archives:
-    strftime: "%b"
-    dayjs: "MMM"
-
-# categories page
-categories:
-  category_measure:
-    singular: هاوپۆل
-    plural: هاوپۆل
-  post_measure:
-    singular: بابەت
-    plural: بابەت

_data/locales/nl-NL.yml

@@ -1,90 +0,0 @@
-# The layout text of site
-
-# ----- Commons label -----
-
-layout:
-  post: Post
-  category: Categorie
-  tag: Tag
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: Startpagina
-  categories: Categorieën
-  tags: Tags
-  archives: Archief
-  about: Over
-
-# the text displayed in the search bar & search results
-search:
-  hint: Zoek
-  cancel: Annuleer
-  no_results: Oops! Geen resultaat gevonden.
-
-panel:
-  lastmod: Recent Bijgewerkt
-  trending_tags: Trending Tags
-  toc: Inhoud
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: Alle posts zijn onder :LICENSE_NAME gepubliceerd door de auteur.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: Sommige rechten voorbehouden.
-  verbose: >-
-    Tenzij anders vermeld, alle posts zijn onder de
-    Creative Commons Attribution 4.0 International (CC BY 4.0) gepubliceerd door de auteur.
-
-meta: Gebruikt :THEME
-
-not_found:
-  statement: Sorry, we hebben de URL verkeerd geplaatst of hij verwijst naar iets dat niet bestaat.
-
-notification:
-  update_found: Nieuwe versie van inhoud beschikbaar.
-  update: Update
-
-# ----- Posts related labels -----
-post:
-  written_by: Door
-  posted: Posted
-  updated: Bijgewerkt
-  words: woorden
-  pageview_measure: Gelezen
-  read_time:
-    unit: min
-    prompt: lees
-  relate_posts: Verder Lezen
-  share: Deel
-  button:
-    next: Volgende
-    previous: Vorige
-    copy_code:
-      succeed: Gekopieerd!
-    share_link:
-      title: Link kopiëren
-      succeed: Succesvol gekopieerd!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%b %e, %Y"
-    dayjs: "ll"
-  archives:
-    strftime: "%b"
-    dayjs: "MMM"
-
-# categories page
-categories:
-  category_measure:
-    singular: categorie
-    plural: categorieën
-  post_measure:
-    singular: post
-    plural: posts

_data/locales/ps‑AF.yml

@@ -1,90 +0,0 @@
-# The layout text of site in Pashto (Afghanistan)
-
-# ----- Commons label -----
-
-layout:
-  post: لیکنه
-  category: وېشنيزه
-  tag: ټګ
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: کورپاڼه
-  categories: وېشنيزې
-  tags: ټګونه
-  archives: آرشيف
-  about: په اړه
-
-# the text displayed in the search bar & search results
-search:
-  hint: لټون
-  cancel: لغوه
-  no_results: ها! هېڅ پایله ونه موندل شوه.
-
-panel:
-  lastmod: وروستی تازه
-  trending_tags: مشهور ټګونه
-  toc: منځپانګه
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: دا لیکنه د :LICENSE_NAME جواز لاندې د لیکوال له خوا خپره شوې ده.
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: ځینې حقونه خوندي دي.
-  verbose: >-
-    تر هغه ځایه چې بل ډول نه وي یاد شوي، د دې سایټ لیکنې
-    د لیکوال له خوا د کریټېو کامنز د انتساب 4.0 نړیوال (CC BY 4.0) جواز لاندې خپرېږي.
-
-meta: د :PLATFORM لپاره د :THEME موضوع کاروي.
-
-not_found:
-  statement: بښنه غواړو، دغه URL ناسم دی یا هغه څه ته اشاره کوي چې شتون نه لري.
-
-notification:
-  update_found: نوې نسخه شتون لري.
-  update: تازه
-
-# ----- Posts related labels -----
-
-post:
-  written_by: لیکوال
-  posted: خپره شوې
-  updated: تازه شوې
-  words: کلمې
-  pageview_measure: کتنې
-  read_time:
-    unit: دقیقې
-    prompt: لوستل
-  relate_posts: نوره لوستنه
-  share: شریکول
-  button:
-    next: نوی
-    previous: زوړ
-    copy_code:
-      succeed: کاپي شو!
-    share_link:
-      title: لینک کاپي کړئ
-      succeed: لینک بریالي کاپي شو!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%b %e, %Y"
-    dayjs: "ll"
-  archives:
-    strftime: "%b"
-    dayjs: "MMM"
-
-categories:
-  category_measure:
-    singular: وېشنيزه
-    plural: وېشنيزې
-  post_measure:
-    singular: لیکنه
-    plural: لیکنې

_data/locales/ur-PK.yml

@@ -1,90 +0,0 @@
-# The layout text of site in Urdu (Pakistan)
-
-# ----- Commons label -----
-
-layout:
-  post: تحریر
-  category: زمرہ
-  tag: ٹیگ
-
-# The tabs of sidebar
-tabs:
-  # format: <filename_without_extension>: <value>
-  home: گھر
-  categories: زمروں
-  tags: ٹیگز
-  archives: محفوظات
-  about: تعارف
-
-# the text displayed in the search bar & search results
-search:
-  hint: تلاش
-  cancel: منسوخ
-  no_results: اوہ! کوئی نتیجہ نہیں ملا۔
-
-panel:
-  lastmod: حال ہی میں اپ ڈیٹ
-  trending_tags: مقبول ٹیگز
-  toc: مواد
-
-copyright:
-  # Shown at the bottom of the post
-  license:
-    template: یہ تحریر :LICENSE_NAME کے تحت مصنف کی جانب سے لائسنس یافتہ ہے۔
-    name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
-
-  # Displayed in the footer
-  brief: کچھ حقوق محفوظ ہیں۔
-  verbose: >-
-    جب تک کہ دوسری صورت میں ذکر نہ ہو، اس سائٹ کی تحریریں
-    مصنف کی جانب سے تخلیقی العام انتساب 4.0 بین الاقوامی (CC BY 4.0) لائسنس کے تحت دستیاب ہیں۔
-
-meta: :PLATFORM کے لیے :THEME تھیم استعمال کیا جا رہا ہے۔
-
-not_found:
-  statement: معذرت، یہ URL غلط ہے یا جس چیز کی طرف اشارہ کر رہا ہے وہ موجود نہیں۔
-
-notification:
-  update_found: نیا مواد دستیاب ہے۔
-  update: اپ ڈیٹ
-
-# ----- Posts related labels -----
-
-post:
-  written_by: از
-  posted: شائع شدہ
-  updated: اپ ڈیٹ شدہ
-  words: لفظ
-  pageview_measure: مشاہدات
-  read_time:
-    unit: منٹ
-    prompt: پڑھیں
-  relate_posts: مزید مطالعہ
-  share: شیئر
-  button:
-    next: نیا
-    previous: پرانا
-    copy_code:
-      succeed: کاپی ہو گیا!
-    share_link:
-      title: لنک کاپی کریں
-      succeed: لنک کامیابی سے کاپی ہو گیا!
-
-# Date time format.
-# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
-df:
-  post:
-    strftime: "%b %e, %Y"
-    dayjs: "ll"
-  archives:
-    strftime: "%b"
-    dayjs: "MMM"
-
-categories:
-  category_measure:
-    singular: زمرہ
-    plural: زمروں
-  post_measure:
-    singular: تحریر
-    plural: تحریریں

_data/origin/cors.yml

@@ -20,24 +20,24 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 # Libraries
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.36.4/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.36.4/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@11.12.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/locale/:LOCALE.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/plugin/relativeTime.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/plugin/localizedFormat.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/:LOCALE.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js
 
 glightbox:
   css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css

_data/share.yml

@@ -18,7 +18,7 @@ platforms:
   #
   # - type: Linkedin
   #   icon: "fab fa-linkedin"
-  #   link: "https://www.linkedin.com/feed/?shareActive=true&shareUrl=URL"
+  #   link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"

_includes/embed/audio.html

@@ -9,7 +9,7 @@
 {% endunless %}
 
 <p>
-  <audio class="embed-audio file" controls>
+  <audio class="embed-audio" controls>
     {% assign extension = src | split: '.' | last %}
     {% assign types = extension | concat: types %}
 

_includes/embed/spotify.html

@@ -1,22 +0,0 @@
-{% assign size = 352 %}
-{% assign theme = '' %}
-
-{% if include.compact %}
-  {% assign size = 152 %}
-{% endif %}
-
-{% if include.dark %}
-  {% assign theme = '?theme=0' %}
-{% endif %}
-
-<iframe
-  class="embed-audio spotify"
-  src="https://open.spotify.com/embed/track/{{ include.id | append: theme }}"
-  height="{{ size }}"
-  frameBorder="0"
-  allowfullscreen=""
-  allowtransparency="true"
-  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-  loading="lazy"
->
-</iframe>

_includes/favicons.html

@@ -5,10 +5,15 @@
 
 {% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
-<link rel="icon" type="image/png" href="{{ favicon_path }}/favicon-96x96.png" sizes="96x96">
-<link rel="icon" type="image/svg+xml" href="{{ favicon_path }}/favicon.svg">
-<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
 <link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
 {% if site.pwa.enabled %}
   <link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
 {% endif %}
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
+<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
+<meta name="application-name" content="{{ site.title }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">

_includes/head.html

@@ -50,11 +50,6 @@
 
   {{ seo_tags }}
 
-  {%- if site.social.fediverse_handle %}
-    <!-- Fediverse handle/creator -->
-    <meta name="fediverse:creator" content="{{ site.social.fediverse_handle }}">
-  {% endif %}
-
   <title>
     {%- unless page.layout == 'home' -%}
       {{ page.title | append: ' | ' }}
@@ -75,7 +70,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
   {% endunless %}
 
   <!-- Theme style -->
@@ -104,7 +99,9 @@
 
   <!-- Scripts -->
 
-  <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
+  {% unless site.theme_mode %}
+    <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
+  {% endunless %}
 
   {% include js-selector.html lang=lang %}
 

_includes/js-selector.html

@@ -66,7 +66,7 @@
 
 {% if page.math %}
   <!-- MathJax -->
-  <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
+  <script async src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
   <script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}

_includes/no-linenos.html

@@ -0,0 +1,10 @@
+{% comment %}
+  Remove the line number of the code snippet.
+{% endcomment %}
+
+{% assign content = include.content %}
+
+{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% endif %}

_includes/pageviews/goatcounter.html

@@ -1,21 +1,19 @@
 <!-- Display GoatCounter pageviews -->
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const pv = document.getElementById('pageviews');
+  let pv = document.getElementById('pageviews');
 
-    if (pv !== null) {
-      const uri = location.pathname.replace(/\/$/, '');
-      const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
 
-      fetch(url)
-        .then((response) => response.json())
-        .then((data) => {
-          const count = data.count.replace(/\D/g, '');
-          pv.innerText = new Intl.NumberFormat().format(count);
-        })
-        .catch((error) => {
-          pv.innerText = '1';
-        });
-    }
-  });
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        const count = data.count.replace(/\s/g, '');
+        pv.innerText = new Intl.NumberFormat().format(count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
 </script>

_includes/post-description.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+  Get post description or generate it from the post content.
+{%- endcomment -%}
+
+{%- assign max_length = include.max_length | default: 200 -%}
+
+{%- capture description -%}
+{%- if post.description -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
+{%- endif -%}
+{%- endcapture -%}
+
+{{- description | strip | truncate: max_length | escape -}}

_includes/post-summary.html

@@ -1,39 +0,0 @@
-{%- comment -%}
-  Get the post's description or body content.
-
-  Arguments:
-    full_text: If true, return the full content. Default is false.
-    max_length: The maximum length of the returned content. Default is 200.
-{%- endcomment -%}
-
-{%- if post.description and include.full_text != true -%}
-  {{- post.description -}}
-{%- else -%}
-  {%- comment -%} Remove the line numbers from the code snippet. {%- endcomment -%}
-
-  {%- assign content = post.content -%}
-
-  {%- if content contains '<td class="rouge-gutter gl"><pre class="lineno">' -%}
-    {%- assign content = content
-      | replace: '<td class="rouge-gutter gl"><pre class="lineno">',
-        '<!-- <td class="rouge-gutter gl"><pre class="lineno">'
-    -%}
-    {%- assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' -%}
-  {%- endif -%}
-
-  {%- assign content = content
-    | markdownify
-    | strip_html
-    | newline_to_br
-    | replace: '<br />', ' '
-    | strip_newlines
-    | strip
-  -%}
-
-  {%- unless include.full_text -%}
-    {%- assign max_length = include.max_length | default: 200 -%}
-    {%- assign content = content | truncate: max_length -%}
-  {%- endunless -%}
-
-  {{- content -}}
-{%- endif -%}

_includes/refactor-content.html

@@ -88,41 +88,9 @@
     {% endfor %}
 
     <!-- take out classes -->
-    {% assign _wrapper_class = '' %}
-
     {% if _class %}
-      {% assign _remain = _class %}
-      {% assign _class_array = _class | split: ' ' %}
-
-      {% for c in _class_array %}
-        {% assign _pick = false %}
-
-        {% case c %}
-          {% when 'preview-img', 'normal', 'left', 'right', 'light', 'dark' %}
-            {% assign _pick = true %}
-          {% else %}
-            {% if c contains '-' %}
-              {% assign start = c | split: '-' | first %}
-              {% if start == 'w' %}
-                {% assign _pick = true %}
-              {% endif %}
-            {% endif %}
-        {% endcase %}
-
-        {% if _pick %}
-          {% assign _remain = _remain | remove: c | strip %}
-          {% assign _wrapper_class = _wrapper_class | append: ' ' | append: c %}
-        {% endif %}
-      {% endfor %}
-
-      {% unless _wrapper_class == '' %}
-        {% capture _old_class %}class="{{ _class }}"{% endcapture %}
-        {% assign _left = _left | remove: _old_class %}
-        {% unless _remain == '' %}
-          {% capture _new_class %}class="{{ _remain }}"{% endcapture %}
-          {% assign _left = _left | append: _new_class %}
-        {% endunless %}
-      {% endunless %}
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
+      {% assign _left = _left | remove: _old_class %}
     {% endif %}
 
     {% assign _final_src = null %}
@@ -142,7 +110,7 @@
 
     {% if _lqip %}
       {% assign _lazyload = false %}
-      {% assign _wrapper_class = _wrapper_class | append: ' blur' %}
+      {% assign _class = _class | append: ' blur' %}
 
       {% unless _lqip contains 'data:' %}
         {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
@@ -153,7 +121,7 @@
       {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
 
     {% else %}
-      {% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
+      {% assign _class = _class | append: ' shimmer' %}
     {% endif %}
 
     <!-- lazy-load images -->
@@ -163,7 +131,7 @@
 
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {% assign _wrapper_start = '<div class="preview-img ' | append: _wrapper_class | append: '">' %}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
 
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
@@ -185,8 +153,8 @@
         {% assign _wrapper_start = _final_src
           | default: _src
           | prepend: '<a href="'
-          | append: '" class="popup img-link'
-          | append: _wrapper_class
+          | append: '" class="popup img-link '
+          | append: _class
           | append: '">'
         %}
 

_includes/related-posts.html

@@ -82,7 +82,7 @@
               {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted">
-                <p>{% include post-summary.html %}</p>
+                <p>{% include post-description.html %}</p>
               </div>
             </div>
           </a>

_includes/search-loader.html

@@ -12,7 +12,7 @@
         {tags}
       </div>
     </header>
-    <p>{content}</p>
+    <p>{snippet}</p>
   </article>
 {% endcapture %}
 

_includes/search-results.html

@@ -3,7 +3,7 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center d-none">
   <div class="col-11 content">
     <div id="search-hints">
-      {% include_cached trending-tags.html lang=include.lang %}
+      {% include_cached trending-tags.html %}
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/sidebar.html

@@ -52,21 +52,13 @@
     {% endunless %}
 
     {% for entry in site.data.contact %}
-      {%- assign url = null -%}
-
       {% case entry.type %}
         {% when 'github', 'twitter' %}
-          {%- unless site[entry.type].username -%}
-            {%- continue -%}
-          {%- endunless -%}
           {%- capture url -%}
             https://{{ entry.type }}.com/{{ site[entry.type].username }}
           {%- endcapture -%}
         {% when 'email' %}
-          {%- unless site.social.email -%}
-            {%- continue -%}
-          {%- endunless -%}
-          {%- assign email = site.social.email | split: '@' -%}
+          {% assign email = site.social.email | split: '@' %}
           {%- capture url -%}
             javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
           {%- endcapture -%}

_includes/toc.html

@@ -1,9 +1,8 @@
 {% include toc-status.html %}
 
 {% if enable_toc %}
-  <div class="toc-border-cover z-3"></div>
-  <section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4 pb-4">
-    <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <section id="toc-wrapper" class="ps-0 pe-4">
+    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}

_includes/topbar.html

@@ -1,6 +1,6 @@
 <!-- The Top Bar -->
 
-<header id="topbar-wrapper" class="flex-shrink-0" aria-label="Top Bar">
+<header id="topbar-wrapper" aria-label="Top Bar">
   <div
     id="topbar"
     class="d-flex align-items-center justify-content-between px-lg-3 h-100"
@@ -40,7 +40,7 @@
     </nav>
     <!-- endof #breadcrumb -->
 
-    <button type="button" id="sidebar-trigger" class="btn btn-link" aria-label="Sidebar">
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
       <i class="fas fa-bars fa-fw"></i>
     </button>
 
@@ -55,7 +55,7 @@
       {% endif %}
     </div>
 
-    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
+    <button type="button" id="search-trigger" class="btn btn-link">
       <i class="fas fa-search fa-fw"></i>
     </button>
 

_javascript/modules/components/mermaid.js

@@ -11,7 +11,7 @@ function refreshTheme(event) {
     const mermaidList = document.getElementsByClassName(MERMAID);
 
     [...mermaidList].forEach((elem) => {
-      const svgCode = elem.previousSibling.children.item(0).textContent;
+      const svgCode = elem.previousSibling.children.item(0).innerHTML;
       elem.textContent = svgCode;
       elem.removeAttribute('data-processed');
     });

_javascript/modules/components/toc.js

@@ -27,9 +27,6 @@ function init() {
     mobile.init();
   }
 
-  const $tocWrapper = document.getElementById('toc-wrapper');
-  $tocWrapper.classList.remove('invisible');
-
   desktopMode.onchange = refresh;
 }
 

_javascript/modules/components/toc/toc-desktop.js

@@ -15,6 +15,8 @@ export class TocDesktop {
   }
 
   static init() {
-    tocbot.init(this.options);
+    if (document.getElementById('toc-wrapper')) {
+      tocbot.init(this.options);
+    }
   }
 }

_javascript/modules/theme.js

@@ -39,10 +39,7 @@ class Theme {
   }
 
   static get #mode() {
-    return (
-      sessionStorage.getItem(this.#modeKey) ||
-      document.documentElement.getAttribute(this.#modeAttr)
-    );
+    return sessionStorage.getItem(this.#modeKey);
   }
 
   static get #isDarkMode() {

_layouts/default.html

@@ -25,7 +25,7 @@ layout: compress
 
         <div class="row flex-grow-1">
           <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
-            {% if layout.layout == 'default' %}
+            {% if layout.refactor or layout.layout == 'default' %}
               {% include refactor-content.html content=content lang=lang %}
             {% else %}
               {{ content }}
@@ -33,7 +33,7 @@ layout: compress
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}

_layouts/home.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+refactor: true
 ---
 
 {% include lang.html %}
@@ -54,39 +55,20 @@ layout: default
 
         {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
-
-          {% if post.media_subpath %}
-            {% unless src contains '://' %}
-              {% assign src = post.media_subpath
-                | append: '/'
-                | append: src
-                | replace: '///', '/'
-                | replace: '//', '/'
-              %}
-            {% endunless %}
-          {% endif %}
-
-          {% if post.image.lqip %}
-            {% assign lqip = post.image.lqip %}
-
-            {% if post.media_subpath %}
-              {% unless lqip contains 'data:' %}
-                {% assign lqip = post.media_subpath
-                  | append: '/'
-                  | append: lqip
-                  | replace: '///', '/'
-                  | replace: '//', '/'
-                %}
-              {% endunless %}
-            {% endif %}
-
-            {% assign lqip_attr = 'lqip="' | append: lqip | append: '"' %}
-          {% endif %}
+          {% unless src contains '//' %}
+            {% assign src = post.media_subpath | append: '/' | append: src | replace: '//', '/' %}
+          {% endunless %}
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
 
+          {% assign lqip = null %}
+
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
+
           <div class="col-md-5">
-            <img src="{{ src }}" alt="{{ alt }}" {{ lqip_attr }}>
+            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
           </div>
 
           {% assign card_body_col = '7' %}
@@ -97,7 +79,7 @@ layout: default
             <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
             <div class="card-text content mt-0 mb-3">
-              <p>{% include post-summary.html %}</p>
+              <p>{% include post-description.html %}</p>
             </div>
 
             <div class="post-meta flex-grow-1 d-flex align-items-end">

_layouts/post.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+refactor: true
 panel_includes:
   - toc
 tail_includes:

_posts/2019-08-08-write-a-new-post.md

@@ -21,7 +21,7 @@ Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-m
 ---
 title: TITLE
 date: YYYY-MM-DD HH:MM:SS +/-TTTT
-categories: [TOP_CATEGORY, SUB_CATEGORY]
+categories: [TOP_CATEGORIE, SUB_CATEGORIE]
 tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
@@ -97,7 +97,7 @@ toc: false
 
 ## Comments
 
-The global setting for comments is defined by the `comments.provider` option in the `_config.yml`{: .filepath} file. Once a comment system is selected for this variable, comments will be enabled for all posts.
+The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
 
 If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
 
@@ -256,9 +256,11 @@ For normal images:
 ```
 {: .nolineno }
 
-### Social Media Platforms
+### Video
 
-You can embed video/audio from social media platforms with the following syntax:
+#### Social Media Platform
+
+You can embed videos from social media platforms with the following syntax:
 
 ```liquid
 {% include embed/{Platform}.html id='{ID}' %}
@@ -266,21 +268,15 @@ You can embed video/audio from social media platforms with the following syntax:
 
 Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
 
-The following table shows how to get the two parameters we need in a given video/audio URL, and you can also know the currently supported video platforms.
+The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
 
-| Video URL                                                                                                                  | Platform   | ID                       |
-| -------------------------------------------------------------------------------------------------------------------------- | ---------- | :----------------------- |
-| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg)                         | `youtube`  | `H-B46URT4mg`            |
-| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)                                 | `twitch`   | `1634779211`             |
-| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf)                         | `bilibili` | `BV1Q44y1B7Wf`           |
-| [https://www.open.**spotify**.com/track/**3OuMIIFP5TxM8tLXMWYPGV**](https://open.spotify.com/track/3OuMIIFP5TxM8tLXMWYPGV) | `spotify`  | `3OuMIIFP5TxM8tLXMWYPGV` |
+| Video URL                                                                                          | Platform   | ID             |
+| -------------------------------------------------------------------------------------------------- | ---------- | :------------- |
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube`  | `H-B46URT4mg`  |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`   | `1634779211`   |
+| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
 
-Spotify supports some additional parameters:
-
-- `compact` - to display compact player instead (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' compact=1 %}`);
-- `dark` - to force dark theme (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' dark=1 %}`).
-
-### Video Files
+#### Video Files
 
 If you want to embed a video file directly, use the following syntax:
 
@@ -314,7 +310,7 @@ Consider an example using all of the above:
 %}
 ```
 
-### Audio Files
+### Audios
 
 If you want to embed an audio file directly, use the following syntax:
 

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

@@ -68,7 +68,7 @@ For Unix-like systems, you can set up the environment natively for optimal perfo
 To run the site locally, use the following command:
 
 ```terminal
-$ bundle exec jekyll serve
+$ bundle exec jekyll s
 ```
 
 > If you are using Dev Containers, you must run that command in the **VS Code** Terminal.
@@ -93,6 +93,8 @@ 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.

_posts/2019-08-11-customize-the-favicon.md

@@ -10,26 +10,25 @@ The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https:/
 
 ## Generate the favicon
 
-Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button <kbd>Pick your favicon image</kbd> to upload your image file.
+Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button <kbd>Select your Favicon image</kbd> to upload your image file.
 
-In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Next →</kbd> to generate the favicon.
+In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
 
 ## Download & Replace
 
-Download the generated package, unzip and delete the following file(s) from the extracted files:
+Download the generated package, unzip and delete the following two from the extracted files:
 
+- `browserconfig.xml`{: .filepath}
 - `site.webmanifest`{: .filepath}
 
-And then copy the remaining image files (`.PNG`{: .filepath}, `.ICO`{: .filepath} and `.SVG`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
+And then copy the remaining image files (`.PNG`{: .filepath} and `.ICO`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
 
 The following table will help you understand the changes to the favicon files:
 
-| File(s) | From Online Tool | From Chirpy |
-| ------- | :--------------: | :---------: |
-| `*.PNG` |        ✓         |      ✗      |
-| `*.ICO` |        ✓         |      ✗      |
-| `*.SVG` |        ✓         |      ✗      |
-
+| File(s)             | From Online Tool                  | From Chirpy |
+|---------------------|:---------------------------------:|:-----------:|
+| `*.PNG`             | ✓                                 | ✗           |
+| `*.ICO`             | ✓                                 | ✗           |
 
 <!-- markdownlint-disable-next-line -->
 >  ✓ means keep, ✗ means delete.

_sass/abstracts/_breakpoints.scss

@@ -1,73 +0,0 @@
-@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

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

_sass/abstracts/_mixins.scss

@@ -1,80 +0,0 @@
-@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

@@ -1,10 +1,15 @@
-@use 'variables' as v;
-@use 'mixins' as mx;
+@use 'variables';
+
+/*
+* Mainly scss modules, only imported to `assets/css/main.scss`
+*/
+
+/* ---------- scss placeholder --------- */
 
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: v.$font-family-heading;
+  font-family: variables.$font-family-heading;
   scroll-margin-top: 3.5rem;
 }
 
@@ -31,10 +36,7 @@
 }
 
 %tag-hover {
-  @extend %link-color;
-
   background: var(--tag-hover);
-  border-color: var(--tag-hover);
   transition: background 0.35s ease-in-out;
 }
 
@@ -82,7 +84,7 @@
 }
 
 %rounded {
-  border-radius: v.$radius-lg;
+  border-radius: variables.$radius-lg;
 }
 
 %img-caption {
@@ -112,8 +114,14 @@
   -webkit-box-orient: vertical;
 }
 
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 %text-ellipsis {
-  @include mx.text-ellipsis;
+  @include text-ellipsis;
 }
 
 %text-highlight {
@@ -145,19 +153,65 @@
   }
 }
 
-%code-snippet-bg {
-  background-color: var(--highlight-bg-color);
+/* ---------- scss mixin --------- */
+
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
 }
 
-%code-snippet-padding {
-  padding-left: 1rem;
-  padding-right: 1.5rem;
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
 }
 
-%max-w-100 {
-  max-width: 100%;
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
 }
 
-%panel-border {
-  border-left: 1px solid var(--main-border-color);
+@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);
+      }
+    }
+  }
 }

_sass/addon/syntax.scss

@@ -1,7 +1,46 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
+/*
+* The syntax highlight.
+*/
+
+@use '../colors/syntax-light';
+@use '../colors/syntax-dark';
+@use 'module';
+@use 'variables';
+
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    &[data-mode='light'] {
+      @include syntax-light.light-syntax;
+    }
+
+    &[data-mode='dark'] {
+      @include syntax-dark.dark-syntax;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode='dark'] {
+      @include syntax-dark.dark-syntax;
+    }
+
+    &[data-mode='light'] {
+      @include syntax-light.light-syntax;
+    }
+  }
+}
+
+/* -- code snippets -- */
+
+%code-snippet-bg {
+  background-color: var(--highlight-bg-color);
+}
+
+%code-snippet-padding {
+  padding-left: 1rem;
+  padding-right: 1.5rem;
+}
 
 .highlighter-rouge {
   color: var(--highlighter-rouge-color);
@@ -10,20 +49,21 @@
 }
 
 .highlight {
-  @extend %rounded;
-  @extend %code-snippet-bg;
+  @extend %rounded !optional;
+  @extend %code-snippet-bg !optional;
 
   overflow: auto;
   padding-bottom: 0.75rem;
 
   @at-root figure#{&} {
-    @extend %code-snippet-bg;
+    @extend %code-snippet-bg !optional;
   }
 
   pre {
     margin-bottom: 0;
-    font-size: v.$code-font-size;
+    font-size: variables.$code-font-size;
     line-height: 1.4rem;
+    word-wrap: normal; /* Fixed Safari overflow-x */
   }
 
   table {
@@ -63,10 +103,10 @@ code {
   color: var(--code-color);
 
   &.highlighter-rouge {
-    font-size: v.$code-font-size;
+    font-size: variables.$code-font-size;
     padding: 3px 5px;
-    overflow-wrap: break-word;
-    border-radius: v.$radius-sm;
+    word-break: break-word;
+    border-radius: variables.$radius-sm;
     background-color: var(--inline-code-bg);
   }
 
@@ -92,7 +132,7 @@ code {
 }
 
 td.rouge-code {
-  @extend %code-snippet-padding;
+  @extend %code-snippet-padding !optional;
 
   /*
     Prevent some browser extends from
@@ -106,48 +146,15 @@ td.rouge-code {
 }
 
 div[class^='language-'] {
-  @extend %rounded;
-  @extend %code-snippet-bg;
+  @extend %rounded !optional;
+  @extend %code-snippet-bg !optional;
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
   .content > & {
-    @include mx.ml-mr(-1rem);
+    @include module.ml-mr(-1rem);
 
     border-radius: 0;
-
-    @include bp.sm {
-      @include mx.ml-mr(0);
-
-      border-radius: v.$radius-lg;
-    }
-  }
-
-  .code-header {
-    @include bp.sm {
-      @include mx.ml-mr(0);
-
-      $dot-margin: 1rem;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        margin-left: $dot-margin;
-        width: v.$code-dot-size;
-        height: v.$code-dot-size;
-        border-radius: 50%;
-        background-color: var(--code-header-muted-color);
-        box-shadow: (v.$code-dot-size + v.$code-dot-gap) 0 0
-            var(--code-header-muted-color),
-          (v.$code-dot-size + v.$code-dot-gap) * 2 0 0
-            var(--code-header-muted-color);
-      }
-
-      span {
-        // center the text of label
-        margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
-      }
-    }
   }
 
   .highlight {
@@ -174,23 +181,23 @@ div {
 }
 
 .code-header {
-  @extend %no-cursor;
+  @extend %no-cursor !optional;
 
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: v.$code-header-height;
+  height: variables.$code-header-height;
   margin-left: 0.75rem;
   margin-right: 0.25rem;
 
   /* the label block */
   span {
-    line-height: v.$code-header-height;
+    line-height: variables.$code-header-height;
 
     /* label icon */
     i {
       font-size: 1rem;
-      width: v.$code-icon-width;
+      width: variables.$code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -214,12 +221,12 @@ div {
 
   /* clipboard */
   button {
-    @extend %cursor-pointer;
-    @extend %rounded;
+    @extend %cursor-pointer !optional;
+    @extend %rounded !optional;
 
     border: 1px solid transparent;
-    height: v.$code-header-height;
-    width: v.$code-header-height;
+    height: variables.$code-header-height;
+    width: variables.$code-header-height;
     padding: 0;
     background-color: inherit;
 
@@ -242,7 +249,7 @@ div {
     }
 
     &:not([timeout]):hover {
-      background-color: rgb(128 128 128 / 37%);
+      background-color: rgba(128, 128, 128, 0.37);
 
       i {
         color: white;
@@ -250,3 +257,38 @@ div {
     }
   }
 }
+
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .content > & {
+      @include module.ml-mr(0);
+
+      border-radius: variables.$radius-lg;
+    }
+
+    .code-header {
+      @include module.ml-mr(0);
+
+      $dot-margin: 1rem;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        margin-left: $dot-margin;
+        width: variables.$code-dot-size;
+        height: variables.$code-dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow: (variables.$code-dot-size + variables.$code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          (variables.$code-dot-size + variables.$code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
+      }
+
+      span {
+        // center the text of label
+        margin-left: calc(($dot-margin + variables.$code-dot-size) / 2 * -1);
+      }
+    }
+  }
+}

_sass/addon/variables.scss

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

_sass/base/_base.scss

@@ -1,483 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
-@use '../themes/light';
-@use '../themes/dark';
-
-:root {
-  font-size: 16px;
-}
-
-html {
-  @media (prefers-color-scheme: light) {
-    &:not([data-mode]),
-    &[data-mode='light'] {
-      @include light.styles;
-    }
-
-    &[data-mode='dark'] {
-      @include dark.styles;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:not([data-mode]),
-    &[data-mode='dark'] {
-      @include dark.styles;
-    }
-
-    &[data-mode='light'] {
-      @include light.styles;
-    }
-  }
-
-  @include bp.lg {
-    overflow-y: scroll;
-  }
-}
-
-body {
-  background: var(--main-bg);
-  padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
-  color: var(--text-color);
-  -webkit-font-smoothing: antialiased;
-  font-family: v.$font-family-base;
-}
-
-h1.dynamic-title {
-  @include bp.lt(bp.get(lg)) {
-    display: none;
-
-    ~ .content {
-      margin-top: 2.5rem;
-    }
-  }
-}
-
-main {
-  &.col-12 {
-    @include bp.xxxl {
-      padding-right: 4.5rem !important;
-    }
-  }
-}
-
-.preview-img {
-  aspect-ratio: 40 / 21;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  @extend %rounded;
-
-  &:not(.no-bg) {
-    background: var(--img-bg);
-  }
-
-  img {
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover;
-
-    @extend %rounded;
-
-    @at-root #post-list & {
-      width: 100%;
-    }
-  }
-}
-
-.post-preview {
-  @extend %rounded;
-
-  border: 0;
-  background: var(--card-bg);
-  box-shadow: var(--card-shadow);
-
-  &::before {
-    @extend %rounded;
-
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: var(--card-hover-bg);
-    opacity: 0;
-    transition: opacity 0.35s ease-in-out;
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.3;
-    }
-  }
-}
-
-.post-meta {
-  @extend %text-sm;
-
-  a {
-    &:not([class]):hover {
-      @extend %link-hover;
-    }
-  }
-
-  em {
-    @extend %normal-font-style;
-  }
-}
-
-.content {
-  font-size: 1.08rem;
-  margin-top: 2rem;
-  overflow-wrap: break-word;
-
-  @include bp.xl {
-    font-size: 1.03rem;
-  }
-
-  a {
-    &.popup {
-      @extend %no-cursor;
-      @extend %img-caption;
-      @include mx.mt-mb(0.5rem);
-
-      cursor: zoom-in;
-    }
-
-    &:not(.img-link) {
-      @extend %link-underline;
-
-      &:hover {
-        @extend %link-hover;
-      }
-    }
-  }
-
-  ol,
-  ul {
-    &:not([class]),
-    &.task-list {
-      -webkit-padding-start: 1.75rem;
-      padding-inline-start: 1.75rem;
-
-      li {
-        margin: 0.25rem 0;
-        padding-left: 0.25rem;
-      }
-
-      ol,
-      ul {
-        -webkit-padding-start: 1.25rem;
-        padding-inline-start: 1.25rem;
-        margin: 0.5rem 0;
-      }
-    }
-  }
-
-  ul.task-list {
-    -webkit-padding-start: 1.25rem;
-    padding-inline-start: 1.25rem;
-
-    li {
-      list-style-type: none;
-      padding-left: 0;
-
-      /* checkbox icon */
-      > i {
-        width: 2rem;
-        margin-left: -1.25rem;
-        color: var(--checkbox-color);
-
-        &.checked {
-          color: var(--checkbox-checked-color);
-        }
-      }
-
-      ul {
-        -webkit-padding-start: 1.75rem;
-        padding-inline-start: 1.75rem;
-      }
-    }
-
-    input[type='checkbox'] {
-      margin: 0 0.5rem 0.2rem -1.3rem;
-      vertical-align: middle;
-    }
-  } /* ul */
-
-  dl > dd {
-    margin-left: 1rem;
-  }
-
-  ::marker {
-    color: var(--text-muted-color);
-  }
-
-  .table-wrapper > table {
-    @include bp.lg {
-      min-width: 70%;
-    }
-  }
-} /* .content */
-
-.tag:hover {
-  @extend %tag-hover;
-}
-
-.post-tag {
-  display: inline-block;
-  min-width: 2rem;
-  text-align: center;
-  border-radius: 0.5rem;
-  border: 1px solid var(--btn-border-color);
-  padding: 0 0.4rem;
-  color: var(--text-muted-color);
-  line-height: 1.3rem;
-
-  &:not(:last-child) {
-    margin-right: 0.2rem;
-  }
-}
-
-.rounded-10 {
-  border-radius: 10px !important;
-}
-
-.img-link {
-  color: transparent;
-  display: inline-flex;
-}
-
-.shimmer {
-  overflow: hidden;
-  position: relative;
-  background: var(--img-bg);
-
-  &::before {
-    content: '';
-    position: absolute;
-    background: var(--shimmer-bg);
-    height: 100%;
-    width: 100%;
-    -webkit-animation: shimmer 1.3s infinite;
-    animation: shimmer 1.3s infinite;
-  }
-
-  @-webkit-keyframes shimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
-  @keyframes shimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-
-.embed-video {
-  width: 100%;
-  height: 100%;
-  margin-bottom: 1rem;
-  aspect-ratio: 16 / 9;
-
-  @extend %rounded;
-
-  &.twitch {
-    aspect-ratio: 310 / 189;
-  }
-
-  &.file {
-    display: block;
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-    margin: auto;
-    margin-bottom: 0;
-  }
-
-  @extend %img-caption;
-}
-
-.embed-audio {
-  width: 100%;
-
-  &.file {
-    display: block;
-  }
-
-  &.spotify {
-    border-radius: 14px;
-  }
-
-  @extend %img-caption;
-}
-
-/* --- Effects classes --- */
-
-.flex-grow-1 {
-  flex-grow: 1 !important;
-}
-
-.btn-box-shadow {
-  box-shadow: var(--card-shadow);
-}
-
-/* overwrite bootstrap muted */
-.text-muted {
-  color: var(--text-muted-color) !important;
-}
-
-/* Overwrite bootstrap tooltip */
-.tooltip-inner {
-  font-size: 0.7rem;
-  max-width: 220px;
-  text-align: left;
-}
-
-/* Overwrite bootstrap outline button */
-.btn.btn-outline-primary {
-  &:not(.disabled):hover {
-    border-color: #007bff !important;
-  }
-}
-
-.disabled {
-  color: rgb(206 196 196);
-  pointer-events: auto;
-  cursor: not-allowed;
-}
-
-.hide-border-bottom {
-  border-bottom: none !important;
-}
-
-.input-focus {
-  box-shadow: none;
-  border-color: var(--input-focus-border-color) !important;
-  background: center !important;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-}
-
-.left {
-  float: left;
-  margin: 0.75rem 1rem 1rem 0;
-}
-
-.right {
-  float: right;
-  margin: 0.75rem 0 1rem 1rem;
-}
-
-/* --- Overriding --- */
-
-/* mermaid */
-.mermaid {
-  text-align: center;
-}
-
-/* MathJax */
-mjx-container {
-  overflow-y: hidden;
-  min-width: auto !important;
-}
-
-@media (hover: hover) {
-  #sidebar ul > li:last-child::after {
-    transition: top 0.5s ease;
-  }
-
-  .nav-link {
-    transition: background-color 0.3s ease-in-out;
-  }
-
-  .post-preview {
-    transition: background-color 0.35s ease-in-out;
-  }
-}
-
-#mask {
-  inset: 0 0 0 0;
-}
-
-#main-wrapper {
-  position: relative;
-
-  @include mx.pl-pr(0);
-
-  @include bp.lt(bp.get(lg)) {
-    @include mx.slide;
-  }
-
-  @include bp.lg {
-    margin-left: v.$sidebar-width;
-  }
-
-  @include bp.xxxl {
-    margin-left: v.$sidebar-width-large;
-  }
-
-  > .container {
-    min-height: 100vh;
-
-    @include bp.lte(bp.get(md)) {
-      @include mx.max-w-100;
-      @include mx.pl-pr(0);
-    }
-
-    @include bp.lt(bp.get(lg)) {
-      max-width: 100%;
-    }
-
-    /* Pad horizontal */
-    @include bp.between(992px, calc(#{bp.get(xl)} - 1px)) {
-      .col-lg-11 {
-        flex: 0 0 96%;
-        max-width: 96%;
-      }
-    }
-
-    @include bp.lt(bp.get(xl)) {
-      > .row {
-        justify-content: center !important;
-      }
-    }
-
-    @include bp.xxxl {
-      max-width: v.$main-content-max-width;
-
-      @include mx.pl-pr(1.75rem, true);
-    }
-  }
-}
-
-/* --- basic wrappers --- */
-
-#topbar-wrapper.row,
-#main-wrapper > .container > .row,
-#search-result-wrapper > .row {
-  @include mx.ml-mr(0);
-}
-
-#tail-wrapper {
-  @include bp.xxxl {
-    padding-right: 4.5rem !important;
-  }
-
-  > :not(script) {
-    margin-top: 3rem;
-  }
-}

_sass/base/_index.scss

@@ -1,4 +0,0 @@
-@forward 'reset';
-@forward 'base';
-@forward 'typography';
-@forward 'syntax';

_sass/base/_reset.scss

@@ -1,41 +0,0 @@
-@use '../abstracts/mixins' as *;
-
-::-webkit-input-placeholder {
-  @include placeholder;
-}
-
-::-moz-placeholder {
-  @include placeholder;
-}
-
-:-ms-input-placeholder {
-  @include placeholder;
-}
-
-::-ms-input-placeholder {
-  @include placeholder;
-}
-
-::placeholder {
-  @include placeholder;
-}
-
-:focus::-webkit-input-placeholder {
-  @include placeholder-focus;
-}
-
-:focus::-moz-placeholder {
-  @include placeholder-focus;
-}
-
-:focus:-ms-input-placeholder {
-  @include placeholder-focus;
-}
-
-:focus::-ms-input-placeholder {
-  @include placeholder-focus;
-}
-
-:focus::placeholder {
-  @include placeholder-focus;
-}

_sass/base/_typography.scss

@@ -1,264 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
-
-@for $i from 1 through 5 {
-  h#{$i} {
-    @extend %heading;
-
-    @if $i > 1 {
-      @extend %anchor;
-    }
-
-    @if $i < 5 {
-      $size-factor: 0.25rem;
-
-      @if $i > 1 {
-        $size-factor: 0.18rem;
-
-        main & {
-          @if $i == 2 {
-            margin: 2.5rem 0 1.25rem;
-          } @else {
-            margin: 2rem 0 1rem;
-          }
-        }
-      }
-
-      font-size: 1rem + (5 - $i) * $size-factor;
-    } @else {
-      font-size: 1.05rem;
-    }
-  }
-}
-
-a {
-  @extend %link-color;
-
-  text-decoration: none;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  transition: all 0.35s ease-in-out;
-
-  .blur & {
-    $blur: 20px;
-
-    -webkit-filter: blur($blur);
-    filter: blur($blur);
-  }
-}
-
-blockquote {
-  border-left: 0.125rem solid var(--blockquote-border-color);
-  padding-left: 1rem;
-  color: var(--blockquote-text-color);
-  margin-top: 0.5rem;
-
-  > p:last-child {
-    margin-bottom: 0;
-  }
-
-  &[class^='prompt-'] {
-    border-left: 0;
-    position: relative;
-    padding: 1rem 1rem 1rem 3rem;
-    color: var(--prompt-text-color);
-
-    @extend %rounded;
-
-    &::before {
-      text-align: center;
-      width: 3rem;
-      position: absolute;
-      left: 0.25rem;
-      margin-top: 0.4rem;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
-
-  @include mx.prompt('tip', '\f0eb', $fa-style: 'regular');
-  @include mx.prompt('info', '\f06a', $rotate: 180);
-  @include mx.prompt('warning', '\f06a');
-  @include mx.prompt('danger', '\f071');
-}
-
-kbd {
-  font-family: Lato, sans-serif;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1.3rem;
-  min-width: 1.75rem;
-  text-align: center;
-  margin: 0 0.3rem;
-  padding-top: 0.1rem;
-  color: var(--kbd-text-color);
-  background-color: var(--kbd-bg-color);
-  border-radius: v.$radius-sm;
-  border: solid 1px var(--kbd-wrap-color);
-  box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
-}
-
-hr {
-  border-color: var(--main-border-color);
-  opacity: 1;
-}
-
-footer {
-  background-color: var(--main-bg);
-  height: v.$footer-height;
-  border-top: 1px solid var(--main-border-color);
-
-  @extend %text-xs;
-
-  a {
-    @extend %text-highlight;
-
-    &:hover {
-      @extend %link-hover;
-    }
-  }
-
-  em {
-    @extend %text-highlight;
-  }
-
-  p {
-    text-align: center;
-    margin-bottom: 0;
-  }
-}
-
-/* fontawesome icons */
-i {
-  &.far,
-  &.fas {
-    @extend %no-cursor;
-  }
-}
-
-sup {
-  @extend %sup-fn-target;
-}
-
-main {
-  line-height: 1.75;
-
-  h1 {
-    margin-top: 2rem;
-
-    @include bp.lg {
-      margin-top: 3rem;
-    }
-  }
-
-  p {
-    > a.popup {
-      &:not(.normal):not(.left):not(.right) {
-        @include mx.align-center;
-      }
-    }
-  }
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-
-  @include bp.lte(bp.get(sm)) {
-    .content {
-      > blockquote[class^='prompt-'] {
-        @include mx.ml-mr(-1rem);
-
-        border-radius: 0;
-        max-width: none;
-      }
-    }
-  }
-}
-
-.footnotes > ol {
-  padding-left: 2rem;
-  margin-top: 0.5rem;
-
-  > li {
-    &:not(:last-child) {
-      margin-bottom: 0.3rem;
-    }
-
-    @extend %sup-fn-target;
-
-    > p {
-      margin-left: 0.25em;
-
-      @include mx.mt-mb(0);
-    }
-  }
-}
-
-.footnote {
-  @at-root a#{&} {
-    @include mx.ml-mr(1px);
-    @include mx.pl-pr(2px);
-
-    border-bottom-style: none !important;
-  }
-}
-
-.reversefootnote {
-  @at-root a#{&} {
-    font-size: 0.6rem;
-    line-height: 1;
-    position: relative;
-    bottom: 0.25em;
-    margin-left: 0.25em;
-    border-bottom-style: none !important;
-  }
-}
-
-/* --- Begin of Markdown table style --- */
-
-/* it will be created by Liquid */
-.table-wrapper {
-  overflow-x: auto;
-  margin-bottom: 1.5rem;
-
-  > table {
-    min-width: 100%;
-    overflow-x: auto;
-    border-spacing: 0;
-
-    thead {
-      border-bottom: solid 2px rgb(210 215 217 / 75%);
-
-      th {
-        @extend %table-cell;
-      }
-    }
-
-    tbody {
-      tr {
-        border-bottom: 1px solid var(--tb-border-color);
-
-        &:nth-child(2n) {
-          background-color: var(--tb-even-bg);
-        }
-
-        &:nth-child(2n + 1) {
-          background-color: var(--tb-odd-bg);
-        }
-
-        td {
-          @extend %table-cell;
-        }
-      }
-    } /* tbody */
-  } /* table */
-}

_sass/colors/syntax-dark.scss

@@ -0,0 +1,164 @@
+/*
+ * The syntax dark mode styles.
+ */
+
+@mixin dark-syntax {
+  --language-border-color: #2d2d2d;
+  --highlight-bg-color: #151515;
+  --highlighter-rouge-color: #c9def1;
+  --highlight-lineno-color: #808080;
+  --inline-code-bg: rgba(255, 255, 255, 0.05);
+  --code-color: #b0b0b0;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: #353535;
+  --code-header-icon-color: #565656;
+  --clipboard-checked-color: #2bcc2b;
+  --filepath-text-color: #cacaca;
+
+  .highlight .gp {
+    color: #87939d;
+  }
+
+  /* --- Syntax highlight theme from `rougify style base16.dark` --- */
+
+  .highlight table td {
+    padding: 5px;
+  }
+
+  .highlight table pre {
+    margin: 0;
+  }
+
+  .highlight,
+  .highlight .w {
+    color: #d0d0d0;
+    background-color: #151515;
+  }
+
+  .highlight .err {
+    color: #151515;
+    background-color: #ac4142;
+  }
+
+  .highlight .c,
+  .highlight .ch,
+  .highlight .cd,
+  .highlight .cm,
+  .highlight .cpf,
+  .highlight .c1,
+  .highlight .cs {
+    color: #848484;
+  }
+
+  .highlight .cp {
+    color: #f4bf75;
+  }
+
+  .highlight .nt {
+    color: #f4bf75;
+  }
+
+  .highlight .o,
+  .highlight .ow {
+    color: #d0d0d0;
+  }
+
+  .highlight .p,
+  .highlight .pi {
+    color: #d0d0d0;
+  }
+
+  .highlight .gi {
+    color: #90a959;
+  }
+
+  .highlight .gd {
+    color: #f08a8b;
+    background-color: #320000;
+  }
+
+  .highlight .gh {
+    color: #6a9fb5;
+    background-color: #151515;
+    font-weight: bold;
+  }
+
+  .highlight .k,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kv {
+    color: #aa759f;
+  }
+
+  .highlight .kc {
+    color: #d28445;
+  }
+
+  .highlight .kt {
+    color: #d28445;
+  }
+
+  .highlight .kd {
+    color: #d28445;
+  }
+
+  .highlight .s,
+  .highlight .sb,
+  .highlight .sc,
+  .highlight .dl,
+  .highlight .sd,
+  .highlight .s2,
+  .highlight .sh,
+  .highlight .sx,
+  .highlight .s1 {
+    color: #90a959;
+  }
+
+  .highlight .sa {
+    color: #aa759f;
+  }
+
+  .highlight .sr {
+    color: #75b5aa;
+  }
+
+  .highlight .si {
+    color: #b76d45;
+  }
+
+  .highlight .se {
+    color: #b76d45;
+  }
+
+  .highlight .nn {
+    color: #f4bf75;
+  }
+
+  .highlight .nc {
+    color: #f4bf75;
+  }
+
+  .highlight .no {
+    color: #f4bf75;
+  }
+
+  .highlight .na {
+    color: #6a9fb5;
+  }
+
+  .highlight .m,
+  .highlight .mb,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .il,
+  .highlight .mo,
+  .highlight .mx {
+    color: #90a959;
+  }
+
+  .highlight .ss {
+    color: #90a959;
+  }
+}

_sass/colors/syntax-light.scss

@@ -0,0 +1,210 @@
+/*
+ * The syntax light mode code snippet colors.
+ */
+
+@mixin light-syntax {
+  /* --- custom light colors --- */
+  --language-border-color: #ececec;
+  --highlight-bg-color: #f6f8fa;
+  --highlighter-rouge-color: #3f596f;
+  --highlight-lineno-color: #9e9e9e;
+  --inline-code-bg: rgba(25, 25, 28, 0.05);
+  --code-color: #3a3a3a;
+  --code-header-text-color: #a3a3a3;
+  --code-header-muted-color: #e5e5e5;
+  --code-header-icon-color: #c9c8c8;
+  --clipboard-checked-color: #43c743;
+
+  /* --- Syntax highlight theme from `rougify style github` --- */
+
+  .highlight table td {
+    padding: 5px;
+  }
+
+  .highlight table pre {
+    margin: 0;
+  }
+
+  .highlight,
+  .highlight .w {
+    color: #24292f;
+    background-color: #f6f8fa;
+  }
+
+  .highlight .k,
+  .highlight .kd,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kt,
+  .highlight .kv {
+    color: #cf222e;
+  }
+
+  .highlight .gr {
+    color: #f6f8fa;
+  }
+
+  .highlight .gd {
+    color: #82071e;
+    background-color: #ffebe9;
+  }
+
+  .highlight .nb {
+    color: #953800;
+  }
+
+  .highlight .nc {
+    color: #953800;
+  }
+
+  .highlight .no {
+    color: #953800;
+  }
+
+  .highlight .nn {
+    color: #953800;
+  }
+
+  .highlight .sr {
+    color: #116329;
+  }
+
+  .highlight .na {
+    color: #116329;
+  }
+
+  .highlight .nt {
+    color: #116329;
+  }
+
+  .highlight .gi {
+    color: #116329;
+    background-color: #dafbe1;
+  }
+
+  .highlight .kc {
+    color: #0550ae;
+  }
+
+  .highlight .l,
+  .highlight .ld,
+  .highlight .m,
+  .highlight .mb,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .il,
+  .highlight .mo,
+  .highlight .mx {
+    color: #0550ae;
+  }
+
+  .highlight .sb {
+    color: #0550ae;
+  }
+
+  .highlight .bp {
+    color: #0550ae;
+  }
+
+  .highlight .ne {
+    color: #0550ae;
+  }
+
+  .highlight .nl {
+    color: #0550ae;
+  }
+
+  .highlight .py {
+    color: #0550ae;
+  }
+
+  .highlight .nv,
+  .highlight .vc,
+  .highlight .vg,
+  .highlight .vi,
+  .highlight .vm {
+    color: #0550ae;
+  }
+
+  .highlight .o,
+  .highlight .ow {
+    color: #0550ae;
+  }
+
+  .highlight .gh {
+    color: #0550ae;
+    font-weight: bold;
+  }
+
+  .highlight .gu {
+    color: #0550ae;
+    font-weight: bold;
+  }
+
+  .highlight .s,
+  .highlight .sa,
+  .highlight .sc,
+  .highlight .dl,
+  .highlight .sd,
+  .highlight .s2,
+  .highlight .se,
+  .highlight .sh,
+  .highlight .sx,
+  .highlight .s1,
+  .highlight .ss {
+    color: #0a3069;
+  }
+
+  .highlight .nd {
+    color: #8250df;
+  }
+
+  .highlight .nf,
+  .highlight .fm {
+    color: #8250df;
+  }
+
+  .highlight .err {
+    color: #f6f8fa;
+    background-color: #82071e;
+  }
+
+  .highlight .c,
+  .highlight .ch,
+  .highlight .cd,
+  .highlight .cm,
+  .highlight .cp,
+  .highlight .cpf,
+  .highlight .c1,
+  .highlight .cs {
+    color: #68717a;
+  }
+
+  .highlight .gl {
+    color: #68717a;
+  }
+
+  .highlight .gt {
+    color: #68717a;
+  }
+
+  .highlight .ni {
+    color: #24292f;
+  }
+
+  .highlight .si {
+    color: #24292f;
+  }
+
+  .highlight .ge {
+    color: #24292f;
+    font-style: italic;
+  }
+
+  .highlight .gs {
+    color: #24292f;
+    font-weight: bold;
+  }
+} /* light-syntax */

_sass/colors/typography-dark.scss

@@ -0,0 +1,147 @@
+/*
+ * The main dark mode styles
+ */
+
+@mixin dark-scheme {
+  /* Framework color */
+  --main-bg: rgb(27, 27, 30);
+  --mask-bg: rgb(68, 69, 70);
+  --main-border-color: rgb(44, 45, 45);
+
+  /* Common color */
+  --text-color: rgb(175, 176, 177);
+  --text-muted-color: #868686;
+  --text-muted-highlight-color: #aeaeae;
+  --heading-color: #cccccc;
+  --label-color: #a7a7a7;
+  --blockquote-border-color: rgb(66, 66, 66);
+  --blockquote-text-color: #868686;
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(82, 108, 150);
+  --button-bg: #1e1e1e;
+  --btn-border-color: #2e2f31;
+  --btn-backtotop-color: var(--text-color);
+  --btn-backtotop-border-color: #212122;
+  --card-header-bg: #292929;
+  --checkbox-color: rgb(118, 120, 121);
+  --checkbox-checked-color: var(--link-color);
+  --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(58, 55, 55, 0.4) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  /* Sidebar */
+  --site-title-color: #717070;
+  --site-subtitle-color: #868686;
+  --sidebar-bg: #1e1e1e;
+  --sidebar-border-color: #292929;
+  --sidebar-muted-color: #868686;
+  --sidebar-active-color: rgb(255, 255, 255, 0.95);
+  --sidebar-hover-bg: #262626;
+  --sidebar-btn-bg: #232328;
+  --sidebar-btn-color: #787878;
+  --avatar-border-color: rgb(206, 206, 206, 0.9);
+
+  /* Topbar */
+  --topbar-bg: rgb(27, 27, 30, 0.64);
+  --topbar-text-color: var(--text-color);
+  --search-border-color: rgb(55, 55, 55);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
+
+  /* Home page */
+  --post-list-text-color: rgb(175, 176, 177);
+  --btn-patinator-text-color: var(--text-color);
+  --btn-paginator-hover-color: #2e2e2e;
+
+  /* Posts */
+  --toc-highlight: rgb(116, 178, 243);
+  --toc-popup-border-color: #373737;
+  --tag-hover: rgb(43, 56, 62);
+  --tb-odd-bg: #252526; /* odd rows of the posts' table */
+  --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
+  --tb-border-color: var(--tb-odd-bg);
+  --footnote-target-bg: rgb(63, 81, 181);
+  --btn-share-color: #6c757d;
+  --btn-share-hover-color: #bfc1ca;
+  --card-bg: #1e1e1e;
+  --card-hovor-bg: #464d51;
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
+    rgb(137, 135, 135, 0.24) 0 0 0 1px;
+  --kbd-wrap-color: #6a6a6a;
+  --kbd-text-color: #d3d3d3;
+  --kbd-bg-color: #242424;
+  --prompt-text-color: rgb(216, 212, 212, 0.75);
+  --prompt-tip-bg: rgb(22, 60, 36, 0.64);
+  --prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
+  --prompt-info-bg: rgb(7, 59, 104, 0.8);
+  --prompt-info-icon-color: #0075d1;
+  --prompt-warning-bg: rgb(90, 69, 3, 0.88);
+  --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
+  --prompt-danger-bg: rgb(86, 28, 8, 0.8);
+  --prompt-danger-icon-color: #cd0202;
+
+  /* Tags */
+  --tag-border: rgb(59, 79, 88);
+  --tag-shadow: rgb(32, 33, 33);
+  --dash-color: rgb(63, 65, 68);
+  --search-tag-bg: #292828;
+
+  /* Categories */
+  --categories-border: rgb(64, 66, 69, 0.5);
+  --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;
+
+  /* Archive */
+  --timeline-node-bg: rgb(150, 152, 156);
+  --timeline-color: rgb(63, 65, 68);
+  --timeline-year-dot-color: var(--timeline-color);
+
+  color-scheme: dark;
+
+  .light {
+    display: none;
+  }
+
+  /* Categories */
+  .categories.card,
+  .list-group-item {
+    background-color: var(--card-bg);
+  }
+
+  .categories {
+    .card-header {
+      background-color: var(--card-header-bg);
+    }
+
+    .list-group-item {
+      border-left: none;
+      border-right: none;
+      padding-left: 2rem;
+      border-color: var(--categories-border);
+
+      &:last-child {
+        border-bottom-color: var(--card-bg);
+      }
+    }
+  }
+
+  #archives li:nth-child(odd) {
+    background-image: linear-gradient(
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30)
+    );
+  }
+
+  /* stylelint-disable-next-line selector-id-pattern */
+  #disqus_thread {
+    color-scheme: none;
+  }
+} /* dark-scheme */

_sass/colors/typography-light.scss

@@ -0,0 +1,112 @@
+/*
+ * The syntax light mode typography colors
+ */
+
+@mixin light-scheme {
+  /* Framework color */
+  --main-bg: white;
+  --mask-bg: #c1c3c5;
+  --main-border-color: #f3f3f3;
+
+  /* Common color */
+  --text-color: #34343c;
+  --text-muted-color: #757575;
+  --text-muted-highlight-color: inherit;
+  --heading-color: #2a2a2a;
+  --label-color: #585858;
+  --blockquote-border-color: #eeeeee;
+  --blockquote-text-color: #757575;
+  --link-color: #0056b2;
+  --link-underline-color: #dee2e6;
+  --button-bg: #ffffff;
+  --btn-border-color: #e9ecef;
+  --btn-backtotop-color: #686868;
+  --btn-backtotop-border-color: #f1f1f1;
+  --checkbox-color: #c5c5c5;
+  --checkbox-checked-color: #07a8f7;
+  --img-bg: radial-gradient(
+    circle,
+    rgb(255, 255, 255) 0%,
+    rgb(239, 239, 239) 100%
+  );
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgba(250, 250, 250, 0) 0%,
+    rgba(232, 230, 230, 1) 50%,
+    rgba(250, 250, 250, 0) 100%
+  );
+
+  /* Sidebar */
+  --site-title-color: rgb(113, 113, 113);
+  --site-subtitle-color: #717171;
+  --sidebar-bg: #f6f8fa;
+  --sidebar-border-color: #efefef;
+  --sidebar-muted-color: #545454;
+  --sidebar-active-color: #1d1d1d;
+  --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
+  --sidebar-btn-bg: white;
+  --sidebar-btn-color: #8e8e8e;
+  --avatar-border-color: white;
+
+  /* Topbar */
+  --topbar-bg: rgb(255, 255, 255, 0.7);
+  --topbar-text-color: rgb(78, 78, 78);
+  --search-border-color: rgb(240, 240, 240);
+  --search-icon-color: #c2c6cc;
+  --input-focus-border-color: #b8b8b8;
+
+  /* Home page */
+  --post-list-text-color: dimgray;
+  --btn-patinator-text-color: #555555;
+  --btn-paginator-hover-color: var(--sidebar-bg);
+
+  /* Posts */
+  --toc-highlight: #0550ae;
+  --toc-popup-border-color: lightgray;
+  --btn-share-color: gray;
+  --btn-share-hover-color: #0d6efd;
+  --card-bg: white;
+  --card-hovor-bg: #e2e2e2;
+  --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
+    rgba(211, 209, 209, 0.15) 0 0 0 1px;
+  --footnote-target-bg: lightcyan;
+  --tb-odd-bg: #fbfcfd;
+  --tb-border-color: #eaeaea;
+  --dash-color: silver;
+  --kbd-wrap-color: #bdbdbd;
+  --kbd-text-color: var(--text-color);
+  --kbd-bg-color: white;
+  --prompt-text-color: rgb(46, 46, 46, 0.77);
+  --prompt-tip-bg: rgb(123, 247, 144, 0.2);
+  --prompt-tip-icon-color: #03b303;
+  --prompt-info-bg: #e1f5fe;
+  --prompt-info-icon-color: #0070cb;
+  --prompt-warning-bg: rgb(255, 243, 205);
+  --prompt-warning-icon-color: #ef9c03;
+  --prompt-danger-bg: rgb(248, 215, 218, 0.56);
+  --prompt-danger-icon-color: #df3c30;
+
+  /* Tags */
+  --tag-border: #dee2e6;
+  --tag-shadow: var(--btn-border-color);
+  --tag-hover: rgb(222, 226, 230);
+  --search-tag-bg: #f8f9fa;
+
+  /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
+  /* Archive */
+  --timeline-color: rgba(0, 0, 0, 0.075);
+  --timeline-node-bg: #c2c6cc;
+  --timeline-year-dot-color: #ffffff;
+
+  [class^='prompt-'] {
+    --link-underline-color: rgb(219, 216, 216);
+  }
+
+  .dark {
+    display: none;
+  }
+} /* light-scheme */

_sass/components/_buttons.scss

@@ -1,51 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-
-#back-to-top {
-  visibility: hidden;
-  opacity: 0;
-  z-index: 1;
-  cursor: pointer;
-  position: fixed;
-  right: 1rem;
-  bottom: calc(v.$footer-height-large - v.$back2top-size / 2);
-  background: var(--button-bg);
-  color: var(--btn-backtotop-color);
-  padding: 0;
-  width: v.$back2top-size;
-  height: v.$back2top-size;
-  border-radius: 50%;
-  border: 1px solid var(--btn-backtotop-border-color);
-  transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
-
-  @include bp.lg {
-    right: 5%;
-    bottom: calc(v.$footer-height - v.$back2top-size / 2);
-  }
-
-  @include bp.xxl {
-    right: calc((100vw - v.$sidebar-width - 1140px) / 2 + 3rem);
-  }
-
-  @include bp.xxxl {
-    right: calc(
-      (100vw - v.$sidebar-width-large - v.$main-content-max-width) / 2 + 2rem
-    );
-  }
-
-  &:hover {
-    transform: translate3d(0, -5px, 0);
-    -webkit-transform: translate3d(0, -5px, 0);
-  }
-
-  i {
-    line-height: v.$back2top-size;
-    position: relative;
-    bottom: 2px;
-  }
-
-  &.show {
-    opacity: 1;
-    visibility: visible;
-  }
-}

_sass/components/_index.scss

@@ -1,2 +0,0 @@
-@forward 'buttons';
-@forward 'popups';

_sass/components/_popups.scss

@@ -1,172 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
-
-/* PWA update popup */
-#notification {
-  @-webkit-keyframes popup {
-    from {
-      opacity: 0;
-      bottom: 0;
-    }
-  }
-
-  @keyframes popup {
-    from {
-      opacity: 0;
-      bottom: 0;
-    }
-  }
-
-  .toast-header {
-    background: none;
-    border-bottom: none;
-    color: inherit;
-  }
-
-  .toast-body {
-    font-family: Lato, sans-serif;
-    line-height: 1.25rem;
-
-    button {
-      font-size: 90%;
-      min-width: 4rem;
-    }
-  }
-
-  &.toast {
-    &.show {
-      display: block;
-      min-width: 20rem;
-      border-radius: 0.5rem;
-      -webkit-backdrop-filter: blur(10px);
-      backdrop-filter: blur(10px);
-      background-color: rgb(255 255 255 / 50%);
-      color: #1b1b1eba;
-      position: fixed;
-      left: 50%;
-      bottom: 20%;
-      transform: translateX(-50%);
-      -webkit-animation: popup 0.8s;
-      animation: popup 0.8s;
-    }
-  }
-}
-
-#toc-popup {
-  $slide-in: slide-in 0.3s ease-out;
-  $slide-out: slide-out 0.3s ease-out;
-  $curtain-height: 2rem;
-  $backdrop: blur(5px);
-
-  border-color: var(--toc-popup-border-color);
-  border-width: 1px;
-  border-radius: v.$radius-lg;
-  color: var(--text-color);
-  background: var(--card-bg);
-  margin-top: v.$topbar-height;
-  min-width: 20rem;
-  font-size: 1.05rem;
-
-  @include bp.sm {
-    max-width: 32rem;
-  }
-
-  &[open] {
-    -webkit-animation: $slide-in;
-    animation: $slide-in;
-  }
-
-  &[closing] {
-    -webkit-animation: $slide-out;
-    animation: $slide-out;
-  }
-
-  @include bp.lg {
-    left: v.$sidebar-width;
-  }
-
-  .header {
-    @extend %btn-color;
-
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    background-color: inherit;
-    border-bottom: 1px solid var(--main-border-color);
-
-    .label {
-      font-family: v.$font-family-heading;
-    }
-  }
-
-  button {
-    > i {
-      font-size: 1.25rem;
-      vertical-align: middle;
-    }
-
-    &:focus-visible {
-      box-shadow: none;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    padding-left: 0;
-
-    li {
-      ul,
-      & + li {
-        margin-top: 0.25rem;
-      }
-
-      a {
-        display: flex;
-        line-height: 1.5;
-        padding: 0.375rem 0;
-        padding-right: 1.125rem;
-
-        &.toc-link::before {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @for $i from 2 through 4 {
-    .node-name--H#{$i} {
-      padding-left: 1.125rem * ($i - 1);
-    }
-  }
-
-  .is-active-link {
-    color: var(--toc-highlight) !important;
-    font-weight: 600;
-  }
-
-  &::-webkit-backdrop {
-    -webkit-backdrop-filter: $backdrop;
-    backdrop-filter: $backdrop;
-  }
-
-  &::backdrop {
-    -webkit-backdrop-filter: $backdrop;
-    backdrop-filter: $backdrop;
-  }
-
-  &::after {
-    display: flex;
-    content: '';
-    position: relative;
-    background: linear-gradient(transparent, var(--card-bg) 70%);
-    height: $curtain-height;
-  }
-
-  #toc-popup-content {
-    overflow: auto;
-    max-height: calc(100vh - 4 * v.$topbar-height);
-    font-family: v.$font-family-heading;
-    margin-bottom: -$curtain-height;
-  }
-}

_sass/layout/_footer.scss

@@ -1,36 +0,0 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/variables' as v;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
-
-footer {
-  background-color: var(--main-bg);
-  height: v.$footer-height;
-  border-top: 1px solid var(--main-border-color);
-
-  @extend %text-xs;
-
-  @include bp.lt(bp.get(lg)) {
-    @include mx.slide;
-
-    height: v.$footer-height-large;
-    padding: 1.5rem 0;
-  }
-
-  a {
-    @extend %text-highlight;
-
-    &:hover {
-      @extend %link-hover;
-    }
-  }
-
-  em {
-    @extend %text-highlight;
-  }
-
-  p {
-    text-align: center;
-    margin-bottom: 0;
-  }
-}

_sass/layout/_index.scss

@@ -1,4 +0,0 @@
-@forward 'sidebar';
-@forward 'topbar';
-@forward 'panel';
-@forward 'footer';

_sass/layout/_panel.scss

@@ -1,70 +0,0 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
-
-.access {
-  top: 2rem;
-  transition: top 0.2s ease-in-out;
-  margin-top: 3rem;
-
-  &:only-child {
-    position: -webkit-sticky;
-    position: sticky;
-  }
-
-  > section {
-    @extend %panel-border;
-
-    padding-left: 1rem;
-
-    &:not(:first-child) {
-      margin-top: 4rem;
-    }
-  }
-
-  .content {
-    font-size: 0.9rem;
-  }
-}
-
-#panel-wrapper {
-  /* the headings */
-  .panel-heading {
-    font-family: inherit;
-    line-height: inherit;
-
-    @include mx.label(inherit);
-  }
-
-  .post-tag {
-    line-height: 1.05rem;
-    font-size: 0.85rem;
-    border-radius: 0.8rem;
-    padding: 0.3rem 0.5rem;
-    margin: 0 0.35rem 0.5rem 0;
-
-    &:hover {
-      transition: all 0.3s ease-in;
-    }
-  }
-
-  > :last-child {
-    margin-bottom: 4rem;
-  }
-
-  @include bp.lt(bp.get(xl)) {
-    display: none;
-  }
-}
-
-#access-lastmod {
-  a {
-    color: inherit;
-
-    &:hover {
-      @extend %link-hover;
-    }
-
-    @extend %no-bottom-border;
-  }
-}

_sass/layout/_sidebar.scss

@@ -1,258 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
-
-$btn-border-width: 3px;
-$btn-mb: 0.5rem;
-$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
-
-#sidebar {
-  @include mx.pl-pr(0);
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  overflow-y: auto;
-  width: v.$sidebar-width;
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--sidebar-border-color);
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  @include bp.lt(bp.get(lg)) {
-    @include mx.slide;
-
-    transform: translateX(-#{v.$sidebar-width}); /* hide */
-    -webkit-transform: translateX(-#{v.$sidebar-width});
-
-    [#{$sidebar-display}] & {
-      transform: translateX(0);
-    }
-  }
-
-  @include bp.xxxl {
-    width: v.$sidebar-width-large;
-  }
-
-  %sidebar-link-hover {
-    &:hover {
-      color: var(--sidebar-active-color);
-    }
-  }
-
-  a {
-    @extend %sidebar-links;
-  }
-
-  #avatar {
-    display: block;
-    width: 6.5rem;
-    height: 6.5rem;
-    overflow: hidden;
-    box-shadow: var(--avatar-border-color) 0 0 0 2px;
-    transform: translateZ(0); /* fixed the zoom in Safari */
-
-    @include bp.sm {
-      width: 7rem;
-      height: 7rem;
-    }
-
-    img {
-      transition: transform 0.5s;
-
-      &:hover {
-        transform: scale(1.2);
-      }
-    }
-  }
-
-  .profile-wrapper {
-    @include mx.mt-mb(2.5rem);
-    @extend %clickable-transition;
-
-    padding-left: 2.5rem;
-    padding-right: 1.25rem;
-    width: 100%;
-
-    @include bp.lg {
-      margin-top: 3rem;
-    }
-
-    @include bp.xxxl {
-      margin-top: 3.5rem;
-      margin-bottom: 2.5rem;
-      padding-left: 3.5rem;
-    }
-  }
-
-  .site-title {
-    @extend %clickable-transition;
-    @extend %sidebar-link-hover;
-
-    font-family: inherit;
-    font-weight: 900;
-    font-size: 1.75rem;
-    line-height: 1.2;
-    letter-spacing: 0.25px;
-    margin-top: 1.25rem;
-    margin-bottom: 0.5rem;
-    width: fit-content;
-    color: var(--site-title-color);
-  }
-
-  .site-subtitle {
-    font-size: 95%;
-    color: var(--site-subtitle-color);
-    margin-top: 0.25rem;
-    word-spacing: 1px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  ul {
-    margin-bottom: 2rem;
-
-    li.nav-item {
-      opacity: 0.9;
-      width: 100%;
-
-      @include mx.pl-pr(1.5rem);
-
-      @include bp.xxxl {
-        @include mx.pl-pr(2.75rem);
-      }
-
-      a.nav-link {
-        @include mx.pt-pb(0.6rem);
-
-        display: flex;
-        align-items: center;
-        border-radius: 0.75rem;
-        font-weight: 600;
-
-        &:hover {
-          background-color: var(--sidebar-hover-bg);
-        }
-
-        i {
-          font-size: 95%;
-          opacity: 0.8;
-          margin-right: 1.5rem;
-        }
-
-        span {
-          font-size: 90%;
-          letter-spacing: 0.2px;
-        }
-      }
-
-      &.active {
-        .nav-link {
-          color: var(--sidebar-active-color);
-          background-color: var(--sidebar-hover-bg);
-
-          span {
-            opacity: 1;
-          }
-        }
-      }
-
-      &:not(:first-child) {
-        margin-top: 0.25rem;
-      }
-    }
-  }
-
-  .sidebar-bottom {
-    padding-left: 2rem;
-    padding-right: 1rem;
-    margin-bottom: 1.5rem;
-
-    @include bp.xxxl {
-      padding-left: 2.75rem;
-      margin-bottom: 1.75rem;
-    }
-
-    $btn-size: 1.75rem;
-
-    %button {
-      width: $btn-size;
-      height: $btn-size;
-      margin-bottom: $btn-mb; // multi line gap
-      border-radius: 50%;
-      color: var(--sidebar-btn-color);
-      background-color: var(--sidebar-btn-bg);
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:not(:focus-visible) {
-        box-shadow: var(--sidebar-border-color) 0 0 0 1px;
-      }
-
-      &:hover {
-        background-color: var(--sidebar-hover-bg);
-      }
-    }
-
-    a {
-      @extend %button;
-      @extend %sidebar-link-hover;
-      @extend %clickable-transition;
-
-      &:not(:last-child) {
-        margin-right: v.$sb-btn-gap;
-
-        @include bp.xxxl {
-          margin-right: v.$sb-btn-gap-lg;
-        }
-      }
-    }
-
-    i {
-      line-height: $btn-size;
-    }
-
-    #mode-toggle {
-      @extend %button;
-      @extend %sidebar-links;
-      @extend %sidebar-link-hover;
-    }
-
-    .icon-border {
-      @extend %no-cursor;
-      @include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
-
-      background-color: var(--sidebar-btn-color);
-      content: '';
-      width: $btn-border-width;
-      height: $btn-border-width;
-      border-radius: 50%;
-      margin-bottom: $btn-mb;
-
-      @include bp.xxxl {
-        @include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
-      }
-    }
-  } /* .sidebar-bottom */
-} /* #sidebar */
-
-[#{$sidebar-display}] {
-  #main-wrapper {
-    @include bp.lt(bp.get(lg)) {
-      transform: translateX(v.$sidebar-width);
-    }
-  }
-}

_sass/layout/_topbar.scss

@@ -1,86 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
-
-#topbar-wrapper {
-  height: v.$topbar-height;
-  background-color: var(--topbar-bg);
-
-  @include bp.lt(bp.get(lg)) {
-    @include mx.slide(top 0.2s ease);
-
-    left: 0;
-  }
-}
-
-#topbar {
-  @extend %btn-color;
-
-  #breadcrumb {
-    font-size: 1rem;
-    color: var(--text-muted-color);
-    padding-left: 0.5rem;
-
-    a:hover {
-      @extend %link-hover;
-    }
-
-    span {
-      &:not(:last-child) {
-        &::after {
-          content: '›';
-          padding: 0 0.3rem;
-        }
-      }
-    }
-
-    @include bp.lt(bp.get(lg)) {
-      display: none;
-    }
-
-    @include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) {
-      width: 65%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: keep-all;
-      white-space: nowrap;
-    }
-  }
-
-  @include bp.lte(bp.get(md)) {
-    @include mx.max-w-100;
-  }
-
-  @include bp.lt(bp.get(lg)) {
-    max-width: 100%;
-  }
-}
-
-#topbar-title {
-  display: none;
-  font-size: 1.1rem;
-  font-weight: 600;
-  font-family: sans-serif;
-  color: var(--topbar-text-color);
-  text-align: center;
-  width: 70%;
-  word-break: keep-all;
-
-  @include bp.lt(bp.get(lg)) {
-    display: block;
-  }
-
-  @include bp.lg {
-    text-align: left;
-  }
-}
-
-#sidebar-trigger,
-#search-trigger {
-  display: none;
-
-  @include bp.lt(bp.get(lg)) {
-    display: block;
-  }
-}

_sass/layout/archives.scss

@@ -1,17 +1,10 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
+/*
+  Style for Archives
+*/
 
 #archives {
   letter-spacing: 0.03rem;
 
-  @include bp.lt(bp.get(sm)) {
-    margin-top: -1rem;
-
-    ul {
-      letter-spacing: 0;
-    }
-  }
-
   $timeline-width: 4px;
 
   %timeline {
@@ -30,7 +23,7 @@
     margin-left: -$timeline-width;
 
     &::before {
-      @extend %timeline;
+      @extend %timeline !optional;
 
       height: 72px;
       left: 79px;
@@ -38,7 +31,7 @@
     }
 
     &:first-child::before {
-      @extend %timeline;
+      @extend %timeline !optional;
 
       height: 32px;
       top: 24px;
@@ -66,7 +59,7 @@
       font-size: 1.1rem;
       line-height: 3rem;
 
-      @extend %text-ellipsis;
+      @extend %text-ellipsis !optional;
 
       &:nth-child(odd) {
         background-color: var(--main-bg, #ffffff);
@@ -81,7 +74,7 @@
       }
 
       &::before {
-        @extend %timeline;
+        @extend %timeline !optional;
 
         top: 0;
         left: 77px;
@@ -138,3 +131,13 @@
     }
   }
 } /* #archives */
+
+@media all and (max-width: 576px) {
+  #archives {
+    margin-top: -1rem;
+
+    ul {
+      letter-spacing: 0;
+    }
+  }
+}

_sass/layout/categories.scss

@@ -1,7 +1,10 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/placeholders';
+@use '../addon/variables';
 
-%-category-icon-color {
+/*
+  Style for Tab Categories
+*/
+
+%category-icon-color {
   color: gray;
 }
 
@@ -11,11 +14,11 @@
 
   &.card,
   .list-group {
-    @extend %rounded;
+    @extend %rounded !optional;
   }
 
   .card-header {
-    $radius: calc(v.$radius-lg - 1px);
+    $radius: calc(variables.$radius-lg - 1px);
 
     padding: 0.75rem;
     border-radius: $radius;
@@ -28,7 +31,7 @@
   }
 
   i {
-    @extend %-category-icon-color;
+    @extend %category-icon-color !optional;
 
     font-size: 86%; /* fontawesome icons */
   }

_sass/layout/category-tag.scss

@@ -1,6 +1,8 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
+@use '../addon/module';
+
+/*
+  Style for page Category and Tag
+*/
 
 .dash {
   margin: 0 0.5rem 0.6rem 0.5rem;
@@ -24,21 +26,13 @@
       position: relative;
       top: 0.6rem;
       margin-right: 0.5rem;
-
-      @include bp.lt(bp.get(sm)) {
-        margin: 0 0.5rem;
-      }
     }
 
     /* post's title */
     > a {
-      @extend %no-bottom-border;
+      @extend %no-bottom-border !optional;
 
       font-size: 1.1rem;
-
-      @include bp.lt(bp.get(sm)) {
-        @include mx.text-ellipsis;
-      }
     }
   }
 }
@@ -56,8 +50,23 @@
 #page-tag,
 #access-lastmod {
   a:hover {
-    @extend %link-hover;
+    @extend %link-hover !optional;
 
     margin-bottom: -1px; /* Avoid jumping */
   }
 }
+
+@media all and (max-width: 576px) {
+  #page-category,
+  #page-tag {
+    ul > li {
+      &::before {
+        margin: 0 0.5rem;
+      }
+
+      > a {
+        @include module.text-ellipsis;
+      }
+    }
+  }
+}

_sass/layout/home.scss

@@ -1,14 +1,12 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
+@use '../addon/variables';
+
+/*
+  Style for Homepage
+*/
 
 #post-list {
   margin-top: 2rem;
 
-  @include bp.lg {
-    margin-top: 2.5rem;
-  }
-
   .card-wrapper {
     &:hover {
       text-decoration: none;
@@ -24,18 +22,14 @@
     background: none;
 
     %img-radius {
-      border-radius: v.$radius-lg v.$radius-lg 0 0;
-
-      @include bp.md {
-        border-radius: 0 v.$radius-lg v.$radius-lg 0;
-      }
+      border-radius: variables.$radius-lg variables.$radius-lg 0 0;
     }
 
     .preview-img {
-      @extend %img-radius;
+      @extend %img-radius !optional;
 
       img {
-        @extend %img-radius;
+        @extend %img-radius !optional;
       }
     }
 
@@ -43,12 +37,8 @@
       height: 100%;
       padding: 1rem;
 
-      @include bp.md {
-        padding: 1.75rem 1.75rem 1.25rem;
-      }
-
       .card-title {
-        @extend %text-clip;
+        @extend %text-clip !optional;
 
         color: var(--heading-color) !important;
         font-size: 1.25rem;
@@ -58,38 +48,28 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text {
-        @include bp.md {
-          display: inherit !important;
-        }
+      .card-text.content {
+        @extend %muted !optional;
 
-        &.content {
-          @extend %muted;
+        p {
+          @extend %text-clip !optional;
 
-          p {
-            @extend %text-clip;
-
-            line-height: 1.5;
-            margin: 0;
-          }
+          line-height: 1.5;
+          margin: 0;
         }
       }
 
       .post-meta {
-        @extend %muted;
+        @extend %muted !optional;
 
         i {
           &:not(:first-child) {
             margin-left: 1.5rem;
-
-            @include bp.md {
-              margin-left: 1.75rem;
-            }
           }
         }
 
         em {
-          @extend %normal-font-style;
+          @extend %normal-font-style !optional;
 
           color: inherit;
         }
@@ -97,7 +77,7 @@
         > div:first-child {
           display: block;
 
-          @extend %text-ellipsis;
+          @extend %text-ellipsis !optional;
         }
       }
     }
@@ -109,31 +89,17 @@
   font-family: Lato, sans-serif;
   justify-content: space-evenly;
 
-  @include bp.lg {
-    font-size: 0.85rem;
-    justify-content: center;
-  }
-
   a:hover {
     text-decoration: none;
   }
 
   .page-item {
-    @include bp.lt(bp.get(lg)) {
-      &:not(:first-child):not(:last-child) {
-        display: none;
-      }
-    }
-
-    @include bp.lg {
-      &:not(:last-child) {
-        margin-right: 0.7rem;
-      }
-    }
-
     .page-link {
       color: var(--btn-patinator-text-color);
       padding: 0 0.6rem;
+      display: -webkit-box;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
       border-radius: 0.5rem;
       border: 0;
       background-color: inherit;
@@ -157,14 +123,68 @@
       cursor: not-allowed;
 
       .page-link {
-        color: rgb(108 117 125 / 57%);
+        color: rgba(108, 117, 125, 0.57);
       }
     }
   } /* .page-item */
+} /* .pagination */
 
-  .page-index {
-    @include bp.lg {
-      display: none;
+/* Tablet */
+@media all and (min-width: 768px) {
+  %img-radius {
+    border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
+  }
+
+  #post-list {
+    .card {
+      .card-body {
+        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
+
+        .card-text {
+          display: inherit !important;
+        }
+
+        .post-meta {
+          i {
+            &:not(:first-child) {
+              margin-left: 1.75rem;
+            }
+          }
+        }
+      }
     }
   }
 }
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 830px) {
+  .pagination {
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Sidebar is visible */
+@media all and (min-width: 831px) {
+  #post-list {
+    margin-top: 2.5rem;
+  }
+
+  .pagination {
+    font-size: 0.85rem;
+    justify-content: center;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+    }
+
+    .page-index {
+      display: none;
+    }
+  } /* .pagination */
+}

_sass/layout/post.scss

@@ -1,15 +1,17 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
+@use '../addon/module';
+@use '../addon/variables';
 
-%-btn-post-nav {
+/**
+ * Post-specific styles
+ */
+
+%btn-post-nav {
   width: 50%;
   position: relative;
   border-color: var(--btn-border-color);
 }
 
-@mixin -dot($pl: 0.25rem, $pr: 0.25rem) {
+@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
   content: '\2022';
   padding-left: $pl;
   padding-right: $pr;
@@ -17,7 +19,7 @@
 
 header {
   .post-desc {
-    @extend %heading;
+    @extend %heading !optional;
 
     font-size: 1.125rem;
     line-height: 1.6;
@@ -25,12 +27,12 @@ header {
 
   .post-meta {
     span + span::before {
-      @include -dot;
+      @include dot;
     }
 
     em,
     time {
-      @extend %text-highlight;
+      @extend %text-highlight !optional;
     }
 
     em {
@@ -46,7 +48,7 @@ header {
 }
 
 .post-tail-wrapper {
-  @extend %text-sm;
+  @extend %text-sm !optional;
 
   margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
@@ -55,20 +57,20 @@ header {
     line-height: 1.2rem;
 
     > a {
-      @extend %text-highlight;
+      @extend %text-highlight !optional;
 
       &:hover {
-        @extend %link-hover;
+        @extend %link-hover !optional;
       }
     }
 
     span:last-child {
-      @extend %text-sm;
+      @extend %text-sm !optional;
     }
   } /* .license-wrapper */
 
   .post-meta a:not(:hover) {
-    @extend %link-underline;
+    @extend %link-underline !optional;
   }
 
   .share-wrapper {
@@ -88,17 +90,17 @@ header {
       i {
         color: var(--btn-share-color);
 
-        @extend %icon-size;
+        @extend %icon-size !optional;
       }
 
       > * {
-        @extend %icon-size;
+        @extend %icon-size !optional;
 
         margin-left: 0.5rem;
 
         &:hover {
           i {
-            @extend %btn-share-hover;
+            @extend %btn-share-hover !optional;
           }
         }
       }
@@ -108,26 +110,15 @@ header {
         border: none;
         line-height: inherit;
 
-        @extend %cursor-pointer;
+        @extend %cursor-pointer !optional;
       }
     } /* .share-icons */
   } /* .share-wrapper */
 }
 
-.post-tail-bottom {
-  @include bp.lte(bp.get(sm)) {
-    flex-wrap: wrap-reverse !important;
-
-    > div:first-child {
-      width: 100%;
-      margin-top: 1rem;
-    }
-  }
-}
-
 .share-mastodon {
   /* See: https://github.com/justinribeiro/share-to-mastodon#properties */
-  --wc-stm-font-family: v.$font-family-base;
+  --wc-stm-font-family: $font-family-base;
   --wc-stm-dialog-background-color: var(--card-bg);
   --wc-stm-form-button-border: 1px solid var(--btn-border-color);
   --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
@@ -143,19 +134,16 @@ header {
 
   .post-tag {
     &:hover {
-      @extend %tag-hover;
+      @extend %link-hover !optional;
+      @extend %tag-hover !optional;
+      @extend %no-bottom-border !optional;
     }
   }
 }
 
 .post-navigation {
-  @include bp.lt(bp.get(lg)) {
-    @include mx.pl-pr(0);
-    @include mx.ml-mr(-0.5rem);
-  }
-
   .btn {
-    @extend %-btn-post-nav;
+    @extend %btn-post-nav !optional;
 
     &:not(:hover) {
       color: var(--link-color);
@@ -168,7 +156,7 @@ header {
     }
 
     &.disabled {
-      @extend %-btn-post-nav;
+      @extend %btn-post-nav !optional;
 
       pointer-events: auto;
       cursor: not-allowed;
@@ -188,12 +176,12 @@ header {
     }
 
     &:first-child {
-      border-radius: v.$radius-lg 0 0 v.$radius-lg;
+      border-radius: variables.$radius-lg 0 0 variables.$radius-lg;
       left: 0.5px;
     }
 
     &:last-child {
-      border-radius: 0 v.$radius-lg v.$radius-lg 0;
+      border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
       right: 0.5px;
     }
   }
@@ -218,50 +206,40 @@ header {
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;
-    margin-top: 4rem;
+    position: relative;
+    top: 2rem;
   }
 
   to {
     opacity: 1;
+    position: relative;
+    top: 0;
   }
 }
 
 @keyframes fade-up {
   from {
     opacity: 0;
-    margin-top: 4rem;
+    position: relative;
+    top: 2rem;
   }
 
   to {
     opacity: 1;
+    position: relative;
+    top: 0;
   }
 }
 
 /* TOC panel */
-
-%top-cover {
-  content: '';
-  display: block;
+#toc-wrapper {
+  border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
-  top: 0;
-  width: 100%;
-  height: 3rem;
-  background: linear-gradient(var(--main-bg) 50%, transparent);
-}
-
-#toc-wrapper {
-  top: 0;
+  top: 4rem;
   transition: top 0.2s ease-in-out;
-  overflow-y: auto;
-  max-height: 100vh;
-  scrollbar-width: none;
-  margin-top: 2rem;
-
-  &:not(.invisible) {
-    -webkit-animation: fade-up 0.8s;
-    animation: fade-up 0.8s;
-  }
+  -webkit-animation: fade-up 0.8s;
+  animation: fade-up 0.8s;
 
   ul {
     list-style: none;
@@ -270,8 +248,12 @@ header {
     padding-left: 0;
 
     li {
+      &:not(:last-child) {
+        margin: 0.4rem 0;
+      }
+
       a {
-        padding: 0.4rem 0 0.4rem 1.25rem;
+        padding: 0.2rem 0 0.2rem 1.25rem;
       }
     }
 
@@ -280,7 +262,7 @@ header {
     .toc-link {
       display: block;
 
-      @extend %text-ellipsis;
+      @extend %text-ellipsis !optional;
 
       &:hover {
         color: var(--toc-highlight);
@@ -299,6 +281,7 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
+        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -308,30 +291,6 @@ header {
       padding-left: 0.75rem;
     }
   }
-
-  @at-root .toc-border-cover {
-    @extend %top-cover;
-
-    margin-bottom: -4rem;
-  }
-
-  &::before {
-    @extend %top-cover;
-  }
-
-  &::after {
-    content: '';
-    position: fixed;
-    bottom: 0;
-    width: 15%;
-    height: 2.25rem;
-    margin-left: -1px;
-    background: linear-gradient(transparent, var(--main-bg) 70%);
-  }
-
-  > * {
-    @extend %panel-border;
-  }
 }
 
 /* --- TOC button, bar and popup in mobile/tablet --- */
@@ -342,27 +301,23 @@ header {
   top: 0;
   z-index: 1;
   margin: 0 -1rem;
-  height: v.$topbar-height;
+  height: variables.$topbar-height;
   background: var(--main-bg);
   border-bottom: 1px solid var(--main-border-color);
   transition: all 0.2s ease-in-out;
 
-  @extend %btn-color;
-
-  @include bp.xl {
-    display: none !important;
-  }
+  @extend %btn-color !optional;
 
   .label {
-    @extend %heading;
+    @extend %heading !optional;
 
-    margin-left: 0.375rem;
+    margin-left: 0.25rem;
     padding: 0 0.75rem;
     color: inherit;
   }
 
   &.invisible {
-    top: -#{v.$topbar-height};
+    top: -(variables.$topbar-height);
     transition: none;
   }
 }
@@ -370,15 +325,11 @@ header {
 #toc-solo-trigger {
   color: var(--text-muted-color);
   border-color: var(--btn-border-color);
-  border-radius: v.$radius-lg;
-
-  @include bp.xl {
-    display: none !important;
-  }
+  border-radius: variables.$radius-lg;
 
   .label {
     font-size: 1rem;
-    font-family: v.$font-family-heading;
+    font-family: variables.$font-family-heading;
   }
 
   &:hover {
@@ -390,7 +341,7 @@ header {
 @mixin slide-in {
   from {
     opacity: 0.7;
-    transform: translateY(-#{v.$topbar-height});
+    transform: translateY(-(variables.$topbar-height));
   }
 
   to {
@@ -406,7 +357,7 @@ header {
   }
 
   100% {
-    transform: translateY(-#{v.$topbar-height});
+    transform: translateY(-(variables.$topbar-height));
     opacity: 0;
   }
 }
@@ -427,22 +378,140 @@ header {
   @include slide-out;
 }
 
+#toc-popup {
+  $slide-in: slide-in 0.3s ease-out;
+  $slide-out: slide-out 0.3s ease-out;
+  $curtain-height: 2rem;
+  $backdrop: blur(5px);
+
+  border-color: var(--toc-popup-border-color);
+  border-width: 1px;
+  border-radius: variables.$radius-lg;
+  color: var(--text-color);
+  background: var(--card-bg);
+  margin-top: variables.$topbar-height;
+  min-width: 20rem;
+  font-size: 1.05rem;
+
+  @media all and (min-width: 576px) {
+    max-width: 32rem;
+  }
+
+  &[open] {
+    -webkit-animation: $slide-in;
+    animation: $slide-in;
+  }
+
+  &[closing] {
+    -webkit-animation: $slide-out;
+    animation: $slide-out;
+  }
+
+  @media all and (min-width: 850px) {
+    left: variables.$sidebar-width;
+  }
+
+  .header {
+    @extend %btn-color !optional;
+
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    background-color: inherit;
+    border-bottom: 1px solid var(--main-border-color);
+
+    .label {
+      font-family: variables.$font-family-heading;
+    }
+  }
+
+  button {
+    > i {
+      font-size: 1.25rem;
+      vertical-align: middle;
+    }
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+      ul,
+      & + li {
+        margin-top: 0.25rem;
+      }
+
+      a {
+        display: flex;
+        line-height: 1.5;
+        padding: 0.375rem 0;
+        padding-right: 1.125rem;
+
+        &.toc-link::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @for $i from 2 through 4 {
+    .node-name--H#{$i} {
+      padding-left: 1.125rem * ($i - 1);
+    }
+  }
+
+  .is-active-link {
+    color: var(--toc-highlight) !important;
+    font-weight: 600;
+  }
+
+  &::-webkit-backdrop {
+    -webkit-backdrop-filter: $backdrop;
+    backdrop-filter: $backdrop;
+  }
+
+  &::backdrop {
+    -webkit-backdrop-filter: $backdrop;
+    backdrop-filter: $backdrop;
+  }
+
+  &::after {
+    display: flex;
+    content: '';
+    position: relative;
+    background: linear-gradient(transparent, var(--card-bg) 70%);
+    height: $curtain-height;
+  }
+
+  #toc-popup-content {
+    overflow: auto;
+    max-height: calc(100vh - 4 * variables.$topbar-height);
+    font-family: variables.$font-family-heading;
+    margin-bottom: -$curtain-height;
+  }
+}
+
 /* --- Related Posts --- */
 
 #related-posts {
   > h3 {
-    @include mx.label(1.1rem, 600);
+    @include module.label(1.1rem, 600);
   }
 
   time {
-    @extend %normal-font-style;
-    @extend %text-xs;
+    @extend %normal-font-style !optional;
+    @extend %text-xs !optional;
 
     color: var(--text-muted-color);
   }
 
   p {
-    @extend %text-ellipsis;
+    @extend %text-ellipsis !optional;
 
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
@@ -454,7 +523,7 @@ header {
 
   .card {
     h4 {
-      @extend %text-clip;
+      @extend %text-clip !optional;
     }
   }
 }
@@ -474,23 +543,47 @@ header {
 }
 
 .share-label {
-  @include mx.label(inherit, 400, inherit);
+  @include module.label(inherit, 400, inherit);
 
   &::after {
     content: ':';
   }
 }
 
-.content > p > img {
-  @include bp.lte(bp.get(md)) {
+@media all and (max-width: 576px) {
+  .post-tail-bottom {
+    flex-wrap: wrap-reverse !important;
+
+    > div:first-child {
+      width: 100%;
+      margin-top: 1rem;
+    }
+  }
+}
+
+@media all and (max-width: 768px) {
+  .content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
 
-h2,
-h3,
-h4 {
-  @include bp.xl {
-    scroll-margin-top: 2rem;
+/* Hide SideBar and TOC */
+@media all and (max-width: 849px) {
+  .post-navigation {
+    @include module.pl-pr(0);
+    @include module.ml-mr(-0.5rem);
+  }
+}
+
+@media all and (min-width: 1200px) {
+  h2,
+  h3,
+  h4 {
+    scroll-margin-top: 2rem;
+  }
+
+  #toc-bar,
+  #toc-solo-trigger {
+    display: none !important;
   }
 }

_sass/layout/tags.scss

@@ -1,4 +1,6 @@
-@use '../abstracts/breakpoints' as bp;
+/*
+  Styles for Tab Tags
+*/
 
 .tag {
   border-radius: 0.7em;
@@ -15,9 +17,3 @@
     font-family: Oswald, sans-serif;
   }
 }
-
-#tags {
-  @include bp.lt(bp.get(lg)) {
-    justify-content: center !important;
-  }
-}

_sass/main.bundle.scss

@@ -1,2 +1,2 @@
-@use 'vendors/bootstrap';
+@use 'dist/bootstrap';
 @use 'main';

_sass/main.scss

@@ -1,4 +1,13 @@
-@forward 'base';
-@forward 'components';
-@forward 'layout';
-@forward 'pages';
+@use 'colors/typography-light';
+@use 'colors/typography-dark';
+@use 'addon/variables';
+@use 'variables-hook';
+@use 'addon/module';
+@use 'addon/syntax';
+@use 'addon/commons';
+@use 'layout/home';
+@use 'layout/post';
+@use 'layout/tags';
+@use 'layout/archives';
+@use 'layout/categories';
+@use 'layout/category-tag';

_sass/pages/_index.scss

@@ -1,7 +0,0 @@
-@forward 'search';
-@forward 'home';
-@forward 'post';
-@forward 'categories';
-@forward 'tags';
-@forward 'archives';
-@forward 'category-tag';

_sass/pages/_search.scss

@@ -1,184 +0,0 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/variables' as v;
-@use '../abstracts/placeholders';
-
-search {
-  display: flex;
-  width: 100%;
-  border-radius: 1rem;
-  border: 1px solid var(--search-border-color);
-  background: var(--main-bg);
-  padding: 0 0.5rem;
-
-  i {
-    z-index: 2;
-    font-size: 0.9rem;
-    color: var(--search-icon-color);
-  }
-
-  @include bp.lt(bp.get(lg)) {
-    display: none;
-  }
-
-  @include bp.lg {
-    max-width: v.$search-max-width;
-  }
-
-  @include bp.xl {
-    margin-right: 4rem;
-  }
-
-  @include bp.xxxl {
-    margin-right: calc(
-      v.$main-content-max-width / 4 - v.$search-max-width - 0.75rem
-    );
-  }
-}
-
-#search-result-wrapper {
-  display: none;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-
-  .content {
-    margin-top: 2rem;
-  }
-
-  @include bp.lt(bp.get(lg)) {
-    width: 100%;
-
-    .content {
-      letter-spacing: 0;
-    }
-  }
-
-  @include bp.lg {
-    max-width: v.$main-content-max-width;
-    justify-content: start !important;
-  }
-}
-
-#search-results {
-  padding-bottom: 3rem;
-
-  @include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) {
-    > div {
-      max-width: 700px;
-    }
-  }
-
-  a {
-    font-size: 1.4rem;
-    line-height: 1.5rem;
-
-    &:hover {
-      @extend %link-hover;
-    }
-
-    @extend %link-color;
-    @extend %no-bottom-border;
-    @extend %heading;
-  }
-
-  > article {
-    width: 100%;
-
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    @include bp.xl {
-      width: 45%;
-
-      &:nth-child(odd) {
-        margin-right: 1.5rem;
-      }
-
-      &:nth-child(even) {
-        margin-left: 1.5rem;
-      }
-
-      &:last-child:nth-child(odd) {
-        position: relative;
-        right: 24.3%;
-      }
-    }
-
-    h2 {
-      line-height: 2.5rem;
-    }
-
-    /* icons */
-    i {
-      color: #818182;
-      margin-right: 0.15rem;
-      font-size: 80%;
-    }
-
-    > p {
-      @extend %text-ellipsis;
-
-      white-space: break-spaces;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-    }
-  }
-}
-
-/* 'Cancel' link */
-#search-cancel {
-  color: var(--link-color);
-  display: none;
-  white-space: nowrap;
-
-  @extend %cursor-pointer;
-}
-
-#search-input {
-  background: center;
-  border: 0;
-  border-radius: 0;
-  padding: 0.18rem 0.3rem;
-  color: var(--text-color);
-  height: auto;
-
-  &:focus {
-    box-shadow: none;
-  }
-
-  @include bp.xl {
-    transition: all 0.3s ease-in-out;
-  }
-}
-
-#search-hints {
-  padding: 0 1rem;
-
-  @include bp.lg {
-    display: none;
-  }
-
-  h4 {
-    margin-bottom: 1.5rem;
-  }
-
-  .post-tag {
-    display: inline-block;
-    line-height: 1rem;
-    font-size: 1rem;
-    background: var(--search-tag-bg);
-    border: none;
-    padding: 0.5rem;
-    margin: 0 1.25rem 1rem 0;
-
-    &::before {
-      content: '#';
-      color: var(--text-muted-color);
-      padding-right: 0.2rem;
-    }
-
-    @extend %link-color;
-  }
-}

_sass/themes/_dark.scss

@@ -1,303 +0,0 @@
-@mixin styles {
-  color-scheme: dark;
-
-  /* Framework color */
-  --main-bg: rgb(27 27 30);
-  --mask-bg: rgb(68 69 70);
-  --main-border-color: rgb(44 45 45);
-
-  /* Common color */
-  --text-color: rgb(175 176 177);
-  --text-muted-color: #868686;
-  --text-muted-highlight-color: #aeaeae;
-  --heading-color: #cccccc;
-  --label-color: #a7a7a7;
-  --blockquote-border-color: rgb(66 66 66);
-  --blockquote-text-color: #868686;
-  --link-color: rgb(138 180 248);
-  --link-underline-color: rgb(82 108 150);
-  --button-bg: #1e1e1e;
-  --btn-border-color: #2e2f31;
-  --btn-backtotop-color: var(--text-color);
-  --btn-backtotop-border-color: #212122;
-  --card-header-bg: #292929;
-  --checkbox-color: rgb(118 120 121);
-  --checkbox-checked-color: var(--link-color);
-  --img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
-  --shimmer-bg: linear-gradient(
-    90deg,
-    rgb(255 255 255 / 0%) 0%,
-    rgb(58 55 55 / 40%) 50%,
-    rgb(255 255 255 / 0%) 100%
-  );
-
-  /* Sidebar */
-  --site-title-color: #717070;
-  --site-subtitle-color: #868686;
-  --sidebar-bg: #1e1e1e;
-  --sidebar-border-color: #292929;
-  --sidebar-muted-color: #868686;
-  --sidebar-active-color: rgb(255 255 255 / 95%);
-  --sidebar-hover-bg: #262626;
-  --sidebar-btn-bg: #232328;
-  --sidebar-btn-color: #787878;
-  --avatar-border-color: rgb(206 206 206 / 90%);
-
-  /* Topbar */
-  --topbar-bg: rgb(27 27 30 / 64%);
-  --topbar-text-color: var(--text-color);
-  --search-border-color: rgb(55 55 55);
-  --search-icon-color: rgb(100 102 105);
-  --input-focus-border-color: rgb(112 114 115);
-
-  /* Home page */
-  --post-list-text-color: rgb(175 176 177);
-  --btn-patinator-text-color: var(--text-color);
-  --btn-paginator-hover-color: #2e2e2e;
-
-  /* Posts */
-  --toc-highlight: rgb(116 178 243);
-  --toc-popup-border-color: #373737;
-  --tag-hover: rgb(43 56 62);
-  --tb-odd-bg: #252526; /* odd rows of the posts' table */
-  --tb-even-bg: rgb(31 31 34); /* even rows of the posts' table */
-  --tb-border-color: var(--tb-odd-bg);
-  --footnote-target-bg: rgb(63 81 181);
-  --btn-share-color: #6c757d;
-  --btn-share-hover-color: #bfc1ca;
-  --card-bg: #1e1e1e;
-  --card-hover-bg: #464d51;
-  --card-shadow: rgb(21 21 21 / 72%) 0 6px 18px 0,
-    rgb(137 135 135 / 24%) 0 0 0 1px;
-  --kbd-wrap-color: #6a6a6a;
-  --kbd-text-color: #d3d3d3;
-  --kbd-bg-color: #242424;
-  --prompt-text-color: rgb(216 212 212 / 75%);
-  --prompt-tip-bg: rgb(22 60 36 / 64%);
-  --prompt-tip-icon-color: rgb(15 164 15 / 81%);
-  --prompt-info-bg: rgb(7 59 104 / 80%);
-  --prompt-info-icon-color: #0075d1;
-  --prompt-warning-bg: rgb(90 69 3 / 88%);
-  --prompt-warning-icon-color: rgb(255 165 0 / 80%);
-  --prompt-danger-bg: rgb(86 28 8 / 80%);
-  --prompt-danger-icon-color: #cd0202;
-
-  /* Tags */
-  --tag-border: rgb(59 79 88);
-  --tag-shadow: rgb(32 33 33);
-  --dash-color: rgb(63 65 68);
-  --search-tag-bg: #292828;
-
-  /* Categories */
-  --categories-border: rgb(64 66 69 / 50%);
-  --categories-hover-bg: rgb(73 75 76);
-  --categories-icon-hover-color: white;
-
-  /* Archive */
-  --timeline-node-bg: rgb(150 152 156);
-  --timeline-color: rgb(63 65 68);
-  --timeline-year-dot-color: var(--timeline-color);
-
-  /* Code highlight colors */
-  --language-border-color: #2d2d2d;
-  --highlight-bg-color: #151515;
-  --highlighter-rouge-color: #c9def1;
-  --highlight-lineno-color: #808080;
-  --inline-code-bg: rgb(255 255 255 / 5%);
-  --code-color: #b0b0b0;
-  --code-header-text-color: #6a6a6a;
-  --code-header-muted-color: #353535;
-  --code-header-icon-color: #565656;
-  --clipboard-checked-color: #2bcc2b;
-  --filepath-text-color: #cacaca;
-
-  .light {
-    display: none;
-  }
-
-  /* Categories */
-  .categories.card,
-  .list-group-item {
-    background-color: var(--card-bg);
-  }
-
-  .categories {
-    .card-header {
-      background-color: var(--card-header-bg);
-    }
-
-    .list-group-item {
-      border-left: none;
-      border-right: none;
-      padding-left: 2rem;
-      border-color: var(--categories-border);
-
-      &:last-child {
-        border-bottom-color: var(--card-bg);
-      }
-    }
-  }
-
-  #archives li:nth-child(odd) {
-    background-image: linear-gradient(
-      to left,
-      rgb(26 26 30),
-      rgb(39 39 45),
-      rgb(39 39 45),
-      rgb(39 39 45),
-      rgb(26 26 30)
-    );
-  }
-
-  /* stylelint-disable-next-line selector-id-pattern */
-  #disqus_thread {
-    color-scheme: none;
-  }
-
-  /* --- Syntax highlight theme from `rougify style base16.dark` --- */
-
-  .highlight .gp {
-    color: #87939d;
-  }
-
-  .highlight table td {
-    padding: 5px;
-  }
-
-  .highlight table pre {
-    margin: 0;
-  }
-
-  .highlight,
-  .highlight .w {
-    color: #d0d0d0;
-    background-color: #151515;
-  }
-
-  .highlight .err {
-    color: #151515;
-    background-color: #ac4142;
-  }
-
-  .highlight .c,
-  .highlight .ch,
-  .highlight .cd,
-  .highlight .cm,
-  .highlight .cpf,
-  .highlight .c1,
-  .highlight .cs {
-    color: #848484;
-  }
-
-  .highlight .cp {
-    color: #f4bf75;
-  }
-
-  .highlight .nt {
-    color: #f4bf75;
-  }
-
-  .highlight .o,
-  .highlight .ow {
-    color: #d0d0d0;
-  }
-
-  .highlight .p,
-  .highlight .pi {
-    color: #d0d0d0;
-  }
-
-  .highlight .gi {
-    color: #90a959;
-  }
-
-  .highlight .gd {
-    color: #f08a8b;
-    background-color: #320000;
-  }
-
-  .highlight .gh {
-    color: #6a9fb5;
-    background-color: #151515;
-    font-weight: bold;
-  }
-
-  .highlight .k,
-  .highlight .kn,
-  .highlight .kp,
-  .highlight .kr,
-  .highlight .kv {
-    color: #aa759f;
-  }
-
-  .highlight .kc {
-    color: #d28445;
-  }
-
-  .highlight .kt {
-    color: #d28445;
-  }
-
-  .highlight .kd {
-    color: #d28445;
-  }
-
-  .highlight .s,
-  .highlight .sb,
-  .highlight .sc,
-  .highlight .dl,
-  .highlight .sd,
-  .highlight .s2,
-  .highlight .sh,
-  .highlight .sx,
-  .highlight .s1 {
-    color: #90a959;
-  }
-
-  .highlight .sa {
-    color: #aa759f;
-  }
-
-  .highlight .sr {
-    color: #75b5aa;
-  }
-
-  .highlight .si {
-    color: #b76d45;
-  }
-
-  .highlight .se {
-    color: #b76d45;
-  }
-
-  .highlight .nn {
-    color: #f4bf75;
-  }
-
-  .highlight .nc {
-    color: #f4bf75;
-  }
-
-  .highlight .no {
-    color: #f4bf75;
-  }
-
-  .highlight .na {
-    color: #6a9fb5;
-  }
-
-  .highlight .m,
-  .highlight .mb,
-  .highlight .mf,
-  .highlight .mh,
-  .highlight .mi,
-  .highlight .il,
-  .highlight .mo,
-  .highlight .mx {
-    color: #90a959;
-  }
-
-  .highlight .ss {
-    color: #90a959;
-  }
-}

_sass/themes/_light.scss

@@ -1,309 +0,0 @@
-@mixin styles {
-  /* Framework color */
-  --main-bg: white;
-  --mask-bg: #c1c3c5;
-  --main-border-color: #f3f3f3;
-
-  /* Common color */
-  --text-color: #34343c;
-  --text-muted-color: #757575;
-  --text-muted-highlight-color: inherit;
-  --heading-color: #2a2a2a;
-  --label-color: #585858;
-  --blockquote-border-color: #eeeeee;
-  --blockquote-text-color: #757575;
-  --link-color: #0056b2;
-  --link-underline-color: #dee2e6;
-  --button-bg: #ffffff;
-  --btn-border-color: #e9ecef;
-  --btn-backtotop-color: #686868;
-  --btn-backtotop-border-color: #f1f1f1;
-  --checkbox-color: #c5c5c5;
-  --checkbox-checked-color: #07a8f7;
-  --img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(239 239 239) 100%);
-  --shimmer-bg: linear-gradient(
-    90deg,
-    rgb(250 250 250 / 0%) 0%,
-    rgb(232 230 230 / 100%) 50%,
-    rgb(250 250 250 / 0%) 100%
-  );
-
-  /* Sidebar */
-  --site-title-color: rgb(113 113 113);
-  --site-subtitle-color: #717171;
-  --sidebar-bg: #f6f8fa;
-  --sidebar-border-color: #efefef;
-  --sidebar-muted-color: #545454;
-  --sidebar-active-color: #1d1d1d;
-  --sidebar-hover-bg: rgb(223 233 241 / 64%);
-  --sidebar-btn-bg: white;
-  --sidebar-btn-color: #8e8e8e;
-  --avatar-border-color: white;
-
-  /* Topbar */
-  --topbar-bg: rgb(255 255 255 / 70%);
-  --topbar-text-color: rgb(78 78 78);
-  --search-border-color: rgb(240 240 240);
-  --search-icon-color: #c2c6cc;
-  --input-focus-border-color: #b8b8b8;
-
-  /* Home page */
-  --post-list-text-color: dimgray;
-  --btn-patinator-text-color: #555555;
-  --btn-paginator-hover-color: var(--sidebar-bg);
-
-  /* Posts */
-  --toc-highlight: #0550ae;
-  --toc-popup-border-color: lightgray;
-  --btn-share-color: gray;
-  --btn-share-hover-color: #0d6efd;
-  --card-bg: white;
-  --card-hover-bg: #e2e2e2;
-  --card-shadow: rgb(104 104 104 / 5%) 0 2px 6px 0,
-    rgb(211 209 209 / 15%) 0 0 0 1px;
-  --footnote-target-bg: lightcyan;
-  --tb-odd-bg: #fbfcfd;
-  --tb-border-color: #eaeaea;
-  --dash-color: silver;
-  --kbd-wrap-color: #bdbdbd;
-  --kbd-text-color: var(--text-color);
-  --kbd-bg-color: white;
-  --prompt-text-color: rgb(46 46 46 / 77%);
-  --prompt-tip-bg: rgb(123 247 144 / 20%);
-  --prompt-tip-icon-color: #03b303;
-  --prompt-info-bg: #e1f5fe;
-  --prompt-info-icon-color: #0070cb;
-  --prompt-warning-bg: rgb(255 243 205);
-  --prompt-warning-icon-color: #ef9c03;
-  --prompt-danger-bg: rgb(248 215 218 / 56%);
-  --prompt-danger-icon-color: #df3c30;
-
-  /* Tags */
-  --tag-border: #dee2e6;
-  --tag-shadow: var(--btn-border-color);
-  --tag-hover: rgb(222 226 230);
-  --search-tag-bg: #f8f9fa;
-
-  /* Categories */
-  --categories-border: rgb(0 0 0 / 12.5%);
-  --categories-hover-bg: var(--btn-border-color);
-  --categories-icon-hover-color: darkslategray;
-
-  /* Archive */
-  --timeline-color: rgb(0 0 0 / 7.5%);
-  --timeline-node-bg: #c2c6cc;
-  --timeline-year-dot-color: #ffffff;
-
-  /* --- Custom code light mode colors --- */
-  --language-border-color: #ececec;
-  --highlight-bg-color: #f6f8fa;
-  --highlighter-rouge-color: #3f596f;
-  --highlight-lineno-color: #9e9e9e;
-  --inline-code-bg: rgb(25 25 28 / 5%);
-  --code-color: #3a3a3a;
-  --code-header-text-color: #a3a3a3;
-  --code-header-muted-color: #e5e5e5;
-  --code-header-icon-color: #c9c8c8;
-  --clipboard-checked-color: #43c743;
-
-  [class^='prompt-'] {
-    --link-underline-color: rgb(219 216 216);
-  }
-
-  .dark {
-    display: none;
-  }
-
-  /* --- Syntax highlight theme from `rougify style github` --- */
-
-  .highlight table td {
-    padding: 5px;
-  }
-
-  .highlight table pre {
-    margin: 0;
-  }
-
-  .highlight,
-  .highlight .w {
-    color: #24292f;
-    background-color: #f6f8fa;
-  }
-
-  .highlight .k,
-  .highlight .kd,
-  .highlight .kn,
-  .highlight .kp,
-  .highlight .kr,
-  .highlight .kt,
-  .highlight .kv {
-    color: #cf222e;
-  }
-
-  .highlight .gr {
-    color: #f6f8fa;
-  }
-
-  .highlight .gd {
-    color: #82071e;
-    background-color: #ffebe9;
-  }
-
-  .highlight .nb {
-    color: #953800;
-  }
-
-  .highlight .nc {
-    color: #953800;
-  }
-
-  .highlight .no {
-    color: #953800;
-  }
-
-  .highlight .nn {
-    color: #953800;
-  }
-
-  .highlight .sr {
-    color: #116329;
-  }
-
-  .highlight .na {
-    color: #116329;
-  }
-
-  .highlight .nt {
-    color: #116329;
-  }
-
-  .highlight .gi {
-    color: #116329;
-    background-color: #dafbe1;
-  }
-
-  .highlight .kc {
-    color: #0550ae;
-  }
-
-  .highlight .l,
-  .highlight .ld,
-  .highlight .m,
-  .highlight .mb,
-  .highlight .mf,
-  .highlight .mh,
-  .highlight .mi,
-  .highlight .il,
-  .highlight .mo,
-  .highlight .mx {
-    color: #0550ae;
-  }
-
-  .highlight .sb {
-    color: #0550ae;
-  }
-
-  .highlight .bp {
-    color: #0550ae;
-  }
-
-  .highlight .ne {
-    color: #0550ae;
-  }
-
-  .highlight .nl {
-    color: #0550ae;
-  }
-
-  .highlight .py {
-    color: #0550ae;
-  }
-
-  .highlight .nv,
-  .highlight .vc,
-  .highlight .vg,
-  .highlight .vi,
-  .highlight .vm {
-    color: #0550ae;
-  }
-
-  .highlight .o,
-  .highlight .ow {
-    color: #0550ae;
-  }
-
-  .highlight .gh {
-    color: #0550ae;
-    font-weight: bold;
-  }
-
-  .highlight .gu {
-    color: #0550ae;
-    font-weight: bold;
-  }
-
-  .highlight .s,
-  .highlight .sa,
-  .highlight .sc,
-  .highlight .dl,
-  .highlight .sd,
-  .highlight .s2,
-  .highlight .se,
-  .highlight .sh,
-  .highlight .sx,
-  .highlight .s1,
-  .highlight .ss {
-    color: #0a3069;
-  }
-
-  .highlight .nd {
-    color: #8250df;
-  }
-
-  .highlight .nf,
-  .highlight .fm {
-    color: #8250df;
-  }
-
-  .highlight .err {
-    color: #f6f8fa;
-    background-color: #82071e;
-  }
-
-  .highlight .c,
-  .highlight .ch,
-  .highlight .cd,
-  .highlight .cm,
-  .highlight .cp,
-  .highlight .cpf,
-  .highlight .c1,
-  .highlight .cs {
-    color: #68717a;
-  }
-
-  .highlight .gl {
-    color: #68717a;
-  }
-
-  .highlight .gt {
-    color: #68717a;
-  }
-
-  .highlight .ni {
-    color: #24292f;
-  }
-
-  .highlight .si {
-    color: #24292f;
-  }
-
-  .highlight .ge {
-    color: #24292f;
-    font-style: italic;
-  }
-
-  .highlight .gs {
-    color: #24292f;
-    font-weight: bold;
-  }
-}

_sass/variables-hook.scss

@@ -0,0 +1,3 @@
+/*
+  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
+*/

assets/404.html

@@ -2,8 +2,13 @@
 layout: page
 title: "404: Page not found"
 permalink: /404.html
+
+redirect_from:
+  - /norobots/
+  - /assets/
+  - /posts/
 ---
 
 {% include lang.html %}
 
-<p class="lead">{{ site.data.locales[lang].not_found.statement }}</p>
+<p class="lead">{{ site.data.locales[lang].not_found.statement }}</p>

assets/css/jekyll-theme-chirpy.scss

@@ -1,7 +1,6 @@
 ---
 ---
 
-/* prettier-ignore */
 @use 'main
 {%- if jekyll.environment == 'production' -%}
   .bundle

assets/feed.xml

@@ -45,7 +45,7 @@ permalink: /feed.xml
     {% endfor %}
   {% endif %}
 
-  <summary>{% include post-summary.html max_length=400 %}</summary>
+  <summary>{% include post-description.html max_length=400 %}</summary>
 
   </entry>
 {% endfor %}

assets/img/favicons/browserconfig.xml

@@ -0,0 +1,13 @@
+---
+layout: compress
+---
+
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="{{ '/assets/img/favicons/mstile-150x150.png' | relative_url }}" />
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>