diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000000..39c428df4ea
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,29 @@
+{
+  "name": "Jekyll",
+  "image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye",
+  "onCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
+  "postCreateCommand": "bash .devcontainer/post-create.sh",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "terminal.integrated.defaultProfile.linux": "zsh"
+      },
+      "extensions": [
+        // Liquid tags auto-complete
+        "killalau.vscode-liquid-snippets",
+        // Liquid syntax highlighting and formatting
+        "Shopify.theme-check-vscode",
+        // Shell
+        "timonwong.shellcheck",
+        "mkhl.shfmt",
+        // Common formatter
+        "EditorConfig.EditorConfig",
+        "esbenp.prettier-vscode",
+        "stylelint.vscode-stylelint",
+        "yzhang.markdown-all-in-one",
+        // Git
+        "mhutchie.git-graph"
+      ]
+    }
+  }
+}
diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh
new file mode 100644
index 00000000000..a4bc28257f8
--- /dev/null
+++ b/.devcontainer/post-create.sh
@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+if [ -f package.json ]; then
+  bash -i -c "nvm install --lts && nvm install-latest-npm"
+  npm i
+  npm run build
+fi
+
+# Install dependencies for shfmt extension
+curl -sS https://webi.sh/shfmt | sh &>/dev/null
+
+# Add OMZ plugins
+git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting
+git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
+sed -i -E "s/^(plugins=\()(git)(\))/\1\2 zsh-syntax-highlighting zsh-autosuggestions\3/" ~/.zshrc
+
+# Avoid git log use less
+echo -e "\nunset LESS" >>~/.zshrc
diff --git a/.github/DISCUSSION_TEMPLATE/general.yml b/.github/DISCUSSION_TEMPLATE/general.yml
index 4e879f95049..18d0f8585fb 100644
--- a/.github/DISCUSSION_TEMPLATE/general.yml
+++ b/.github/DISCUSSION_TEMPLATE/general.yml
@@ -9,15 +9,6 @@ body:
             [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
           required: true
 
-  - type: dropdown
-    attributes:
-      label: What is the topic?
-      options:
-        - Sharing tips and tricks
-        - Just chatting
-    validations:
-      required: true
-
   - type: textarea
     attributes:
       label: Description
diff --git a/.github/DISCUSSION_TEMPLATE/ideas.yml b/.github/DISCUSSION_TEMPLATE/ideas.yml
new file mode 100644
index 00000000000..e4c987d794e
--- /dev/null
+++ b/.github/DISCUSSION_TEMPLATE/ideas.yml
@@ -0,0 +1,7 @@
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index f22921b7049..fed8764ebb8 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,2 +1 @@
 ko_fi: coteschung
-custom: https://sponsor.cotes.page
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index bec10467f41..a51f37eb0eb 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -2,18 +2,16 @@ version: 2
 updates:
   - package-ecosystem: "bundler"
     directory: "/"
-    versioning-strategy: increase
-    groups:
-      bundler:
-        dependency-type: "production"
     schedule:
       interval: "weekly"
   - package-ecosystem: "npm"
     directory: "/"
     versioning-strategy: increase
     groups:
-      npm:
-        dependency-type: "development"
+      prod-deps:
+        dependency-type: production
+      dev-deps:
+        dependency-type: development
     schedule:
       interval: "weekly"
   - package-ecosystem: "github-actions"
@@ -24,3 +22,7 @@ updates:
           - "major"
     schedule:
       interval: "weekly"
+  - package-ecosystem: "devcontainers"
+    directory: "/"
+    schedule:
+      interval: weekly
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index 2e239a45073..cd67b6d2874 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -1,17 +1,39 @@
 name: CD
+
 on:
   push:
-    tags:
-      - "v[0-9]+.[0-9]+.[0-9]+"
-    branches:
-      - docs
+    branches: [production]
+    tags-ignore: ["**"]
 
 jobs:
-  launch:
+  release:
+    if: ${{ ! startsWith(github.event.head_commit.message, 'chore(release)') }}
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - run: |
-          curl -X POST -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
-            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
-            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
+      - uses: actions/checkout@v5
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.3
+          bundler-cache: true
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+
+      - run: npm install
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GEM_HOST_API_KEY: ${{ secrets.GEM_HOST_API_KEY }}
+
+  publish:
+    needs: release
+    uses: ./.github/workflows/publish.yml
+    secrets:
+      GH_PAT: ${{ secrets.GH_PAT }}
+      BUILDER: ${{ secrets.BUILDER }}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c7b1f5a692a..118fc715a92 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,19 +1,25 @@
-name: "CI"
+name: CI
+
 on:
   push:
-    branches-ignore:
-      - "production"
-      - "docs"
+    branches:
+      - master
+      - "hotfix/*"
     paths-ignore:
       - ".github/**"
       - "!.github/workflows/ci.yml"
-      - ".gitignore"
+      - .gitignore
       - "docs/**"
-      - "README.md"
-      - "LICENSE"
+      - README.md
+      - LICENSE
   pull_request:
-    paths:
-      - "**"
+    paths-ignore:
+      - ".github/**"
+      - "!.github/workflows/ci.yml"
+      - .gitignore
+      - "docs/**"
+      - README.md
+      - LICENSE
 
 jobs:
   build:
@@ -21,11 +27,11 @@ jobs:
 
     strategy:
       matrix:
-        ruby: ["3.0", "3.1", "3.2"]
+        ruby: ["3.1", "3.2", "3.3"]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0 # for posts's lastmod
 
@@ -36,10 +42,12 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
 
       - name: Build Assets
         run: npm i && npm run build
 
       - name: Test Site
-        run: bash tools/test
+        run: bash tools/test.sh
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index b09590d4830..e460e49aa67 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -2,6 +2,7 @@ name: "CodeQL"
 
 on:
   push:
+    branches: ["master"]
     paths: ["_javascript/**/*.js"]
   pull_request:
     paths: ["_javascript/**/*.js"]
@@ -23,11 +24,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: "${{ matrix.language }}"
           config-file: .github/codeql/codeql-config.yml
@@ -35,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@v3
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: "/language:${{ matrix.language }}"
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
index d79814a2883..ef14388bc52 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -1,11 +1,15 @@
 name: Lint Commit Messages
-on: pull_request
+
+on:
+  push:
+    branches:
+      - master
+      - "hotfix/*"
+  pull_request:
 
 jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v5
+      - uses: actions/checkout@v5
+      - uses: wagoid/commitlint-github-action@v6
diff --git a/.github/workflows/lint-js.yml b/.github/workflows/lint-js.yml
new file mode 100644
index 00000000000..205f4790004
--- /dev/null
+++ b/.github/workflows/lint-js.yml
@@ -0,0 +1,30 @@
+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@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Lint JS
+        run: npm run lint:js
diff --git a/.github/workflows/lint-scss.yml b/.github/workflows/lint-scss.yml
new file mode 100644
index 00000000000..48d8a7263b7
--- /dev/null
+++ b/.github/workflows/lint-scss.yml
@@ -0,0 +1,26 @@
+name: Lint SCSS
+
+on:
+  push:
+    paths:
+      - "_sass/**/*.scss"
+  pull_request:
+    paths:
+      - "_sass/**/*.scss"
+
+jobs:
+  lint-scss:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Lint SCSS
+        run: npm run lint:scss
diff --git a/.github/workflows/pr-filter.yml b/.github/workflows/pr-filter.yml
new file mode 100644
index 00000000000..ee3f09db24b
--- /dev/null
+++ b/.github/workflows/pr-filter.yml
@@ -0,0 +1,25 @@
+name: PR Filter
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+jobs:
+  check-template:
+    if: github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v5
+
+      - name: Check PR Content
+        id: intercept
+        uses: actions/github-script@v8
+        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 });
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 00000000000..b0f9713f2ef
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,23 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - docs
+  workflow_call:
+    secrets:
+      GH_PAT:
+        required: true
+      BUILDER:
+        required: true
+  workflow_dispatch:
+
+jobs:
+  launch:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          curl -X POST -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
+            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
diff --git a/.github/workflows/scripts/pr-filter.js b/.github/workflows/scripts/pr-filter.js
new file mode 100644
index 00000000000..52e8d526a1b
--- /dev/null
+++ b/.github/workflows/scripts/pr-filter.js
@@ -0,0 +1,36 @@
+function hasTypes(markdown) {
+  return /## Type of change/.test(markdown) && /-\s\[x\]/i.test(markdown);
+}
+
+function hasDescription(markdown) {
+  return (
+    /## Description/.test(markdown) &&
+    !/## Description\s*\n\s*(##|\s*$)/.test(markdown)
+  );
+}
+
+export default async ({ github, context, core }) => {
+  const pr = context.payload.pull_request;
+  const body = pr.body === null ? '' : pr.body;
+  const markdown = body.replace(/<!--[\s\S]*?-->/g, '');
+  const action = context.payload.action;
+
+  const isValid =
+    markdown !== '' && hasTypes(markdown) && hasDescription(markdown);
+
+  if (!isValid) {
+    await github.rest.pulls.update({
+      ...context.repo,
+      pull_number: pr.number,
+      state: 'closed'
+    });
+
+    await github.rest.issues.createComment({
+      ...context.repo,
+      issue_number: pr.number,
+      body: `Oops, it seems you've ${action} an invalid pull request. No worries, we'll close it for you.`
+    });
+
+    core.setFailed('PR content does not meet template requirements.');
+  }
+};
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
index bcf425ae604..1c9913f54e9 100644
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -9,7 +9,7 @@ permissions:
   pull-requests: write
 
 env:
-  STALE_LABEL: stale
+  STALE_LABEL: inactive
   EXEMPT_LABELS: "pending,planning,in progress"
   MESSAGE: >
     This conversation has been automatically marked as stale because it has not had recent activity.
@@ -20,7 +20,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         with:
           # 60 days before marking issues/PRs stale
           days-before-close: -1 # does not close automatically
diff --git a/.github/workflows/pages-deploy.yml.hook b/.github/workflows/starter/pages-deploy.yml
similarity index 96%
rename from .github/workflows/pages-deploy.yml.hook
rename to .github/workflows/starter/pages-deploy.yml
index c33b2a6b889..cc28f99fd25 100644
--- a/.github/workflows/pages-deploy.yml.hook
+++ b/.github/workflows/starter/pages-deploy.yml
@@ -42,7 +42,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2
+          ruby-version: 3.3
           bundler-cache: true
 
       - name: Build site
@@ -53,7 +53,7 @@ jobs:
       - name: Test site
         run: |
           bundle exec htmlproofer _site \
-            \-\-disable-external=true \
+            \-\-disable-external \
             \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml
deleted file mode 100644
index f7aa54db344..00000000000
--- a/.github/workflows/style-lint.yml
+++ /dev/null
@@ -1,25 +0,0 @@
-name: "Style Lint"
-
-on:
-  push:
-    branches-ignore:
-      - "production"
-      - "docs"
-    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
-      - run: npm i
-      - run: npm test
diff --git a/.gitignore b/.gitignore
index cee9e1210f5..7dd7cefd964 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ Gemfile.lock
 
 # Jekyll cache
 .jekyll-cache
+.jekyll-metadata
 _site
 
 # RubyGems
@@ -16,6 +17,11 @@ package-lock.json
 
 # IDE configurations
 .idea
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+!.vscode/tasks.json
 
 # Misc
+_sass/vendors
 assets/js/dist
diff --git a/.husky/commit-msg b/.husky/commit-msg
old mode 100755
new mode 100644
index 7f23494bf04..0a4b97de53a
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ${1}
+npx --no -- commitlint --edit $1
diff --git a/.markdownlint.json b/.markdownlint.json
new file mode 100644
index 00000000000..831991edaef
--- /dev/null
+++ b/.markdownlint.json
@@ -0,0 +1,8 @@
+{
+  "commands-show-output": false,
+  "blanks-around-fences": false,
+  "line-length": false,
+  "no-inline-html": {
+    "allowed_elements": ["kbd", "sub"]
+  }
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 00000000000..c0c1b95a587
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,29 @@
+{
+  "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"
+  }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 6927cd1106d..082bc94c026 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,12 +1,3 @@
 {
-  "recommendations": [
-    // Liquid tags auto-complete
-    "killalau.vscode-liquid-snippets",
-    // Liquid syntax highlighting and formatting
-    "Shopify.theme-check-vscode",
-    // Common formatter
-    "esbenp.prettier-vscode",
-    "foxundermoon.shell-format",
-    "stylelint.vscode-stylelint"
-  ]
+  "recommendations": ["ms-vscode-remote.remote-containers"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4fcded4583b..5e8a04f392e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,23 +2,29 @@
   // Prettier
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "prettier.trailingComma": "none",
   // Shopify Liquid
   "files.associations": {
     "*.html": "liquid"
   },
+  "[markdown]": {
+    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
+  },
   // Formatter
   "[html][liquid]": {
     "editor.defaultFormatter": "Shopify.theme-check-vscode"
   },
   "[shellscript]": {
-    "editor.defaultFormatter": "foxundermoon.shell-format"
+    "editor.defaultFormatter": "mkhl.shfmt"
   },
   // Disable vscode built-in stylelint
   "css.validate": false,
   "scss.validate": false,
   "less.validate": false,
   // Stylint extension settings
-  "stylelint.snippet": ["css", "less", "postcss", "scss"],
-  "stylelint.validate": ["css", "less", "postcss", "scss"]
+  "stylelint.snippet": ["css", "scss"],
+  "stylelint.validate": ["css", "scss"],
+  // Run tasks in macOS
+  "terminal.integrated.profiles.osx": {
+    "zsh": { "path": "/bin/zsh", "args": ["-l", "-i"] }
+  }
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000000..99ed5c5b749
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,64 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Run Jekyll Server",
+      "type": "shell",
+      "command": "./tools/run.sh",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "detail": "Runs the Jekyll server with live reload."
+    },
+    {
+      "label": "Build Jekyll Site",
+      "type": "shell",
+      "command": "./tools/test.sh",
+      "group": {
+        "kind": "build"
+      },
+      "problemMatcher": [],
+      "detail": "Build the Jekyll site for production."
+    },
+    {
+      "label": "Build JS (watch)",
+      "type": "shell",
+      "command": "npm run watch:js",
+      "group": {
+        "kind": "build"
+      },
+      "problemMatcher": [],
+      "detail": "Build JS files in watch mode."
+    },
+    {
+      "label": "Build CSS",
+      "type": "shell",
+      "command": "npm run build:css",
+      "group": {
+        "kind": "build"
+      },
+      "problemMatcher": [],
+      "detail": "Build CSS files."
+    },
+    {
+      "label": "Build JS & CSS",
+      "type": "shell",
+      "command": "npm run build",
+      "group": {
+        "kind": "build"
+      },
+      "problemMatcher": [],
+      "detail": "Build JS & CSS for production."
+    },
+    {
+      "label": "Run Jekyll Server + Build JS (watch)",
+      "dependsOn": ["Run Jekyll Server", "Build JS (watch)"],
+      "group": {
+        "kind": "build"
+      },
+      "detail": "Runs both the Jekyll server with live reload and build JS files in watch mode."
+    }
+  ]
+}
diff --git a/Gemfile b/Gemfile
index 043b28eec7a..e5415748ad5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -4,20 +4,11 @@ source "https://rubygems.org"
 
 gemspec
 
-group :test do
-  gem "html-proofer", "~> 4.4"
-end
+gem "html-proofer", "~> 5.0", group: :test
 
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
 platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"
 end
 
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+gem "wdm", "~> 0.2.0", :platforms => [:mingw, :x64_mingw, :mswin]
diff --git a/README.md b/README.md
index 0e074cf8fc6..7e57b2a52e2 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,16 @@
+<!-- markdownlint-disable-next-line -->
 <div align="center">
 
+  <!-- markdownlint-disable-next-line -->
   # Chirpy Jekyll Theme
 
   A minimal, responsive, and feature-rich Jekyll theme for technical writing.
 
-  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)][gem]&nbsp;
-  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg?branch=master&event=push)][ci]&nbsp;
-  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)][codacy]&nbsp;
-  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)][license]&nbsp;
-  [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
+  [![CI](https://img.shields.io/github/actions/workflow/status/cotes2020/jekyll-theme-chirpy/ci.yml?logo=github)][ci]&nbsp;
+  [![Codacy Badge](https://img.shields.io/codacy/grade/4e556876a3c54d5e8f2d2857c4f43894?logo=codacy)][codacy]&nbsp;
+  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy?color=goldenrod)][license]&nbsp;
+  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?&logo=RubyGems&logoColor=ghostwhite&label=gem&color=orange)][gem]&nbsp;
+  [![Open in Dev Containers](https://img.shields.io/badge/Dev_Containers-Open-deepskyblue?logo=linuxcontainers)][open-container]
 
   [**Live Demo** →][demo]
 
@@ -18,7 +20,7 @@
 
 ## Features
 
-- Dark / Light Theme Mode
+- Dark Theme
 - Localized UI language
 - Pinned Posts on Home Page
 - Hierarchical Categories
@@ -28,13 +30,13 @@
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagrams & Flowcharts
-- Dark / Light Mode Images
-- Embed Videos
-- Disqus / Giscus / Utterances Comments
+- Dark Mode Images
+- Embed Media
+- Comment Systems
 - Built-in Search
 - Atom Feeds
 - PWA
-- Google Analytics / GoatCounter
+- Web Analytics
 - SEO & Performance Optimization
 
 ## Documentation
@@ -54,7 +56,7 @@ For details, see the "[Contributing Guidelines][contribute-guide]".
 Thanks to [all the contributors][contributors] involved in the development of the project!
 
 [![all-contributors](https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16)][contributors]
-<sub> —— Made with [contrib.rocks](https://contrib.rocks)</sub>
+<sub> — Made with [contrib.rocks](https://contrib.rocks)</sub>
 
 ### Third-Party Assets
 
@@ -70,6 +72,7 @@ This project is published under [MIT License][license].
 [ci]: https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml?query=event%3Apush+branch%3Amaster
 [codacy]: https://app.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade
 [license]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE
+[open-container]: https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/cotes2020/jekyll-theme-chirpy
 [jekyllrb]: https://jekyllrb.com/
 [clipartmax]: https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/
 [demo]: https://cotes2020.github.io/chirpy-demo/
diff --git a/_config.yml b/_config.yml
index 79d451fe0c1..9b9e2b27bbd 100644
--- a/_config.yml
+++ b/_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://kevinnovak.github.io/Time-Zone-Picker
+# Change to your timezone › https://zones.arilyn.cc
 timezone: Asia/Shanghai
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
@@ -16,44 +16,67 @@ timezone: Asia/Shanghai
 
 title: Chirpy # the main title
 
-tagline: A text-focused Jekyll theme # it will display as the sub-title
+tagline: A text-focused Jekyll theme # it will display as the subtitle
 
 description: >- # used by seo meta and the atom feed
   A minimal, responsive and feature-rich Jekyll theme for technical writing.
 
 # Fill in the protocol & hostname for your site.
-# e.g. 'https://username.github.io', note that it does not end with a '/'.
+# E.g. 'https://username.github.io', note that it does not end with a '/'.
 url: ""
 
 github:
-  username: github_username # change to your github username
+  username: github_username # change to your GitHub username
 
 twitter:
-  username: twitter_username # change to your twitter username
+  username: twitter_username # change to your Twitter username
 
 social:
   # Change to your full name.
   # 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
-    - https://github.com/username # change to your github homepage
+    - https://twitter.com/username # change to your Twitter homepage
+    - https://github.com/username # change to your GitHub homepage
     # Uncomment below to add more social links
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
-google_site_verification: # fill in to your verification string
+# Site Verification Settings
+webmaster_verifications:
+  google: # fill in your Google verification code
+  bing: # fill in your Bing verification code
+  alexa: # fill in your Alexa verification code
+  yandex: # fill in your Yandex verification code
+  baidu: # fill in your Baidu verification code
+  facebook: # fill in your Facebook verification code
 
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-google_analytics:
-  id: # fill in your Google Analytics ID
-
-goatcounter:
-  id: # fill in your Goatcounter ID
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
+  umami:
+    id: # fill in your Umami ID
+    domain: # fill in your Umami domain
+  matomo:
+    id: # fill in your Matomo ID
+    domain: # fill in your Matomo domain
+  cloudflare:
+    id: # fill in your Cloudflare Web Analytics token
+  fathom:
+    id: # fill in your Fathom Site ID
+
+# Page views settings
+pageviews:
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
@@ -63,17 +86,17 @@ goatcounter:
 #
 # Available options:
 #
-#     light  - Use the light color scheme
-#     dark   - Use the dark color scheme
+#     light — Use the light color scheme
+#     dark — Use the dark color scheme
 #
 theme_mode: # [light | dark]
 
-# The CDN endpoint for images.
+# The CDN endpoint for media resources.
 # Notice that once it is assigned, the CDN url
-# will be added to all image (site avatar & posts' images) paths starting with '/'
+# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: "https://chirpy-img.netlify.app"
+cdn: "https://chirpy-img.netlify.app"
 
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"
@@ -86,8 +109,9 @@ social_preview_image: # string, local or CORS resources
 toc: true
 
 comments:
-  active: # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
-  # The active options are as follows:
+  # Global switch for the post-comment system. Keeping it empty means disabled.
+  provider: # [disqus | utterances | giscus]
+  # The provider options are as follows:
   disqus:
     shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
   # utterances settings › https://utteranc.es/
@@ -101,6 +125,7 @@ comments:
     category:
     category_id:
     mapping: # optional, default to 'pathname'
+    strict: # optional, default to '0'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
@@ -114,9 +139,9 @@ assets:
     env: # [development | production]
 
 pwa:
-  enabled: true # the option for PWA feature (installable)
+  enabled: true # The option for PWA feature (installable)
   cache:
-    enabled: true # the option for PWA offline cache
+    enabled: true # The option for PWA offline cache
     # Paths defined here will be excluded from the PWA cache.
     # Usually its value is the `baseurl` of another website that
     # shares the same domain name as the current website.
@@ -131,6 +156,7 @@ baseurl: ""
 # ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
+  footnote_backlink: "&#8617;&#xfe0e;"
   syntax_highlighter: rouge
   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
     css_class: highlight
@@ -167,10 +193,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-  - scope:
-      path: assets/js/dist
-    values:
-      swcache: true
 
 sass:
   style: compressed
@@ -191,8 +213,9 @@ exclude:
   - tools
   - README.md
   - LICENSE
-  - rollup.config.js
-  - package*.json
+  - purgecss.js
+  - "*.config.js"
+  - "package*.json"
 
 jekyll-archives:
   enabled: [categories, tags]
diff --git a/_data/contact.yml b/_data/contact.yml
index 1ed228a0134..ed40acb7e97 100644
--- a/_data/contact.yml
+++ b/_data/contact.yml
@@ -26,3 +26,15 @@
 # - type: stack-overflow
 #   icon: 'fab fa-stack-overflow'
 #   url:  ''                  # Fill with your stackoverflow homepage
+#
+# - type: bluesky
+#   icon: 'fa-brands fa-bluesky'
+#   url: ''                   # Fill with your Bluesky profile link
+#
+# - type: reddit
+#   icon: 'fa-brands fa-reddit'
+#   url: ''                   # Fill with your Reddit profile link
+#
+# - type: threads
+#   icon: 'fa-brands fa-threads'
+#   url: ''                   # Fill with your Threads profile link
diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml
index c60829813d5..a79e020091e 100644
--- a/_data/locales/ar.yml
+++ b/_data/locales/ar.yml
@@ -43,7 +43,7 @@ copyright:
 meta: باستخدام :PLATFORM السمة :THEME
 
 not_found:
-  statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
+  statement: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
 
 notification:
   update_found: يتوفر اصدار جديد للمحتوى.
diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml
index 3e049938b0d..3fb060fdae3 100644
--- a/_data/locales/bg-BG.yml
+++ b/_data/locales/bg-BG.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Създадено чрез :PLATFORM и :THEME тема
 
 not_found:
-  statment: Съжалявам, но на този URL адрес няма налично съдържание.
+  statement: Съжалявам, но на този URL адрес няма налично съдържание.
 
 notification:
   update_found: Налична е нова версия на съдържанието.
diff --git a/_data/locales/ca-ES.yml b/_data/locales/ca-ES.yml
new file mode 100644
index 00000000000..e3d5b39ceae
--- /dev/null
+++ b/_data/locales/ca-ES.yml
@@ -0,0 +1,84 @@
+# 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
diff --git a/_data/locales/cs-CZ.yml b/_data/locales/cs-CZ.yml
index e515c08ff6f..cf93f614a6b 100644
--- a/_data/locales/cs-CZ.yml
+++ b/_data/locales/cs-CZ.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Použití :PLATFORM s motivem :THEME
 
 not_found:
-  statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
+  statement: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
 
 notification:
   update_found: Je k dispozici nová verze obsahu.
diff --git a/_data/locales/da-DK.yml b/_data/locales/da-DK.yml
new file mode 100644
index 00000000000..4b41fb389ea
--- /dev/null
+++ b/_data/locales/da-DK.yml
@@ -0,0 +1,86 @@
+# 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
diff --git a/_data/locales/de-DE.yml b/_data/locales/de-DE.yml
index 6b187b4c60d..6c9d91d469b 100644
--- a/_data/locales/de-DE.yml
+++ b/_data/locales/de-DE.yml
@@ -42,7 +42,7 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
+  statement: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
 
 notification:
   update_found: Eine neue Version ist verfügbar.
@@ -76,7 +76,7 @@ df:
   post:
     strftime: "%d.%m.%Y"
     dayjs: "DD.MM.YYYY"
-    
+
 # categories page
 categories:
   category_measure:
diff --git "a/_data/locales/dv\342\200\221MV.yml" "b/_data/locales/dv\342\200\221MV.yml"
new file mode 100644
index 00000000000..680ca1f8b4c
--- /dev/null
+++ "b/_data/locales/dv\342\200\221MV.yml"
@@ -0,0 +1,90 @@
+# 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: ޕޯސްޓްތައް
diff --git a/_data/locales/el-GR.yml b/_data/locales/el-GR.yml
index ab5fb0e7c9b..b6d2a866379 100644
--- a/_data/locales/el-GR.yml
+++ b/_data/locales/el-GR.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Αξιοποιώντας την :PLATFORM theme :THEME
 
 not_found:
-  statment: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
+  statement: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
 
 notification:
   update_found: Υπάρχει διαθέσιμη μια νέα έκδοση του περιεχομένου.
diff --git a/_data/locales/en.yml b/_data/locales/en.yml
index 0dbe7136cc1..152d090ac21 100644
--- a/_data/locales/en.yml
+++ b/_data/locales/en.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Using the :THEME theme for :PLATFORM.
 
 not_found:
-  statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+  statement: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
 
 notification:
   update_found: A new version of content is available.
diff --git a/_data/locales/es-ES.yml b/_data/locales/es-ES.yml
index 552923086d6..8f8d149ea3e 100644
--- a/_data/locales/es-ES.yml
+++ b/_data/locales/es-ES.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Hecho con :PLATFORM usando el tema :THEME
 
 not_found:
-  statment: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
+  statement: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
 
 notification:
   update_found: Hay una nueva versión de contenido disponible.
diff --git a/_data/locales/fa-IR.yml b/_data/locales/fa-IR.yml
new file mode 100644
index 00000000000..7a33deb1209
--- /dev/null
+++ b/_data/locales/fa-IR.yml
@@ -0,0 +1,91 @@
+# 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: پست‌
diff --git a/_data/locales/fi-FI.yml b/_data/locales/fi-FI.yml
index c817d2b8580..60c9862054f 100644
--- a/_data/locales/fi-FI.yml
+++ b/_data/locales/fi-FI.yml
@@ -42,7 +42,7 @@ copyright:
 meta: Käytetään :PLATFORM iä Teema :THEME
 
 not_found:
-  statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
+  statement: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
 
 notification:
   update_found: Uusi versio sisällöstä on saatavilla.
diff --git a/_data/locales/fr-FR.yml b/_data/locales/fr-FR.yml
index 72b034db222..dce83c9f4e4 100644
--- a/_data/locales/fr-FR.yml
+++ b/_data/locales/fr-FR.yml
@@ -14,7 +14,7 @@ tabs:
   categories: Catégories
   tags: Tags
   archives: Archives
-  about: A propos de
+  about: À propos
 
 # the text displayed in the search bar & search results
 search:
@@ -32,18 +32,18 @@ copyright:
   license:
     template: Cet article est sous licence :LICENSE_NAME par l'auteur.
     name: CC BY 4.0
-    link: https://creativecommons.org/licenses/by/4.0/
+    link: https://creativecommons.org/licenses/by/4.0/deed.fr
 
   # Displayed in the footer
   brief: Certains droits réservés.
   verbose: >-
-    Sauf mention contraire, les articles de ce site sont publiés sous licence
+    Sauf mention contraire, les articles de ce site sont publiés
     sous la licence Creative Commons Attribution 4.0 International (CC BY 4.0) par l'auteur.
 
 meta: Propulsé par :PLATFORM avec le thème :THEME
 
 not_found:
-  statment: Désolé, nous avons égaré cette URL ou elle pointe vers quelque chose qui n'existe pas.
+  statement: Désolé, nous avons égaré cette URL ou elle pointe vers quelque chose qui n'existe pas.
 
 notification:
   update_found: Une nouvelle version du contenu est disponible.
diff --git a/_data/locales/hu-HU.yml b/_data/locales/hu-HU.yml
index b09f2cdc91a..be3a31b7d63 100644
--- a/_data/locales/hu-HU.yml
+++ b/_data/locales/hu-HU.yml
@@ -14,24 +14,23 @@ tabs:
   categories: Kategóriák
   tags: Címkék
   archives: Archívum
-  about: Rólam
+  about: Bemutatkozás
 
 # the text displayed in the search bar & search results
 search:
   hint: keresés
   cancel: Mégse
-  no_results: Oops! Nincs találat a keresésre.
+  no_results: Hoppá! Nincs találat a keresésre.
 
 panel:
   lastmod: Legutóbb frissítve
   trending_tags: Népszerű Címkék
   toc: Tartalom
-  links: Blog linkek
 
 copyright:
   # Shown at the bottom of the post
   license:
-    template: A bejegyzés :LICENSE_NAME licenccel rendelkezik.
+    template: A bejegyzést a szerző :LICENSE_NAME licenc alatt engedélyezte.
     name: CC BY 4.0
     link: https://creativecommons.org/licenses/by/4.0/
 
@@ -42,10 +41,10 @@ copyright:
     Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
     hacsak másképp nincs jelezve.
 
-meta: Készítve :PLATFORM motorral :THEME témával
+meta: Készítve :THEME témával a :PLATFORM platformra.
 
 not_found:
-  statment: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
+  statement: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
 
 notification:
   update_found: Elérhető a tartalom új verziója.
@@ -73,7 +72,21 @@ post:
       title: Link másolása
       succeed: Link sikeresen másolva!
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y. %B. %e."
+    dayjs: "YYYY. MMMM D."
+  archives:
+    strftime: "%B"
+    dayjs: "MMM"
+
 # categories page
 categories:
-  category_measure: kategória
-  post_measure: bejegyzés
+  category_measure:
+    singular: kategória
+    plural: kategória
+  post_measure:
+    singular: bejegyzés
+    plural: bejegyzés
diff --git a/_data/locales/id-ID.yml b/_data/locales/id-ID.yml
index 29ad15695c0..d772ec34f1a 100644
--- a/_data/locales/id-ID.yml
+++ b/_data/locales/id-ID.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Didukung oleh :PLATFORM dengan tema :THEME
 
 not_found:
-  statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
+  statement: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
 
 notification:
   update_found: Versi konten baru tersedia.
diff --git a/_data/locales/it-IT.yml b/_data/locales/it-IT.yml
index cf7b691bcfd..c8dfb447c2c 100644
--- a/_data/locales/it-IT.yml
+++ b/_data/locales/it-IT.yml
@@ -42,7 +42,7 @@ copyright:
 
 meta: Servizio offerto da :PLATFORM con tema :THEME
 not_found:
-  statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
+  statement: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
 
 notification:
   update_found: Nuova versione del contenuto disponibile.
diff --git a/_data/locales/ja-JP.yml b/_data/locales/ja-JP.yml
new file mode 100644
index 00000000000..8e016b997c4
--- /dev/null
+++ b/_data/locales/ja-JP.yml
@@ -0,0 +1,84 @@
+# 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: 投稿
diff --git a/_data/locales/ko-KR.yml b/_data/locales/ko-KR.yml
index 4dd221b9b74..82976349c88 100644
--- a/_data/locales/ko-KR.yml
+++ b/_data/locales/ko-KR.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: 해당 URL은 존재하지 않습니다.
+  statement: 해당 URL은 존재하지 않습니다.
 
 notification:
   update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
diff --git a/_data/locales/ku-IQ.yml b/_data/locales/ku-IQ.yml
new file mode 100644
index 00000000000..bcc53565f92
--- /dev/null
+++ b/_data/locales/ku-IQ.yml
@@ -0,0 +1,91 @@
+# 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: بابەت
diff --git a/_data/locales/my-MM.yml b/_data/locales/my-MM.yml
index 98848d59b86..d5bf728f9a9 100644
--- a/_data/locales/my-MM.yml
+++ b/_data/locales/my-MM.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
+  statement: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
 
 notification:
   update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
diff --git a/_data/locales/nl-NL.yml b/_data/locales/nl-NL.yml
new file mode 100644
index 00000000000..d7e8016d00d
--- /dev/null
+++ b/_data/locales/nl-NL.yml
@@ -0,0 +1,90 @@
+# 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
diff --git "a/_data/locales/ps\342\200\221AF.yml" "b/_data/locales/ps\342\200\221AF.yml"
new file mode 100644
index 00000000000..fca6877238c
--- /dev/null
+++ "b/_data/locales/ps\342\200\221AF.yml"
@@ -0,0 +1,90 @@
+# 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: لیکنې
diff --git a/_data/locales/pt-BR.yml b/_data/locales/pt-BR.yml
index 4cef833d2e2..7ca60a74b31 100644
--- a/_data/locales/pt-BR.yml
+++ b/_data/locales/pt-BR.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Feito com :PLATFORM usando o tema :THEME
 
 not_found:
-  statment: Desculpe, a página não foi encontrada.
+  statement: Desculpe, a página não foi encontrada.
 
 notification:
   update_found: Uma nova versão do conteúdo está disponível.
diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml
index 185407c136d..868ba95787f 100644
--- a/_data/locales/ru-RU.yml
+++ b/_data/locales/ru-RU.yml
@@ -42,7 +42,7 @@ copyright:
 meta: Использует тему :THEME для :PLATFORM
 
 not_found:
-  statment: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
+  statement: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
 
 notification:
   update_found: Доступна новая версия контента.
@@ -76,7 +76,7 @@ df:
   post:
     strftime: "%d.%m.%Y"
     dayjs: "DD.MM.YYYY"
-    
+
 # categories page
 categories:
   category_measure:
diff --git a/_data/locales/sl-SI.yml b/_data/locales/sl-SI.yml
index 7ab18b1deec..4d9434d4436 100644
--- a/_data/locales/sl-SI.yml
+++ b/_data/locales/sl-SI.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Uporabljena :PLATFORM tema :THEME #Using the :PLATFORM theme :THEME
 
 not_found:
-  statment: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+  statement: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
 
 notification:
   update_found: Novejša različica vsebine je na voljo. #A new version of content is available.
diff --git a/_data/locales/sv-SE.yml b/_data/locales/sv-SE.yml
index 7ec2ee23303..decb59cf31f 100644
--- a/_data/locales/sv-SE.yml
+++ b/_data/locales/sv-SE.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Byggd med :PLATFORM och temat :THEME
 
 not_found:
-  statment: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns.
+  statement: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns.
 
 notification:
   update_found: Det finns en ny version av innehållet.
diff --git a/_data/locales/th.yml b/_data/locales/th.yml
index 22cb00aa53a..a3f41a0e16e 100644
--- a/_data/locales/th.yml
+++ b/_data/locales/th.yml
@@ -43,7 +43,7 @@ copyright:
 meta: กำลังใช้ธีมของ :PLATFORM ชื่อ :THEME
 
 not_found:
-  statment: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
+  statement: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
 
 notification:
   update_found: มีเวอร์ชันใหม่ของเนื้อหา
diff --git a/_data/locales/tr-TR.yml b/_data/locales/tr-TR.yml
index 50d81102f0d..768f57cd1c6 100644
--- a/_data/locales/tr-TR.yml
+++ b/_data/locales/tr-TR.yml
@@ -43,7 +43,7 @@ copyright:
 meta: :PLATFORM ve :THEME teması
 
 not_found:
-  statment: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
+  statement: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
 
 notification:
   update_found: İçeriğin yeni bir sürümü mevcut.
diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml
index b6050738030..8fef52e8569 100644
--- a/_data/locales/uk-UA.yml
+++ b/_data/locales/uk-UA.yml
@@ -43,7 +43,7 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: Вибачте, це посилання вказує на ресурс, що не існує.
+  statement: Вибачте, це посилання вказує на ресурс, що не існує.
 
 notification:
   update_found: Доступна нова версія вмісту.
diff --git a/_data/locales/ur-PK.yml b/_data/locales/ur-PK.yml
new file mode 100644
index 00000000000..e5184df171c
--- /dev/null
+++ b/_data/locales/ur-PK.yml
@@ -0,0 +1,90 @@
+# 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: تحریریں
diff --git a/_data/locales/vi-VN.yml b/_data/locales/vi-VN.yml
index 617431a0b65..6c2ceffde38 100644
--- a/_data/locales/vi-VN.yml
+++ b/_data/locales/vi-VN.yml
@@ -42,7 +42,7 @@ copyright:
 meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME
 
 not_found:
-  statment: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
+  statement: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
 
 notification:
   update_found: Đã có phiên bản mới của nội dung.
diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml
index f8281346777..5c134101834 100644
--- a/_data/locales/zh-CN.yml
+++ b/_data/locales/zh-CN.yml
@@ -42,7 +42,7 @@ copyright:
 meta: 本站采用 :PLATFORM 主题 :THEME
 
 not_found:
-  statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
+  statement: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
 
 notification:
   update_found: 发现新版本的内容。
diff --git a/_data/locales/zh-TW.yml b/_data/locales/zh-TW.yml
index 911253b6a3f..33a4330bb0f 100644
--- a/_data/locales/zh-TW.yml
+++ b/_data/locales/zh-TW.yml
@@ -42,7 +42,7 @@ copyright:
 meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題
 
 not_found:
-  statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
+  statement: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
 
 notification:
   update_found: 發現新版本更新。
diff --git a/_data/media.yml b/_data/media.yml
new file mode 100644
index 00000000000..9cd69b4ce95
--- /dev/null
+++ b/_data/media.yml
@@ -0,0 +1,18 @@
+- extension: mp3
+  mime_type: mpeg
+- extension: mov
+  mime_type: quicktime
+- extension: avi
+  mime_type: x-msvideo
+- extension: mkv
+  mime_type: x-matroska
+- extension: ogv
+  mime_type: ogg
+- extension: weba
+  mime_type: webm
+- extension: 3gp
+  mime_type: 3gpp
+- extension: 3g2
+  mime_type: 3gpp2
+- extension: mid
+  mime_type: midi
diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml
index ed99ea850a6..2d5298229d3 100644
--- a/_data/origin/basic.yml
+++ b/_data/origin/basic.yml
@@ -4,13 +4,6 @@ webfonts: /assets/lib/fonts/main.css
 
 # Libraries
 
-jquery:
-  js: /assets/lib/jquery/jquery.min.js
-
-bootstrap:
-  css: /assets/lib/bootstrap/bootstrap.min.css
-  js: /assets/lib/bootstrap/bootstrap.bundle.min.js
-
 toc:
   css: /assets/lib/tocbot/tocbot.min.css
   js: /assets/lib/tocbot/tocbot.min.js
@@ -27,13 +20,13 @@ mermaid:
 dayjs:
   js:
     common: /assets/lib/dayjs/dayjs.min.js
-    locale: /assets/lib/dayjs/locale/en.min.js
-    relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
-    localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
+    locale: /assets/lib/dayjs/locale/en.js
+    relativeTime: /assets/lib/dayjs/plugin/relativeTime.js
+    localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.js
 
-magnific-popup:
-  css: /assets/lib/magnific-popup/magnific-popup.css
-  js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
+glightbox:
+  css: /assets/lib/glightbox/glightbox.min.css
+  js: /assets/lib/glightbox/glightbox.min.js
 
 lazy-polyfill:
   css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index b6c8674205f..ce99f814109 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -1,52 +1,47 @@
-# CDNs
-
-cdns:
-  # Google Fonts
+# Resource Hints
+resource_hints:
   - url: https://fonts.googleapis.com
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
   - url: https://fonts.gstatic.com
-    args: crossorigin
-  - url: https://fonts.googleapis.com
-  # jsDelivr CDN
+    links:
+      - rel: preconnect
+        opts: [crossorigin]
+      - rel: dns-prefetch
   - url: https://cdn.jsdelivr.net
-  # polyfill.io for math (cdnjs.cloudflare.com/polyfill)
-  - url: https://cdnjs.cloudflare.com
-
-# fonts
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
 
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+# Web Fonts
+webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
 
 # Libraries
 
-jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
-
-bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
-
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.js
+  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
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.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@10.8.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11.12.0/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/localizedFormat.min.js
-
-magnific-popup:
-  css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
-  js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.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
+
+glightbox:
+  css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js
 
 lazy-polyfill:
   css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css
diff --git a/_data/share.yml b/_data/share.yml
index d572e6dcb39..edbc02b26b0 100644
--- a/_data/share.yml
+++ b/_data/share.yml
@@ -18,11 +18,11 @@ platforms:
   #
   # - type: Linkedin
   #   icon: "fab fa-linkedin"
-  #   link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
+  #   link: "https://www.linkedin.com/feed/?shareActive=true&shareUrl=URL"
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"
-  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #   link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL"
   #
   # - type: Mastodon
   #   icon: "fa-brands fa-mastodon"
@@ -36,3 +36,15 @@ platforms:
   #       link: "https://fosstodon.org/"
   #     - label: photog.social
   #       link: "https://photog.social/"
+  #
+  # - type: Bluesky
+  #   icon: "fa-brands fa-bluesky"
+  #   link: "https://bsky.app/intent/compose?text=TITLE%20URL"
+  #
+  # - type: Reddit
+  #   icon: "fa-brands fa-square-reddit"
+  #   link: "https://www.reddit.com/submit?url=URL&title=TITLE"
+  #
+  # - type: Threads
+  #   icon: "fa-brands fa-square-threads"
+  #   link: "https://www.threads.net/intent/post?text=TITLE%20URL"
diff --git a/_includes/analytics/cloudflare.html b/_includes/analytics/cloudflare.html
new file mode 100644
index 00000000000..9faa11ee3b4
--- /dev/null
+++ b/_includes/analytics/cloudflare.html
@@ -0,0 +1,6 @@
+<!-- Cloudflare Web Analytics -->
+<script
+  defer
+  src="https://static.cloudflareinsights.com/beacon.min.js"
+  data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
+></script>
diff --git a/_includes/analytics/fathom.html b/_includes/analytics/fathom.html
new file mode 100644
index 00000000000..216bb140c00
--- /dev/null
+++ b/_includes/analytics/fathom.html
@@ -0,0 +1,6 @@
+<!-- Fathom -->
+<script
+  src="https://cdn.usefathom.com/script.js"
+  data-site="{{ site.analytics.fathom.id }}"
+  defer
+></script>
diff --git a/_includes/analytics/goatcounter.html b/_includes/analytics/goatcounter.html
new file mode 100644
index 00000000000..3867fdba95b
--- /dev/null
+++ b/_includes/analytics/goatcounter.html
@@ -0,0 +1,6 @@
+<!-- GoatCounter -->
+<script
+  async
+  src="https://gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
+></script>
diff --git a/_includes/analytics/google.html b/_includes/analytics/google.html
new file mode 100644
index 00000000000..dfe4828c5f0
--- /dev/null
+++ b/_includes/analytics/google.html
@@ -0,0 +1,13 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.analytics.google.id }}');
+  });
+</script>
diff --git a/_includes/analytics/matomo.html b/_includes/analytics/matomo.html
new file mode 100644
index 00000000000..caaa63e3ce3
--- /dev/null
+++ b/_includes/analytics/matomo.html
@@ -0,0 +1,13 @@
+<!-- Matomo -->
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    var _paq = (window._paq = window._paq || []);
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    var u="//{{ site.analytics.matomo.domain }}/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', {{ site.analytics.matomo.id }}]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  });
+</script>
diff --git a/_includes/analytics/umami.html b/_includes/analytics/umami.html
new file mode 100644
index 00000000000..bfcb1d09ff6
--- /dev/null
+++ b/_includes/analytics/umami.html
@@ -0,0 +1,6 @@
+<!-- Umami -->
+<script
+  defer
+  src="{{ site.analytics.umami.domain }}/script.js"
+  data-website-id="{{ site.analytics.umami.id }}"
+></script>
diff --git a/_includes/comment.html b/_includes/comment.html
new file mode 100644
index 00000000000..fef135f0b2f
--- /dev/null
+++ b/_includes/comment.html
@@ -0,0 +1,5 @@
+<!-- The comments switcher -->
+{% if page.comments and site.comments.provider %}
+  {% capture path %}comments/{{ site.comments.provider }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}
diff --git a/_includes/comments.html b/_includes/comments.html
deleted file mode 100644
index 39e521facbb..00000000000
--- a/_includes/comments.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--  The comments switcher -->
-{% if page.comments and site.comments.active %}
-  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
-  {% include {{ path }} %}
-{% endif %}
diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
index e59ed37dd2b..fd12a3c724e 100644
--- a/_includes/comments/disqus.html
+++ b/_includes/comments/disqus.html
@@ -1,39 +1,26 @@
-<!-- The Disqus lazy loading. -->
-
-<div id="disqus_thread">
-  <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
-</div>
-
-<script type="text/javascript">
+<script>
   var disqus_config = function () {
     this.page.url = '{{ page.url | absolute_url }}';
     this.page.identifier = '{{ page.url }}';
   };
 
-  /* Lazy loading */
-  var disqus_observer = new IntersectionObserver(
-    function (entries) {
-      if (entries[0].isIntersecting) {
-        (function () {
-          var d = document,
-            s = d.createElement('script');
-          s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
-          s.setAttribute('data-timestamp', +new Date());
-          (d.head || d.body).appendChild(s);
-        })();
-
-        disqus_observer.disconnect();
-      }
-    },
-    { threshold: [0] }
-  );
+  function addDisqus() {
+    let disqusThread = document.createElement('div');
+    let paragraph = document.createElement('p');
 
-  disqus_observer.observe(document.querySelector('#disqus_thread'));
+    disqusThread.id = 'disqus_thread';
+    paragraph.className = 'text-center text-muted small';
+    paragraph.innerHTML = 'Comments powered by <a href="https://disqus.com/">Disqus</a>.';
+    disqusThread.appendChild(paragraph);
+
+    const footer = document.querySelector('footer');
+    footer.insertAdjacentElement("beforebegin", disqusThread);
+  }
 
-  /* Auto switch theme */
-  function reloadDisqus() {
-    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-      /* Disqus hasn't been loaded */
+  {%- comment -%} Auto switch theme {%- endcomment -%}
+  function reloadDisqus(event) {
+    if (event.source === window && event.data && event.data.id === Theme.ID) {
+      {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
       }
@@ -44,7 +31,27 @@
     }
   }
 
-  if (document.querySelector('.mode-toggle')) {
-    window.addEventListener('message', reloadDisqus);
+  addDisqus();
+
+  if (Theme.switchable) {
+    addEventListener('message', reloadDisqus);
   }
+
+  {%- comment -%} Lazy loading {%- endcomment -%}
+  var disqusObserver = new IntersectionObserver(
+    function (entries) {
+      if (entries[0].isIntersecting) {
+        var d = document,
+          s = d.createElement('script');
+        s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+        s.setAttribute('data-timestamp', +new Date());
+        (d.head || d.body).appendChild(s);
+
+        disqusObserver.disconnect();
+      }
+    },
+    { threshold: [0] }
+  );
+
+  disqusObserver.observe(document.getElementById('disqus_thread'));
 </script>
diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
index 8f042468e62..8058472028f 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -1,21 +1,13 @@
 <!-- https://giscus.app/ -->
-<script type="text/javascript">
+<script>
   (function () {
-    const origin = 'https://giscus.app';
-    const iframe = 'iframe.giscus-frame';
-    const lightTheme = 'light';
-    const darkTheme = 'dark_dimmed';
+    const themeMapper = Theme.getThemeMapper('light', 'dark_dimmed');
+    const initTheme = themeMapper[Theme.visualState];
 
-    let initTheme = lightTheme;
-    const html = document.documentElement;
-
-    if (
-      (html.hasAttribute('data-mode') &&
-        html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = darkTheme;
+    let lang = '{{ site.comments.giscus.lang | default: lang }}';
+    {%- comment -%} https://github.com/giscus/giscus/tree/main/locales {%- endcomment -%}
+    if (lang.length > 2 && !lang.startsWith('zh')) {
+      lang = lang.slice(0, 2);
     }
 
     let giscusAttributes = {
@@ -25,40 +17,38 @@
       'data-category': '{{ site.comments.giscus.category }}',
       'data-category-id': '{{ site.comments.giscus.category_id }}',
       'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
       'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
       'data-emit-metadata': '0',
       'data-theme': initTheme,
       'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
-      'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      'data-lang': lang,
       'data-loading': 'lazy',
       crossorigin: 'anonymous',
       async: ''
     };
 
-    let giscusScript = document.createElement('script');
+    let giscusNode = document.createElement('script');
     Object.entries(giscusAttributes).forEach(([key, value]) =>
-      giscusScript.setAttribute(key, value)
+      giscusNode.setAttribute(key, value)
     );
-    document.getElementById('tail-wrapper').appendChild(giscusScript);
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement("beforebegin", giscusNode);
 
     addEventListener('message', (event) => {
-      if (
-        event.source === window &&
-        event.data &&
-        event.data.direction === ModeToggle.ID
-      ) {
-        /* global theme mode changed */
-        const mode = event.data.message;
-        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        const newTheme = themeMapper[Theme.visualState];
 
         const message = {
           setConfig: {
-            theme: theme
+            theme: newTheme
           }
         };
 
-        const giscus = document.querySelector(iframe).contentWindow;
-        giscus.postMessage({ giscus: message }, origin);
+        const giscus =
+          document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, 'https://giscus.app');
       }
     });
   })();
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
index 34dddcd2ce0..99408976f6c 100644
--- a/_includes/comments/utterances.html
+++ b/_includes/comments/utterances.html
@@ -1,50 +1,38 @@
 <!-- https://utteranc.es/ -->
-<script
-  src="https://utteranc.es/client.js"
-  repo="{{ site.comments.utterances.repo }}"
-  issue-term="{{ site.comments.utterances.issue_term }}"
-  crossorigin="anonymous"
-  async
-></script>
-
-<script type="text/javascript">
+<script>
   (function () {
     const origin = 'https://utteranc.es';
-    const iframe = 'iframe.utterances-frame';
-    const lightTheme = 'github-light';
-    const darkTheme = 'github-dark';
-    let initTheme = lightTheme;
-    const html = document.documentElement;
+    const themeMapper = Theme.getThemeMapper('github-light', 'github-dark');
+    const initTheme = themeMapper[Theme.visualState];
+
+    let script = document.createElement('script');
+    script.src = 'https://utteranc.es/client.js';
+    script.setAttribute('repo', '{{ site.comments.utterances.repo }}');
+    script.setAttribute('issue-term', '{{ site.comments.utterances.issue_term }}');
+    script.setAttribute('theme', initTheme);
+    script.crossOrigin = 'anonymous';
+    script.async = true;
 
-    if (
-      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = darkTheme;
-    }
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement('beforebegin', script);
 
     addEventListener('message', (event) => {
-      let theme;
+      let newTheme;
 
-      /* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
-      if (event.origin === origin) {
-        /* page initial */
-        theme = initTheme;
-      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        /* global theme mode changed */
-        const mode = event.data.message;
-        theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
-      } else {
-        return;
-      }
+      {%- comment -%}
+        Credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347>
+      {%- endcomment -%}
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        newTheme = themeMapper[Theme.visualState];
 
-      const message = {
-        type: 'set-theme',
-        theme: theme
-      };
+        const message = {
+          type: 'set-theme',
+          theme: newTheme
+        };
 
-      const utterances = document.querySelector(iframe).contentWindow;
-      utterances.postMessage(message, origin);
+        const utterances = document.querySelector('.utterances-frame').contentWindow;
+        utterances.postMessage(message, origin);
+      }
     });
   })();
 </script>
diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html
new file mode 100644
index 00000000000..bb20688e4b2
--- /dev/null
+++ b/_includes/embed/audio.html
@@ -0,0 +1,35 @@
+{% assign src = include.src | strip %}
+{% assign title = include.title | strip %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless src contains '://' %}
+  {%- capture src -%}
+    {% include media-url.html src=src subpath=page.media_subpath %}
+  {%- endcapture -%}
+{% endunless %}
+
+<p>
+  <audio class="embed-audio file" controls>
+    {% assign extension = src | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = src | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = src | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="audio/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the audio tag. Here is a
+    <a href="{{ src | strip }}">link to the audio file</a> instead.
+  </audio>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>
diff --git a/_includes/embed/bilibili.html b/_includes/embed/bilibili.html
index eaa09d84607..0aa5552ddfe 100644
--- a/_includes/embed/bilibili.html
+++ b/_includes/embed/bilibili.html
@@ -1,10 +1,9 @@
 <iframe
-  class="embed-video bilibili"
+  class="embed-video"
   loading="lazy"
   src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
   scrolling="no"
-  border="0"
-  frameborder="no"
+  frameborder="0"
   framespacing="0"
   allowfullscreen="true"
-></iframe>
\ No newline at end of file
+></iframe>
diff --git a/_includes/embed/spotify.html b/_includes/embed/spotify.html
new file mode 100644
index 00000000000..4e0a848d583
--- /dev/null
+++ b/_includes/embed/spotify.html
@@ -0,0 +1,22 @@
+{% 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>
diff --git a/_includes/embed/video.html b/_includes/embed/video.html
new file mode 100644
index 00000000000..9b6918f7b57
--- /dev/null
+++ b/_includes/embed/video.html
@@ -0,0 +1,59 @@
+{% assign video_url = include.src %}
+{% assign title = include.title %}
+{% assign poster_url = include.poster %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless video_url contains '://' %}
+  {%- capture video_url -%}
+    {% include media-url.html src=video_url subpath=page.media_subpath %}
+  {%- endcapture -%}
+{% endunless %}
+
+{% if poster_url %}
+  {% unless poster_url contains '://' %}
+    {%- capture poster_url -%}
+      {% include media-url.html src=poster_url subpath=page.media_subpath %}
+    {%- endcapture -%}
+  {% endunless %}
+  {% assign poster = 'poster="' | append: poster_url | append: '"' %}
+{% endif %}
+
+{% assign attributes = 'controls' %}
+
+{% if include.autoplay %}
+  {% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
+{% endif %}
+
+{% if include.loop %}
+  {% assign attributes = attributes | append: ' ' | append: 'loop' %}
+{% endif %}
+
+{% if include.muted %}
+  {% assign attributes = attributes | append: ' ' | append: 'muted' %}
+{% endif %}
+
+<p>
+  <video class="embed-video file" {{ poster }} {{ attributes }}>
+    {% assign extension = video_url | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = video_url | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = video_url | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="video/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the video tag. Here is a
+    <a href="{{ video_url | strip }}">link to the video file</a> instead.
+  </video>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>
diff --git a/_includes/embed/youtube.html b/_includes/embed/youtube.html
index 640011f885d..8f080021cc4 100644
--- a/_includes/embed/youtube.html
+++ b/_includes/embed/youtube.html
@@ -1,5 +1,5 @@
 <iframe
-  class="embed-video youtube"
+  class="embed-video"
   loading="lazy"
   src="https://www.youtube.com/embed/{{ include.id }}"
   title="YouTube video player"
diff --git a/_includes/favicons.html b/_includes/favicons.html
index 957c933f658..2ca276e8d65 100644
--- a/_includes/favicons.html
+++ b/_includes/favicons.html
@@ -5,15 +5,10 @@
 
 {% 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">
diff --git a/_includes/footer.html b/_includes/footer.html
index a015f469f1b..1ba9b6372ac 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -34,7 +34,14 @@
     {%- endcapture -%}
 
     {%- capture _theme -%}
-      <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+      <a
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="v{{ theme.version }}"
+        href="https://github.com/cotes2020/jekyll-theme-chirpy"
+        target="_blank"
+        rel="noopener"
+      >Chirpy</a>
     {%- endcapture -%}
 
     {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
diff --git a/_includes/goatcounter.html b/_includes/goatcounter.html
deleted file mode 100644
index 4d21d21ec38..00000000000
--- a/_includes/goatcounter.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- GoatCounter -->
-
-<script
-  data-goatcounter="https://{{ site.goatcounter.id }}.goatcounter.com/count"
-  async
-  src="https://gc.zgo.at/count.js"
-></script>
-
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
deleted file mode 100644
index e5e5119e555..00000000000
--- a/_includes/google-analytics.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-  The GA snippet
--->
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-
-    gtag('js', new Date());
-    gtag('config', '{{ site.google_analytics.id }}');
-  });
-</script>
diff --git a/_includes/head.html b/_includes/head.html
index c9187a3c352..a453323b58b 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -2,7 +2,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
-  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta
     name="viewport"
@@ -20,7 +20,7 @@
 
     {% unless src contains '://' %}
       {%- capture img_url -%}
-        {% include img-url.html src=src img_path=page.img_path absolute=true %}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
       {%- endcapture -%}
 
       {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
@@ -31,7 +31,7 @@
 
   {% elsif site.social_preview_image %}
     {%- capture img_url -%}
-      {% include img-url.html src=site.social_preview_image absolute=true %}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
     {%- endcapture -%}
 
     {%- capture og_image -%}
@@ -50,6 +50,11 @@
 
   {{ 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: ' | ' }}
@@ -59,34 +64,30 @@
 
   {% include_cached favicons.html %}
 
-  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
-
-  {% else %}
-    {% for cdn in site.data.origin[type].cdns %}
-      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
-      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+  <!-- Resource Hints -->
+  {% unless site.assets.self_host.enabled %}
+    {% for hint in site.data.origin.cors.resource_hints %}
+      {% for link in hint.links %}
+        <link rel="{{ link.rel }}" href="{{ hint.url }}" {{ link.opts | join: ' ' }}>
+      {% endfor %}
     {% endfor %}
+  {% endunless %}
 
-    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
-  {% endif %}
-
-  <!-- GA -->
-  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+  <!-- Bootstrap -->
+  {% unless jekyll.environment == 'production' %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+  {% endunless %}
 
-    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
-    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-  {% endif %}
+  <!-- Theme style -->
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
 
-  <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
+  <!-- Web Font -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
 
-  <!-- Font Awesome -->
+  <!-- Font Awesome Icons -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+  <!-- 3rd-party Dependencies -->
 
   {% if site.toc and page.toc %}
     <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
@@ -97,15 +98,34 @@
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
-    <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
+    <!-- Image Popup -->
+    <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
-  <!-- JavaScript -->
+  <!-- Scripts -->
 
-  {% unless site.theme_mode %}
-    {% include mode-toggle.html %}
-  {% endunless %}
+  <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
+
+  {% include js-selector.html lang=lang %}
+
+  {% if jekyll.environment == 'production' %}
+    <!-- PWA -->
+    {% if site.pwa.enabled %}
+      <script
+        defer
+        src="{{ '/app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
+      ></script>
+    {% endif %}
+
+    <!-- Web Analytics -->
+    {% for analytics in site.analytics %}
+      {% capture str %}{{ analytics }}{% endcapture %}
+      {% assign platform = str | split: '{' | first %}
+      {% if site.analytics[platform].id and site.analytics[platform].id != empty %}
+        {% include analytics/{{ platform }}.html %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
 
   {% include metadata-hook.html %}
 </head>
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 1fd408a6938..5a80532f82d 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -2,17 +2,10 @@
 
 <!-- commons -->
 
-{% assign urls = site.data.origin[type].jquery.js
-  | append: ','
-  | append: site.data.origin[type].bootstrap.js
-  | append: ','
-  | append: site.data.origin[type].search.js
-%}
+{% assign urls = site.data.origin[type].search.js %}
 
 <!-- layout specified -->
 
-{% assign js_dist = '/assets/js/dist/' %}
-
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
   {% assign urls = urls | append: ',' | append: site.data.origin[type]['lazy-polyfill'].js %}
 
@@ -20,7 +13,7 @@
     <!-- image lazy-loading & popup & clipboard -->
     {% assign urls = urls
       | append: ','
-      | append: site.data.origin[type]['magnific-popup'].js
+      | append: site.data.origin[type].glightbox.js
       | append: ','
       | append: site.data.origin[type].clipboard.js
     %}
@@ -33,7 +26,7 @@
   or page.layout == 'category'
   or page.layout == 'tag'
 %}
-  {% assign locale = site.lang | split: '-' | first %}
+  {% assign locale = include.lang | split: '-' | first %}
 
   {% assign urls = urls
     | append: ','
@@ -67,47 +60,27 @@
     {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
+{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
+
 <script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
-  <script>
-    /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
-    MathJax = {
-      tex: {
-        /* start/end delimiter pairs for in-line math */
-        inlineMath: [
-          ['$', '$'],
-          ['\\(', '\\)']
-        ],
-        /* start/end delimiter pairs for display math */
-        displayMath: [
-          ['$$', '$$'],
-          ['\\[', '\\]']
-        ],
-        /* equation numbering */
-        tags: 'ams'
-      }
-    };
-  </script>
-  <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
+  <script 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 %}
 
-{% if jekyll.environment == 'production' %}
-  <!-- PWA -->
-  {% if site.pwa.enabled %}
-    <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
-  {% endif %}
-
-  <!-- GA -->
-  {% if site.google_analytics.id != empty and site.google_analytics.id %}
-    {% include google-analytics.html %}
-  {% endif %}
-
-  <!-- GoatCounter -->
-  {% if site.goatcounter.id != empty and site.goatcounter.id %}
-    {% include goatcounter.html %}
+<!-- Pageviews -->
+{% if page.layout == 'post' %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
+      {% when 'goatcounter' %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
+        {% endif %}
+    {% endcase %}
   {% endif %}
 {% endif %}
diff --git a/_includes/jsdelivr-combine.html b/_includes/jsdelivr-combine.html
index cffa6995bf9..0611213b8f7 100644
--- a/_includes/jsdelivr-combine.html
+++ b/_includes/jsdelivr-combine.html
@@ -1,6 +1,6 @@
 {% assign urls = include.urls | split: ',' %}
 
-{% assign combined_urls = nil %}
+{% assign combined_urls = null %}
 
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
@@ -15,12 +15,12 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-    <script src="{{ url }}"></script>
+    <script defer src="{{ url }}"></script>
   {% else %}
-    <script src="{{ url | relative_url }}"></script>
+    <script defer src="{{ url | relative_url }}"></script>
   {% endif %}
 {% endfor %}
 
 {% if combined_urls %}
-  <script src="{{ combined_urls }}"></script>
+  <script defer src="{{ combined_urls }}"></script>
 {% endif %}
diff --git a/_includes/lang.html b/_includes/lang.html
index 19558a074cd..34b50dfaab8 100644
--- a/_includes/lang.html
+++ b/_includes/lang.html
@@ -1,7 +1,9 @@
 {% comment %}
   Detect appearance language and return it through variable "lang"
 {% endcomment %}
-{% if site.data.locales[site.lang] %}
+{% if site.data.locales[page.lang] %}
+  {% assign lang = page.lang %}
+{% elsif site.data.locales[site.lang] %}
   {% assign lang = site.lang %}
 {% else %}
   {% assign lang = 'en' %}
diff --git a/_includes/img-url.html b/_includes/media-url.html
similarity index 59%
rename from _includes/img-url.html
rename to _includes/media-url.html
index bb4758c72d3..ea410750268 100644
--- a/_includes/img-url.html
+++ b/_includes/media-url.html
@@ -1,25 +1,25 @@
 {%- comment -%}
-  Generate image final URL based on `site.img_cdn`, `page.img_path`
+  Generate media resource final URL based on `site.cdn`, `page.media_subpath`
 
   Arguments:
-    src - required, basic image path
-    img_path - optional, relative path of image
+    src - required, basic media resources path
+    subpath - optional, relative path of media resources
     absolute - optional, boolean, if true, generate absolute URL
 
   Return:
-    image URL
+    media resources URL
 {%- endcomment -%}
 
 {% assign url = include.src %}
 
 {%- if url -%}
   {% unless url contains ':' %}
-    {%- comment -%} Add page image path prefix {%- endcomment -%}
-    {% assign url = include.img_path | default: '' | append: '/' | append: url %}
+    {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
+    {% assign url = include.subpath | default: '' | append: '/' | append: url %}
 
     {%- comment -%} Prepend CND URL {%- endcomment -%}
-    {% if site.img_cdn %}
-      {% assign url = site.img_cdn | append: '/' | append: url %}
+    {% if site.cdn %}
+      {% assign url = site.cdn | append: '/' | append: url %}
     {% endif %}
 
     {% assign url = url | replace: '///', '/' | replace: '//', '/' | replace: ':/', '://' %}
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
deleted file mode 100644
index 967cfb431a3..00000000000
--- a/_includes/mermaid.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!-- mermaid-js loader -->
-<script type="text/javascript">
-  (function () {
-    function updateMermaid(event) {
-      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        const mode = event.data.message;
-
-        if (typeof mermaid === 'undefined') {
-          return;
-        }
-
-        let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
-        let config = { theme: expectedTheme };
-
-        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $('.mermaid').each(function () {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr('data-processed');
-          $(this).html(svgCode);
-        });
-
-        mermaid.initialize(config);
-        mermaid.init(undefined, '.mermaid');
-      }
-    }
-
-    let initTheme = 'default';
-    const html = document.documentElement;
-
-    if (
-      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = 'dark';
-    }
-
-    let mermaidConf = {
-      theme: initTheme /* <default|dark|forest|neutral> */
-    };
-
-    /* Create mermaid tag */
-    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
-      const svgCode = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create mermaid node */
-      let mermaid = document.createElement('pre');
-      mermaid.classList.add('mermaid');
-      const text = document.createTextNode(svgCode);
-      mermaid.appendChild(text);
-      backup.after(mermaid);
-    });
-
-    mermaid.initialize(mermaidConf);
-
-    window.addEventListener('message', updateMermaid);
-  })();
-</script>
diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
deleted file mode 100644
index a347750f8b1..00000000000
--- a/_includes/mode-toggle.html
+++ /dev/null
@@ -1,143 +0,0 @@
-<!-- Switch the mode between dark and light. -->
-
-<script type="text/javascript">
-  class ModeToggle {
-    static get MODE_KEY() {
-      return 'mode';
-    }
-    static get MODE_ATTR() {
-      return 'data-mode';
-    }
-    static get DARK_MODE() {
-      return 'dark';
-    }
-    static get LIGHT_MODE() {
-      return 'light';
-    }
-    static get ID() {
-      return 'mode-toggle';
-    }
-
-    constructor() {
-      if (this.hasMode) {
-        if (this.isDarkMode) {
-          if (!this.isSysDarkPrefer) {
-            this.setDark();
-          }
-        } else {
-          if (this.isSysDarkPrefer) {
-            this.setLight();
-          }
-        }
-      }
-
-      let self = this;
-
-      /* always follow the system prefers */
-      this.sysDarkPrefers.addEventListener('change', () => {
-        if (self.hasMode) {
-          if (self.isDarkMode) {
-            if (!self.isSysDarkPrefer) {
-              self.setDark();
-            }
-          } else {
-            if (self.isSysDarkPrefer) {
-              self.setLight();
-            }
-          }
-
-          self.clearMode();
-        }
-
-        self.notify();
-      });
-    } /* constructor() */
-
-    get sysDarkPrefers() {
-      return window.matchMedia('(prefers-color-scheme: dark)');
-    }
-
-    get isSysDarkPrefer() {
-      return this.sysDarkPrefers.matches;
-    }
-
-    get isDarkMode() {
-      return this.mode === ModeToggle.DARK_MODE;
-    }
-
-    get isLightMode() {
-      return this.mode === ModeToggle.LIGHT_MODE;
-    }
-
-    get hasMode() {
-      return this.mode != null;
-    }
-
-    get mode() {
-      return sessionStorage.getItem(ModeToggle.MODE_KEY);
-    }
-
-    /* get the current mode on screen */
-    get modeStatus() {
-      if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
-        return ModeToggle.DARK_MODE;
-      } else {
-        return ModeToggle.LIGHT_MODE;
-      }
-    }
-
-    setDark() {
-      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
-      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
-    }
-
-    setLight() {
-      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
-      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
-    }
-
-    clearMode() {
-      document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
-      sessionStorage.removeItem(ModeToggle.MODE_KEY);
-    }
-
-    /* Notify another plugins that the theme mode has changed */
-    notify() {
-      window.postMessage(
-        {
-          direction: ModeToggle.ID,
-          message: this.modeStatus
-        },
-        '*'
-      );
-    }
-
-    flipMode() {
-      if (this.hasMode) {
-        if (this.isSysDarkPrefer) {
-          if (this.isLightMode) {
-            this.clearMode();
-          } else {
-            this.setLight();
-          }
-        } else {
-          if (this.isDarkMode) {
-            this.clearMode();
-          } else {
-            this.setDark();
-          }
-        }
-      } else {
-        if (this.isSysDarkPrefer) {
-          this.setLight();
-        } else {
-          this.setDark();
-        }
-      }
-
-      this.notify();
-    } /* flipMode() */
-  } /* ModeToggle */
-
-  const modeToggle = new ModeToggle();
-</script>
diff --git a/_includes/no-linenos.html b/_includes/no-linenos.html
deleted file mode 100644
index 85006933708..00000000000
--- a/_includes/no-linenos.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% 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 %}
diff --git a/_includes/pageviews/goatcounter.html b/_includes/pageviews/goatcounter.html
new file mode 100644
index 00000000000..9cd1281e3bb
--- /dev/null
+++ b/_includes/pageviews/goatcounter.html
@@ -0,0 +1,21 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const 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`;
+
+      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';
+        });
+    }
+  });
+</script>
diff --git a/_includes/post-summary.html b/_includes/post-summary.html
new file mode 100644
index 00000000000..c9314fc812a
--- /dev/null
+++ b/_includes/post-summary.html
@@ -0,0 +1,39 @@
+{%- 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 -%}
diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index e4abcbc2a51..5b6de2f1ef8 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -88,16 +88,48 @@
     {% endfor %}
 
     <!-- take out classes -->
+    {% assign _wrapper_class = '' %}
+
     {% if _class %}
-      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
-      {% assign _left = _left | remove: _old_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 %}
     {% endif %}
 
     {% assign _final_src = null %}
     {% assign _lazyload = true %}
 
     {%- capture _img_url -%}
-      {% include img-url.html src=_src img_path=page.img_path %}
+      {% include media-url.html src=_src subpath=page.media_subpath %}
     {%- endcapture -%}
 
     {% assign _path_prefix = _img_url | remove: _src %}
@@ -110,7 +142,7 @@
 
     {% if _lqip %}
       {% assign _lazyload = false %}
-      {% assign _class = _class | append: ' blur' %}
+      {% assign _wrapper_class = _wrapper_class | append: ' blur' %}
 
       {% unless _lqip contains 'data:' %}
         {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
@@ -121,7 +153,7 @@
       {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
 
     {% else %}
-      {% assign _class = _class | append: ' shimmer' %}
+      {% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
     {% endif %}
 
     <!-- lazy-load images -->
@@ -131,7 +163,7 @@
 
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _wrapper_class | append: '">' %}
 
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
@@ -153,8 +185,8 @@
         {% assign _wrapper_start = _final_src
           | default: _src
           | prepend: '<a href="'
-          | append: '" class="popup img-link '
-          | append: _class
+          | append: '" class="popup img-link'
+          | append: _wrapper_class
           | append: '">'
         %}
 
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index 1ba2f322008..4b4f8088a0c 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -21,6 +21,7 @@
   {% assign match_posts = match_posts | push: site.tags[tag] | uniq %}
 {% endfor %}
 
+{% assign match_posts = match_posts | reverse %}
 {% assign last_index = match_posts.size | minus: 1 %}
 {% assign score_list = '' | split: '' %}
 
@@ -81,10 +82,7 @@ <h3 class="mb-4" id="related-label">
               {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted">
-                <p>
-                  {% include no-linenos.html content=post.content %}
-                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
-                </p>
+                <p>{% include post-summary.html %}</p>
               </div>
             </div>
           </a>
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
index be3ca8a69f5..5a43fba8351 100644
--- a/_includes/search-loader.html
+++ b/_includes/search-loader.html
@@ -12,36 +12,38 @@ <h2><a href="{url}">{title}</a></h2>
         {tags}
       </div>
     </header>
-    <p>{snippet}</p>
+    <p>{content}</p>
   </article>
 {% endcapture %}
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
 <script>
-  /* Note: dependent library will be loaded in `js-selector.html` */
-  SimpleJekyllSearch({
-    searchInput: document.getElementById('search-input'),
-    resultsContainer: document.getElementById('search-results'),
-    json: '{{ '/assets/js/data/search.json' | relative_url }}',
-    searchResultTemplate: '{{ result_elem | strip_newlines }}',
-    noResultsText: '{{ not_found }}',
-    templateMiddleware: function(prop, value, template) {
-      if (prop === 'categories') {
-        if (value === '') {
-          return `${value}`;
-        } else {
-          return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+  {% comment %} Note: dependent library will be loaded in `js-selector.html` {% endcomment %}
+  document.addEventListener('DOMContentLoaded', () => {
+    SimpleJekyllSearch({
+      searchInput: document.getElementById('search-input'),
+      resultsContainer: document.getElementById('search-results'),
+      json: '{{ '/assets/js/data/search.json' | relative_url }}',
+      searchResultTemplate: '{{ result_elem | strip_newlines }}',
+      noResultsText: '{{ not_found }}',
+      templateMiddleware: function(prop, value, template) {
+        if (prop === 'categories') {
+          if (value === '') {
+            return `${value}`;
+          } else {
+            return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+          }
         }
-      }
 
-      if (prop === 'tags') {
-        if (value === '') {
-          return `${value}`;
-        } else {
-          return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+        if (prop === 'tags') {
+          if (value === '') {
+            return `${value}`;
+          } else {
+            return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+          }
         }
       }
-    }
+    });
   });
 </script>
diff --git a/_includes/search-results.html b/_includes/search-results.html
index c224c5f41df..04a10305459 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -1,9 +1,9 @@
 <!-- The Search results -->
 
-<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
+<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 %}
+      {% include_cached trending-tags.html lang=include.lang %}
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index b8f92e37e9d..1cd0ee8a7cd 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -5,15 +5,13 @@
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {%- if site.avatar != empty and site.avatar -%}
         {%- capture avatar_url -%}
-          {% include img-url.html src=site.avatar %}
+          {% include media-url.html src=site.avatar %}
         {%- endcapture -%}
         <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
       {%- endif -%}
     </a>
 
-    <h1 class="site-title">
-      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </h1>
+    <a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a>
     <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
   </header>
   <!-- .profile-wrapper -->
@@ -44,7 +42,7 @@ <h1 class="site-title">
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -54,13 +52,21 @@ <h1 class="site-title">
     {% 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' %}
-          {% assign email = site.social.email | split: '@' %}
+          {%- unless site.social.email -%}
+            {%- continue -%}
+          {%- endunless -%}
+          {%- assign email = site.social.email | split: '@' -%}
           {%- capture url -%}
             javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
           {%- endcapture -%}
diff --git a/_includes/toc-status.html b/_includes/toc-status.html
new file mode 100644
index 00000000000..4b71caeefcc
--- /dev/null
+++ b/_includes/toc-status.html
@@ -0,0 +1,10 @@
+{% comment %}
+  Determine TOC state and return it through variable "enable_toc"
+{% endcomment %}
+
+{% assign enable_toc = false %}
+{% if site.toc and page.toc %}
+  {% if page.content contains '<h2' or page.content contains '<h3' %}
+    {% assign enable_toc = true %}
+  {% endif %}
+{% endif %}
diff --git a/_includes/toc.html b/_includes/toc.html
index 604d2c1658e..0f877267b39 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -1,13 +1,9 @@
-{% assign enable_toc = false %}
-{% if site.toc and page.toc %}
-  {% if page.content contains '<h2' or page.content contains '<h3' %}
-    {% assign enable_toc = true %}
-  {% endif %}
-{% endif %}
+{% include toc-status.html %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <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>
     <nav id="toc"></nav>
   </section>
 {% endif %}
diff --git a/_includes/topbar.html b/_includes/topbar.html
index d85101ac72e..735f1d1cf55 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -1,6 +1,6 @@
 <!-- The Top Bar -->
 
-<header id="topbar-wrapper" aria-label="Top Bar">
+<header id="topbar-wrapper" class="flex-shrink-0" 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">
+    <button type="button" id="sidebar-trigger" class="btn btn-link" aria-label="Sidebar">
       <i class="fas fa-bars fa-fw"></i>
     </button>
 
@@ -55,11 +55,11 @@
       {% endif %}
     </div>
 
-    <button type="button" id="search-trigger" class="btn btn-link">
+    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
       <i class="fas fa-search fa-fw"></i>
     </button>
 
-    <search class="align-items-center ms-3 ms-lg-0">
+    <search id="search" class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"
diff --git a/_javascript/_copyright b/_javascript/_copyright
deleted file mode 100644
index 60a706be6d5..00000000000
--- a/_javascript/_copyright
+++ /dev/null
@@ -1 +0,0 @@
-Chirpy v<%= pkg.version %> | © 2019 <%= pkg.author %> | <%= pkg.license %> Licensed | <%= pkg.homepage %>
diff --git a/_javascript/categories.js b/_javascript/categories.js
index 15d82513178..ce87d671ba2 100644
--- a/_javascript/categories.js
+++ b/_javascript/categories.js
@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { categoryCollapse } from './modules/plugins';
+import { categoryCollapse } from './modules/components';
 
 basic();
 initSidebar();
diff --git a/_javascript/commons.js b/_javascript/commons.js
index 05a9765c1fb..6a17fb93a38 100644
--- a/_javascript/commons.js
+++ b/_javascript/commons.js
@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 
-basic();
 initSidebar();
 initTopbar();
+basic();
diff --git a/_javascript/home.js b/_javascript/home.js
index 02948c952a9..7f628a17ad5 100644
--- a/_javascript/home.js
+++ b/_javascript/home.js
@@ -1,8 +1,8 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime, loadImg } from './modules/plugins';
+import { initLocaleDatetime, loadImg } from './modules/components';
 
-basic();
+loadImg();
+initLocaleDatetime();
 initSidebar();
 initTopbar();
-initLocaleDatetime();
-loadImg();
+basic();
diff --git a/_javascript/misc.js b/_javascript/misc.js
index c7a19d6a2b0..37130da14b8 100644
--- a/_javascript/misc.js
+++ b/_javascript/misc.js
@@ -1,7 +1,7 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime } from './modules/plugins';
+import { initLocaleDatetime } from './modules/components';
 
-basic();
 initSidebar();
 initTopbar();
 initLocaleDatetime();
+basic();
diff --git a/_javascript/modules/plugins.js b/_javascript/modules/components.js
similarity index 52%
rename from _javascript/modules/plugins.js
rename to _javascript/modules/components.js
index fb892e25bf5..95791a69fcf 100644
--- a/_javascript/modules/plugins.js
+++ b/_javascript/modules/components.js
@@ -3,4 +3,8 @@ export { initClipboard } from './components/clipboard';
 export { loadImg } from './components/img-loading';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
-export { toc } from './components/toc';
+export { initToc } from './components/toc';
+export { loadMermaid } from './components/mermaid';
+export { modeWatcher } from './components/mode-toggle';
+export { back2top } from './components/back-to-top';
+export { loadTooptip } from './components/tooltip-loader';
diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js
index 777a659bb0f..40d9cd1a17a 100644
--- a/_javascript/modules/components/back-to-top.js
+++ b/_javascript/modules/components/back-to-top.js
@@ -3,18 +3,17 @@
  */
 
 export function back2top() {
-  const $window = $(window);
-  const $btn = $('#back-to-top');
+  const btn = document.getElementById('back-to-top');
 
-  $window.on('scroll', () => {
-    if ($window.scrollTop() > 50) {
-      $btn.fadeIn();
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      btn.classList.add('show');
     } else {
-      $btn.fadeOut();
+      btn.classList.remove('show');
     }
   });
 
-  $btn.on('click', () => {
-    $window.scrollTop(0);
+  btn.addEventListener('click', () => {
+    window.scrollTo({ top: 0 });
   });
 }
diff --git a/_javascript/modules/components/category-collapse.js b/_javascript/modules/components/category-collapse.js
index d6027a18389..0c53cb4bc93 100644
--- a/_javascript/modules/components/category-collapse.js
+++ b/_javascript/modules/components/category-collapse.js
@@ -1,36 +1,36 @@
 /**
  * Tab 'Categories' expand/close effect.
  */
+
+import 'bootstrap/js/src/collapse.js';
+
 const childPrefix = 'l_';
 const parentPrefix = 'h_';
-const collapse = $('.collapse');
+const children = document.getElementsByClassName('collapse');
 
 export function categoryCollapse() {
-  /* close up top-category */
-  collapse.on('hide.bs.collapse', function () {
-    /* Bootstrap collapse events. */ const parentId =
-      parentPrefix + $(this).attr('id').substring(childPrefix.length);
-    if (parentId) {
-      $(`#${parentId} .far.fa-folder-open`).attr(
-        'class',
-        'far fa-folder fa-fw'
-      );
-      $(`#${parentId} i.fas`).addClass('rotate');
-      $(`#${parentId}`).removeClass('hide-border-bottom');
-    }
-  });
+  [...children].forEach((elem) => {
+    const id = parentPrefix + elem.id.substring(childPrefix.length);
+    const parent = document.getElementById(id);
+
+    // collapse sub-categories
+    elem.addEventListener('hide.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder-open').className =
+          'far fa-folder fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
+        parent.classList.remove('hide-border-bottom');
+      }
+    });
 
-  /* expand the top category */
-  collapse.on('show.bs.collapse', function () {
-    const parentId =
-      parentPrefix + $(this).attr('id').substring(childPrefix.length);
-    if (parentId) {
-      $(`#${parentId} .far.fa-folder`).attr(
-        'class',
-        'far fa-folder-open fa-fw'
-      );
-      $(`#${parentId} i.fas`).removeClass('rotate');
-      $(`#${parentId}`).addClass('hide-border-bottom');
-    }
+    // expand sub-categories
+    elem.addEventListener('show.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder').className =
+          'far fa-folder-open fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.remove('rotate');
+        parent.classList.add('hide-border-bottom');
+      }
+    });
   });
 }
diff --git a/_javascript/modules/components/clipboard.js b/_javascript/modules/components/clipboard.js
index 68f6afd155a..9566e9d311a 100644
--- a/_javascript/modules/components/clipboard.js
+++ b/_javascript/modules/components/clipboard.js
@@ -2,107 +2,113 @@
  * Clipboard functions
  *
  * Dependencies:
- *   - popper.js (https://github.com/popperjs/popper-core)
- *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ *    clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 const clipboardSelector = '.code-header>button';
+
+const ICON_DEFAULT = 'far fa-clipboard';
 const ICON_SUCCESS = 'fas fa-check';
+
 const ATTR_TIMEOUT = 'timeout';
 const ATTR_TITLE_SUCCEED = 'data-title-succeed';
 const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
 const TIMEOUT = 2000; // in milliseconds
 
 function isLocked(node) {
-  if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
-    let timeout = $(node).attr(ATTR_TIMEOUT);
+  if (node.hasAttribute(ATTR_TIMEOUT)) {
+    let timeout = node.getAttribute(ATTR_TIMEOUT);
     if (Number(timeout) > Date.now()) {
       return true;
     }
   }
+
   return false;
 }
 
 function lock(node) {
-  $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+  node.setAttribute(ATTR_TIMEOUT, Date.now() + TIMEOUT);
 }
 
 function unlock(node) {
-  $(node).removeAttr(ATTR_TIMEOUT);
+  node.removeAttribute(ATTR_TIMEOUT);
 }
 
-function getIcon(btn) {
-  let iconNode = $(btn).children();
-  return iconNode.attr('class');
-}
-
-const ICON_DEFAULT = getIcon(clipboardSelector);
-
 function showTooltip(btn) {
-  const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
-  $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+  const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
+  btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+  Tooltip.getInstance(btn).show();
 }
 
 function hideTooltip(btn) {
-  $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN);
+  Tooltip.getInstance(btn).hide();
+  btn.removeAttribute(ATTR_TITLE_ORIGIN);
 }
 
 function setSuccessIcon(btn) {
-  let btnNode = $(btn);
-  let iconNode = btnNode.children();
-  iconNode.attr('class', ICON_SUCCESS);
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_SUCCESS);
 }
 
 function resumeIcon(btn) {
-  let btnNode = $(btn);
-  let iconNode = btnNode.children();
-  iconNode.attr('class', ICON_DEFAULT);
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_DEFAULT);
 }
 
-export function initClipboard() {
+function setCodeClipboard() {
+  const clipboardList = document.querySelectorAll(clipboardSelector);
+
+  if (clipboardList.length === 0) {
+    return;
+  }
+
   // Initial the clipboard.js object
-  if ($(clipboardSelector).length) {
-    const clipboard = new ClipboardJS(clipboardSelector, {
-      target(trigger) {
-        let codeBlock = trigger.parentNode.nextElementSibling;
-        return codeBlock.querySelector('code .rouge-code');
-      }
-    });
+  const clipboard = new ClipboardJS(clipboardSelector, {
+    target: (trigger) => {
+      const codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
+    }
+  });
 
-    const clipboardList = document.querySelectorAll(clipboardSelector);
-    [...clipboardList].map(
-      (elem) =>
-        new bootstrap.Tooltip(elem, {
-          placement: 'left'
-        })
-    );
+  [...clipboardList].map(
+    (elem) =>
+      new Tooltip(elem, {
+        placement: 'left'
+      })
+  );
 
-    clipboard.on('success', (e) => {
-      e.clearSelection();
+  clipboard.on('success', (e) => {
+    const trigger = e.trigger;
 
-      const trigger = e.trigger;
-      if (isLocked(trigger)) {
-        return;
-      }
+    e.clearSelection();
 
-      setSuccessIcon(trigger);
-      showTooltip(trigger);
-      lock(trigger);
+    if (isLocked(trigger)) {
+      return;
+    }
 
-      setTimeout(() => {
-        hideTooltip(trigger);
-        resumeIcon(trigger);
-        unlock(trigger);
-      }, TIMEOUT);
-    });
-  }
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+    lock(trigger);
+
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+      unlock(trigger);
+    }, TIMEOUT);
+  });
+}
 
-  /* --- Post link sharing --- */
+function setLinkClipboard() {
+  const btnCopyLink = document.getElementById('copy-link');
 
-  const btnCopyLink = $('#copy-link');
+  if (btnCopyLink === null) {
+    return;
+  }
 
-  btnCopyLink.on('click', (e) => {
-    let target = $(e.target);
+  btnCopyLink.addEventListener('click', (e) => {
+    const target = e.target;
 
     if (isLocked(target)) {
       return;
@@ -110,21 +116,28 @@ export function initClipboard() {
 
     // Copy URL to clipboard
     navigator.clipboard.writeText(window.location.href).then(() => {
-      const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
-      const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
+      const defaultTitle = target.getAttribute(ATTR_TITLE_ORIGIN);
+      const succeedTitle = target.getAttribute(ATTR_TITLE_SUCCEED);
+
       // Switch tooltip title
-      target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+      target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+      Tooltip.getInstance(target).show();
+
       lock(target);
 
       setTimeout(() => {
-        target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
+        target.setAttribute(ATTR_TITLE_ORIGIN, defaultTitle);
         unlock(target);
       }, TIMEOUT);
     });
   });
 
-  btnCopyLink.on('mouseleave', function (e) {
-    const target = $(e.target);
-    target.tooltip('hide');
+  btnCopyLink.addEventListener('mouseleave', (e) => {
+    Tooltip.getInstance(e.target).hide();
   });
 }
+
+export function initClipboard() {
+  setCodeClipboard();
+  setLinkClipboard();
+}
diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js
index c9b7b7f3880..989d9e683c7 100644
--- a/_javascript/modules/components/img-loading.js
+++ b/_javascript/modules/components/img-loading.js
@@ -11,7 +11,7 @@ const cover = {
 };
 
 function removeCover(clzss) {
-  $(this).parent().removeClass(clzss);
+  this.parentElement.classList.remove(clzss);
 }
 
 function handleImage() {
@@ -30,32 +30,38 @@ function handleImage() {
  * Switches the LQIP with the real image URL.
  */
 function switchLQIP() {
-  const $img = $(this);
-  const src = $img.attr(ATTR_DATA_SRC);
-
-  $img.attr('src', encodeURI(src));
-  $img.removeAttr(ATTR_DATA_SRC);
+  const src = this.getAttribute(ATTR_DATA_SRC);
+  this.setAttribute('src', encodeURI(src));
+  this.removeAttribute(ATTR_DATA_SRC);
 }
 
 export function loadImg() {
-  const $images = $('article img');
+  const images = document.querySelectorAll('article img');
 
-  if ($images.length) {
-    $images.on('load', handleImage);
+  if (images.length === 0) {
+    return;
   }
 
+  images.forEach((img) => {
+    img.addEventListener('load', handleImage);
+  });
+
   // Images loaded from the browser cache do not trigger the 'load' event
-  $('article img[loading="lazy"]').each(function () {
-    if (this.complete) {
-      removeCover.call(this, cover.SHIMMER);
+  document.querySelectorAll('article img[loading="lazy"]').forEach((img) => {
+    if (img.complete) {
+      removeCover.call(img, cover.SHIMMER);
     }
   });
 
   // LQIPs set by the data URI or WebP will not trigger the 'load' event,
   // so manually convert the URI to the URL of a high-resolution image.
-  const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`);
+  const lqips = document.querySelectorAll(
+    `article img[${ATTR_DATA_LQIP}="true"]`
+  );
 
-  if ($lqips.length) {
-    $lqips.each(switchLQIP);
+  if (lqips.length) {
+    lqips.forEach((lqip) => {
+      switchLQIP.call(lqip);
+    });
   }
 }
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
index 7f78d9928e1..420a2265fa5 100644
--- a/_javascript/modules/components/img-popup.js
+++ b/_javascript/modules/components/img-popup.js
@@ -1,22 +1,50 @@
 /**
  * Set up image popup
  *
- * See: https://github.com/dimsemenov/Magnific-Popup
+ * Dependencies: https://github.com/biati-digital/glightbox
  */
 
+const lightImages = '.popup:not(.dark)';
+const darkImages = '.popup:not(.light)';
+let selector = lightImages;
+
+function updateImages(current, reverse) {
+  if (selector === lightImages) {
+    selector = darkImages;
+  } else {
+    selector = lightImages;
+  }
+
+  if (reverse === null) {
+    reverse = GLightbox({ selector: `${selector}` });
+  }
+
+  [current, reverse] = [reverse, current];
+}
+
 export function imgPopup() {
-  if ($('.popup') <= 0) {
+  if (document.querySelector('.popup') === null) {
     return;
   }
 
-  $('.popup').magnificPopup({
-    type: 'image',
-    closeOnContentClick: true,
-    showCloseBtn: false,
-    zoom: {
-      enabled: true,
-      duration: 300,
-      easing: 'ease-in-out'
-    }
-  });
+  const hasDualImages = !(
+    document.querySelector('.popup.light') === null &&
+    document.querySelector('.popup.dark') === null
+  );
+
+  if (Theme.visualState === Theme.DARK) {
+    selector = darkImages;
+  }
+
+  let current = GLightbox({ selector: `${selector}` });
+
+  if (hasDualImages && Theme.switchable) {
+    let reverse = null;
+
+    window.addEventListener('message', (event) => {
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        updateImages(current, reverse);
+      }
+    });
+  }
 }
diff --git a/_javascript/modules/components/locale-datetime.js b/_javascript/modules/components/locale-datetime.js
index 214f2bff471..eb75626dd32 100644
--- a/_javascript/modules/components/locale-datetime.js
+++ b/_javascript/modules/components/locale-datetime.js
@@ -15,15 +15,15 @@ class LocaleHelper {
   }
 
   static get locale() {
-    return $('html').attr('lang').substring(0, 2);
+    return document.documentElement.getAttribute('lang').substring(0, 2);
   }
 
   static getTimestamp(elem) {
-    return Number(elem.attr(LocaleHelper.attrTimestamp)); // unix timestamp
+    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
   }
 
   static getDateFormat(elem) {
-    return elem.attr(LocaleHelper.attrDateFormat);
+    return elem.getAttribute(this.attrDateFormat);
   }
 }
 
@@ -31,21 +31,23 @@ export function initLocaleDatetime() {
   dayjs.locale(LocaleHelper.locale);
   dayjs.extend(window.dayjs_plugin_localizedFormat);
 
-  $(`[${LocaleHelper.attrTimestamp}]`).each(function () {
-    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
-    const text = date.format(LocaleHelper.getDateFormat($(this)));
-    $(this).text(text);
-    $(this).removeAttr(LocaleHelper.attrTimestamp);
-    $(this).removeAttr(LocaleHelper.attrDateFormat);
-
-    // setup tooltips
-    const tooltip = $(this).attr('data-bs-toggle');
-    if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
-      return;
-    }
-
-    const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    $(this).attr('data-bs-title', tooltipText);
-    new bootstrap.Tooltip($(this));
-  });
+  document
+    .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`)
+    .forEach((elem) => {
+      const date = dayjs.unix(LocaleHelper.getTimestamp(elem));
+      const text = date.format(LocaleHelper.getDateFormat(elem));
+      elem.textContent = text;
+      elem.removeAttribute(LocaleHelper.attrTimestamp);
+      elem.removeAttribute(LocaleHelper.attrDateFormat);
+
+      // setup tooltips
+      if (
+        elem.hasAttribute('data-bs-toggle') &&
+        elem.getAttribute('data-bs-toggle') === 'tooltip'
+      ) {
+        // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
+        const tooltipText = date.format('llll');
+        elem.setAttribute('data-bs-title', tooltipText);
+      }
+    });
 }
diff --git a/_javascript/modules/components/mermaid.js b/_javascript/modules/components/mermaid.js
new file mode 100644
index 00000000000..91df4f25497
--- /dev/null
+++ b/_javascript/modules/components/mermaid.js
@@ -0,0 +1,60 @@
+/**
+ * Mermaid-js loader
+ */
+
+const MERMAID = 'mermaid';
+const themeMapper = Theme.getThemeMapper('default', 'dark');
+
+function refreshTheme(event) {
+  if (event.source === window && event.data && event.data.id === Theme.ID) {
+    // Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
+    const mermaidList = document.getElementsByClassName(MERMAID);
+
+    [...mermaidList].forEach((elem) => {
+      const svgCode = elem.previousSibling.children.item(0).textContent;
+      elem.textContent = svgCode;
+      elem.removeAttribute('data-processed');
+    });
+
+    const newTheme = themeMapper[Theme.visualState];
+
+    mermaid.initialize({ theme: newTheme });
+    mermaid.init(null, `.${MERMAID}`);
+  }
+}
+
+function setNode(elem) {
+  const svgCode = elem.textContent;
+  const backup = elem.parentElement;
+  backup.classList.add('d-none');
+  // Create mermaid node
+  const mermaid = document.createElement('pre');
+  mermaid.classList.add(MERMAID);
+  const text = document.createTextNode(svgCode);
+  mermaid.appendChild(text);
+  backup.after(mermaid);
+}
+
+export function loadMermaid() {
+  if (
+    typeof mermaid === 'undefined' ||
+    typeof mermaid.initialize !== 'function'
+  ) {
+    return;
+  }
+
+  const initTheme = themeMapper[Theme.visualState];
+
+  let mermaidConf = {
+    theme: initTheme
+  };
+
+  const basicList = document.getElementsByClassName('language-mermaid');
+  [...basicList].forEach(setNode);
+
+  mermaid.initialize(mermaidConf);
+
+  if (Theme.switchable) {
+    window.addEventListener('message', refreshTheme);
+  }
+}
diff --git a/_javascript/modules/components/mode-toggle.js b/_javascript/modules/components/mode-toggle.js
new file mode 100644
index 00000000000..455ff0a02dc
--- /dev/null
+++ b/_javascript/modules/components/mode-toggle.js
@@ -0,0 +1,15 @@
+/**
+ * Add listener for theme mode toggle
+ */
+
+const $toggle = document.getElementById('mode-toggle');
+
+export function modeWatcher() {
+  if (!$toggle) {
+    return;
+  }
+
+  $toggle.addEventListener('click', () => {
+    Theme.flip();
+  });
+}
diff --git a/_javascript/modules/components/mode-watcher.js b/_javascript/modules/components/mode-watcher.js
deleted file mode 100644
index 7b2298a9521..00000000000
--- a/_javascript/modules/components/mode-watcher.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Add listener for theme mode toggle
- */
-const $toggleElem = $('.mode-toggle');
-
-export function modeWatcher() {
-  if ($toggleElem.length === 0) {
-    return;
-  }
-
-  $toggleElem.off().on('click', (e) => {
-    const $target = $(e.target);
-    let $btn =
-      $target.prop('tagName') === 'button'.toUpperCase()
-        ? $target
-        : $target.parent();
-
-    modeToggle.flipMode(); // modeToggle: `_includes/mode-toggle.html`
-    $btn.trigger('blur'); // remove the clicking outline
-  });
-}
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
index ad009c2deb4..40059ac10a7 100644
--- a/_javascript/modules/components/search-display.js
+++ b/_javascript/modules/components/search-display.js
@@ -1,121 +1,109 @@
 /**
- * This script make #search-result-wrapper switch to unloaded or shown automatically.
+ * This script make #search-result-wrapper switch to unload or shown automatically.
  */
-const $btnSbTrigger = $('#sidebar-trigger');
-const $btnSearchTrigger = $('#search-trigger');
-const $btnCancel = $('#search-cancel');
-const $content = $('#main-wrapper>.container>.row');
-const $topbarTitle = $('#topbar-title');
-const $search = $('search');
-const $resultWrapper = $('#search-result-wrapper');
-const $results = $('#search-results');
-const $input = $('#search-input');
-const $hints = $('#search-hints');
-const $viewport = $('html,body');
 
-// class names
-const C_LOADED = 'loaded';
-const C_UNLOADED = 'unloaded';
-const C_FOCUS = 'input-focus';
-const C_FLEX = 'd-flex';
-
-class ScrollBlocker {
-  static offset = 0;
-  static resultVisible = false;
-
-  static on() {
-    ScrollBlocker.offset = window.scrollY;
-    $viewport.scrollTop(0);
-  }
-
-  static off() {
-    $viewport.scrollTop(ScrollBlocker.offset);
-  }
-}
-
-/*--- Actions in mobile screens (Sidebar hidden) ---*/
+const btnSbTrigger = document.getElementById('sidebar-trigger');
+const btnSearchTrigger = document.getElementById('search-trigger');
+const btnCancel = document.getElementById('search-cancel');
+const content = document.querySelectorAll('#main-wrapper>.container>.row');
+const topbarTitle = document.getElementById('topbar-title');
+const search = document.getElementById('search');
+const resultWrapper = document.getElementById('search-result-wrapper');
+const results = document.getElementById('search-results');
+const input = document.getElementById('search-input');
+const hints = document.getElementById('search-hints');
+
+// CSS class names
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
+const FOCUS = 'input-focus';
+const FLEX = 'd-flex';
+
+/* Actions in mobile screens (Sidebar hidden) */
 class MobileSearchBar {
   static on() {
-    $btnSbTrigger.addClass(C_UNLOADED);
-    $topbarTitle.addClass(C_UNLOADED);
-    $btnSearchTrigger.addClass(C_UNLOADED);
-    $search.addClass(C_FLEX);
-    $btnCancel.addClass(C_LOADED);
+    btnSbTrigger.classList.add(UNLOADED);
+    topbarTitle.classList.add(UNLOADED);
+    btnSearchTrigger.classList.add(UNLOADED);
+    search.classList.add(FLEX);
+    btnCancel.classList.add(LOADED);
   }
 
   static off() {
-    $btnCancel.removeClass(C_LOADED);
-    $search.removeClass(C_FLEX);
-    $btnSbTrigger.removeClass(C_UNLOADED);
-    $topbarTitle.removeClass(C_UNLOADED);
-    $btnSearchTrigger.removeClass(C_UNLOADED);
+    btnCancel.classList.remove(LOADED);
+    search.classList.remove(FLEX);
+    btnSbTrigger.classList.remove(UNLOADED);
+    topbarTitle.classList.remove(UNLOADED);
+    btnSearchTrigger.classList.remove(UNLOADED);
   }
 }
 
 class ResultSwitch {
+  static resultVisible = false;
+
   static on() {
-    if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main-wrapper>.container) unloaded.
-      ScrollBlocker.on();
-      $resultWrapper.removeClass(C_UNLOADED);
-      $content.addClass(C_UNLOADED);
-      ScrollBlocker.resultVisible = true;
+    if (!this.resultVisible) {
+      resultWrapper.classList.remove(UNLOADED);
+      content.forEach((el) => {
+        el.classList.add(UNLOADED);
+      });
+      this.resultVisible = true;
     }
   }
 
   static off() {
-    if (ScrollBlocker.resultVisible) {
-      $results.empty();
-      if ($hints.hasClass(C_UNLOADED)) {
-        $hints.removeClass(C_UNLOADED);
-      }
-      $resultWrapper.addClass(C_UNLOADED);
-      $content.removeClass(C_UNLOADED);
+    if (this.resultVisible) {
+      results.innerHTML = '';
 
-      // now the release method must be called after $(#main-wrapper>.container) display
-      ScrollBlocker.off();
+      if (hints.classList.contains(UNLOADED)) {
+        hints.classList.remove(UNLOADED);
+      }
 
-      $input.val('');
-      ScrollBlocker.resultVisible = false;
+      resultWrapper.classList.add(UNLOADED);
+      content.forEach((el) => {
+        el.classList.remove(UNLOADED);
+      });
+      input.textContent = '';
+      this.resultVisible = false;
     }
   }
 }
 
 function isMobileView() {
-  return $btnCancel.hasClass(C_LOADED);
+  return btnCancel.classList.contains(LOADED);
 }
 
 export function displaySearch() {
-  $btnSearchTrigger.on('click', function () {
+  btnSearchTrigger.addEventListener('click', () => {
     MobileSearchBar.on();
     ResultSwitch.on();
-    $input.trigger('focus');
+    input.focus();
   });
 
-  $btnCancel.on('click', function () {
+  btnCancel.addEventListener('click', () => {
     MobileSearchBar.off();
     ResultSwitch.off();
   });
 
-  $input.on('focus', function () {
-    $search.addClass(C_FOCUS);
+  input.addEventListener('focus', () => {
+    search.classList.add(FOCUS);
   });
 
-  $input.on('focusout', function () {
-    $search.removeClass(C_FOCUS);
+  input.addEventListener('focusout', () => {
+    search.classList.remove(FOCUS);
   });
 
-  $input.on('input', () => {
-    if ($input.val() === '') {
+  input.addEventListener('input', () => {
+    if (input.value === '') {
       if (isMobileView()) {
-        $hints.removeClass(C_UNLOADED);
+        hints.classList.remove(UNLOADED);
       } else {
         ResultSwitch.off();
       }
     } else {
       ResultSwitch.on();
       if (isMobileView()) {
-        $hints.addClass(C_UNLOADED);
+        hints.classList.add(UNLOADED);
       }
     }
   });
diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js
deleted file mode 100644
index 9d8567eadda..00000000000
--- a/_javascript/modules/components/sidebar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Expand or close the sidebar in mobile screens.
- */
-
-const $body = $('body');
-const ATTR_DISPLAY = 'sidebar-display';
-
-class SidebarUtil {
-  static isExpanded = false;
-
-  static toggle() {
-    if (SidebarUtil.isExpanded === false) {
-      $body.attr(ATTR_DISPLAY, '');
-    } else {
-      $body.removeAttr(ATTR_DISPLAY);
-    }
-
-    SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
-  }
-}
-
-export function sidebarExpand() {
-  $('#sidebar-trigger').on('click', SidebarUtil.toggle);
-  $('#mask').on('click', SidebarUtil.toggle);
-}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
index b397813c01f..dec814f5c05 100644
--- a/_javascript/modules/components/toc.js
+++ b/_javascript/modules/components/toc.js
@@ -1,13 +1,36 @@
-export function toc() {
-  if (document.querySelector('main h2, main h3')) {
-    // see: https://github.com/tscanlin/tocbot#usage
-    tocbot.init({
-      tocSelector: '#toc',
-      contentSelector: '.content',
-      ignoreSelector: '[data-toc-skip]',
-      headingSelector: 'h2, h3, h4',
-      orderedList: false,
-      scrollSmooth: false
-    });
+import { TocMobile as mobile } from './toc/toc-mobile';
+import { TocDesktop as desktop } from './toc/toc-desktop';
+
+const desktopMode = matchMedia('(min-width: 1200px)');
+
+function refresh(e) {
+  if (e.matches) {
+    if (mobile.popupOpened) {
+      mobile.hidePopup();
+    }
+
+    desktop.refresh();
+  } else {
+    mobile.refresh();
   }
 }
+
+function init() {
+  if (document.querySelector('main>article[data-toc="true"]') === null) {
+    return;
+  }
+
+  // Avoid create multiple instances of Tocbot. Ref: <https://github.com/tscanlin/tocbot/issues/203>
+  if (desktopMode.matches) {
+    desktop.init();
+  } else {
+    mobile.init();
+  }
+
+  const $tocWrapper = document.getElementById('toc-wrapper');
+  $tocWrapper.classList.remove('invisible');
+
+  desktopMode.onchange = refresh;
+}
+
+export { init as initToc };
diff --git a/_javascript/modules/components/toc/toc-desktop.js b/_javascript/modules/components/toc/toc-desktop.js
new file mode 100644
index 00000000000..ea4986bac79
--- /dev/null
+++ b/_javascript/modules/components/toc/toc-desktop.js
@@ -0,0 +1,20 @@
+export class TocDesktop {
+  /* Tocbot options Ref: https://github.com/tscanlin/tocbot#usage */
+  static options = {
+    tocSelector: '#toc',
+    contentSelector: '.content',
+    ignoreSelector: '[data-toc-skip]',
+    headingSelector: 'h2, h3, h4',
+    orderedList: false,
+    scrollSmooth: false,
+    headingsOffset: 16 * 2 // 2rem
+  };
+
+  static refresh() {
+    tocbot.refresh(this.options);
+  }
+
+  static init() {
+    tocbot.init(this.options);
+  }
+}
diff --git a/_javascript/modules/components/toc/toc-mobile.js b/_javascript/modules/components/toc/toc-mobile.js
new file mode 100644
index 00000000000..20e24a73c9f
--- /dev/null
+++ b/_javascript/modules/components/toc/toc-mobile.js
@@ -0,0 +1,125 @@
+/**
+ * TOC button, topbar and popup for mobile devices
+ */
+
+const $tocBar = document.getElementById('toc-bar');
+const $soloTrigger = document.getElementById('toc-solo-trigger');
+const $triggers = document.getElementsByClassName('toc-trigger');
+const $popup = document.getElementById('toc-popup');
+const $btnClose = document.getElementById('toc-popup-close');
+
+const SCROLL_LOCK = 'overflow-hidden';
+const CLOSING = 'closing';
+
+export class TocMobile {
+  static #invisible = true;
+  static #barHeight = 16 * 3; // 3rem
+
+  static options = {
+    tocSelector: '#toc-popup-content',
+    contentSelector: '.content',
+    ignoreSelector: '[data-toc-skip]',
+    headingSelector: 'h2, h3, h4',
+    orderedList: false,
+    scrollSmooth: false,
+    collapseDepth: 4,
+    headingsOffset: this.#barHeight
+  };
+
+  static initBar() {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          $tocBar.classList.toggle('invisible', entry.isIntersecting);
+        });
+      },
+      { rootMargin: `-${this.#barHeight}px 0px 0px 0px` }
+    );
+
+    observer.observe($soloTrigger);
+    this.#invisible = false;
+  }
+
+  static listenAnchors() {
+    const $anchors = document.getElementsByClassName('toc-link');
+    [...$anchors].forEach((anchor) => {
+      anchor.onclick = () => this.hidePopup();
+    });
+  }
+
+  static refresh() {
+    if (this.#invisible) {
+      this.initComponents();
+    }
+    tocbot.refresh(this.options);
+    this.listenAnchors();
+  }
+
+  static get popupOpened() {
+    return $popup.open;
+  }
+
+  static showPopup() {
+    this.lockScroll(true);
+    $popup.showModal();
+    const activeItem = $popup.querySelector('li.is-active-li');
+    activeItem.scrollIntoView({ block: 'center' });
+  }
+
+  static hidePopup() {
+    $popup.toggleAttribute(CLOSING);
+
+    $popup.addEventListener(
+      'animationend',
+      () => {
+        $popup.toggleAttribute(CLOSING);
+        $popup.close();
+      },
+      { once: true }
+    );
+
+    this.lockScroll(false);
+  }
+
+  static lockScroll(enable) {
+    document.documentElement.classList.toggle(SCROLL_LOCK, enable);
+    document.body.classList.toggle(SCROLL_LOCK, enable);
+  }
+
+  static clickBackdrop(event) {
+    if ($popup.hasAttribute(CLOSING)) {
+      return;
+    }
+
+    const rect = event.target.getBoundingClientRect();
+    if (
+      event.clientX < rect.left ||
+      event.clientX > rect.right ||
+      event.clientY < rect.top ||
+      event.clientY > rect.bottom
+    ) {
+      this.hidePopup();
+    }
+  }
+
+  static initComponents() {
+    this.initBar();
+
+    [...$triggers].forEach((trigger) => {
+      trigger.onclick = () => this.showPopup();
+    });
+
+    $popup.onclick = (e) => this.clickBackdrop(e);
+    $btnClose.onclick = () => this.hidePopup();
+    $popup.oncancel = (e) => {
+      e.preventDefault();
+      this.hidePopup();
+    };
+  }
+
+  static init() {
+    tocbot.init(this.options);
+    this.listenAnchors();
+    this.initComponents();
+  }
+}
diff --git a/_javascript/modules/components/tooltip-loader.js b/_javascript/modules/components/tooltip-loader.js
index a90660020fb..c36c8799699 100644
--- a/_javascript/modules/components/tooltip-loader.js
+++ b/_javascript/modules/components/tooltip-loader.js
@@ -1,12 +1,11 @@
-/**
- * Initial Bootstrap Tooltip.
- */
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 export function loadTooptip() {
   const tooltipTriggerList = document.querySelectorAll(
     '[data-bs-toggle="tooltip"]'
   );
 
   [...tooltipTriggerList].map(
-    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+    (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
   );
 }
diff --git a/_javascript/modules/layouts/basic.js b/_javascript/modules/layouts/basic.js
index fb36a8b8a0c..b8eddf61588 100644
--- a/_javascript/modules/layouts/basic.js
+++ b/_javascript/modules/layouts/basic.js
@@ -1,7 +1,7 @@
-import { back2top } from '../components/back-to-top';
-import { loadTooptip } from '../components/tooltip-loader';
+import { back2top, loadTooptip, modeWatcher } from '../components';
 
 export function basic() {
+  modeWatcher();
   back2top();
   loadTooptip();
 }
diff --git a/_javascript/modules/layouts/sidebar.js b/_javascript/modules/layouts/sidebar.js
index 8795693c105..bbf5e7dab60 100644
--- a/_javascript/modules/layouts/sidebar.js
+++ b/_javascript/modules/layouts/sidebar.js
@@ -1,7 +1,19 @@
-import { modeWatcher } from '../components/mode-watcher';
-import { sidebarExpand } from '../components/sidebar';
+const ATTR_DISPLAY = 'sidebar-display';
+const $sidebar = document.getElementById('sidebar');
+const $trigger = document.getElementById('sidebar-trigger');
+const $mask = document.getElementById('mask');
+
+class SidebarUtil {
+  static #isExpanded = false;
+
+  static toggle() {
+    this.#isExpanded = !this.#isExpanded;
+    document.body.toggleAttribute(ATTR_DISPLAY, this.#isExpanded);
+    $sidebar.classList.toggle('z-2', this.#isExpanded);
+    $mask.classList.toggle('d-none', !this.#isExpanded);
+  }
+}
 
 export function initSidebar() {
-  modeWatcher();
-  sidebarExpand();
+  $trigger.onclick = $mask.onclick = () => SidebarUtil.toggle();
 }
diff --git a/_javascript/page.js b/_javascript/page.js
index f13bd2f936c..4b03b790d14 100644
--- a/_javascript/page.js
+++ b/_javascript/page.js
@@ -1,9 +1,15 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { loadImg, imgPopup, initClipboard } from './modules/plugins';
+import {
+  loadImg,
+  imgPopup,
+  initClipboard,
+  loadMermaid
+} from './modules/components';
 
-basic();
-initSidebar();
-initTopbar();
 loadImg();
 imgPopup();
+initSidebar();
+initTopbar();
 initClipboard();
+loadMermaid();
+basic();
diff --git a/_javascript/post.js b/_javascript/post.js
index 86ea32b8ae5..dc472b42978 100644
--- a/_javascript/post.js
+++ b/_javascript/post.js
@@ -1,17 +1,20 @@
-import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { basic, initTopbar, initSidebar } from './modules/layouts';
+
 import {
   loadImg,
   imgPopup,
   initLocaleDatetime,
   initClipboard,
-  toc
-} from './modules/plugins';
+  initToc,
+  loadMermaid
+} from './modules/components';
 
-initSidebar();
-initTopbar();
 loadImg();
+initToc();
 imgPopup();
+initSidebar();
 initLocaleDatetime();
 initClipboard();
-toc();
+initTopbar();
+loadMermaid();
 basic();
diff --git a/assets/js/pwa/app.js b/_javascript/pwa/app.js
similarity index 54%
rename from assets/js/pwa/app.js
rename to _javascript/pwa/app.js
index 8599fe3f516..3c0ded23108 100644
--- a/assets/js/pwa/app.js
+++ b/_javascript/pwa/app.js
@@ -1,43 +1,44 @@
----
-layout: compress
-permalink: /assets/js/dist/:basename.min.js
----
+import Toast from 'bootstrap/js/src/toast';
 
 if ('serviceWorker' in navigator) {
-  const isEnabled = '{{ site.pwa.enabled }}' === 'true';
+  // Get Jekyll config from URL parameters
+  const src = new URL(document.currentScript.src);
+  const register = src.searchParams.get('register');
+  const baseUrl = src.searchParams.get('baseurl');
 
-  if (isEnabled) {
-    const swUrl = '{{ '/sw.min.js' | relative_url }}';
-    const $notification = $('#notification');
-    const $btnRefresh = $('#notification .toast-body>button');
+  if (register) {
+    const swUrl = `${baseUrl}/sw.min.js`;
+    const notification = document.getElementById('notification');
+    const btnRefresh = notification.querySelector('.toast-body>button');
+    const popupWindow = Toast.getOrCreateInstance(notification);
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
-      {% comment %}In case the user ignores the notification{% endcomment %}
+      // Restore the update window that was last manually closed by the user
       if (registration.waiting) {
-        $notification.toast('show');
+        popupWindow.show();
       }
 
       registration.addEventListener('updatefound', () => {
         registration.installing.addEventListener('statechange', () => {
           if (registration.waiting) {
             if (navigator.serviceWorker.controller) {
-              $notification.toast('show');
+              popupWindow.show();
             }
           }
         });
       });
 
-      $btnRefresh.on('click', () => {
+      btnRefresh.addEventListener('click', () => {
         if (registration.waiting) {
           registration.waiting.postMessage('SKIP_WAITING');
         }
-        $notification.toast('hide');
+        popupWindow.hide();
       });
     });
 
     let refreshing = false;
 
-    {% comment %}Detect controller change and refresh all the opened tabs{% endcomment %}
+    // Detect controller change and refresh all the opened tabs
     navigator.serviceWorker.addEventListener('controllerchange', () => {
       if (!refreshing) {
         window.location.reload();
diff --git a/assets/js/pwa/sw.js b/_javascript/pwa/sw.js
similarity index 69%
rename from assets/js/pwa/sw.js
rename to _javascript/pwa/sw.js
index adc707ef9fb..ff9125ddf04 100644
--- a/assets/js/pwa/sw.js
+++ b/_javascript/pwa/sw.js
@@ -1,32 +1,23 @@
----
-layout: compress
-permalink: /:basename.min.js
-# PWA service worker
----
+importScripts('./assets/js/data/swconf.js');
 
-const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
-
-importScripts(swconfUrl);
 const purge = swconf.purge;
-
-function verifyHost(url) {
-  for (const host of swconf.allowHosts) {
-    const regex = RegExp(`^http(s)?://${host}/`);
-    if (regex.test(url)) {
-      return true;
-    }
-  }
-  return false;
-}
+const interceptor = swconf.interceptor;
 
 function verifyUrl(url) {
-  if (!verifyHost(url)) {
+  const requestUrl = new URL(url);
+  const requestPath = requestUrl.pathname;
+
+  if (!requestUrl.protocol.startsWith('http')) {
     return false;
   }
 
-  const requestPath = new URL(url).pathname;
+  for (const prefix of interceptor.urlPrefixes) {
+    if (requestUrl.href.startsWith(prefix)) {
+      return false;
+    }
+  }
 
-  for (const path of swconf.denyPaths) {
+  for (const path of interceptor.paths) {
     if (requestPath.startsWith(path)) {
       return false;
     }
@@ -34,10 +25,6 @@ function verifyUrl(url) {
   return true;
 }
 
-if (!purge) {
-  swconf.allowHosts.push(location.host);
-}
-
 self.addEventListener('install', (event) => {
   if (purge) {
     return;
@@ -75,6 +62,10 @@ self.addEventListener('message', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
+  if (event.request.headers.has('range')) {
+    return;
+  }
+
   event.respondWith(
     caches.match(event.request).then((response) => {
       if (response) {
@@ -88,7 +79,7 @@ self.addEventListener('fetch', (event) => {
           return response;
         }
 
-        {% comment %}See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>{% endcomment %}
+        // See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
         let responseToCache = response.clone();
 
         caches.open(swconf.cacheName).then((cache) => {
diff --git a/_javascript/theme.js b/_javascript/theme.js
new file mode 100644
index 00000000000..49e4e89bbe3
--- /dev/null
+++ b/_javascript/theme.js
@@ -0,0 +1,138 @@
+/**
+ * Theme management class
+ *
+ * To reduce flickering during page load, this script should be loaded synchronously.
+ */
+class Theme {
+  static #modeKey = 'mode';
+  static #modeAttr = 'data-mode';
+  static #darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
+  static switchable = !document.documentElement.hasAttribute(this.#modeAttr);
+
+  static get DARK() {
+    return 'dark';
+  }
+
+  static get LIGHT() {
+    return 'light';
+  }
+
+  /**
+   * @returns {string} Theme mode identifier
+   */
+  static get ID() {
+    return 'theme-mode';
+  }
+
+  /**
+   * Gets the current visual state of the theme.
+   *
+   * @returns {string} The current visual state, either the mode if it exists,
+   *                   or the system dark mode state ('dark' or 'light').
+   */
+  static get visualState() {
+    if (this.#hasMode) {
+      return this.#mode;
+    } else {
+      return this.#sysDark ? this.DARK : this.LIGHT;
+    }
+  }
+
+  static get #mode() {
+    return (
+      sessionStorage.getItem(this.#modeKey) ||
+      document.documentElement.getAttribute(this.#modeAttr)
+    );
+  }
+
+  static get #isDarkMode() {
+    return this.#mode === this.DARK;
+  }
+
+  static get #hasMode() {
+    return this.#mode !== null;
+  }
+
+  static get #sysDark() {
+    return this.#darkMedia.matches;
+  }
+
+  /**
+   * Maps theme modes to provided values
+   * @param {string} light Value for light mode
+   * @param {string} dark Value for dark mode
+   * @returns {Object} Mapped values
+   */
+  static getThemeMapper(light, dark) {
+    return {
+      [this.LIGHT]: light,
+      [this.DARK]: dark
+    };
+  }
+
+  /**
+   * Initializes the theme based on system preferences or stored mode
+   */
+  static init() {
+    if (!this.switchable) {
+      return;
+    }
+
+    this.#darkMedia.addEventListener('change', () => {
+      const lastMode = this.#mode;
+      this.#clearMode();
+
+      if (lastMode !== this.visualState) {
+        this.#notify();
+      }
+    });
+
+    if (!this.#hasMode) {
+      return;
+    }
+
+    if (this.#isDarkMode) {
+      this.#setDark();
+    } else {
+      this.#setLight();
+    }
+  }
+
+  /**
+   * Flips the current theme mode
+   */
+  static flip() {
+    if (this.#hasMode) {
+      this.#clearMode();
+    } else {
+      this.#sysDark ? this.#setLight() : this.#setDark();
+    }
+    this.#notify();
+  }
+
+  static #setDark() {
+    document.documentElement.setAttribute(this.#modeAttr, this.DARK);
+    sessionStorage.setItem(this.#modeKey, this.DARK);
+  }
+
+  static #setLight() {
+    document.documentElement.setAttribute(this.#modeAttr, this.LIGHT);
+    sessionStorage.setItem(this.#modeKey, this.LIGHT);
+  }
+
+  static #clearMode() {
+    document.documentElement.removeAttribute(this.#modeAttr);
+    sessionStorage.removeItem(this.#modeKey);
+  }
+
+  /**
+   * Notifies other plugins that the theme mode has changed
+   */
+  static #notify() {
+    window.postMessage({ id: this.ID }, '*');
+  }
+}
+
+Theme.init();
+
+export default Theme;
diff --git a/_layouts/compress.html b/_layouts/compress.html
index bb34487d2a7..2779e92a18e 100644
--- a/_layouts/compress.html
+++ b/_layouts/compress.html
@@ -1,10 +1,10 @@
 ---
 # Jekyll layout that compresses HTML
-# v3.1.0
+# v3.2.0
 # http://jch.penibelst.de/
 # © 2014–2015 Anatol Broder
 # MIT License
 ---
 
 {% capture _LINE_FEED %}
-{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" or page.compress_html == false %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index f938a94247b..f36c6057b95 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,7 +13,7 @@
 {% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
+<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
 
   <body>
@@ -25,7 +25,7 @@
 
         <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.refactor or layout.layout == 'default' %}
+            {% if layout.layout == 'default' %}
               {% include refactor-content.html content=content lang=lang %}
             {% else %}
               {{ content }}
@@ -33,7 +33,7 @@
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}
@@ -68,20 +68,19 @@
       </aside>
     </div>
 
-    <div id="mask"></div>
+    <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
 
     {% if site.pwa.enabled %}
       {% include_cached notification.html lang=lang %}
     {% endif %}
 
-    <!-- JavaScripts -->
+    <!-- Embedded scripts -->
 
-    {% include js-selector.html %}
+    {% for _include in layout.script_includes %}
+      {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
+    {% endfor %}
 
-    {% if page.mermaid %}
-      {% include mermaid.html %}
-    {% endif %}
-
-    {% include_cached search-loader.html %}
+    {% include_cached search-loader.html lang=lang %}
   </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
index 4cf4c1d5d99..0161ad8fd3c 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -1,42 +1,48 @@
 ---
 layout: default
-refactor: true
 ---
 
 {% include lang.html %}
 
-{% assign pinned = site.posts | where: 'pin', 'true' %}
-{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
+{% assign all_pinned = site.posts | where: 'pin', 'true' %}
+{% assign all_normal = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
 
 {% assign posts = '' | split: '' %}
 
-<!-- Get pinned posts -->
+<!-- Get pinned posts on current page -->
 
-{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
-{% assign pinned_num = pinned.size | minus: offset %}
+{% assign visible_start = paginator.page | minus: 1 | times: paginator.per_page %}
+{% assign visible_end = visible_start | plus: paginator.per_page %}
 
-{% if pinned_num > 0 %}
-  {% for i in (offset..pinned.size) limit: pinned_num %}
-    {% assign posts = posts | push: pinned[i] %}
+{% if all_pinned.size > visible_start %}
+  {% if all_pinned.size > visible_end %}
+    {% assign pinned_size = paginator.per_page %}
+  {% else %}
+    {% assign pinned_size = all_pinned.size | minus: visible_start %}
+  {% endif %}
+
+  {% for i in (visible_start..all_pinned.size) limit: pinned_size %}
+    {% assign posts = posts | push: all_pinned[i] %}
   {% endfor %}
 {% else %}
-  {% assign pinned_num = 0 %}
+  {% assign pinned_size = 0 %}
 {% endif %}
 
-<!-- Get default posts -->
+<!-- Get normal posts on current page -->
 
-{% assign default_beg = offset | minus: pinned.size %}
+{% assign normal_size = paginator.posts | size | minus: pinned_size %}
 
-{% if default_beg < 0 %}
-  {% assign default_beg = 0 %}
-{% endif %}
+{% if normal_size > 0 %}
+  {% if pinned_size > 0 %}
+    {% assign normal_start = 0 %}
+  {% else %}
+    {% assign normal_start = visible_start | minus: all_pinned.size %}
+  {% endif %}
 
-{% assign default_num = paginator.posts | size | minus: pinned_num %}
-{% assign default_end = default_beg | plus: default_num | minus: 1 %}
+  {% assign normal_end = normal_start | plus: normal_size | minus: 1 %}
 
-{% if default_num > 0 %}
-  {% for i in (default_beg..default_end) %}
-    {% assign posts = posts | push: default[i] %}
+  {% for i in (normal_start..normal_end) %}
+    {% assign posts = posts | push: all_normal[i] %}
   {% endfor %}
 {% endif %}
 
@@ -48,20 +54,39 @@
 
         {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
-          {% unless src contains '//' %}
-            {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
-          {% endunless %}
-
-          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
 
-          {% assign lqip = null %}
+          {% if post.media_subpath %}
+            {% unless src contains '://' %}
+              {% assign src = post.media_subpath
+                | append: '/'
+                | append: src
+                | replace: '///', '/'
+                | replace: '//', '/'
+              %}
+            {% endunless %}
+          {% endif %}
 
           {% if post.image.lqip %}
-            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+            {% 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 %}
 
+          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
+
           <div class="col-md-5">
-            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
+            <img src="{{ src }}" alt="{{ alt }}" {{ lqip_attr }}>
           </div>
 
           {% assign card_body_col = '7' %}
@@ -72,10 +97,7 @@
             <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
             <div class="card-text content mt-0 mb-3">
-              <p>
-                {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+              <p>{% include post-summary.html %}</p>
             </div>
 
             <div class="post-meta flex-grow-1 d-flex align-items-end">
diff --git a/_layouts/post.html b/_layouts/post.html
index f7818bf6e0f..698c86cf698 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,19 +1,24 @@
 ---
 layout: default
-refactor: true
 panel_includes:
   - toc
 tail_includes:
   - related-posts
   - post-nav
-  - comments
+script_includes:
+  - comment
 ---
 
 {% include lang.html %}
 
-<article class="px-1">
+{% include toc-status.html %}
+
+<article class="px-1" data-toc="{{ enable_toc }}">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+      <p class="post-desc fw-light mb-4">{{ page.description }}</p>
+    {% endif %}
 
     <div class="post-meta text-muted">
       <!-- published date -->
@@ -74,14 +79,48 @@ <h1 data-toc-skip>{{ page.title }}</h1>
           </em>
         </span>
 
-        <!-- read time -->
-        {% include read-time.html content=content prompt=true lang=lang %}
+        <div>
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true lang=lang %}
+        </div>
       </div>
-      <!-- .d-flex -->
     </div>
-    <!-- .post-meta -->
   </header>
 
+  {% if enable_toc %}
+    <div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
+      <span class="label text-truncate">{{ page.title }}</span>
+      <button type="button" class="toc-trigger btn me-1">
+        <i class="fa-solid fa-list-ul fa-fw"></i>
+      </button>
+    </div>
+
+    <button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
+      <span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
+      <i class="fa-solid fa-angle-right fa-fw"></i>
+    </button>
+
+    <dialog id="toc-popup" class="p-0">
+      <div class="header d-flex flex-row align-items-center justify-content-between">
+        <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
+        <button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
+          <i class="fas fa-close"></i>
+        </button>
+      </div>
+      <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
+    </dialog>
+  {% endif %}
+
   <div class="content">
     {{ content }}
   </div>
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 7bf569d04aa..a8db26a00ff 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -1,5 +1,6 @@
 ---
 title: Text and Typography
+description: Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
 author: cotes
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
@@ -13,21 +14,22 @@ image:
   alt: Responsive rendering of Chirpy theme on multiple devices.
 ---
 
-This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
-
 ## Headings
 
-# H1 - heading
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
+# H1 — heading
 {: .mt-4 .mb-0 }
 
-## H2 - heading
+## H2 — heading
 {: data-toc-skip='' .mt-4 .mb-0 }
 
-### H3 - heading
+### H3 — heading
 {: data-toc-skip='' .mt-4 .mb-0 }
 
-#### H4 - heading
+#### H4 — heading
 {: data-toc-skip='' .mt-4 }
+<!-- markdownlint-restore -->
 
 ## Paragraph
 
@@ -44,15 +46,15 @@ Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas int
 ### Unordered list
 
 - Chapter
-  + Section
-    * Paragraph
+  - Section
+    - Paragraph
 
 ### ToDo list
 
 - [ ] Job
-  + [x] Step 1
-  + [x] Step 2
-  + [ ] Step 3
+  - [x] Step 1
+  - [x] Step 2
+  - [ ] Step 3
 
 ### Description list
 
@@ -68,6 +70,8 @@ Moon
 
 ## Prompts
 
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
 > An example showing the `tip` type prompt.
 {: .prompt-tip }
 
@@ -79,14 +83,15 @@ Moon
 
 > An example showing the `danger` type prompt.
 {: .prompt-danger }
+<!-- markdownlint-restore -->
 
 ## Tables
 
 | Company                      | Contact          | Country |
-|:-----------------------------|:-----------------|--------:|
+| :--------------------------- | :--------------- | ------: |
 | Alfreds Futterkiste          | Maria Anders     | Germany |
-| Island Trading               | Helen Bennett    | UK      |
-| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
+| Island Trading               | Helen Bennett    |      UK |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli |   Italy |
 
 ## Links
 
@@ -108,7 +113,7 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 
 ### Common
 
-```
+```text
 This is a common code snippet, without syntax highlight and line number.
 ```
 
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 86194ed34f6..f048f013c4a 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_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_CATEGORIE, SUB_CATEGORIE]
+categories: [TOP_CATEGORY, SUB_CATEGORY]
 tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
@@ -31,7 +31,7 @@ tags: [TAG]     # TAG names should always be lowercase
 
 ### Timezone of Date
 
-In order to accurately record the release date of a post, you should not only set up the `timezone` of `_config.yml`{: .filepath} but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
+To accurately record the release date of a post, you should not only set up the `timezone` of `_config.yml`{: .filepath} but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
 
 ### Categories and Tags
 
@@ -58,7 +58,6 @@ Adding author information in `_data/authors.yml` (If your website doesn't have t
 ```
 {: file="_data/authors.yml" }
 
-
 And then use `author` to specify a single entry or `authors` to specify multiple entries:
 
 ```yaml
@@ -74,90 +73,69 @@ Having said that, the key `author` can also identify multiple entries.
 > The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
 {: .prompt-info }
 
-## Table of Contents
+### Post Description
 
-By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:
 
 ```yaml
 ---
-toc: false
+description: Short summary of the post.
 ---
 ```
 
-## Comments
+Additionally, the `description` text will also be displayed under the post title on the post's page.
 
-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.
+## Table of Contents
 
-If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
 
 ```yaml
 ---
-comments: false
+toc: false
 ---
 ```
 
-## Mathematics
+## Comments
 
-For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+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.
+
+If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
 
 ```yaml
 ---
-math: true
+comments: false
 ---
 ```
 
-After enabling the mathematical feature, you can add math equations with the following syntax:
-
-- **Block math** should be added with `$$ math $$` with **mandatory** blank lines before and after `$$`
-  - **Inserting equation numbering** should be added with `$$\begin{equation} math \end{equation}$$`
-  - **Referencing equation numbering** should be done with `\label{eq:label_name}` in the equation block and `\eqref{eq:label_name}` inline with text (see example below)
-- **Inline math** (in lines) should be added with `$$ math $$` without any blank line before or after `$$`
-- **Inline math** (in lists) should be added with `\$$ math $$`
-
-```markdown
-<!-- Block math, keep all blank lines -->
+## Media
 
-$$
-LaTeX_math_expression
-$$
+We refer to images, audio and video as media resources in _Chirpy_.
 
-<!-- Equation numbering, keep all blank lines  -->
+### URL Prefix
 
-$$
-\begin{equation}
-  LaTeX_math_expression
-  \label{eq:label_name}
-\end{equation}
-$$
-
-Can be referenced as \eqref{eq:label_name}.
+From time to time we have to define duplicate URL prefixes for multiple resources in a post, which is a boring task that you can avoid by setting two parameters.
 
-<!-- Inline math in lines, NO blank lines -->
-
-"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
-
-<!-- Inline math in lists, escape the first `$` -->
-
-1. \$$ LaTeX_math_expression $$
-2. \$$ LaTeX_math_expression $$
-3. \$$ LaTeX_math_expression $$
-```
+- If you are using a CDN to host media files, you can specify the `cdn` in `_config.yml`{: .filepath }. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name.
 
-## Mermaid
+  ```yaml
+  cdn: https://cdn.com
+  ```
+  {: file='_config.yml' .nolineno }
 
-[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
+- To specify the resource path prefix for the current post/page range, set `media_subpath` in the _front matter_ of the post:
 
-```yaml
----
-mermaid: true
----
-```
+  ```yaml
+  ---
+  media_subpath: /path/to/media/
+  ---
+  ```
+  {: .nolineno }
 
-Then you can use it like other markdown languages: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
+The option `site.cdn` and `page.media_subpath` can be used individually or in combination to flexibly compose the final resource URL: `[site.cdn/][page.media_subpath/]file.ext`
 
-## Images
+### Images
 
-### Caption
+#### Caption
 
 Add italics to the next line of an image, then it will become the caption and appear at the bottom of the image:
 
@@ -167,9 +145,9 @@ _Image Caption_
 ```
 {: .nolineno}
 
-### Size
+#### Size
 
-In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.
+To prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.
 
 ```markdown
 ![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
@@ -186,7 +164,7 @@ Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`heig
 ```
 {: .nolineno}
 
-### Position
+#### Position
 
 By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
 
@@ -216,7 +194,7 @@ By default, the image is centered, but you can specify the position by using one
   ```
   {: .nolineno}
 
-### Dark/Light mode
+#### Dark/Light mode
 
 You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
 
@@ -225,7 +203,7 @@ You can make images follow theme preferences in dark/light mode. This requires y
 ![Dark mode only](/path/to/dark-mode.png){: .dark }
 ```
 
-### Shadow
+#### Shadow
 
 The screenshots of the program window can be considered to show the shadow effect:
 
@@ -234,56 +212,7 @@ The screenshots of the program window can be considered to show the shadow effec
 ```
 {: .nolineno}
 
-### CDN URL
-
-If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file:
-
-```yaml
-img_cdn: https://cdn.com
-```
-{: file='_config.yml' .nolineno}
-
-Once `img_cdn` is assigned, the CDN URL will be added to the path of all images (images of site avatar and posts) starting with `/`.
-
-For instance, when using images:
-
-```markdown
-![The flower](/path/to/flower.png)
-```
-{: .nolineno}
-
-The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
-
-```html
-<img src="https://cdn.com/path/to/flower.png" alt="The flower" />
-```
-{: .nolineno }
-
-### Image Path
-
-When a post contains many images, it will be a time-consuming task to repeatedly define the path of the images. To solve this, we can define this path in the YAML block of the post:
-
-```yml
----
-img_path: /img/path/
----
-```
-
-And then, the image source of Markdown can write the file name directly:
-
-```md
-![The flower](flower.png)
-```
-{: .nolineno }
-
-The output will be:
-
-```html
-<img src="/img/path/flower.png" alt="The flower" />
-```
-{: .nolineno }
-
-### Preview Image
+#### Preview Image
 
 If you want to add an image at the top of the post, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
 
@@ -297,7 +226,7 @@ image:
 ---
 ```
 
-Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
+Note that the [`media_subpath`](#url-prefix) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
 
 For simple use, you can also just use `image` to define the path.
 
@@ -307,7 +236,7 @@ image: /path/to/image
 ---
 ```
 
-### LQIP
+#### LQIP
 
 For preview images:
 
@@ -318,8 +247,7 @@ image:
 ---
 ```
 
-> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
-
+> You can observe LQIP in the preview image of post \"[Text and Typography](../text-and-typography/)\".
 
 For normal images:
 
@@ -328,6 +256,90 @@ For normal images:
 ```
 {: .nolineno }
 
+### Social Media Platforms
+
+You can embed video/audio from social media platforms with the following syntax:
+
+```liquid
+{% include embed/{Platform}.html id='{ID}' %}
+```
+
+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.
+
+| 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` |
+
+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
+
+If you want to embed a video file directly, use the following syntax:
+
+```liquid
+{% include embed/video.html src='{URL}' %}
+```
+
+Where `URL` is a URL to a video file e.g. `/path/to/sample/video.mp4`.
+
+You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.
+
+- `poster='/path/to/poster.png'` — poster image for a video that is shown while video is downloading
+- `title='Text'` — title for a video that appears below the video and looks same as for images
+- `autoplay=true` — video automatically begins to play back as soon as it can
+- `loop=true` — automatically seek back to the start upon reaching the end of the video
+- `muted=true` — audio will be initially silenced
+- `types` — specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
+
+Consider an example using all of the above:
+
+```liquid
+{%
+  include embed/video.html
+  src='/path/to/video.mp4'
+  types='ogg|mov'
+  poster='poster.png'
+  title='Demo video'
+  autoplay=true
+  loop=true
+  muted=true
+%}
+```
+
+### Audio Files
+
+If you want to embed an audio file directly, use the following syntax:
+
+```liquid
+{% include embed/audio.html src='{URL}' %}
+```
+
+Where `URL` is a URL to an audio file e.g. `/path/to/audio.mp3`.
+
+You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.
+
+- `title='Text'` — title for an audio that appears below the audio and looks same as for images
+- `types` — specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
+
+Consider an example using all of the above:
+
+```liquid
+{%
+  include embed/audio.html
+  src='/path/to/audio.mp3'
+  types='ogg|wav|aac'
+  title='Demo audio'
+%}
+```
+
 ## Pinned Posts
 
 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
@@ -357,7 +369,7 @@ There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They
 ```
 {: .nolineno }
 
-### Filepath Hightlight
+### Filepath Highlight
 
 ```md
 `/path/to/a/file.extend`{: .filepath}
@@ -425,23 +437,72 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 
 Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
-## Videos
+## Mathematics
 
-You can embed a video with the following syntax:
+We use [**MathJax**][mathjax] to generate mathematics. For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
 
-```liquid
-{% include embed/{Platform}.html id='{ID}' %}
+[mathjax]: https://www.mathjax.org/
+
+```yaml
+---
+math: true
+---
 ```
 
-Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
+After enabling the mathematical feature, you can add math equations with the following syntax:
+
+- **Block math** should be added with `$$ math $$` with **mandatory** blank lines before and after `$$`
+  - **Inserting equation numbering** should be added with `$$\begin{equation} math \end{equation}$$`
+  - **Referencing equation numbering** should be done with `\label{eq:label_name}` in the equation block and `\eqref{eq:label_name}` inline with text (see example below)
+- **Inline math** (in lines) should be added with `$$ math $$` without any blank line before or after `$$`
+- **Inline math** (in lists) should be added with `\$$ math $$`
+
+```markdown
+<!-- Block math, keep all blank lines -->
+
+$$
+LaTeX_math_expression
+$$
+
+<!-- Equation numbering, keep all blank lines  -->
+
+$$
+\begin{equation}
+  LaTeX_math_expression
+  \label{eq:label_name}
+\end{equation}
+$$
+
+Can be referenced as \eqref{eq:label_name}.
+
+<!-- Inline math in lines, NO blank lines -->
+
+"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
+
+<!-- Inline math in lists, escape the first `$` -->
+
+1. \$$ LaTeX_math_expression $$
+2. \$$ LaTeX_math_expression $$
+3. \$$ LaTeX_math_expression $$
+```
+
+> Starting with `v7.0.0`, configuration options for **MathJax** have been moved to file `assets/js/data/mathjax.js`{: .filepath }, and you can change the options as needed, such as adding [extensions][mathjax-exts].  
+> If you are building the site via `chirpy-starter`, copy that file from the gem installation directory (check with command `bundle info --path jekyll-theme-chirpy`) to the same directory in your repository.
+{: .prompt-tip }
 
-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.
+[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
 
-| 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` |
+## Mermaid
+
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
+
+```yaml
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown languages: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
 
 ## Learn More
 
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index a411dbc26cd..71383938b75 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -1,63 +1,84 @@
 ---
 title: Getting Started
+description: >-
+  Get started with Chirpy basics in this comprehensive overview.
+  You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
 author: cotes
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 pin: true
-img_path: '/posts/20180809'
+media_subpath: '/posts/20180809'
 ---
 
-## Prerequisites
+## Creating a Site Repository
 
-Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of the basic environment. [Git](https://git-scm.com/) also needs to be installed.
+When creating your site repository, you have two options depending on your needs:
 
-## Installation
+### Option 1. Using the Starter (Recommended)
 
-### Creating a New Site
+This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.
 
-There are two ways to create a new repository for this theme:
+1. Sign in to GitHub and navigate to the [**starter**][starter].
+2. Click the <kbd>Use this template</kbd> button and then select <kbd>Create a new repository</kbd>.
+3. Name the new repository `<username>.github.io`, replacing `username` with your lowercase GitHub username.
 
-- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
-- [**GitHub Fork**](#option-2-github-fork) - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
+### Option 2. Forking the Theme
 
-#### Option 1. Using the Chirpy Starter
+This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So don't try this unless you are familiar with Jekyll and plan to heavily modify this theme.
 
-Sign in to GitHub and browse to [**Chirpy Starter**][starter], click the button <kbd>Use this template</kbd> > <kbd>Create a new repository</kbd>, and name the new repository `USERNAME.github.io`, where `USERNAME` represents your GitHub username.
+1. Sign in to GitHub.
+2. [Fork the theme repository](https://github.com/cotes2020/jekyll-theme-chirpy/fork).
+3. Name the new repository `<username>.github.io`, replacing `username` with your lowercase GitHub username.
 
-#### Option 2. GitHub Fork
+## Setting up the Environment
 
-Sign in to GitHub to [fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), and then rename it to `USERNAME.github.io` (`USERNAME` means your username).
+Once your repository is created, it's time to set up your development environment. There are two primary methods:
 
-Next, clone your site to local machine. In order to build JavaScript files later, we need to install [Node.js][nodejs], and then run the tool:
+### Using Dev Containers (Recommended for Windows)
 
-```console
-$ bash tools/init
-```
+Dev Containers offer an isolated environment using Docker, which prevents conflicts with your system and ensures all dependencies are managed within the container.
 
-> If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
-{: .prompt-info }
+**Steps**:
 
-The above command will:
+1. Install Docker:
+   - On Windows/macOS, install [Docker Desktop][docker-desktop].
+   - On Linux, install [Docker Engine][docker-engine].
+2. Install [VS Code][vscode] and the [Dev Containers extension][dev-containers].
+3. Clone your repository:
+   - For Docker Desktop: Start VS Code and [clone your repo in a container volume][dc-clone-in-vol].
+   - For Docker Engine: Clone your repo locally, then [open it in a container][dc-open-in-container] via VS Code.
+4. Wait for the Dev Containers setup to complete.
 
-1. Check out the code to the [latest tag][latest-tag] (to ensure the stability of your site: as the code for the default branch is under development).
-2. Remove non-essential sample files and take care of GitHub-related files.
-3. Build JavaScript files and export to `assets/js/dist/`{: .filepath }, then make them tracked by Git.
-4. Automatically create a new commit to save the changes above.
+### Setting up Natively (Recommended for Unix-like OS)
 
-### Installing Dependencies
+For Unix-like systems, you can set up the environment natively for optimal performance, though you can also use Dev Containers as an alternative.
 
-Before running local server for the first time, go to the root directory of your site and run:
+**Steps**:
 
-```console
-$ bundle
-```
+1. Follow the [Jekyll installation guide](https://jekyllrb.com/docs/installation/) to install Jekyll and ensure [Git](https://git-scm.com/) is installed.
+2. Clone your repository to your local machine.
+3. If you forked the theme, install [Node.js][nodejs] and run `bash tools/init.sh` in the root directory to initialize the repository.
+4. Run command `bundle` in the root of your repository to install the dependencies.
 
 ## Usage
 
+### Start the Jekyll Server
+
+To run the site locally, use the following command:
+
+```terminal
+$ bundle exec jekyll serve
+```
+
+> If you are using Dev Containers, you must run that command in the **VS Code** Terminal.
+{: .prompt-info }
+
+After a few seconds, the local server will be available at <http://127.0.0.1:4000>.
+
 ### Configuration
 
-Update the variables of `_config.yml`{: .filepath} as needed. Some of them are typical options:
+Update the variables in `_config.yml`{: .filepath} as needed. Some typical options include:
 
 - `url`
 - `avatar`
@@ -66,70 +87,63 @@ Update the variables of `_config.yml`{: .filepath} as needed. Some of them are t
 
 ### Social Contact Options
 
-Social contact options are displayed at the bottom of the sidebar. You can turn on/off the specified contacts in file `_data/contact.yml`{: .filepath }.
-
-### Customizing Stylesheet
-
-If you need to customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
-
-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} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.
+Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the `_data/contact.yml`{: .filepath} file.
 
-### Customing Static Assets
+### Customizing the Stylesheet
 
-Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/origin/cors.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published.
+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.
 
-Also, if you'd like to self-host the static assets, please refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme).
+### Customizing Static Assets
 
-### Running Local Server
-
-You may want to preview the site contents before publishing, so just run it by:
-
-```console
-$ bundle exec jekyll s
-```
+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.
 
-After a few seconds, the local service will be published at _<http://127.0.0.1:4000>_.
+If you prefer to self-host the static assets, refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme) repository.
 
 ## Deployment
 
-Before the deployment begins, check out the file `_config.yml`{: .filepath} and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`.
+Before deploying, check the `_config.yml`{: .filepath} file and ensure the `url` is configured correctly. If you prefer a [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or if you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to set the `baseurl` to your project name, starting with a slash, e.g., `/project-name`.
 
 Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
 
-### Deploy by Using GitHub Actions
+### Deploy Using Github Actions
 
-There are a few things to get ready for.
+Prepare the following:
 
 - If you're on the GitHub Free plan, keep your site repository public.
-- If you have committed `Gemfile.lock`{: .filepath} to the repository, and your local machine is not running Linux, go to the root of your site and update the platform list of the lock-file:
+- If you have committed `Gemfile.lock`{: .filepath} to the repository, and your local machine is not running Linux, update the platform list of the lock file:
 
   ```console
   $ bundle lock --add-platform x86_64-linux
   ```
 
-Next, configure the _Pages_ service.
+Next, configure the _Pages_ service:
 
-1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.  
-![Build source](pages-source-light.png){: .light .border .normal w='375' h='140' }
-![Build source](pages-source-dark.png){: .dark .normal w='375' h='140' }
+1. Go to your repository on GitHub. Select the _Settings_ tab, then click _Pages_ in the left navigation bar. In the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.  
+   ![Build source](pages-source-light.png){: .light .border .normal w='375' h='140' }
+   ![Build source](pages-source-dark.png){: .dark .normal w='375' h='140' }
 
 2. Push any commits to GitHub to trigger the _Actions_ workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site will be deployed automatically.
 
-At this point, you can go to the URL indicated by GitHub to access your site.
+You can now visit the URL provided by GitHub to access your site.
 
-### Manually Build and Deploy
+### Manual Build and Deployment
 
-On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
+For self-hosted servers, you will need to build the site on your local machine and then upload the site files to the server.
 
-Go to the root of the source project, and build your site as follows:
+Navigate to the root of the source project, and build your site with the following command:
 
 ```console
 $ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-Unless you specified the output path, the generated site files will be placed in folder `_site`{: .filepath} of the project's root directory. Now you should upload those files to the target server.
+Unless you specified the output path, the generated site files will be placed in the `_site`{: .filepath} folder of the project's root directory. Upload these files to your target server.
 
 [nodejs]: https://nodejs.org/
 [starter]: https://github.com/cotes2020/chirpy-starter
 [pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
-[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
+[docker-desktop]: https://www.docker.com/products/docker-desktop/
+[docker-engine]: https://docs.docker.com/engine/install/
+[vscode]: https://code.visualstudio.com/
+[dev-containers]: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
+[dc-clone-in-vol]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume
+[dc-open-in-container]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
index 6a3e2da1490..66a43e6291d 100644
--- a/_posts/2019-08-11-customize-the-favicon.md
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -10,26 +10,28 @@ 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>Select 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>Pick 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>Generate your Favicons and HTML code</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>Next →</kbd> to generate the favicon.
 
 ## Download & Replace
 
-Download the generated package, unzip and delete the following two from the extracted files:
+Download the generated package, unzip and delete the following file(s) from the extracted files:
 
-- `browserconfig.xml`{: .filepath}
 - `site.webmanifest`{: .filepath}
 
-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.
+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.
 
 The following table will help you understand the changes to the favicon files:
 
-| File(s)             | From Online Tool                  | From Chirpy |
-|---------------------|:---------------------------------:|:-----------:|
-| `*.PNG`             | ✓                                 | ✗           |
-| `*.ICO`             | ✓                                 | ✗           |
+| File(s) | From Online Tool | From Chirpy |
+| ------- | :--------------: | :---------: |
+| `*.PNG` |        ✓         |      ✗      |
+| `*.ICO` |        ✓         |      ✗      |
+| `*.SVG` |        ✓         |      ✗      |
 
+
+<!-- markdownlint-disable-next-line -->
 >  ✓ means keep, ✗ means delete.
 {: .prompt-info }
 
diff --git a/_sass/abstracts/_breakpoints.scss b/_sass/abstracts/_breakpoints.scss
new file mode 100644
index 00000000000..e40cefeee36
--- /dev/null
+++ b/_sass/abstracts/_breakpoints.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+
+$-breakpoints: (
+  // 1 column
+  sm: 576px,
+  md: 768px,
+  // 2 columns
+  lg: 850px,
+  // 3 columns
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1650px
+);
+
+@function get($breakpoint) {
+  @return map.get($-breakpoints, $breakpoint);
+}
+
+/* Less than the given width */
+@mixin lt($width) {
+  @media all and (max-width: calc(#{$width} - 1px)) {
+    @content;
+  }
+}
+
+/* Less than or equal to the given width */
+@mixin lte($width) {
+  @media all and (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media all and (min-width: get(sm)) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media all and (min-width: get(md)) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media all and (min-width: get(lg)) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media all and (min-width: get(xl)) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  @media all and (min-width: get(xxl)) {
+    @content;
+  }
+}
+
+@mixin xxxl {
+  @media all and (min-width: get(xxxl)) {
+    @content;
+  }
+}
+
+@mixin between($min, $max) {
+  @media all and (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
diff --git a/_sass/abstracts/_index.scss b/_sass/abstracts/_index.scss
new file mode 100644
index 00000000000..6c9e21cf46b
--- /dev/null
+++ b/_sass/abstracts/_index.scss
@@ -0,0 +1,4 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'placeholders';
+@forward 'breakpoints';
diff --git a/_sass/abstracts/_mixins.scss b/_sass/abstracts/_mixins.scss
new file mode 100644
index 00000000000..c5eeee3cafc
--- /dev/null
+++ b/_sass/abstracts/_mixins.scss
@@ -0,0 +1,80 @@
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
+@mixin pl-pr($val, $important: false) {
+  @if $important {
+    padding-left: $val !important;
+    padding-right: $val !important;
+  } @else {
+    padding-left: $val;
+    padding-right: $val;
+  }
+}
+
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
+  opacity: 0.6;
+}
+
+@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
+  color: $color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
+  &.prompt-#{$type} {
+    background-color: var(--prompt-#{$type}-bg);
+
+    &::before {
+      content: $fa-content;
+      color: var(--prompt-#{$type}-icon-color);
+      font: var(--fa-font-#{$fa-style});
+
+      @if $rotate != 0 {
+        transform: rotate(#{$rotate}deg);
+      }
+    }
+  }
+}
+
+@mixin slide($append: null) {
+  $basic: transform 0.4s ease;
+
+  @if $append {
+    transition: $basic, $append;
+  } @else {
+    transition: $basic;
+  }
+}
+
+@mixin max-w-100 {
+  max-width: 100%;
+}
diff --git a/_sass/addon/module.scss b/_sass/abstracts/_placeholders.scss
similarity index 60%
rename from _sass/addon/module.scss
rename to _sass/abstracts/_placeholders.scss
index d1b7103cdb9..d8a10604620 100644
--- a/_sass/addon/module.scss
+++ b/_sass/abstracts/_placeholders.scss
@@ -1,24 +1,11 @@
-/*
-* Mainly scss modules, only imported to `assets/css/main.scss`
-*/
-
-/* ---------- scss placeholder --------- */
+@use 'variables' as v;
+@use 'mixins' as mx;
 
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: $font-family-heading;
-}
-
-%section {
-  main & {
-    margin-top: 2.5rem;
-    margin-bottom: 1.25rem;
-
-    &:focus {
-      outline: none; /* avoid outline in Safari */
-    }
-  }
+  font-family: v.$font-family-heading;
+  scroll-margin-top: 3.5rem;
 }
 
 %anchor {
@@ -44,7 +31,10 @@
 }
 
 %tag-hover {
+  @extend %link-color;
+
   background: var(--tag-hover);
+  border-color: var(--tag-hover);
   transition: background 0.35s ease-in-out;
 }
 
@@ -92,7 +82,7 @@
 }
 
 %rounded {
-  border-radius: $base-radius;
+  border-radius: v.$radius-lg;
 }
 
 %img-caption {
@@ -122,8 +112,12 @@
   -webkit-box-orient: vertical;
 }
 
+%text-ellipsis {
+  @include mx.text-ellipsis;
+}
+
 %text-highlight {
-  color: var(--text-muted-hightlight-color);
+  color: var(--text-muted-highlight-color);
   font-weight: 600;
 }
 
@@ -145,56 +139,25 @@
   }
 }
 
-/* ---------- scss mixin --------- */
-
-@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) {
-  padding-left: $val;
-  padding-right: $val;
-}
-
-@mixin placeholder {
-  color: var(--text-muted-color) !important;
+%btn-color {
+  button i {
+    color: #999999;
+  }
 }
 
-@mixin placeholder-focus {
-  opacity: 0.6;
+%code-snippet-bg {
+  background-color: var(--highlight-bg-color);
 }
 
-@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
-  color: $color;
-  font-size: $font-size;
-  font-weight: $font-weight;
+%code-snippet-padding {
+  padding-left: 1rem;
+  padding-right: 1.5rem;
 }
 
-@mixin align-center {
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
+%max-w-100 {
+  max-width: 100%;
 }
 
-@mixin prompt($type, $fa-content, $fa-style: 'solid') {
-  &.prompt-#{$type} {
-    background-color: var(--prompt-#{$type}-bg);
-
-    &::before {
-      content: $fa-content;
-      color: var(--prompt-#{$type}-icon-color);
-      font: var(--fa-font-#{$fa-style});
-    }
-  }
+%panel-border {
+  border-left: 1px solid var(--main-border-color);
 }
diff --git a/_sass/addon/variables.scss b/_sass/abstracts/_variables.scss
similarity index 92%
rename from _sass/addon/variables.scss
rename to _sass/abstracts/_variables.scss
index 8924a00b233..0194e40baa3 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/abstracts/_variables.scss
@@ -1,7 +1,3 @@
-/*
- * The SCSS variables
- */
-
 /* sidebar */
 
 $sidebar-width: 260px !default; /* the basic width */
@@ -16,7 +12,8 @@ $search-max-width: 200px !default;
 $footer-height: 5rem !default;
 $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
-$base-radius: 0.625rem !default;
+$radius-sm: 6px !default;
+$radius-lg: 10px !default;
 $back2top-size: 2.75rem !default;
 
 /* syntax highlight */
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
deleted file mode 100644
index d73a051b785..00000000000
--- a/_sass/addon/commons.scss
+++ /dev/null
@@ -1,1540 +0,0 @@
-/* The common styles */
-
-html {
-  @media (prefers-color-scheme: light) {
-    &:not([data-mode]),
-    &[data-mode='light'] {
-      @include light-scheme;
-    }
-
-    &[data-mode='dark'] {
-      @include dark-scheme;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:not([data-mode]),
-    &[data-mode='dark'] {
-      @include dark-scheme;
-    }
-
-    &[data-mode='light'] {
-      @include light-scheme;
-    }
-  }
-
-  font-size: 16px;
-}
-
-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: $font-family-base;
-}
-
-/* --- Typography --- */
-
-@for $i from 1 through 5 {
-  h#{$i} {
-    @extend %heading;
-
-    @if $i > 1 {
-      @extend %section;
-      @extend %anchor;
-    }
-
-    @if $i < 5 {
-      $factor: 0.18rem;
-
-      @if $i == 1 {
-        $factor: 0.23rem;
-      }
-
-      font-size: 1rem + (5 - $i) * $factor;
-    } @else {
-      font-size: 1rem;
-    }
-  }
-}
-
-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: 5px solid var(--blockquote-border-color);
-  padding-left: 1rem;
-  color: var(--blockquote-text-color);
-
-  > 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 prompt('tip', '\f0eb', 'regular');
-  @include prompt('info', '\f06a');
-  @include prompt('warning', '\f06a');
-  @include prompt('danger', '\f071');
-}
-
-kbd {
-  font-family: inherit;
-  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: 0.25rem;
-  border: solid 1px var(--kbd-wrap-color);
-  box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
-}
-
-footer {
-  background-color: var(--main-bg);
-  height: $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;
-  }
-}
-
-/* --- Panels --- */
-
-.access {
-  top: 2rem;
-  transition: top 0.2s ease-in-out;
-  margin-top: 3rem;
-  margin-bottom: 4rem;
-
-  &:only-child {
-    position: -webkit-sticky;
-    position: sticky;
-  }
-
-  > section {
-    padding-left: 1rem;
-    border-left: 1px solid var(--main-border-color);
-
-    &:not(:last-child) {
-      margin-bottom: 4rem;
-    }
-  }
-
-  .content {
-    font-size: 0.9rem;
-  }
-}
-
-#panel-wrapper {
-  /* the headings */
-  .panel-heading {
-    font-family: inherit;
-    line-height: inherit;
-
-    @include 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;
-    }
-  }
-}
-
-#access-lastmod {
-  a {
-    &:hover {
-      @extend %link-hover;
-    }
-
-    @extend %no-bottom-border;
-
-    color: inherit;
-  }
-}
-
-.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;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-}
-
-.footnote {
-  @at-root a#{&} {
-    @include ml-mr(1px);
-    @include pl-pr(2px);
-
-    border-bottom-style: none !important;
-  }
-}
-
-sup {
-  @extend %sup-fn-target;
-}
-
-.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 rgba(210, 215, 217, 0.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 */
-}
-
-/* --- post --- */
-
-.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-hovor-bg);
-    opacity: 0;
-    transition: opacity 0.35s ease-in-out;
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.3;
-    }
-  }
-}
-
-main {
-  line-height: 1.75;
-
-  h1 {
-    margin-top: 2rem;
-    margin-bottom: 1.5rem;
-  }
-
-  p {
-    > a.popup {
-      &:not(.normal):not(.left):not(.right) {
-        @include align-center;
-      }
-    }
-  }
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
-.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;
-
-  a {
-    &.popup {
-      @extend %no-cursor;
-      @extend %img-caption;
-      @include 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);
-  }
-} /* .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;
-
-  @extend %rounded;
-
-  &.youtube,
-  &.bilibili {
-    aspect-ratio: 16 / 9;
-  }
-
-  &.twitch {
-    aspect-ratio: 310 / 189;
-  }
-}
-
-/* --- buttons --- */
-.btn-lang {
-  border: 1px solid !important;
-  padding: 1px 3px;
-  border-radius: 3px;
-  color: var(--link-color);
-
-  &:focus {
-    box-shadow: none;
-  }
-}
-
-/* --- Effects classes --- */
-
-.loaded {
-  display: block !important;
-
-  @at-root .d-flex#{&} {
-    display: flex !important;
-  }
-}
-
-.unloaded {
-  display: none !important;
-}
-
-.visible {
-  visibility: visible !important;
-}
-
-.hidden {
-  visibility: hidden !important;
-}
-
-.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 --- */
-
-/* magnific-popup */
-
-figure .mfp-title {
-  text-align: center;
-  padding-right: 0;
-  margin-top: 0.5rem;
-}
-
-.mfp-img {
-  transition: none;
-}
-
-/* mermaid */
-.mermaid {
-  text-align: center;
-}
-
-/* MathJax */
-mjx-container {
-  overflow-y: hidden;
-  min-width: auto !important;
-}
-
-/* --- sidebar layout --- */
-
-$sidebar-display: 'sidebar-display';
-$btn-border-width: 3px;
-$btn-mb: 0.5rem;
-
-#sidebar {
-  @include pl-pr(0);
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  overflow-y: auto;
-  width: $sidebar-width;
-  z-index: 99;
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--sidebar-border-color);
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-
-  %sidebar-link-hover {
-    &:hover {
-      color: var(--sidebar-active-color);
-    }
-  }
-
-  a {
-    @extend %sidebar-links;
-  }
-
-  #avatar {
-    display: block;
-    width: 7rem;
-    height: 7rem;
-    overflow: hidden;
-    box-shadow: var(--avatar-border-color) 0 0 0 2px;
-    transform: translateZ(0); /* fixed the zoom in Safari */
-
-    img {
-      transition: transform 0.5s;
-
-      &:hover {
-        transform: scale(1.2);
-      }
-    }
-  }
-
-  .profile-wrapper {
-    @include mt-mb(2.5rem);
-    @extend %clickable-transition;
-
-    padding-left: 2.5rem;
-    padding-right: 1.25rem;
-    width: 100%;
-  }
-
-  .site-title {
-    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;
-
-    a {
-      @extend %clickable-transition;
-      @extend %sidebar-link-hover;
-
-      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%;
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-
-      a.nav-link {
-        @include 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;
-
-    $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;
-      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: $sb-btn-gap;
-      }
-    }
-
-    i {
-      line-height: $btn-size;
-    }
-
-    .mode-toggle {
-      padding: 0;
-      border: 0;
-
-      @extend %button;
-      @extend %sidebar-links;
-      @extend %sidebar-link-hover;
-    }
-
-    .icon-border {
-      @extend %no-cursor;
-      @include ml-mr(calc(($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;
-    }
-  } /* .sidebar-bottom */
-} /* #sidebar */
-
-@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;
-  }
-}
-
-#search-result-wrapper {
-  display: none;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-
-  .content {
-    margin-top: 2rem;
-  }
-}
-
-/* --- top-bar --- */
-
-#topbar-wrapper {
-  height: $topbar-height;
-  background-color: var(--topbar-bg);
-}
-
-#topbar {
-  button i {
-    color: #999999;
-  }
-
-  #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;
-        }
-      }
-    }
-  }
-} /* #topbar */
-
-::-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;
-}
-
-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);
-  }
-}
-
-#sidebar-trigger,
-#search-trigger {
-  display: none;
-}
-
-/* '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;
-  }
-}
-
-#search-hints {
-  padding: 0 1rem;
-
-  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;
-  }
-}
-
-#search-results {
-  padding-bottom: 3rem;
-
-  a {
-    &:hover {
-      @extend %link-hover;
-    }
-
-    @extend %link-color;
-    @extend %no-bottom-border;
-    @extend %heading;
-
-    font-size: 1.4rem;
-    line-height: 2.5rem;
-  }
-
-  > article {
-    width: 100%;
-
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    /* icons */
-    i {
-      color: #818182;
-      margin-right: 0.15rem;
-      font-size: 80%;
-    }
-
-    > p {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-    }
-  }
-} /* #search-results */
-
-#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%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-  white-space: nowrap;
-}
-
-#mask {
-  display: none;
-  position: fixed;
-  inset: 0 0 0 0;
-  height: 100%;
-  width: 100%;
-  z-index: 1;
-
-  @at-root [#{$sidebar-display}] & {
-    display: block !important;
-  }
-}
-
-/* --- basic wrappers --- */
-
-#main-wrapper {
-  position: relative;
-
-  @include pl-pr(0);
-
-  > .container {
-    min-height: 100vh;
-  }
-}
-
-#topbar-wrapper.row,
-#main-wrapper > .container > .row,
-#search-result-wrapper > .row {
-  @include ml-mr(0);
-}
-
-#tail-wrapper {
-  > :not(script) {
-    margin-top: 3rem;
-  }
-}
-
-/* --- button back-to-top --- */
-
-#back-to-top {
-  display: none;
-  z-index: 1;
-  cursor: pointer;
-  position: fixed;
-  right: 1rem;
-  bottom: calc($footer-height-large - $back2top-size / 2);
-  background: var(--button-bg);
-  color: var(--btn-backtotop-color);
-  padding: 0;
-  width: $back2top-size;
-  height: $back2top-size;
-  border-radius: 50%;
-  border: 1px solid var(--btn-backtotop-border-color);
-  transition: transform 0.2s ease-out;
-  -webkit-transition: transform 0.2s ease-out;
-
-  &:hover {
-    transform: translate3d(0, -5px, 0);
-    -webkit-transform: translate3d(0, -5px, 0);
-  }
-
-  i {
-    line-height: $back2top-size;
-    position: relative;
-    bottom: 2px;
-  }
-}
-
-#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: rgba(255, 255, 255, 0.5);
-      color: #1b1b1eba;
-      position: fixed;
-      left: 50%;
-      bottom: 20%;
-      transform: translateX(-50%);
-      -webkit-animation: popup 0.8s;
-      animation: popup 0.8s;
-    }
-  }
-}
-
-/*
-  Responsive Design:
-
- {sidebar, content, panel} >= 1200px screen width
- {sidebar, content} >= 850px screen width
- {content} <= 849px screen width
-
-*/
-
-@media all and (max-width: 576px) {
-  main {
-    .content {
-      > blockquote[class^='prompt-'] {
-        @include ml-mr(-1rem);
-
-        border-radius: 0;
-        max-width: none;
-      }
-    }
-  }
-
-  #avatar {
-    width: 5rem;
-    height: 5rem;
-  }
-}
-
-@media all and (max-width: 768px) {
-  %full-width {
-    max-width: 100%;
-  }
-
-  #topbar {
-    @extend %full-width;
-  }
-
-  #main-wrapper > .container {
-    @extend %full-width;
-    @include pl-pr(0);
-  }
-}
-
-/* hide sidebar and panel */
-@media all and (max-width: 849px) {
-  @mixin slide($append: null) {
-    $basic: transform 0.4s ease;
-
-    @if $append {
-      transition: $basic, $append;
-    } @else {
-      transition: $basic;
-    }
-  }
-
-  footer {
-    @include slide;
-
-    height: $footer-height-large;
-    padding: 1.5rem 0;
-  }
-
-  [#{$sidebar-display}] {
-    #sidebar {
-      transform: translateX(0);
-    }
-
-    #main-wrapper {
-      transform: translateX($sidebar-width);
-    }
-
-    #back-to-top {
-      visibility: hidden;
-    }
-  }
-
-  #sidebar {
-    @include slide;
-
-    transform: translateX(-$sidebar-width); /* hide */
-    -webkit-transform: translateX(-$sidebar-width);
-  }
-
-  #main-wrapper {
-    @include slide;
-  }
-
-  #topbar,
-  #main-wrapper > .container {
-    max-width: 100%;
-  }
-
-  #search-result-wrapper {
-    width: 100%;
-  }
-
-  #breadcrumb,
-  search {
-    display: none;
-  }
-
-  #topbar-wrapper {
-    @include slide(top 0.2s ease);
-
-    left: 0;
-  }
-
-  main,
-  #panel-wrapper {
-    margin-top: 0;
-  }
-
-  #topbar-title,
-  #sidebar-trigger,
-  #search-trigger {
-    display: block;
-  }
-
-  #search-result-wrapper .content {
-    letter-spacing: 0;
-  }
-
-  #tags {
-    justify-content: center !important;
-  }
-
-  h1.dynamic-title {
-    display: none;
-
-    ~ .content {
-      margin-top: 2.5rem;
-    }
-  }
-} /* max-width: 849px */
-
-/* Sidebar is visible */
-@media all and (min-width: 850px) {
-  /* Solved jumping scrollbar */
-  html {
-    overflow-y: scroll;
-  }
-
-  #main-wrapper {
-    margin-left: $sidebar-width;
-  }
-
-  #sidebar {
-    .profile-wrapper {
-      margin-top: 3rem;
-    }
-  }
-
-  #search-hints {
-    display: none;
-  }
-
-  search {
-    max-width: $search-max-width;
-  }
-
-  #search-result-wrapper {
-    max-width: $main-content-max-width;
-    justify-content: start !important;
-  }
-
-  main {
-    h1 {
-      margin-top: 3rem;
-    }
-  }
-
-  div.content .table-wrapper > table {
-    min-width: 70%;
-  }
-
-  /* button 'back-to-Top' position */
-  #back-to-top {
-    right: 5%;
-    bottom: calc($footer-height - $back2top-size / 2);
-  }
-
-  #topbar-title {
-    text-align: left;
-  }
-}
-
-/* Pad horizontal */
-@media all and (min-width: 992px) and (max-width: 1199px) {
-  #main-wrapper > .container .col-lg-11 {
-    flex: 0 0 96%;
-    max-width: 96%;
-  }
-}
-
-/* Compact icons in sidebar & panel hidden */
-@media all and (min-width: 850px) and (max-width: 1199px) {
-  #search-results > div {
-    max-width: 700px;
-  }
-
-  #breadcrumb {
-    width: 65%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: keep-all;
-    white-space: nowrap;
-  }
-}
-
-/* panel hidden */
-@media all and (max-width: 1199px) {
-  #panel-wrapper {
-    display: none;
-  }
-
-  #main-wrapper > .container > div.row {
-    justify-content: center !important;
-  }
-}
-
-/* --- desktop mode, both sidebar and panel are visible --- */
-
-@media all and (min-width: 1200px) {
-  search {
-    margin-right: 4rem;
-  }
-
-  #search-input {
-    transition: all 0.3s ease-in-out;
-  }
-
-  #search-results > article {
-    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%;
-    }
-  }
-
-  .content {
-    font-size: 1.03rem;
-  }
-}
-
-@media all and (min-width: 1400px) {
-  #back-to-top {
-    right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
-  }
-}
-
-@media all and (min-width: 1650px) {
-  $icon-gap: 1rem;
-
-  #main-wrapper {
-    margin-left: $sidebar-width-large;
-  }
-
-  #topbar-wrapper {
-    left: $sidebar-width-large;
-  }
-
-  search {
-    margin-right: calc(
-      $main-content-max-width / 4 - $search-max-width - 0.75rem
-    );
-  }
-
-  #main-wrapper > .container {
-    max-width: $main-content-max-width;
-    padding-left: 1.75rem !important;
-    padding-right: 1.75rem !important;
-  }
-
-  main.col-12,
-  #tail-wrapper {
-    padding-right: 4.5rem !important;
-  }
-
-  #back-to-top {
-    right: calc(
-      (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
-    );
-  }
-
-  #sidebar {
-    width: $sidebar-width-large;
-
-    .profile-wrapper {
-      margin-top: 3.5rem;
-      margin-bottom: 2.5rem;
-      padding-left: 3.5rem;
-    }
-
-    ul {
-      li.nav-item {
-        @include pl-pr(2.75rem);
-      }
-    }
-
-    .sidebar-bottom {
-      padding-left: 2.75rem;
-      margin-bottom: 1.75rem;
-
-      a:not(:last-child) {
-        margin-right: $sb-btn-gap-lg;
-      }
-
-      .icon-border {
-        @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
-      }
-    }
-  }
-} /* min-width: 1650px */
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
new file mode 100644
index 00000000000..b512a484cc2
--- /dev/null
+++ b/_sass/base/_base.scss
@@ -0,0 +1,483 @@
+@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;
+  }
+}
diff --git a/_sass/base/_index.scss b/_sass/base/_index.scss
new file mode 100644
index 00000000000..611d28ff4ab
--- /dev/null
+++ b/_sass/base/_index.scss
@@ -0,0 +1,4 @@
+@forward 'reset';
+@forward 'base';
+@forward 'typography';
+@forward 'syntax';
diff --git a/_sass/base/_reset.scss b/_sass/base/_reset.scss
new file mode 100644
index 00000000000..1e5a6294662
--- /dev/null
+++ b/_sass/base/_reset.scss
@@ -0,0 +1,41 @@
+@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;
+}
diff --git a/_sass/addon/syntax.scss b/_sass/base/_syntax.scss
similarity index 72%
rename from _sass/addon/syntax.scss
rename to _sass/base/_syntax.scss
index 68796f28149..34ddbe600f4 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/base/_syntax.scss
@@ -1,44 +1,7 @@
-/*
-* The syntax highlight.
-*/
-
-@import 'colors/syntax-light';
-@import 'colors/syntax-dark';
-
-html {
-  @media (prefers-color-scheme: light) {
-    &:not([data-mode]),
-    &[data-mode='light'] {
-      @include light-syntax;
-    }
-
-    &[data-mode='dark'] {
-      @include dark-syntax;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:not([data-mode]),
-    &[data-mode='dark'] {
-      @include dark-syntax;
-    }
-
-    &[data-mode='light'] {
-      @include light-syntax;
-    }
-  }
-}
-
-/* -- code snippets -- */
-
-%code-snippet-bg {
-  background-color: var(--highlight-bg-color);
-}
-
-%code-snippet-padding {
-  padding-left: 1rem;
-  padding-right: 1.5rem;
-}
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
 
 .highlighter-rouge {
   color: var(--highlighter-rouge-color);
@@ -50,18 +13,17 @@ html {
   @extend %rounded;
   @extend %code-snippet-bg;
 
+  overflow: auto;
+  padding-bottom: 0.75rem;
+
   @at-root figure#{&} {
     @extend %code-snippet-bg;
   }
 
-  overflow: auto;
-  padding-bottom: 0.75rem;
-
   pre {
     margin-bottom: 0;
-    font-size: $code-font-size;
+    font-size: v.$code-font-size;
     line-height: 1.4rem;
-    word-wrap: normal; /* Fixed Safari overflow-x */
   }
 
   table {
@@ -101,10 +63,10 @@ code {
   color: var(--code-color);
 
   &.highlighter-rouge {
-    font-size: $code-font-size;
+    font-size: v.$code-font-size;
     padding: 3px 5px;
-    word-break: break-word;
-    border-radius: 4px;
+    overflow-wrap: break-word;
+    border-radius: v.$radius-sm;
     background-color: var(--inline-code-bg);
   }
 
@@ -150,9 +112,42 @@ div[class^='language-'] {
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
   .content > & {
-    @include ml-mr(-1rem);
+    @include mx.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 {
@@ -184,18 +179,18 @@ div {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: $code-header-height;
+  height: v.$code-header-height;
   margin-left: 0.75rem;
   margin-right: 0.25rem;
 
   /* the label block */
   span {
-    line-height: $code-header-height;
+    line-height: v.$code-header-height;
 
     /* label icon */
     i {
       font-size: 1rem;
-      width: $code-icon-width;
+      width: v.$code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -223,8 +218,8 @@ div {
     @extend %rounded;
 
     border: 1px solid transparent;
-    height: $code-header-height;
-    width: $code-header-height;
+    height: v.$code-header-height;
+    width: v.$code-header-height;
     padding: 0;
     background-color: inherit;
 
@@ -247,7 +242,7 @@ div {
     }
 
     &:not([timeout]):hover {
-      background-color: rgba(128, 128, 128, 0.37);
+      background-color: rgb(128 128 128 / 37%);
 
       i {
         color: white;
@@ -255,38 +250,3 @@ div {
     }
   }
 }
-
-@media all and (min-width: 576px) {
-  div[class^='language-'] {
-    .content > & {
-      @include ml-mr(0);
-
-      border-radius: $base-radius;
-    }
-
-    .code-header {
-      @include ml-mr(0);
-
-      $dot-margin: 1rem;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        margin-left: $dot-margin;
-        width: $code-dot-size;
-        height: $code-dot-size;
-        border-radius: 50%;
-        background-color: var(--code-header-muted-color);
-        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
-            var(--code-header-muted-color),
-          ($code-dot-size + $code-dot-gap) * 2 0 0
-            var(--code-header-muted-color);
-      }
-
-      span {
-        // center the text of label
-        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
-      }
-    }
-  }
-}
diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss
new file mode 100644
index 00000000000..8b679726e91
--- /dev/null
+++ b/_sass/base/_typography.scss
@@ -0,0 +1,264 @@
+@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 */
+}
diff --git a/_sass/colors/syntax-dark.scss b/_sass/colors/syntax-dark.scss
deleted file mode 100644
index d898c651feb..00000000000
--- a/_sass/colors/syntax-dark.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * 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: #323238;
-  --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;
-  }
-}
diff --git a/_sass/colors/syntax-light.scss b/_sass/colors/syntax-light.scss
deleted file mode 100644
index 6562c76f22e..00000000000
--- a/_sass/colors/syntax-light.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-/*
- * 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: #f6f6f7;
-  --code-color: #3a3a3a;
-  --code-header-text-color: #a3a3a3;
-  --code-header-muted-color: #e5e5e5;
-  --code-header-icon-color: #c9c8c8;
-  --clipboard-checked-color: #43c743;
-
-  [class^='prompt-'] {
-    --inline-code-bg: #fbfafa;
-  }
-
-  /* --- 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 */
diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
deleted file mode 100644
index 1ccfa0386fc..00000000000
--- a/_sass/colors/typography-dark.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * 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-hightlight-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;
-  --btn-box-shadow: var(--main-bg);
-  --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);
-  --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;
-
-  /* archives */
-  --timeline-node-bg: rgb(150, 152, 156);
-  --timeline-color: rgb(63, 65, 68);
-  --timeline-year-dot-color: var(--timeline-color);
-
-  .light {
-    display: none;
-  }
-
-  hr {
-    border-color: var(--main-border-color);
-  }
-
-  /* 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)
-    );
-  }
-
-  color-scheme: dark;
-
-  /* stylelint-disable-next-line selector-id-pattern */
-  #disqus_thread {
-    color-scheme: none;
-  }
-} /* dark-scheme */
diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
deleted file mode 100644
index 11f052cf09d..00000000000
--- a/_sass/colors/typography-light.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- * 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-hightlight-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;
-  --btn-box-shadow: #eaeaea;
-  --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;
-  --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;
-
-  [class^='prompt-'] {
-    --link-underline-color: rgb(219, 216, 216);
-  }
-
-  .dark {
-    display: none;
-  }
-
-  /* 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;
-} /* light-scheme */
diff --git a/_sass/components/_buttons.scss b/_sass/components/_buttons.scss
new file mode 100644
index 00000000000..bd7363e5586
--- /dev/null
+++ b/_sass/components/_buttons.scss
@@ -0,0 +1,51 @@
+@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;
+  }
+}
diff --git a/_sass/components/_index.scss b/_sass/components/_index.scss
new file mode 100644
index 00000000000..ffbb9083479
--- /dev/null
+++ b/_sass/components/_index.scss
@@ -0,0 +1,2 @@
+@forward 'buttons';
+@forward 'popups';
diff --git a/_sass/components/_popups.scss b/_sass/components/_popups.scss
new file mode 100644
index 00000000000..e94fcde368f
--- /dev/null
+++ b/_sass/components/_popups.scss
@@ -0,0 +1,172 @@
+@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;
+  }
+}
diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss
new file mode 100644
index 00000000000..fd49ea041f2
--- /dev/null
+++ b/_sass/layout/_footer.scss
@@ -0,0 +1,36 @@
+@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;
+  }
+}
diff --git a/_sass/layout/_index.scss b/_sass/layout/_index.scss
new file mode 100644
index 00000000000..fa75daf9377
--- /dev/null
+++ b/_sass/layout/_index.scss
@@ -0,0 +1,4 @@
+@forward 'sidebar';
+@forward 'topbar';
+@forward 'panel';
+@forward 'footer';
diff --git a/_sass/layout/_panel.scss b/_sass/layout/_panel.scss
new file mode 100644
index 00000000000..c0d5e9ebc57
--- /dev/null
+++ b/_sass/layout/_panel.scss
@@ -0,0 +1,70 @@
+@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;
+  }
+}
diff --git a/_sass/layout/_sidebar.scss b/_sass/layout/_sidebar.scss
new file mode 100644
index 00000000000..eaad470c6c4
--- /dev/null
+++ b/_sass/layout/_sidebar.scss
@@ -0,0 +1,258 @@
+@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);
+    }
+  }
+}
diff --git a/_sass/layout/_topbar.scss b/_sass/layout/_topbar.scss
new file mode 100644
index 00000000000..eb0aea9b0ca
--- /dev/null
+++ b/_sass/layout/_topbar.scss
@@ -0,0 +1,86 @@
+@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;
+  }
+}
diff --git a/_sass/main.bundle.scss b/_sass/main.bundle.scss
new file mode 100644
index 00000000000..5d84f938ec6
--- /dev/null
+++ b/_sass/main.bundle.scss
@@ -0,0 +1,2 @@
+@use 'vendors/bootstrap';
+@use 'main';
diff --git a/_sass/main.scss b/_sass/main.scss
index 1c2311d5bfa..3bbb70d6515 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,13 +1,4 @@
-@import 'colors/typography-light';
-@import 'colors/typography-dark';
-@import 'addon/variables';
-@import 'variables-hook';
-@import 'addon/module';
-@import 'addon/syntax';
-@import 'addon/commons';
-@import 'layout/home';
-@import 'layout/post';
-@import 'layout/tags';
-@import 'layout/archives';
-@import 'layout/categories';
-@import 'layout/category-tag';
+@forward 'base';
+@forward 'components';
+@forward 'layout';
+@forward 'pages';
diff --git a/_sass/layout/archives.scss b/_sass/pages/_archives.scss
similarity index 93%
rename from _sass/layout/archives.scss
rename to _sass/pages/_archives.scss
index 3a2e86b1191..86e77a89b48 100644
--- a/_sass/layout/archives.scss
+++ b/_sass/pages/_archives.scss
@@ -1,10 +1,17 @@
-/*
-  Style for Archives
-*/
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/placeholders';
 
 #archives {
   letter-spacing: 0.03rem;
 
+  @include bp.lt(bp.get(sm)) {
+    margin-top: -1rem;
+
+    ul {
+      letter-spacing: 0;
+    }
+  }
+
   $timeline-width: 4px;
 
   %timeline {
@@ -58,9 +65,8 @@
     li {
       font-size: 1.1rem;
       line-height: 3rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      @extend %text-ellipsis;
 
       &:nth-child(odd) {
         background-color: var(--main-bg, #ffffff);
@@ -132,13 +138,3 @@
     }
   }
 } /* #archives */
-
-@media all and (max-width: 576px) {
-  #archives {
-    margin-top: -1rem;
-
-    ul {
-      letter-spacing: 0;
-    }
-  }
-}
diff --git a/_sass/layout/categories.scss b/_sass/pages/_categories.scss
similarity index 87%
rename from _sass/layout/categories.scss
rename to _sass/pages/_categories.scss
index 330d3d35040..64a2df500c5 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/pages/_categories.scss
@@ -1,8 +1,7 @@
-/*
-  Style for Tab Categories
-*/
+@use '../abstracts/variables' as v;
+@use '../abstracts/placeholders';
 
-%category-icon-color {
+%-category-icon-color {
   color: gray;
 }
 
@@ -16,7 +15,7 @@
   }
 
   .card-header {
-    $radius: calc($base-radius - 1px);
+    $radius: calc(v.$radius-lg - 1px);
 
     padding: 0.75rem;
     border-radius: $radius;
@@ -29,7 +28,7 @@
   }
 
   i {
-    @extend %category-icon-color;
+    @extend %-category-icon-color;
 
     font-size: 86%; /* fontawesome icons */
   }
diff --git a/_sass/layout/category-tag.scss b/_sass/pages/_category-tag.scss
similarity index 76%
rename from _sass/layout/category-tag.scss
rename to _sass/pages/_category-tag.scss
index 9e43a911ace..0a827121bad 100644
--- a/_sass/layout/category-tag.scss
+++ b/_sass/pages/_category-tag.scss
@@ -1,6 +1,6 @@
-/*
-  Style for page Category and Tag
-*/
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
 
 .dash {
   margin: 0 0.5rem 0.6rem 0.5rem;
@@ -24,6 +24,10 @@
       position: relative;
       top: 0.6rem;
       margin-right: 0.5rem;
+
+      @include bp.lt(bp.get(sm)) {
+        margin: 0 0.5rem;
+      }
     }
 
     /* post's title */
@@ -31,6 +35,10 @@
       @extend %no-bottom-border;
 
       font-size: 1.1rem;
+
+      @include bp.lt(bp.get(sm)) {
+        @include mx.text-ellipsis;
+      }
     }
   }
 }
@@ -53,20 +61,3 @@
     margin-bottom: -1px; /* Avoid jumping */
   }
 }
-
-@media all and (max-width: 576px) {
-  #page-category,
-  #page-tag {
-    ul > li {
-      &::before {
-        margin: 0 0.5rem;
-      }
-
-      > a {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
diff --git a/_sass/layout/home.scss b/_sass/pages/_home.scss
similarity index 66%
rename from _sass/layout/home.scss
rename to _sass/pages/_home.scss
index 7f9fd2e8b01..84f4b4aae5b 100644
--- a/_sass/layout/home.scss
+++ b/_sass/pages/_home.scss
@@ -1,10 +1,14 @@
-/*
-  Style for Homepage
-*/
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/placeholders';
 
 #post-list {
   margin-top: 2rem;
 
+  @include bp.lg {
+    margin-top: 2.5rem;
+  }
+
   .card-wrapper {
     &:hover {
       text-decoration: none;
@@ -20,7 +24,11 @@
     background: none;
 
     %img-radius {
-      border-radius: $base-radius $base-radius 0 0;
+      border-radius: v.$radius-lg v.$radius-lg 0 0;
+
+      @include bp.md {
+        border-radius: 0 v.$radius-lg v.$radius-lg 0;
+      }
     }
 
     .preview-img {
@@ -35,6 +43,10 @@
       height: 100%;
       padding: 1rem;
 
+      @include bp.md {
+        padding: 1.75rem 1.75rem 1.25rem;
+      }
+
       .card-title {
         @extend %text-clip;
 
@@ -46,14 +58,20 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text.content {
-        @extend %muted;
+      .card-text {
+        @include bp.md {
+          display: inherit !important;
+        }
 
-        p {
-          @extend %text-clip;
+        &.content {
+          @extend %muted;
 
-          line-height: 1.5;
-          margin: 0;
+          p {
+            @extend %text-clip;
+
+            line-height: 1.5;
+            margin: 0;
+          }
         }
       }
 
@@ -63,6 +81,10 @@
         i {
           &:not(:first-child) {
             margin-left: 1.5rem;
+
+            @include bp.md {
+              margin-left: 1.75rem;
+            }
           }
         }
 
@@ -74,9 +96,8 @@
 
         > div:first-child {
           display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+
+          @extend %text-ellipsis;
         }
       }
     }
@@ -88,17 +109,31 @@
   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;
@@ -122,68 +157,14 @@
       cursor: not-allowed;
 
       .page-link {
-        color: rgba(108, 117, 125, 0.57);
+        color: rgb(108 117 125 / 57%);
       }
     }
   } /* .page-item */
-} /* .pagination */
-
-/* Tablet */
-@media all and (min-width: 768px) {
-  %img-radius {
-    border-radius: 0 $base-radius $base-radius 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 {
+  .page-index {
+    @include bp.lg {
       display: none;
     }
-  } /* .pagination */
+  }
 }
diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss
new file mode 100644
index 00000000000..74e9ea6eb55
--- /dev/null
+++ b/_sass/pages/_index.scss
@@ -0,0 +1,7 @@
+@forward 'search';
+@forward 'home';
+@forward 'post';
+@forward 'categories';
+@forward 'tags';
+@forward 'archives';
+@forward 'category-tag';
diff --git a/_sass/layout/post.scss b/_sass/pages/_post.scss
similarity index 56%
rename from _sass/layout/post.scss
rename to _sass/pages/_post.scss
index efbde822686..2cd3eee3352 100644
--- a/_sass/layout/post.scss
+++ b/_sass/pages/_post.scss
@@ -1,34 +1,48 @@
-/*
-  Post-specific style
-*/
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
 
-%btn-post-nav {
+%-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;
 }
 
-h1 + .post-meta {
-  > span + span::before {
-    @include dot;
-  }
+header {
+  .post-desc {
+    @extend %heading;
 
-  em,
-  time {
-    @extend %text-highlight;
+    font-size: 1.125rem;
+    line-height: 1.6;
   }
 
-  em {
-    a {
-      color: inherit;
+  .post-meta {
+    span + span::before {
+      @include -dot;
+    }
+
+    em,
+    time {
+      @extend %text-highlight;
+    }
+
+    em {
+      a {
+        color: inherit;
+      }
     }
   }
+
+  h1 + .post-meta {
+    margin-top: 1.5rem;
+  }
 }
 
 .post-tail-wrapper {
@@ -84,7 +98,7 @@ h1 + .post-meta {
 
         &:hover {
           i {
-            @extend %btn-share-hovor;
+            @extend %btn-share-hover;
           }
         }
       }
@@ -100,9 +114,20 @@ h1 + .post-meta {
   } /* .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: $font-family-base;
+  --wc-stm-font-family: v.$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);
@@ -118,16 +143,19 @@ h1 + .post-meta {
 
   .post-tag {
     &:hover {
-      @extend %link-hover;
       @extend %tag-hover;
-      @extend %no-bottom-border;
     }
   }
 }
 
 .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;
 
     &:not(:hover) {
       color: var(--link-color);
@@ -140,7 +168,7 @@ h1 + .post-meta {
     }
 
     &.disabled {
-      @extend %btn-post-nav;
+      @extend %-btn-post-nav;
 
       pointer-events: auto;
       cursor: not-allowed;
@@ -160,12 +188,12 @@ h1 + .post-meta {
     }
 
     &:first-child {
-      border-radius: $base-radius 0 0 $base-radius;
+      border-radius: v.$radius-lg 0 0 v.$radius-lg;
       left: 0.5px;
     }
 
     &:last-child {
-      border-radius: 0 $base-radius $base-radius 0;
+      border-radius: 0 v.$radius-lg v.$radius-lg 0;
       right: 0.5px;
     }
   }
@@ -190,39 +218,50 @@ h1 + .post-meta {
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;
-    position: relative;
-    top: 2rem;
+    margin-top: 4rem;
   }
 
   to {
     opacity: 1;
-    position: relative;
-    top: 0;
   }
 }
 
 @keyframes fade-up {
   from {
     opacity: 0;
-    position: relative;
-    top: 2rem;
+    margin-top: 4rem;
   }
 
   to {
     opacity: 1;
-    position: relative;
-    top: 0;
   }
 }
 
-#toc-wrapper {
-  border-left: 1px solid rgba(158, 158, 158, 0.17);
+/* TOC panel */
+
+%top-cover {
+  content: '';
+  display: block;
   position: -webkit-sticky;
   position: sticky;
-  top: 4rem;
+  top: 0;
+  width: 100%;
+  height: 3rem;
+  background: linear-gradient(var(--main-bg) 50%, transparent);
+}
+
+#toc-wrapper {
+  top: 0;
   transition: top 0.2s ease-in-out;
-  -webkit-animation: fade-up 0.8s;
-  animation: fade-up 0.8s;
+  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;
+  }
 
   ul {
     list-style: none;
@@ -231,12 +270,8 @@ h1 + .post-meta {
     padding-left: 0;
 
     li {
-      &:not(:last-child) {
-        margin: 0.4rem 0;
-      }
-
       a {
-        padding: 0.2rem 0 0.2rem 1.25rem;
+        padding: 0.4rem 0 0.4rem 1.25rem;
       }
     }
 
@@ -244,9 +279,8 @@ h1 + .post-meta {
 
     .toc-link {
       display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      @extend %text-ellipsis;
 
       &:hover {
         color: var(--toc-highlight);
@@ -265,7 +299,6 @@ h1 + .post-meta {
       &::before {
         display: inline-block;
         width: 1px;
-        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -275,13 +308,130 @@ h1 + .post-meta {
       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 --- */
+
+#toc-bar {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin: 0 -1rem;
+  height: v.$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;
+  }
+
+  .label {
+    @extend %heading;
+
+    margin-left: 0.375rem;
+    padding: 0 0.75rem;
+    color: inherit;
+  }
+
+  &.invisible {
+    top: -#{v.$topbar-height};
+    transition: none;
+  }
+}
+
+#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;
+  }
+
+  .label {
+    font-size: 1rem;
+    font-family: v.$font-family-heading;
+  }
+
+  &:hover {
+    box-shadow: none;
+    background: none;
+  }
+}
+
+@mixin slide-in {
+  from {
+    opacity: 0.7;
+    transform: translateY(-#{v.$topbar-height});
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@mixin slide-out {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-#{v.$topbar-height});
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes slide-in {
+  @include slide-in;
+}
+
+@keyframes slide-in {
+  @include slide-in;
+}
+
+@-webkit-keyframes slide-out {
+  @include slide-out;
+}
+
+@keyframes slide-out {
+  @include slide-out;
 }
 
 /* --- Related Posts --- */
 
 #related-posts {
   > h3 {
-    @include label(1.1rem, 600);
+    @include mx.label(1.1rem, 600);
   }
 
   time {
@@ -292,10 +442,11 @@ h1 + .post-meta {
   }
 
   p {
+    @extend %text-ellipsis;
+
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: break-spaces;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -315,43 +466,31 @@ h1 + .post-meta {
 
 .utterances {
   max-width: 100%;
+  min-height: 269px;
 }
 
-%btn-share-hovor {
+%btn-share-hover {
   color: var(--btn-share-hover-color) !important;
 }
 
 .share-label {
-  @include label(inherit, 400, inherit);
+  @include mx.label(inherit, 400, inherit);
 
   &::after {
     content: ':';
   }
 }
 
-@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 {
+.content > p > img {
+  @include bp.lte(bp.get(md)) {
     max-width: calc(100% + 1rem);
   }
 }
 
-/* Hide SideBar and TOC */
-@media all and (max-width: 849px) {
-  .post-navigation {
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
+h2,
+h3,
+h4 {
+  @include bp.xl {
+    scroll-margin-top: 2rem;
   }
 }
diff --git a/_sass/pages/_search.scss b/_sass/pages/_search.scss
new file mode 100644
index 00000000000..dfb044edd6a
--- /dev/null
+++ b/_sass/pages/_search.scss
@@ -0,0 +1,184 @@
+@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;
+  }
+}
diff --git a/_sass/layout/tags.scss b/_sass/pages/_tags.scss
similarity index 71%
rename from _sass/layout/tags.scss
rename to _sass/pages/_tags.scss
index 4cf5d3b716f..d22f20d6cd7 100644
--- a/_sass/layout/tags.scss
+++ b/_sass/pages/_tags.scss
@@ -1,6 +1,4 @@
-/*
-  Styles for Tab Tags
-*/
+@use '../abstracts/breakpoints' as bp;
 
 .tag {
   border-radius: 0.7em;
@@ -17,3 +15,9 @@
     font-family: Oswald, sans-serif;
   }
 }
+
+#tags {
+  @include bp.lt(bp.get(lg)) {
+    justify-content: center !important;
+  }
+}
diff --git a/_sass/themes/_dark.scss b/_sass/themes/_dark.scss
new file mode 100644
index 00000000000..aae652213d4
--- /dev/null
+++ b/_sass/themes/_dark.scss
@@ -0,0 +1,303 @@
+@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;
+  }
+}
diff --git a/_sass/themes/_light.scss b/_sass/themes/_light.scss
new file mode 100644
index 00000000000..48d47558a8f
--- /dev/null
+++ b/_sass/themes/_light.scss
@@ -0,0 +1,309 @@
+@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;
+  }
+}
diff --git a/_sass/variables-hook.scss b/_sass/variables-hook.scss
deleted file mode 100644
index f27e0eb8280..00000000000
--- a/_sass/variables-hook.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-/*
-  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
-*/
diff --git a/assets/404.html b/assets/404.html
index 5b46cc8c832..cb129c06a9a 100644
--- a/assets/404.html
+++ b/assets/404.html
@@ -2,13 +2,8 @@
 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.statment }}</p>
+<p class="lead">{{ site.data.locales[lang].not_found.statement }}</p>
\ No newline at end of file
diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
index 1280b9e650b..ff1f01c0aba 100644
--- a/assets/css/jekyll-theme-chirpy.scss
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -1,6 +1,11 @@
 ---
 ---
 
-@import 'main';
+/* prettier-ignore */
+@use 'main
+{%- if jekyll.environment == 'production' -%}
+  .bundle
+{%- endif -%}
+';
 
 /* append your custom style below */
diff --git a/assets/feed.xml b/assets/feed.xml
index a244a566215..9937337750b 100644
--- a/assets/feed.xml
+++ b/assets/feed.xml
@@ -34,7 +34,7 @@ permalink: /feed.xml
     <updated>{{ post.date | date_to_xmlschema }}</updated>
   {% endif %}
     <id>{{ post_absolute_url }}</id>
-    <content src="{{ post_absolute_url }}" />
+    <content type="text/html" src="{{ post_absolute_url }}" />
     <author>
       <name>{{ post.author | default: site.social.name }}</name>
     </author>
@@ -45,14 +45,7 @@ permalink: /feed.xml
     {% endfor %}
   {% endif %}
 
-  {% if post.summary %}
-    <summary>{{ post.summary | strip }}</summary>
-  {% else %}
-    <summary>
-      {% include no-linenos.html content=post.content %}
-      {{ content  | strip_html | truncate: 400 }}
-    </summary>
-  {% endif %}
+  <summary>{% include post-summary.html max_length=400 %}</summary>
 
   </entry>
 {% endfor %}
diff --git a/assets/img/favicons/android-chrome-192x192.png b/assets/img/favicons/android-chrome-192x192.png
deleted file mode 100644
index a949d2fe5d1..00000000000
Binary files a/assets/img/favicons/android-chrome-192x192.png and /dev/null differ
diff --git a/assets/img/favicons/android-chrome-512x512.png b/assets/img/favicons/android-chrome-512x512.png
deleted file mode 100644
index a0cdd950b35..00000000000
Binary files a/assets/img/favicons/android-chrome-512x512.png and /dev/null differ
diff --git a/assets/img/favicons/apple-touch-icon.png b/assets/img/favicons/apple-touch-icon.png
old mode 100644
new mode 100755
index 648097f4fc7..60b3d890637
Binary files a/assets/img/favicons/apple-touch-icon.png and b/assets/img/favicons/apple-touch-icon.png differ
diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml
deleted file mode 100644
index a02a5c74ebb..00000000000
--- a/assets/img/favicons/browserconfig.xml
+++ /dev/null
@@ -1,13 +0,0 @@
----
-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>
diff --git a/assets/img/favicons/favicon-16x16.png b/assets/img/favicons/favicon-16x16.png
deleted file mode 100644
index f44237a9a42..00000000000
Binary files a/assets/img/favicons/favicon-16x16.png and /dev/null differ
diff --git a/assets/img/favicons/favicon-32x32.png b/assets/img/favicons/favicon-32x32.png
deleted file mode 100644
index d5d021d85c8..00000000000
Binary files a/assets/img/favicons/favicon-32x32.png and /dev/null differ
diff --git a/assets/img/favicons/favicon-96x96.png b/assets/img/favicons/favicon-96x96.png
new file mode 100755
index 00000000000..fb9b67a7b98
Binary files /dev/null and b/assets/img/favicons/favicon-96x96.png differ
diff --git a/assets/img/favicons/favicon.ico b/assets/img/favicons/favicon.ico
old mode 100644
new mode 100755
index 561156802e6..597d6f132ff
Binary files a/assets/img/favicons/favicon.ico and b/assets/img/favicons/favicon.ico differ
diff --git a/assets/img/favicons/favicon.svg b/assets/img/favicons/favicon.svg
new file mode 100755
index 00000000000..7e1e8cb8f41
--- /dev/null
+++ b/assets/img/favicons/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="432" height="432" viewBox="0 0 432 432"><image width="432" height="432" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbAAAAGwCAYAAADITjAqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAUMRJREFUeNrsnQl4VOXZ9x+2ENaETQGVBAGtK3H/WtSMrRttfYlWq9VWhu9ze7WV2Nq+bb8qwb5X7etGaG0/bauEtm6tS3i1YrVqouJb0UpwqwqUBERAEAgC2SD5nv/JOTiMc9Z5zjr/33Wda5LM5MzMmTPP//zv577vp0/r5o09w0ft10cQQgghMWH7xx/19Onp6eGRIIQQEjv68hAQQgihgBFCCCEUMEIIIYQCRgghhAJGCCGEUMAIIYQQT/TnIShMiouLS+VNldxScivPunub3BrkVt/e3t7Mo0UIiSKsAys84YJY1chtpsN/acTjpZA18OgRQihgJCzxgnDN8fjv83Uh28YjSQihgJGghAvhwjq5zchzV8vllqKIEUKiAJM4CgMV4gWmyq1BF0RCCKGAEV/dV40i8coUsVoeWUJI2DCEmGzxqpA3y3za/WlM7CCE0IERv/DTKdXx8BJCKGDED/dVLm8qfXyKMvkcKR5pQggFjKimKiHPQQghFDAKmHLowAghocFWUsmlPIDnmMrDTPJBTzRK6xdD2edTq9BbmonetmasPyT7wCzE5A4MQX2wKG5u0geZBg4yxOH5CcGqEc7naSFmSEqq5TlGKGAUML9YpF8113GgISbnJoRotsd/b5FblTy3mngkCQUsuYMExKMk5JcBMUPop46fCNE7uODiRkXoeRbPK0IBS+5ggYGiMiIvh+Ef4sc5yWL6AodZiMklSiEWOEF0wd8qB7E6vUaNFJZ41fhwQVXPvpx0YDwKyRww/GwjpYKFcqumIyuIcxEXLKv9Oo/kOZTmUaYDIwlCn+RuifBLxIKazfqVOUk2fn7GM+noKWCEA4dbWhXsQwstygGomW2pEuu+SoXz1b+9Us0jTQEjyXNhdfKm0YddL5f7xsA0UW6zRG+2YT6CVia35+VgxzmN5JFKyHOQCMI5sMK4Am4W6lLqIVSpXHU48rnQviot8lt/DPuvYnZZ7M87iEq5fj4EkQ07gvOpFDCSzMEECR0NCkTMVLxyiGa1PniVeXyu+fJ5GBqKz/mV0reKPD7zfGBKPQWMJHiQwdUw2j15LSJFy6i02w4I8nkhYjUeB7VG3Y3xyjp6rr5K31Ii/IJ5ChgFjBTI4FOjuyOng46SIuQ8hMyR6yOBitaMCL5EChgFjPAKeh/3A8emtKehfO5qXcjcXLW36u6vnp9e4OdKhX7BMzPiL5UCRgEjBSxoFfqvTX6H7PTnq/NwJc/+d8GdE3DM2Crj8HrledGHnxoFjJAgB8kqXcjcuDGKmP/CBYdcFqOXjbKOCn56hQfrwEiYV80ICZYLd7VqC/RBlqgVrpTcMM+4IGbiJfSLIEIHRkhoAyiu+ufQiQV+3Mt1AVAdKkQbsyZ9gzvyM/GDNWAUMEJCH0zdhhQpYvlfNLjJSLUCLrpB3/aZR/WhmD6TufK5avhpUsAIicKg6qbomin23o8xhD/fhSUX6p9VvZ0D0sO+CxS/leX650/3RQEjJDIDrJuVeyFiFXIQa+aRc3Rs4bjm5em06pyIVo7nxv+pSsfnxQuhgJFEiBivxJ0dTwiI17kouK3afAVDkYhRvIgGsxBJJNHFKKWLkx0QuVoeNVPRMMKyXsQLwjURi0aqEAx98cnrhPfVC5brjpviRejASCycAwYrJ6nd57Jbx2eOHy4CcEzcJlBAuGr8Cs3q2Y81LtxYi/566vipEgoYiaODsBuEOR+273GD23GbOAGHUx1UWyZdyIyWZuXi05Bxq/g0Db+BFyaEAkbi7iSed/DQRjnYpXi8PIkXU9JJrOAcGIkFuiO4zsFDK/VMO4qXO9d1DMWL0IER4u/gXCfs500QfiovxKxED+LFhUMJHRghAYHBtsXmMZgrK7isRJfiBZGfRfEidGCEBDtQI6ljmYOHFswaUR7Ei3VUhA6MkKDRB965Dh5aU0CC7tRxYr6rnOJF6MAICW/QdloflmgX5rJRLjuWEDowQiLgwjAIO5m/SboLa6B4EQoYIfETMRS32i2GWanXkCXRfSFsyF6RhAJGSEypVvSYuIkXulfMpniRQoZzYCQJg3mdsK8Nm5iUFlMu5r2YbUjowAiJODUF5sLqhLN5ryqKF6GAERJhdGdlNxeWToj7QujQybIo1xVKDRyhgBGSdBdWog/+cRYvhA6d1HstkuLF9dEIBYyQmLgwuA27FlNVMX+bCIPa1b21JsVtEkIBI4WEneuIrYDp62Y5mcerYsYhoYAREj/sFj2McxixRtgnbizkvBehgBESQ/RkjkVJc2G6+3KyhAw7yxMKGCExxs6BpGLqvmwfw9AhKTRYyEwShe5WVts8LDZFzQ7fT4t8P+X89AkdGCExRhcmu2zEOLmwtCKHRggFjJAYYJfMURGj92I3rwX3VcePnBQi/XkISAJpENaNbnMKWEbXetxfqv9crm9uaNY3gHmpJt0dNrjZib7Ksl3mId0XKVg4B0YSh8N5o7kZQlUZ8EtszBA2bcs1JyffB5zkDBv3Vc5PnFDACEmWiG0TzhreRolG3T026Q5umZ0ISwGjAyMUMEISIFpwU6jzSum3JQl/yyOYOk8KGc6BkbiLVoUuWGnhbHXipLCI4kXowOjASPxEq1z0ZufBZZUV6GFAqQB6P9YnZaFOQihgJKmiVaq7rEJzWk7A3FmdLmZ0ZYQCRkhEhCuli9ZMHg1b0A8RmYu1XImZUMAICU+4IFo1onBDhEpcGYucCQWMkGBEC2HCan0r4RFRAubKaihkhAJGSEKFa+jQodo2duxY7XfjtqioSIwcOdLxfjo7O8WWLVu0n3fs2LHPhr/j/pBAeBFJH7WcJyMUMEJiKlwQJAgUbjNFKwgMgduwYYN2iw3iRkdGCAWMxEe80roj8F24DMEyNriqKAEBg6AZW0CCBiGrlkJWz7ORUMAIcSZcKV24fE2FnzBhgiZWuIXLihNwZWvWrNE2IxzpI426kDFrkVDACDERLoQL64R1c9q8ndbhhx+uiVbUXFY+7mzlypXa5rMzmy+4qjOhgBHyGfHCHFeN8CFcCKGaPHmyJlxxc1puQXjREDOfYFiRUMAI0YWrXHddypcrgVhVVFRo4lVoIBHknXfe8dOVLZJbmm6MUMAIXZdCMK8F4QoyczDKQMSampr8ELJWXcToxggFjBSMcPky1+WHcBl1WUadVubfsh9jB+bfMufdMn83XnP2Y2IiZJwbIxQwUhDildLFS1n7J4QKTz75ZM/CZdRdGfVWxm3AtVc5xQ7vKbuAOqJCtlx3Y8xUJBQwkkjxQshwnqr9YYCH40JyhhuMAmHjNkyh8iJsxmYUWnsVbcyRYVPY+QMhxWoWQBMKGEmScCFkiLouZd3ikZhx4oknOgq3ZRYAY0samQXYbl0axHvp0qVaPZlC5ksRq+aZTyhgJAni1SAUFSU7CRfCURhFvhCsEHsLBo4RdjSKtJ2WDeBYvfTSSyqPFYqfqzgvRihgJK7iVaGLl5IsQ4QKETLM5boyRUuxm4g1CDHCrTrpNoJjCBFTePyW6yLWzE+CUMBInMSrSvQma+QtXhCsL37xizldFxISKFpqxUyxG8O8WIrJHYQCRuIiXml5s0DFviBaEK9M14V5G6NIt5DCgyqBiGEzK/LGMX7uuedU9VmkiBEKGCks8UK4EFumM4BwJTERIyzs2mzBiSlsSzWLGYqEAkYSLV4YVJFhaLgDHwtwSZYrg5Blh2px/CFkFDFCASMULxvxOvvsszU34EOdEnEABMzo2G+AUOJTTz2l6rOgiBEKGImEcCFNHuKlpEDZ6EDhtD0T8Y/sZsj4TODEFM2LUcQIBYyEIljIMEzpWxmPSvKFzKi9w0UFnJgiETuGiR2EAkb8Fq1yXbTgtKbyiBQmRrNkuGRFIsbsREIBI74JlyFaM3g0iIGRtagonAgRq2CxM6GAERWihRBhtS5cSsKDw4YNExdddJHlY5Aa//jjj/MDiAlG+r3REDlPlutOjG2nCAWM5CVc2Dx1zzj00EO1bfz48eL4448X06ZNE2VlZaJv376u9rN582bR1tYm3n77bfH888+Lv/71r+Ldd9/lhxRBMD+mqLyhUQpYikeUUMCIW/Gq8SJcEKrTTjtNEytsRiEsHNf+++8vBgwYoOw1Inng/fffF4sXLxb33XcfBS2ZsIs9oYARx8KFK9464SJUaIjWv/3bv4lDDjlkn/sgWBAuCJjfIHT15JNPip/97Gfigw8+4IeZHJheTyhgxFK4SnXhcpycAcHCdtxxx+W8v6SkRMtScxsuzJfu7m6xYsUK8fOf/1w88MAD/HDjDzMTCQWMmIqX4y7xcFJwW1dddZUYN25czsf069dPuy8I12XHtm3bxPz588XNN9/MDzreLJcCVsHDQChgJNN1OV4V+ZJLLtGEy2rZDblPceCBByqd66KQER3OhxEKGNm7sCRcl20RMhzX97//fVPHZRBWyNANyGb893//d6bnx5fTpIg18DAQCljhildK3tQLm5AhkjNuuukm0zmubPHC4+PCa6+9ptWhMdkjdrSI3iJn1ocRz/TlIYiteKXlzfN24oVw4UMPPeRIvCBccRIvgBR/dLWfPXs2T4p4gezYBnkeV+shcELowApEvGrkzRyrxyDxYt68eY6EyxAvuK84s2TJElFVVSU++eQTniTxY6Hc6hhWJBSwZItXnbBJ1kDHjN/97neWSRpJEy8DzI1BxBBaJN4455xztDnQz3/+81pzX+Mcwfk0ZMgQ7fedO3eK9evX771YwMKY7733nli+fLlYunRpPk/fKLdaKWT1/CQIBazAxAv1XHPnznW8TxQnG4NUUkBnj+uuu07cc889PGkciNX06dO1UCwWuSwtVRPN27hxozYv+corr4gHH3zQi6ihh2I1HRmhgCVDvGqETdgQGYYXX3yx433GLWHDDSiCvv3228UNN9zAkycDhJZ/8IMfaBc6EydO1Br3BoEUIs2l1dTUiCeeeMKtI6tm8TOhgMVXvNLyZoHVY5BliKtppwwePFhrxpt0Hn30UVeinlR+9KMfadmaU6ZMCbU8AkK2atUq8Ze//EX893//t5tQ73y51TBrkVDA4iVeKdGbbahMvFCcfPDBB0e6zksl6Kt43nnnFdy587nPfU5zW+eff35gTsupO25padHEDPNod911l7YygYPkG6TepxlWJBSweIgXipTxZS1RJV4AoSN02igkCknEIFy/+tWvtCSMKF+kfPjhh6K1tVX7Gcu2YCUCbA6EjJ08CAUs4uJVqovXVJXilcSkDafce++94uqrr07s+8P8Vn19feSFy0zEMoUMrswGJHlUcbXnwoaFzNGl1kq8UKDsVrww71Wo4gXS6bS49tprE/ne4LjWrVunLTQap9BwdgkHUvWvvPJKzTEjM9ICfDea9AbWhA6MRMh94Uv5mNn96Gl4xx13uNonOssjdBi15rxBg/mXU089NTF1YhjkH374Ya1uK85kOzGDhoYGceONN9qFFbnOGAWMRES8EDpsFibzXm6LlA3GjBkjRo8ezQMs2bVrl5aBGfeOHXBds2bNSkwyDhI78Nlkg7AiRAyJHhYslCKW5tlNASPhChg6EORcjBJzHBCv7NWS7YDrmjx5Mg9uBu+++66oqIjnslRI0kAX/oMOOihx7tjITswF3vOtt95qdeFBESswOAcWLfFKCYuVlLGGl1vxAkktVs5XBOBg4sY3vvEN8fLLLydOvLTBSDpJrEGHcHcuMOeLCziL83mm3q2GUMBICJh++TDX4aUgF4kb2MhnQfjNJlEgUqAYGe2xkvx5IlpgtV4dLuCwugJC6RQxwhBidNxXjTBpFYXQIb60dgtR5gJzPVEa8BAieuGFF7Smr9jw+5o1a3I+Fr358PqnTp2qbUi+UN09ZO3atVp3iqiDjiJf/vKXC+b7gF6KW7ZsMb0f82IIJ6KbhwkMJ1LASEDiZZm4gdAhUou9uK8otIuCUP3hD3/QBhszsXIKRA19/L71rW9poqaCW265RUsSoHhFi9WrV5vOhxnMmTPHSsSuk/9fyxGGAkZCcl+I96NvnBfCdl8QrZ/+9Kd5i5YZRx99tPjOd76jiVk+RDkrsVDFC0C8IGJ22IjYuVyaJblwDiwa7su0LQ46zHsBcwlhiReEC3MVl19+uW/iBd544w3tOfBceE6v4DjdfffdFK/ofTe08g87sHwQXLkJdXpLNkIHRnz4kkK85uW6DwkGv/3tbz3tN4yWUQgVQlAgLGEAR4bj5SW02NXVpSUGoKA2Ctx///0F2YA4G6TW/+tf/9I+HzvQbR+LauY6NeWWYid7OjCiHlP3hbkvr6hamNAp//mf/ylOOumk0MTLcGR4DXgtXhzrnXfeGYkTAu2usKo06U2tx8WYE5Bib5KdiCsazoXRgRHF7su0ZRS+iFjJ1gvIWkQ9TRBs27ZNnHnmmaEKVy5OOeUU8ec//9mVkOMqH3OOYc6FwXUjS7NQlrpxilmXjmzef/99cdlll5l9hpwPowMjCkmb3YFmvV6BgAUBQoYnnnhi5MQLvPjii5qw4jW6cWHz588P7TXjc3v66acpXjlwMhcGMB+KVRpMqNPnnAkdGMnTfeGLtNVsIMNVuFfg3vweBCEMEIhcDVijBDqdQxSczovhyt3pYKmapqYmrUOIKmeMcwgXF42NjXtFPReYO8RxMurt8LuqEoUwXBi47bbbtGVZcsD6MAoYUSBgpskbcF/XX3+9p/0GUfsVF/HyKmLXXHON1vEiSOAasHpyvgM80smRkZmvK0a9HQrHL730Uu02CkC88B6dYpHUcRpXdaaAkfwEDF+gylz3oeuGl56HwO/sQ1zZw+HFRbwyXQZEzMmcGAZ/hEaDAq5r6dKloqioyNP/w2mh3s7MYeULxMyotws6OSgbJ8XNBpgPu/DCC3Pd1Sj3keIoRAEj3sTLNHyYT+EywJpfqJ/xCzdzXnA+aMCKGh0MfBA/OAR0FQ9DAJHY8cwzz9g+LuhkDq+hQ7+FK9fnCSH7yU9+Etp3B+eNm1IH1PeZrO7MNcQSAGeLw8E0RxqLVeYpjr69aIQ1nYoXHA9cBVKbIWAIQ+EWv+PvuD9oMNA7SbFHMgca/QYBUubdihfCaBdccIEWxg1KvAzxwPFDdCCfOdp8wPywWbf6XCAcb9K9vobDEAWMeMM0fGHRUcAWPztvYMByWidlhOvM5uLwd9wfhohhAHaSmfj1r389kMH4xz/+sav/wfwWXDBcbFiguwrEE+nqcNWBDlh9+7pazBWPNamnLJMXe2kORRQwokjAMKB5nfvy231hsHIKumHYzZXgftRphQG6hdhx+OGH+/460MPPzZwSPgO89qjMP/7xj390XaqgSvjdgDC2SYEzXRgFjLgUGYxYOa1JvmtT+SVgv/zlLx33NHSTgg0nhsElaBAGteudCDebSqV8HYRnzpzp6LFwOXBdEIyogWMZtIi5DSMCk56iZXozAUIBIw4xbSyar4Bh7kY1GDzdtGZyGwINq94IyQ92fPGLX/TVfTlxElHtdJIJHCFeYz4Nld3iJowIjjvuODMXVs0hiQJGnGN6WW+xymxoDgyDUtxS5p0AR2k34PopYE7cVxzEK1PEEN4Myol56TZj0t2mUn5vyjksUcBIng4MV4l5fZg+dN9A+NANzc3Nrh1eWNi5sMmTJ/vyvMg8dDIAx0W8sl9zECI2ZMgQ1/+DcLVJRiJdGAWMOKTUD/flR/jQywrKbtOrLRYiDMSFWQ22XgZJJ6CWyg4kbMRNvAwnhhR/vy9McLHmJeJgEuLmPBgFjDgkZ/eNfBvw+iVgXkTBqWtzkxziF1ZhRBzTfOcls0HN1wEHHGB73KOYsOHmHHCS6ZkvAwcOVCVgZVz0kgJG8kD1QKkCr7VGyPiyc2JwPl7W7QpapFUnmdx4442WoV44lyAGfyd885vf1Or1NmzYoN2iPAJtpZyeO367ay8Oedy4cWbftTRHIQoYsSBOV3kQmHySNzAXAoHKDiUZWY1YeDIKySF2YcTDDjtM6fPZNcaNQp0XSiFeeeUVrWsKXi9q1XCLXojoL3jrrbc62g/ei5+hRK9RBxMXluIIRQEj1phWreY7B6YaFa2CIFRjx44VZ5xxxt4Nv0fBeTl9ryobI+PKf/To0ZavI8wOG8BJ536n/RCN1lN+4bXzjIkDm8psRAoY8UhQi1C6cWCqQL8+Y4uq2zQDISdVYHkPK5zUpvkN1tFy0h0EAuYknIj2Y26WQHGL24Jm4zM1uWCkC6OAkSTg56ATp/c6atQoZc9z+umnW7qvsAUe7gthQqc4yab0W5i9JHIAk6bZFDAKGEkCUXVLfhBUunp5ebnpfb///e9DPw5umys7TXBBWDTMer9cmIQRmYlIASMkXgSRNIG+imZ1Sxjc45w27+T4+jW357VWz6RpwFR+GyhghJAsrNpShZ24YeA2bOzm8W47ugRBrnkweZGR4tlKASMBs2vXLmX7CmuxwiQzbdo00/vC7EaSCUoK3Hz2bl43wrRRCyOaJHKU82ylgBFCMrDKZoyKAwNOEy68pPxH6X0Ck76IFDAKGAmD9vZ2JfuxK7YtJD7++GMl+0H9WxzcLpJ37BYvRdkB+h26pbGxkQ6MUMBijGkM5ZNPPsl7593d3TzCilm/fr2S/ZglcAS9mrETkFCCovNscTW6qKDLipfEl6iVZpjUXlLAYkR/HoJAHVKT2UD23nvv5b0CMObBvHYnKGRQ/2TGli1b8t4/UrbN+h9Gtd4OTgxChWOD9HoIVr7lBlErzYha9xtCB1bQdHZ2KtuX25qgOGP1Xv/xj3/kvX+r1YOj6MAygXBBeFTVykUpkcPkc2EtGAWMWJBzIuC1117Le8cdHR3KXmRZWVnBfCBW7/X111/Pe/9TpkzhWa8TgzXOSvgpUcCIxUVorj+qmANDEoeqeTDVy4hEGbP32tXVpYV288WqgW8hdTzxA1WJS4QCRpzRlOuPKgZKsHPnTiX7KaRMRLP3qioDUWU/RbIve/bsyev/TVLpCQWMuBEwoGK+RVVBMwZ1q+SGpID3aObAVq1axbM14uQbcaCAUcCIOxrM7lDhwlSEIg3OOeecxH8YVu9xyZIlPFsjTr4hRJXfF0IBK4QvHObAcuZOq0jkwLyNqnkBk5VrE4XVe1TV4snKFRdStqdqcK7ni6rQPaGAFbwLUyFgQFV3dQzuSQ4jYkFGMwGD6Kj6PNauXWt6XyGEaTNRmd3qUwJHqyAUMOJewBDOeP/99/PeucqwiNNFC+PIpZdeanrfsmXLlD3Phg0bAhnQC03AVJaNZNDE4YkCRqypN7tDRdgKoRVVyRzf/va3E+kS8J7w3sxYtGiRsueyakdltchl0lAdLs0343bHjh0ciShgxC36PFjOFgzPP/+8kudQ1fGgtLQ0kS4M7wnvzewCYMGCBcqey2qepZDKFVQLWL4OzORzaeYIRQEj9tTl+uOHH36oJIyIeTBVRc1wKpgvSgp4Lz/5yU9M7//nP/+pNAyLfZk54kJK4qisrFR5EZh3DZgJFDAKGHGAaRjxvvvuU/IEKhrRGi7stttuS8yB/93vfmd5/x133KH8Obdv3256bAtFxFS6TRXhP5MkHQoYBYw4uILEFyXnRAvCiCq+oBAwVS4M2Xrf/OY3Y3/c4SatBlKEXh988EHlz/vBBx+Y3vetb30r8ec7RFplAocKh4xoBwWMAkYUuzB8OVXMhSHEosqFAbiwOLsFvHar0CF48sknfXluq67zhVBvp1KkVdU65poDk/tt4LBEASPOXFidMClqvuuuu5Q8h0oXhnDXb3/721hmJeI1//nPfzZN3ABYjmb27Nm+PP9TTz1leh+cySmnnJLoc12lSKuan8whYMsFoYARV9Tl+iPCG48//rgSF7Zp0yZlLxZ9A59++ulYiRheK16zXQjriSee8K21UENDg+WFRJLr7RB6Vhk+VFGob9J3lDVgFDDiklphUv2v0oWpaLsTRxEzxMtueRi4ryuvvNK31wFh/OijjywdSpIyPTOxKhj3ELVQEj40SeBo4HBEASPuvpDbdBHzzYUZ+1JJHETMqXiBhx9+2PfGri+//LLl/UnK9DRAs2SV2Yeq5nQpYBQwEpALU5GRiDoklQkdmSIWxcQOvCan4oVj49fcVyYPPPCA5f1wYUmbC1MpygjBqggf4vuUQ8Ba9MxgQgEjKl2YqrqwzZs3Kw0lZopYlJZewZyLU/ECt956ayDLasBN27X4sqtRixPI+FQ596XqAswkw7eeIxEFjOTnwkwzEq366TkFCR2qQ4kAmX3I8PvTn/4UakgRc0h4DRABq2zDTN59911x8803B/Ya//73v1vejwEfghp3nJQsuHVfPgtYHYcgChjJz4VVm91/4403KnkeOAA4MT9ACAypyRi4ghQyPBeec+nSpa7StZG4cdFFFwX6OTsRJ2QkxnkxUaNkQSUQLxWtoxA+zCFgCB8yA5ECRvIUMYQxGnPdh5j93XffreR5kFbvV8gMzgdiEoSQGcJlPJdT17XX8tbWag4sSDB4OrmAQL1dXIvG8dpVhg5Vui+T1R4YPowpfXp6engUIkRxcXG56K1HyTnyP/TQQ+KQQw7J+3n69eunhdzk8/n+nv7whz9oA4eqjEq4E3R2yKc49o033hAnnnhiKJ8xEhuslnLZawtaWrTXqGqB0qDES3VrLIS9VR2Dr3zlK7nC6BOZwEEBI+pELC1vcq7nMX78eE3Ehg4dqkTEJk+eLPr2Dc6Iv/DCC9rW2NioDdBr1qyxfDxEFlfz6GSOdGwVKdkII02cODGQxI1cDBs2TKxbt04UFRXZPhYtqM4888xYiJgf4oWQN84TFaB4+bLLLsv+c6MUrxRHHQoYUStiCGvMyHXf8ccfrw0Wip5HE4ggRcxM2DLxa50szKNADE3qgALj3nvvFRdffLGjx0LELr/8cs01FpJ4gdWrVyspXAY4hjk+91l6SzdCASMKBQwTOggl5pxMQPhs7ty5iRIxv8FcChIk7rnnntBfC5w05t+cuDCALvkXXHCBePHFFyN1TI2EDT8uODBXqKoNmon7QvJGOUeb+MIkjoiiZyVWCZMCZ8wp3X///aqeSwvTqGr6G1Vuv/32SIgXwDwMun84BQkqzzzzjNLU9HxB0TUyP/0QL5yTKnt4mrRlq+FIQwdG/HViaWEyHwZuuukmZSnXSXZiv/71r8V3v/vdSL0mN3NhmSDcCjdhN3/op+uCkPrVgBgXUv/617+UFd3TfdGBkfCcWJ28mWV2P+rDVGX34aoXA4eqOQeKlzVIIvnNb37j+v/geN5//32tpizownF0OYHr8rN7Ptypyo4xJrV3dF90YCRAJwYhmxmEE0N24rhx4zSHQPHyH6zWPHr0aE//i7kxlCn88pe/9NWRQbhuuOEGpfVduVA57wUQZs8hYMvlRVoFRxUKGImQiF1yySXi+uuvV/Z8Y8aM8Tywhg3CUD/84Q/FL37xi8i/Vlx4oDQi39At5kWNejsVafcopDa6grgtEvcCXrPKVmdov3bhhRfmKpc4jSsvU8BIBEUM2Ynf//73ldSJgcGDB2sZcwMGDIjNMULtUDqdNuu6EEkee+wxMX36dGX7M+rtkIKPBB27FHyEIiFYaIBs1NsFIVqZn5mqei8Dk7T5RVK8qjiSUMBIREXs0EMPFfPmzdPCgCpASBFObOTIkZE/Nhs2bBBnn3124C2iVNDc3CzGjh3r63Nk19shJOh3WNAOzLki/Kmi16GBSegQtrRcz/AlFDASooih8e88s/sxf4V5sVQqpew5o+7GFi9eLM4999zYfqYoUEeHElwwFAp+iBcSXBA6zMG5er9RQgEjERCxtOhdhsU0Fe20007ThExVSBFgbgxuLCrp9mgNhbkauwUj48C1114rbrnlFopXHucCxCvHXBpDhxQwEkERQzYVrirLgnRjcAkQsTCFDIkacCxf//rXQ+tr6Adu2kzFFdUJGwYm816YXKtg6JACRqIpYphtrxMmvRMNEKJCgoeKbvZhC9natWvFFVdcYbY4YexZsmSJOO644xL53rA0ysaNG5Xvd86cObkSdzDvleJ6XxQwEn0hw7xYjbAIKQJkKl511VXKkjwMkMkGIfNziRbUPaEeSVUz4yizYsUKcdBBByXm/cAxI8nGj876WKLmvvvuy3UXm/VSwEiMRKxcd2OVdo/1S8iQ5AEhQ+hSVcIHHNedd94p5s+fXzCfJY7f66+/nggRw3wX6rL86PKCujeTFcvnyuer4ahAASPxE7K0sEnwMEBoEWLmxzL2EDAMxMhgHDJkiKswIyb3m5qatL57KkKFSGQxklngBChiweBXyNBGvBZK8UpzJKCAkfiKGObGqvXNVsgwWCJrEZvKhI+s1yQGDhyoNbCFqEHQMkOOCDMhdIa5DGTjqUzOqKio0DZQV1cXKycGAT/yyCNj57ogXChS9gOTOS+KFwWMJFDI4MZmuhk0IWRwZ9hUhxkzQd0OMsc6Ozu1DDy/MgrjKmAGzz77rJg2bVrkXycuQuC6VPY0pHgRChiFzJUjyxY0dPiAmKGYGRt+d1Nfhhqd9957T0ufxgbRwu9BpcCjQ4fR6SKOAgbuuOMObd4yqkveIEEDrktlbVf2OYSlUXDeULwIBaxwxSytC9lUFfuDsJmRoy4nFKIkYMZrget0uzAp5ivx+hGCjZJwwXGpXAYlG6zrdd1115ld8FC8CpD+PASFiZ5aXKcXQi/Ld39RESm7q/eoYCxiCQFzC0JnaLz76KOPardhAbGCcCFc6JfjMrj77rvNVlUGzDYsULigJYUMBZ7XFcJ7zRQwt6sgq8ZojOxVVLGG2Iknnqh1WPEigvkAB4TnX7lypea6/BQvzI9edNFFZuKFgrJZFC8KGClsEUOCx6JCes9hdtbPfG64l3z42c9+Jg4//HAtvOYXSMqAaGHeEoIC8fJ73hLCDteFvoYm813LRW+HjTp+gwsXhhCJQVpuDULRnFgUiUrtV+aSKfkKmOHGkJ2IOj4Ue++///557Q+hQaTAI/0dmx/Fx1agtgtLoViI5EK5VbO3IaGAEcOFbdMTOyBiJUl8j5nhOohIWIKWKWAqXwMGfmxoaItt4sSJlkuzIPTX0dFhfP7a737VbDl9/QgVWjT5RcgwzSVRCAWM5BKxJiliWHIikR1yIWDYkPofVggRc28TJkzY6778SCxBn0hsyAy95JJLfCtKV/WZoEjbRrjouggFjDgSsQYpYrPkjwuS+P7geCZPnhyagBniBZAE4SfIDMWGmj2k3mPzsyDdDZhLQ/NdiJfNfFqj3GpwXvLbSbJhHRjJiRSxGnkzJ2nvC+E71GABpKOrmINyQ2Yt2sMPPxx4aj+KzyFk6LIStJhBtHDMIVoO1gJr0YWrjt9GQgEjXkQMg8fMpL2v888/XwsjwgG99NJLgT0vnhPPbbivIJ87F3BmRqswCJvKdeIAMiORQWg4QYeZixQuQgEjFDEzEEI8+eSTA3dBeE48d1juywkQM6NtmHHrBKOQ3RAqk9R3K1DGUctQIaGAEYqYQxeGObGnnnrK9+fDnBtCd+Cdd94RS5cu5YnV67ZwbtVJ4Wrm4SBuYSEzsUXvMbcwSe/JCN9hPsroUO+3+wJwXVjjrIBBAfJcuR0jz6tydNGgeBGvMAuROBYxfd2uRDgxOC8IibHECoTFr6xAiJeR9fjcc88F3vopZJBFCMVuwMY0eKIShhCJK5IWTsycl4KAIbSnSmBQ84X9G6nzcH1+p86HKFJCFynjdpveZ5MQChiJlIihd+LsJIoYnBiEJt8OGQhNYr/GemkJFq9ZzBgkFDASNxFLiwQVO6MhLkKJRpd61Ich2WLNmjWuHBncFvZl1HrhfyFe2E/CYFsnQgEjsRaxlLzBAJaI3olwS1iiJLNbhiFmcGQQo2xnBsHD/BY2iFbmMi0QLYhXAue8kD1YxRAhoYCRuIsYUvjqRIK62EPI4MYgZF7WDUOoEFtUut8rxljGhMkYhAJGEiFipbqIzUjae4OrwgaHBTHL7CRvAKHC3Blu3YYcY8Z8KVzVPOMJBYwkUcgwuM3jkUgcmO+qZrIGoYCRpIsYQoqYFyvj0UgECBmmOd9Fogg7cRCl6AMdRGwRj0bsQciwguJF6MBIIboxLI5ZJxK6wnOCadFdVwMPBaEDI4XqxhBKLKcbi5frgoOmeBE6MEI+dWMp3Y1xbiyacK6L0IERYuLG0MgVbgydyFt5RCIDPovrONdF6MAIcebGIGQ1IoGrPccMhAtrWJRMKGCEuBeylC5klTwagbJQF65mHgpCASOEQkbhIoQCRihkFDIKFyEUMBJPIUMhNNpScY7MO0jOqJNbLYWLUMAICV7ISnUhSwum3zsFRchYcLSOyRmEAkZINMSsSheyGTwaOd1WvS5aDTwchAJGSHRdWZXuzKYW+OFYpAtXPd0WoYAREi8xK9fFLFWAzgxf3HulcF3GM4FQwAiJAHcvuRrzN+gIUX/ltF87dhW6M3tRbkcW2CHDMTpHCtlLPHsIBYyQ8MQLjmq1/qsxr1MrhazJRryQ4PF3uY0t0EOHL/GdUsSu5VlEKGCEhOe+Zue4C41ma3O5MileF8qbBXIb5PLpNspt/4gdgp1ye0tuR3t4P6BJitgxPJNIocBmviRKpE3+PlUXqWYpcnVyS2WI1wMuBntcrTWK3iVerorg+x8CJylFaLC8PUV/rd0u/r9CHpNNuiMlhA6MkIDcF5IxHnP6+NVvf7T5zu8tHr27a49T4XpBbjOlOLTo82XNIroLbZ6WmQ4vX+/vRG9Rd3+H/98mt8PwXnlmETowQsJzX59h3cot4u4fPe1UvDbI7VQ5mKcyBvRaEe1Vout0kdVApqHcBuiOzMkVJxzpP+nECAWMEP/dFwZrR2nwEK9ffvdJ0baz04nrekAO/OMyM/T0fotRb1EF4anO/iNEGGIsejMPKWKEAsZDQCJAlZMHte3oFPfd8oKteB04eLj4/efP637r0u8MzHF3TUyOSbVe55YtYi/JbYTuxpyI2N95epGkwjkwEgUHVu/EgcF5rVy+wfIxR5TsJx6ddrEoGdCrXVs728SOfh1b+43rf8Wxv/3VUNGbDBIXFkqxSpvdKQXuZnnzH/ge2+yH2YmEAkaITwJmexIuXrhMPPX7Za7EK5sP21tFU9cG8b+fq4/T4TlGik+ThYgZmZh2IvZzuZ8f8WwjFDBC1ImXbfYh5r1uudJadA4bPkbUn3yJqXhl0ranS6zu2iJ+tuJF8bd/rYr6IWrU575EniKGL/qp7NhBkgTnwEjY2M5/Yd7L0nkNGe1YvMCgfgPE4cX7iz8edb5486xrxL1frBKTR46K6vGp1NdHM0WK0kPy5hvCOkMR4vY4TzdCASNEHZbuAqHDdau2mN4/vF+RmHtoyrF4ZTOmeKj48rBDxTNfmClePPP/iPTRx0bxGFXbPUAXsf+yeVipFMPHeMqRpMAQIgmNrN6Hn2HLhh3ilivqLbMO7514hjj50MPF8IHFyl7XpvYd4p09H4n/+/pzYuWWj6NyuCY6WVlZClQDXJvFQ3r0fbHImdCBEeKn+7ISr6+PPEScPepgpeJluLLKIQeLl065TDx/xizx45MqY+HCdCeGY2pVJ4ZQ4rM89QgFjBCfBAzua+nTK0z/EaHDmw74vGgvsk6+e2rDCnHCM3eJ0xsWiBvfela83fqRqxd42OD9xLVj/5d4b/q14qHTLwhzriyd2Z3DhkphPR82Se7rZJ5+hAJGiHcqrNyXFbUTKjUR29J/t6V4pV95VKzd1SreksL1m1WviS/pQuaWkqJBe13ZkjMuE/Mqvxz0sULrK0cF39KFvSF6V2u2oo6nH6GAEeKdqV7c17H7jxNnl5RrPw8dPNj0cRAss7/Dkbl1Y3vty+BR4hulR4l/Sle2+KxvidMPnhTU8ap2+kApYucK61AiXRihgBHiBWNJlFw0PPK25f9+b/xxvT/07ytKB5qvpALnZQYc2XlL7hd/WvuW5/cwQrqyY4rHa+n4cGV/OP1rvgt+rvZSFsylCyMUMELUkzN8iH6HS/9q7r4OPXysOK1nnPZzn+IBlk/whdETLO9v7eoQi9e/79mJZbuyM4ZMFqu/+l3x3FlpP11Z2oULq3Xgwtjsl8SW/jwEJCRyOok3lrRYZh5e/KVjhXix9+f1ol2M19aAzM1Pj/ySFKeNmtvK5MiS/cSFE44S08ceojX+VYlWJN2vt0j6w8mtomm38tZVELAaly5snsX9ELlzeToSChgheTqwN5eYlycdMGmkmDZo/Kcn76AiyycYPmCg+FtqlhYmXLOrVUwYXCLOHjtF+3sQjB9UIgW2RHNlH3S2ins2LBN1b7ye727LEEZ0UhNmuDD5+DnyR7MMxq/yVCQUMELydGAIH765ZI3pP1R+7QgxJqN14X6Dhzl6oq8fdGSobxSubMqg0eLnE88Q3xv3efFq1zrxs6YX8ymSrtKdk1PuktsPzcYA9FLUO3kQEis4B0bC4jNzL28ssW4OcfS0MlG6rrfuy27+K6pkt666ZuqJXgXMMXoX+t0WD/khT0dCASPEAXoLqc9gFT48atoEre5rQLvhG+J96hqu7Iby07wUSVe6KGo2sEq3PJJnJaGAEeKMnAK2smmDhYBJ9/Xhp1031nbvSszByCySdtG6KuXyaX5ucV9/1oQRChghHsGaX1bZh73hw09/Lx40MJHHwWhd5aBI2pWA6XNcVmHENM9CEjeYxEHC4DMZiCuWrzd9MLIPBw0tEkVtGX0P+/bx5YV9sGu7eHDtm+Kp9e/vk35/0OASbUMK/k1Hfsn3A4Qi6RFikJaOv2rSx2Jp54fiusYnLY+hAxCjnaTI0RFCASMFSWkuB2YGwofASwaiG1DQjF6JuUBXj+1d7VptWdCgSBrb2dMni+bureL2FS9jJWkvLfL/LMwTNljQTGIHQ4gkEqxbZZ5SfuDkkVlnrT/u67b3XrK8/6dHnS6OkA4sLDJbV71+5lXilW9c0+RyF3+xuphlVw5CASPEk4CZO7ADJvVm5+1NoS/yJ3CA1lJmXDHp+NDryTJBkfSh3aOnrj//xz1vnj97yzvf+d75dv/T3t4OhbaaB2NHDhIrGEIk4YuXRfgQjBw7VLvdm0LvE5jjysX0cVMCmffyAtLxDxKlI8RH4s8rq67vaR+++3/EiH5XHTn/9jdN/mWz3Maa3IewZC3PSEIHRohD2naaO5/JU3OMtT6FEDG/dWRWiBANgecf85VYHMfRA4f0ObCj5Auj1g18481zZ+989+rr/yPHw96z2MUIno2EDowQF3xg4cCQfai5r7aMPxb18+V1oEfio9MuFg+tfVMLJ6J3YpTChq5cWb/SweJj8XPpym7OcmUrdaeVi6k8GwkFjBA3DmyHef3X3vmvjCLmTV1tYj8xyDcRu/zg4/Pax3YpfkE1DHbiykSH+ILYIN54fca32/7jxFP+8V9LX+RJRxIBQ4gkdrT37Insa4N4maXiO3Kju7Z7ek4nHFw8atAZgydbddwYyrOL0IER4oItG3aY3meEEOMAhASrPKNmDDVlXlLu00sfEVdMOsFV6PLlj9eI9CuPavN3R5Tsr91+YdSEnM9/pPVr4nhAKGCE2LBP/dKWjZ+YPvAzNWCS/foPiuSbmr3sL3u7dyzesMKTgOH/r329t1zLqYhhjTNkUOJ/sRnropQgHCrF8PpDpzl+/sV3XnP09G//6g2eoiQOMIRIwmCb23/YNKln788DI3ja3vbeErF4/YpPXdHmNa738XZG6yqI2I1vPev4f7HCdDZIRLnt3ZeksD7peD/rP9ez/O4lV9fLrYqnKaGAEaJAwPahM1pzYP+zea0mFJl4EbDsuazfrHpNE0YnXHHw8ZrjysVDa950PLfW1WtuZ8jtMSli2+RWa7b8DSEUMFJwXDnt101Jej9o/mvnqJywtq31s85OCuNTG1bY/u9wPVxouu9drV7eGiq7Z8tttRSxBrmlefaSKME5MBIWrfoAaZmokZlijzDimFV9RE/nbuG0lBkigrqut3KIiarO8uhc78RR2bHGRGQgYpjncuLCsrvoGyjo4YjasUo4MnlbL7fapF2IEDowQpyyd/Azar1ykVnkvNPI5+juEds62ix3DvE4vWGBltKOUBxCetnbhQcdpUaJTYTKbS3YtFETcv79LYdOzijEzs40/MWxX1FZl4aLjplyWybFrImujNCBkUIVMNslQRofeVvrVH/SWVPElPHl8i+93qujQzqzgebZiGauy+D6z52srLM8Gv1CJDNBCyq3+zd7PHoxOsUQsd/8q/f1XCRF+sDBw7WfkWTiZW7OAnTugCOr4+lMKGCkoAQM4cHFC5eJxkffNn0QVml+c8kabXt6wkhxz6CUOGLQKDHMJjpnNVBDXNykltuBMOTwAcXit6te1dwYMgK9rBsG8cH/Iulir92Rf7v+0JNd7yfz/UG4bnjrb44SOe77rxfFedec5Kb+rp6nMgmLPj09PTwKJHBm/eT06S889s6TVsuomDFvQqW4cPShou9B5r1nkYKe7YoA6qWeTc2KTKunXCCrccnHvQKMea18XivS8f+09i1X/zNoSJH4zh1fFgfkqMHLwTGcCyMUMFIw6Asn/hNjpdd9QMROOfhQcWBJbhHDHNgJz/y/feanSvTwWpiLUgaJF/HK5Dt3TBeTp46zekiLFK9yntEkLJjEQcKgKR/xAtetaRQbtpq7N7iWZ1P/WwvJIWSIW/xeKOKFzMV8xAv87oZnLdt8SWp4KhM6MFJI7utmefNDFfv6/NBxYsHJF4jSgYN4YDNAzdcJz9ylZF9Yjw3hxBwg579cOrBtPOKEDowUCrNV7eh/dqwXr37YzCOaxa1ZXUHyYeXyDWYrZtdRvAgFjBSS+0I6nVK79Pi6d0Xb7i4eXMMWdXXkHTrMpuGRnFmitTzahAJGCom06h2+/MmHon3rDh5ZnbdbNyrf58rl67P/tFC6L1pfQgEjBcVk1Tv8oHOHKNnVI7Z3tPPoCqG6UFljy8bPXCDU8EgTChghihi2LfgwottmvQmB7otQwAhRSU97l9i8NZicAtSYYY2tG1ys15Ug6L4IBYwQFQwa/GnLo5Hbu8XHu3b6Ll7nLbl/n3ZP+aCtJfbeEted60NiPt0XoYCRQkV537zJx4wV75z5aS3jiK1dvmUlImSI7h5Gk2BV800oOkbXfIhZvqBoWzUHTNJaSrXSfREKGClY2tvbkXqttHL+qGll4u2zurW1wjR2d4vdG7Yrf+1ohAvn1eqTU0Lx8bly/+jhmI8bg4AN66+2z6PeTqqGdV+EAkYKnRdU7QhNZ4+eVqb9vGRWt9g2vlfEhuzpI3ZtalX6oq9d9hffxCsTNCCGUOaTIHLF/kcpfU1f+MohK6V4se6LUMBIwYPFEHer2NHZM4/Zu+xH1yAhXr2oR3QV995XvGuPMhFDaM+P9HSA7vjZIESZXvqoJyeG93z5yCPE8H5FSl5f5XlHiLHlIy7naUsoYKTgaW9vb5E33893PyeeOUWkvnbEPn/bdkCPaLi6W7mIvbV9o2/Hw1hsMhuEFJ/asMLVvra2btfeM8TrtkmVeb82zH2dUnXYAum+GnjmEgoYIWLvXNg9Xv8fDWax6GIuconYjvVb8krsmD72kJx/R4d7v1wYWLPLufh+tGO7KNn2qbEdec0EcfEPTvH8mhCevWD2FzaPOWD4d3nGEgoYIfuK2GXy5iLhMpyIkBa6o1utGJwtYoM7hRi4aZfnFHu4pF8c+5V9/nZkyX6eVl3OxRWTjjcRzimO/n9b2y4xeuuevb83zegW647sESedNUUTMYiRW+f1g99UiYlH7HcBEzdIlOFyKiR0iouLH5M3X5Vbf7PHIGQ4feYxYuTYoY73W7quj5i2oK8YvNW4XOsjWof3EyNKhnt6nchEfPnjNeKgQSXi86MPUvb+cy2+CXc3/5gvOxKv4Zvl/3X3fo+bT+gRr17Uvc9jsKbX4oXLxNKnrUOSI/cfqs0rQvhEb81XNc9OQgEjxJmQXShvzhB6z8RjTzv4c9POOXR/m1WBLRnQJjQRG7Oqz96/tRX3Ff1GDxXF/fpH5r1DxB5a+6YmYtNGTXAkkE7EK5O2HZ3ijSUt2vIo61Z9rP0NTvaASaPElIqxmasvL5fiVcEzklDACPHI3UuuLpU3DXKbmu++jvhrX3H405+KGNzYhsHdYvyoUbE8NtnihTo4hE0VgIm3CnbcIBQwQvIXsQpdxEry3Rdc2IkPZIQUQVE/sXlYH7Hf0OGxOSYbt7eKMa3d+4gX6uC61Ky0dq4Ur3qeeYQCRogaEUvJm+dV7AshxUNeyHJj+CIUDxCbhvREXsi2btqqLR9jYBc2dMlcKV41POMIBYwQtSKWljcLVO1vyBYhTnhw37kxQ8jWFe8WB5aMiNT7R5r8aLiu3Z+K1YpTekRTlTLxwjIpaZ5phAJGSAxEDEDAjvhrn88ImejfV2wZLIVu2BAxqP+AUIVrzM4+2nIxBigPePUbvanyimDSBqGAERJHEbMUMnxJBheJdf07xKhhwwMRMxRdf7JjpxjdJl9L55597vtQihbqvHaOVPZ0y+WWYr0XoYAREmMRM4Ss/NXeLecXRorZ+r4dov+gIrHf4GFKRevjnTvEyM6+orj90wQNAyRqvH1Wz6dd9ylehFDACEUsF0j2MISs9MPcYoZU/D5F/cWmfl2ip6if6BTd4qDhzubO1m7fKgZ29xEDunpEaXf/fUKEAQgXxYtQwAgJWcSUpdhbgYSP8W/ZiJmJuGXS07n7M84qF7ukBmJ+a8WpSkOFFC9CASMkYiJWLnpXep4axPNBzBBmxFa6TjgXNBvgsDZN6hUu9HL0EYoXoYAREiERQ8cOdLifGcbzG2JW1AaH1ht+BLg1BA6uaufI3u8aCo63je/9HQ7Lh/CgGQvlVk3xIhQwQiJG5Yyj3jr3mpOOcNt9vUBgkTKhgBESVYqLixsGDS2qvOQHp4qjpk3gAekFvQ3TbA9FKGCERFzAYMTw81HTyrRFL7FESAGD+a4qNuYlFDBCoi9gdSJjHgxLhaS+doQ4+9JjCvFwMGRIKGCExEjAMGDPyf47FsHEYphYFDPpbFq3fceYA4afIsWriWcEoYAREh8BSwuL4uYkC1nbzk7x1MJlouGRtxvb29tTPBsIBYyQeAkYBm7bZVcMIcM8WRIyFpc+vUI8+qtXtBWXJQulgKV5NhAKGCHxEzHHJzTmyE46a4qo/NoRsUz2gHAtlq5ry4YdmX+eKwWshmcCoYAREj8BaxB6JqIbJk8dJ046e3LkXRlChY2PvC1e+euKbOEyOE0KWAPPBEIBIyR+AlYtb+Z5/X+4sqOliB2lbdGpJXtzyRq5tWjCZYUUrz48CwgFjJB4Chga/C5TtT8I2ZSKsZpDO2DSyEDfiyFab8hNn9+ygwkchAJGSMxFDCnkypv7wp1ByA6cPLJX0OStqnDjlo07xLqVW8S6VR+LFU0bxMrl673s5jopYLU8AwgFjJD4ClheYUS3QMwgbhA2Q+gOmDTKRKg+2Tt39YEULDgrj2KVi4lSwJp5BhAKGCHxFTB0p8dAXlJAb5vhQ1Jw9OUhIElDDuRYLqTQQml1/OQJHRghdGFxo0WKdjk/dUIHRghdWNyo4SdO6MAISZ4T8yUjMUIsl2JdwU+a0IERkjzSfH+EUMAIiR3SncCBzU3o25urvz9CChKGEElBUFxc3CxvyhL0lhZJ8ariJ0vowAhJtnhVJUy8WkTEQod3L7m6Sm7lPNsIBYwQdeKFdPo6HgnfQSJJDQ8DoYARog6IV9JqwcoiKMq4UIALK+UpRyhghOTvvhA6nJHQtzdD7/kYJQeGCwXOyxEKGCF5ipeT0GFrzN9mjb58TFQcGEjz7CMUMBI6MQ8H1Qnr0CHEKyW362L8HvH+6nSxDhujWLySyRyEAkaiQFoORqkYui8nocM0aqj09bOOkdvyiL0NCOy5cpvlQDhqInahk+JXh1DASNhgYKqO0wt2GDrEwo/1xi+6kFXoYhGFsOJ8uZXjNcoN78WuEHu2LtphkR3G5DwYoYCR0MHANCNmISEM+Fahw4VmqxbrYlGuC0YYQrZQ9C5KWa03IzZeV41+n+X7liIW1udEB0YoYCSSDiw2V9QOQofL7RwlhAOCIbdS3ZH5HVps1R0XhCtttqIy7pM3jRb7KRHhpdZnO7ASedHDBsOEAkZCxbiiT8dAvOxChxCKqkxnYwccmR5anCh6kz1UiVmL7qjOhVDqjqvZwf9V2byGSnkcakI8T+jCCAWMRAaj/dLUGIQR64R16LDKoUjkErJmhB11MRsht9NEb5hxoe6KWiz+vVHf5uqODk6rXHdb9S5fxzZdGKyeb44UsaDFo9yBK4slLMyONv15CIjJFzfXxHwkF4h0EDqcJQf/BhXPpYtIg74FDp5ff78NFoKN+bAKN24zTyodilocqZXfhZorp/26maMCBYzEh9I4CJiD0OFCPTkjMSBrUndZZiJmtJryfe7SwqFUKtx/hb4Zz9UsBSWozxRCnBbs80gBI7Giwo8ByQfqLJzIcj35IXHoIoaElAUmD9FaTZllXPp4nuwjPlJoXLtAdLbXxTclcq8iMCvAQ11KAYsunAMjTh2YiFpRs+5CzEKHRqeNxKI7S6vBPIhWUykv4pbj3KqQW53cIHiPyW2miXi1BOi+AArFy3RRJRQwEhNS+QxIAYiXVehQE68A54DCFrH5JncH0Wqq3M1FUK6LIrk1yB+X6aJlt3JAYE4oKzxKAYsgDCESN4NPlDLLaoT5IpUInTUVygeFNHxdpGaaOAgcK786qlTY3FdvIg4QvlrhbrWAoN1XBQWMDozEk6kRFzCz19KYtKQNhyKWFuY1YhUZwlGhODV8qgdnAzFtEu6XuqkJ+LBmHqeSOPYFpQMjBYdFF4WpivaNDVfgmQNCg7y6ruHRzwuzkGlmAk4zxEMP2+WVHu52QNddV53wlhDUaubmArxIMsoXCAWMRJhyq0HI7aCXkVWGzWyOQ1WIiy2MLEBWoPw8ELqbJ7eZ8udFEBX593ofjnUq6xyoE95Xx673ktGo+HtAB0YBIzGgwuZLbStgepgKopQW5nNVBgvl4KRqzqqEn5utiNXqggInhDAeGja36AJT5+ICxdGArocM5+X53sKoQSxXHYEgauEcGHE7MJXaCRc6F+giN8eBeIEalS8+Igs8hoEb8c4+5mX657Ua4UW5pRUIJs6FOgXi1aLwAievCwLOg1HASPQp9zJo6YOeIVxOB9NFPrTpYRjR3oU14Nib3A1ntgA1WbgYydUHU/+b3cUJHMtMBS+3PqTDVMJziwJGfAbhIIdXzE72VerQNe0zmOlJAQuE+xBeLT/B0LCbdyzJcGV1WUIWZFp5fQjfqRQvjqIP58CScTVdL79wzXroDls+E94pl1/0tC5CXuaeWnQnoBoMMg2FdA54WcwSzld+fgsduiQ8Bkkfc/XPOxXg+R3GZ1nuITrhRhxT+r6M/eHCsTbgOjcKGIkMEJLndRdUq8891HmYO6hwer/+HPmEiPxyX4U4B1ZuI3AVJsXdNS4/wzn6uRbUMV4UsePp2oHpUQ0jC9es9q1FhBcqpYCR0F1Yg54SPUN3Q7Oxyb8t14XCqSuzu7Iu1b+QuCrONyuLX9jgKLVwYVivzE1tVlmArzssJ232PXAcadBDrk4vEGpCKBOIPZwDSxa55jSm6q5sqz6PYSdQdgNZuSLxWu7jGkspngquqInwawurJZhVslKFnXDp0YnVDsWrhaFDOjC6sN6racxRzDF5iDGPobmy7C+NwxThMkVX4KF+Yec+OsPuvUZJBLfZDOTNeZ43DXodWFkEz+nAHZjunErcutmM2sc5cfouUMBIlKjVv0RWX0DNlRlJHxlCFuSg7Tp8mCk6g4YVlbZ90pnzcUNKB54kH9uQcSWd+OLmk782Sbz0yCrT+8//3jG18phs08WuOVscR44Y/URR0cBrIva2lrsQnbToXehSheB5medK6UJU5vE7SyhgJKNVkJOrwDJdyIyOGUGlRrds2LguU5AyV9vN/LncbEAYc+BQseafW3LufOe2jmIR3QU4Q2HgoP5GyDfncWndvlWMGT02ai/bTfgQwoUej80i/2w+J4lMDRnihe/bbI/PtZBzXxQw8tkrOjdhDAxuy4J6cW1tuyBKq/kxRYc9e/aIjo52MXBgcZReVrOLCzejjGSeflFWqzuiWg9zrXaRiFJduFQkM9Xx7PMOkzgS6sJwZRfV19fZ1eH7c2xs+YQnQgbbNrfZPqa9oy1qL7vB5XkP0TLCjkYm7t7WWC6WkbF173oiR3Oe4tUSUo0bBYzEwoVFU8A6/Rewjp1dBfVhb2y2FuzWTfbi1NHeHqn39PGWTZfOfXRGDULNcnM6L1VtIkjIxG3WM3E9ZxhmOLQGkf/cKstI8oQhxOS6sCYP9T2+09PTrYWr/KZ91+6C+rw7FLzfbvnZRCmM2NXVOUv/UQuHSxHTXIvufBr02+Y55y1qyDjvGyzOewiOkYmLx9TmWEYmpcKhOaSOIxUFjFh/QSIlYF1dwTijjS3bxSHH78czwIM7joKAWVzkGGUce8/rbGEbMmTY34cNHW533uP+Sr18IJ0Rygsqkak1pA77FDASTeQXGTH+Cv0qsqJv377Hjhm9v+jTJzqR4s6uTn5QEQbzYMOGhV91sGePa0e5V9h27vxEDCwaKIrk5vD/ntcdWTrACz6GDylgBS9YKV2wDNHaJ+W8u7tbtLe3i0GDBkfmNXsYmLxd3m5qK6hzQdX7hfPB1q9fv1DfT09PT17/v0OK2EhnApbpyILMjG3gCEYBK1R3lXJ6pdghr6ijJWB7Anme1k3tBXV+tG5WJ9g4ZwYPHhrq++nanV+oGaHQ3XIf/fsPiOpHRgGjgBWEw8KGuLyndN32jnYtcSIqYcQgMhBJDlHaudvVZxS2gKlg564domT4iEheb/jYB5QCRkITrHJdrCBaM1TtN2phxCAw69JRqLipi+vsDH+eUkWoua1tlxg+rCRSc8A6TN6ggCVGtBAWTOuiNdWP50DhcBQEjO7LH1SXDCCdPuzwm6pQM0Qsgm6ygWctBSwJogW35XsHcK1AdXiyjuGEw0fYuiwM7MWDk3+Kf9S8Xfk+Ue4Q4fmjuAsYHRgFLHaiVaqLVrUIeNmKKFxRg927g+2OgYF9wuEjefJ5dO2aE+reI3Z3dcpzqDcrcLcUNpxPmQyQ51Wfvr1hOmQv9uvXO6wUDSjqvXWXDahWiOU5F8FkjmaeYRSwuAhXSheumWG+DoTvwv4Sd+eZGk2CdS7YnIqEHX379BX9BwzYK3YQNwidWbp+T3e30vcShdo2AxYwU8DiIFwQrRoRkUUCkY2YhMwyNyBxgQ4sGsC14SIq1zwoHFrfPn2kwElR69tPE7UuhW49KsXZOst5NlDAKFweHFihvYb2XYXR0Lcl5hmXe8+LDn9q96JSnK3Dtb8Uwm706oQLHbObRW/X67Iovsag56BIdCj0soKOiCwV097edpBeLkMoYJEQrlK5oa/Z81EVLisHhCtTI7STuSVB7Na8s5UnKOkVjo5odGbZvWf3wfJmNZaJ4aeSPwwh5ideSIOvE/mvCxTYlxjihGQKt+E8I5MscxK+r7xNQqo1ST5RqUHMKNCeo48fVXPOW9TMT4gCFrR4IR1+XqF8iY3/zbUPI3V672S8FLUBAwZ8pgNC0INIoTT0tVvMkvQShbXOsgq00bigCdMPUsSYmUgBC0y84Lpm8kh8+qU0QpG5nJuRYeZEcJA5iLW8jPAfEjE+0tsg7Vc2TBQPHiAGDu7vaAFHlQ1uIz0wO+zEgeOLzUj6yA6xlowpltsgbdu/bLjchiXqOCGzMSqLdWYedrk1UMS80aeHtTluxSstehM1iALQLePNxnXijRfW7RUqlfzo/rMSfwzv++mrviRplIwepHU8OWF6eSLEDBdTI0eMDvU1bNq8waxNVqvcKGJ0YL6KVznFS51wvbq4WW4tjh2EF+DokuYkggIO9s0XsH0oJhw2Upx+6edifSyjMA9m0eMRTqxO9C6ZRBzCLER31PAQ5M+ad7aIX1/bKF56ZJWv4gU6dia/dCCIuT44vHt/9LLmlONMtoj1ZBRY59p6erqDfHlT9QgPoQNT7r7Qy5DzXnmCAfAvd70VqNMrBKcUFMZnd/SpB8TyWGGlZiE3ZAO67XhvZODuc9unj+pej0ZmM6GAKYXWPk8QzgtSvHqfc7s45Pj9ePAVi1hckzzyCSMa7a2sMnEhavi5v3bb30v3jxTPMAoYiSBP3PUmD0JCwPzlV686igdCx0kmrtGx34YSHk0KmB+wh1me7suPLEM7kl4LFlaIlF1OfHN9LTxizmESh0P09FaeXJ4FbHsoz9u6qT3Rx9WPxSwdHdcCqbELgQYeAgqYX9TxEBDSW1ROfKGGh4AC5pcLw8nF9Xw8gEn/MEB3CaIeJsb4wlz2RaSA+Q3SXFt5GNwK2DCts0PQxDXd27ETKg/+wgCtvNCdgyhlkX6BTChgvrowXCGlKGLu+epVRwb6fCecXZb4FZmLpZgcder4gD/Ho7TnJcpolFuah8E97IXo1ev3FjY3iN6O0sQhQRUyY1AvlDRvZCKis0lHABmJX5EXIUl3tQEzX14UV/MwUMDCErJaeTObR8I5aCX1hBQxPzLZEN5Cz75CG2RRpvDI7ct8yw5E0gYuCNhXUhmI4KSleNXzUFDAwhYxdOmooxtz5xpUN/OF6zr90sMKNryFY/q33/9Ta76r8oLglK9NFidML+NJq46FcquW4sXaUgpYpIQsLXrTYPltdzHovv/aRvH+qx+JFf/4yPX/o0v6UZXjxSHH7895GePSflObePGRlfK4fuT54mDKcfuJQ07Yj+FCtWCuq0YKVwMPBQWMQpZAEF7ctrl34cWOnbu10JiBseAiFrVEKCvpCRqqjicWsMSqzRCz7HXD4LBQ4qDdlg8TZfKCAJmNvBigcFHAKGQQMmyVPBqEFBwIFdZRuChgcRcyzJEh0wg1ZGzWSUhyQbu5Ol24mnk4KGBJErJSXcSwzeARISQRIKOwnm6LAkYxI4TESbTqmQpPAaOY9QpZSjDMSEhUadFFq4GiRQEj5oKWyhAz1pYREp7LatC3es5pUcCIN3eWytgoaIT4R6MhWpzPooARfwStIkPQmKJPiDcQEmzKEKwmHhIKGAle1Cp0UaugSyMkJ60ZYoXbJoYEKWAkuqIGISvPEDY6NVJIzqqZYkUBI8kStXJd1AxxK6ewkQS4qiZdsAyxYpNcChgpUGEz5tjwO3s5kiiwXG7bdEfVbIgVhYpQwIiduFXoopbS/2Tc0rkR1U5qW9ZtM0N/hAJG/BS4bGEzBI8OjmQ7KMM97RUqZv4RChiJi8iV61um0NHNxds1iQxhEhkOiuJEKGCkYMUuW+SMuTmRIYZ0eGodkkFDxs+Z4kRRIhQwQnwQvmyBy3Z8Tv4uIuwIMx1PLpqyRCiXGGmwwwShgBFCCCEh0peHgBBCCAWMEEIIoYARQgghFDBCCCEUMEIIIYQCRgghhFDACCGEFJCAbf/4IxaCEUIIiRXQrv8vwABym0C31wquvgAAAABJRU5ErkJggg=="></image><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file
diff --git a/assets/img/favicons/mstile-150x150.png b/assets/img/favicons/mstile-150x150.png
deleted file mode 100644
index c0d045e25de..00000000000
Binary files a/assets/img/favicons/mstile-150x150.png and /dev/null differ
diff --git a/assets/img/favicons/site.webmanifest b/assets/img/favicons/site.webmanifest
old mode 100644
new mode 100755
index 03c6113b824..fd8a81def7c
--- a/assets/img/favicons/site.webmanifest
+++ b/assets/img/favicons/site.webmanifest
@@ -10,15 +10,17 @@ layout: compress
   "description": "{{ site.description }}",
   "icons": [
     {
-      "src": "{{ favicon_path }}/android-chrome-192x192.png",
+      "src": "{{ favicon_path }}/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "{{ favicon_path }}/android-chrome-512x512.png",
+      "src": "{{ favicon_path }}/web-app-manifest-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
-    }],
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
   "start_url": "{{ '/index.html' | relative_url }}",
   "theme_color": "#2a1e6b",
   "background_color": "#ffffff",
diff --git a/assets/img/favicons/web-app-manifest-192x192.png b/assets/img/favicons/web-app-manifest-192x192.png
new file mode 100755
index 00000000000..ec915a3e018
Binary files /dev/null and b/assets/img/favicons/web-app-manifest-192x192.png differ
diff --git a/assets/img/favicons/web-app-manifest-512x512.png b/assets/img/favicons/web-app-manifest-512x512.png
new file mode 100755
index 00000000000..fd0ce60ae4a
Binary files /dev/null and b/assets/img/favicons/web-app-manifest-512x512.png differ
diff --git a/assets/js/data/mathjax.js b/assets/js/data/mathjax.js
new file mode 100644
index 00000000000..ca3d0de52c7
--- /dev/null
+++ b/assets/js/data/mathjax.js
@@ -0,0 +1,25 @@
+---
+layout: compress
+# WARNING: Don't use '//' to comment out code, use '{% comment %}' and '{% endcomment %}' instead.
+---
+
+{%- comment -%}
+  See: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options>
+{%- endcomment -%}
+
+MathJax = {
+  tex: {
+    {%- comment -%} start/end delimiter pairs for in-line math {%- endcomment -%}
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)']
+    ],
+    {%- comment -%} start/end delimiter pairs for display math {%- endcomment -%}
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]']
+    ],
+    {%- comment -%} equation numbering {%- endcomment -%}
+    tags: 'ams'
+  }
+};
diff --git a/assets/js/data/search.json b/assets/js/data/search.json
index 2601ed076bd..1c35ec1816e 100644
--- a/assets/js/data/search.json
+++ b/assets/js/data/search.json
@@ -10,11 +10,9 @@ swcache: true
     "url": {{ post.url | relative_url | jsonify }},
     "categories": {{ post.categories | join: ', ' | jsonify }},
     "tags": {{ post.tags | join: ', ' | jsonify }},
-    "date": "{{ post.date }}",
-    {% include no-linenos.html content=post.content %}
-    {% assign _content = content | strip_html | strip_newlines %}
-    "snippet": {{ _content | truncate: 200 | jsonify }},
-    "content": {{ _content | jsonify }}
+    "date": {{ post.date | jsonify }},
+    {% capture content -%}{% include post-summary.html full_text=true %}{%- endcapture -%}
+    "content": {{ content | jsonify }}
   }{% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]
diff --git a/assets/js/data/swconf.js b/assets/js/data/swconf.js
index cc11f79c750..798888a99da 100644
--- a/assets/js/data/swconf.js
+++ b/assets/js/data/swconf.js
@@ -22,28 +22,24 @@ const swconf = {
       {% endfor %}
     ],
 
-    {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
-    allowHosts: [
-      {% if site.img_cdn and site.img_cdn contains '//' %}
-        '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
-      {% endif %}
-
-      {%- unless site.assets.self_host.enabled -%}
-       {% for cdn in site.data.origin["cors"].cdns %}
-          '{{ cdn.url | split: "//" | last }}'
-          {%- unless forloop.last -%},{%- endunless -%}
+    interceptor: {
+      {%- comment -%} URLs containing the following paths will not be cached. {%- endcomment -%}
+      paths: [
+        {% for path in site.pwa.cache.deny_paths %}
+          {% unless path == empty %}
+            '{{ path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
+          {% endunless  %}
         {% endfor %}
-      {% endunless %}
-    ],
+      ],
+
+      {%- comment -%} URLs containing the following prefixes will not be cached. {%- endcomment -%}
+      urlPrefixes: [
+        {% if site.analytics.goatcounter.id != nil and site.pageviews.provider == 'goatcounter' %}
+          'https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/'
+        {% endif %}
+      ]
+    },
 
-    {%- comment -%} The request url with below path will not be cached. {%- endcomment -%}
-    denyPaths: [
-      {% for path in site.pwa.cache.deny_paths %}
-        {% unless path == empty %}
-          '{{ path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
-        {% endunless  %}
-      {% endfor %}
-    ],
     purge: false
   {% else %}
     purge: true
diff --git a/assets/lib b/assets/lib
index 7bc0d86b6af..93e03454edf 160000
--- a/assets/lib
+++ b/assets/lib
@@ -1 +1 @@
-Subproject commit 7bc0d86b6af83d7acfc63db50f29a5975cec2513
+Subproject commit 93e03454edf879bdf8abe34b9715b9fea4da0ee8
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index bc86dbc73c2..50e43ac9d1e 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,6 +1,181 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [7.4.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.4.0...v7.4.1) (2025-10-26)
+
+### Bug Fixes
+
+* avoid duplicate base URL for homepage preview images ([#2568](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2568)) ([66bf232](https://github.com/cotes2020/jekyll-theme-chirpy/commit/66bf232951fbe752821b623dc1e7e4e2824c15bf))
+
+## [7.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.3.1...v7.4.0) (2025-10-19)
+
+### Features
+
+* add support for embed spotify ([#2515](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2515)) ([cda62e2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/cda62e28d1b71ce4018301aacf93532230aa2b3b))
+* **i18n:** add Danish locale ([#2410](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2410)) ([f5802b8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f5802b8a8a4fb94cd51a484e438f6ba2ba8d62c9))
+* **i18n:** add locale files for some rtl languages ([#2415](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2415)) ([18c48b4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/18c48b4c49f896eeeeb52a8de1dca715add70c6a))
+
+### Bug Fixes
+
+* avoid unconfigured social options in sidebar ([#2507](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2507)) ([5f8ec7f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5f8ec7ffd3b23998bad48c110e809576fe5daf80))
+* correct GoatCounter pageviews extraction ([#2420](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2420)) ([c706799](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c706799f9b2e724dee9a3b891dea72dfa587929e))
+* resolve discrepancy in lqip between post and main page ([#2453](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2453)) ([1bac96a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1bac96a8e1ae23a7a48f2b7d249bfbfd5d9bfe50))
+* restore blurry animation for homepage LQIP ([#2551](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2551)) ([221ca9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/221ca9f52b55b103900832f3c03ad2ecc4415bcc))
+* **search:** restore full-text search for posts with description ([#2557](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2557)) ([604528e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/604528e3ce11ec0278e83f41105ed5949362bb54))
+
+## [7.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.3.0...v7.3.1) (2025-07-26)
+
+### Bug Fixes
+
+* escape special JSON characters in search results ([#2481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2481)) ([7615d72](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7615d72e9300a1514ef2fc8ec941ab2974ba7eb4))
+
+## [7.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.4...v7.3.0) (2025-05-18)
+
+### Features
+
+* **i18n:** add Catalan Spanish locale translation ([#2349](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2349)) ([167c98c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/167c98c781d0607c90ede8fc73eb43dffeea6abd))
+* **i18n:** add Dutch locale ([#2076](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2076)) ([981ddba](https://github.com/cotes2020/jekyll-theme-chirpy/commit/981ddba30e57934f9056b8d468f0d17db131e1e8))
+* **i18n:** add Japanese locale ([#2295](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2295)) ([571c90f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/571c90f13011eb91d0e1392218f3953060b920c9))
+* **i18n:** add persian language ([#2238](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2238)) ([7d4d35c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7d4d35cd10109e78d60fbb6b25a9b205f780ad63))
+
+### Bug Fixes
+
+* avoid `mathjax` loading failure on page refresh ([#2389](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2389)) ([401e2af](https://github.com/cotes2020/jekyll-theme-chirpy/commit/401e2af0f8a173d8437e03027c7aff558e8c0bde))
+* improve accuracy of moving `img` element classes ([#2399](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2399)) ([d0f8f95](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d0f8f9553e41536eb84ae2fdd3f3bc9d13f7ef8c))
+* prevent the search bar from moving when focused ([#2336](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2336)) ([f744929](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f7449299e88c71da2104f0007f2db23a8fa798be))
+* recognize global theme mode ([#2357](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2357)) ([7708adb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7708adbf30e6dea51a84311b86bc224739f656f6))
+* **search:** avoid missing spaces between paragraphs in search results ([#2199](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2199)) ([0eb7efa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0eb7efa7f53508bf6b48eb9d773d5c5047c3c525))
+* **ui:** fix incomplete border color on hover for tags ([#2359](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2359)) ([c626447](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c62644759cb4e0e07f7ee6eb9503ef69be62371b))
+
+### Improvements
+
+* **seo:** improve accessibility and aligns with best practices ([#2289](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2289)) ([54d4d59](https://github.com/cotes2020/jekyll-theme-chirpy/commit/54d4d59d22ac543a14bfbd9bb3d6fb6756056041))
+
+## [7.2.4](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.3...v7.2.4) (2024-12-21)
+
+### Bug Fixes
+
+* toc not visible when switching from mobile to desktop mode ([#2139](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2139)) ([32051da](https://github.com/cotes2020/jekyll-theme-chirpy/commit/32051dad03cb8f60fa4206969377b9674f9a3f0c))
+* **ui:** left borderline of TOC is notched ([#2140](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2140)) ([8a4d0bc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a4d0bc4ee9e142a11401cad80bc9605878f121d))
+
+## [7.2.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.2...v7.2.3) (2024-12-15)
+
+### Bug Fixes
+
+* refreshing mermaid theme may fail ([#2113](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2113)) ([2f00d41](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2f00d41861f1b06c2ff7fa4e67e14e647c3c34b0))
+* **ui:** gap between TOC entries is inconsistent ([#2119](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2119)) ([1b4e318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1b4e318dc1cd57da812e11bf69ebb06083c213fc))
+* **ui:** slow script loading hides TOC fade-up effect in desktop ([#2120](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2120)) ([e0c3faf](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e0c3fafa470eb12bd04ffdf198018bc28b6de20d))
+
+## [7.2.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.1...v7.2.2) (2024-12-06)
+
+### Bug Fixes
+
+* js files in subdirectories are excluded from the site output ([#2101](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2101)) ([f55cc31](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f55cc31dbd0e7455328c80c7ef38186ad8e54099))
+
+## [7.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.0...v7.2.1) (2024-12-05)
+
+### Bug Fixes
+
+* **build:** exclude `purgecss.js` from output files ([#2090](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2090)) ([976e1a1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/976e1a184b3dbe08991e8a50db4d5d7f8a0b7090))
+* correct the import condition for theme script ([#2075](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2075)) ([a16aa7d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a16aa7d41e3c3cb28649bfa1361e8bcb91b9ca47))
+* ensure pageviews are fetched after DOM is loaded ([#2071](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2071)) ([b4019f3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b4019f3517e4a3284df51567d29938cb12bf3acc))
+* **toc:** resume fade up animation in desktop mode ([#2085](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2085)) ([8280adb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8280adb901b9d15cc1bc18009553aae8746121d8))
+
+## [7.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.1...v7.2.0) (2024-11-28)
+
+### Features
+
+* show toc on mobile screens ([#1964](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1964)) ([8a064a5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a064a5e5a95cd22aa654f7c80da09d107262508))
+* support vertical scrolling for toc in desktop mode ([#2064](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2064)) ([5265b03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5265b039741555943f9a6f0451287aefb6810f28))
+
+### Bug Fixes
+
+* pagination error when pinned posts exceed the page size ([#1965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1965)) ([93f616b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/93f616b25d7ed6c4f090c50c8663f8c1f59947f4))
+
+### Improvements
+
+* modular sass architecture ([#2052](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2052)) ([35c794c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/35c794cf5896565430389f35c660b88a93cebb17))
+* speed up page rendering and jekyll build process ([#2034](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2034)) ([65f960c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/65f960c31a734b5306a8b919040c3aae9b783efd))
+
+## [7.1.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.0...v7.1.1) (2024-09-23)
+
+### Bug Fixes
+
+* **i18n:** correct fr-FR translations ([#1949](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1949)) ([367262e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/367262e74d1005bddf1328bb2b3a2b9e152c0086))
+* **pwa:** site baseurl not passed to `app.js` ([#1955](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1955)) ([5a63244](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5a63244721d21b1ad3a0ae83420723a2f0379e8b))
+
+## [7.1.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.0.1...v7.1.0) (2024-08-27)
+
+### Features
+
+* add Bluesky social links ([#1759](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1759)) ([0102aba](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0102abae062be24ec289fb7facb11950aca79e3f))
+* add Reddit social option ([#1836](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1836)) ([8673e13](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8673e1335f0771eac364d0a2866f27476d61a58b))
+* add Threads social links ([#1837](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1837)) ([e3a78b6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e3a78b6243f7056105d72185bb6e94b436834e5b))
+* **analytics:** add fathom analytics ([#1913](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1913)) ([befc4ce](https://github.com/cotes2020/jekyll-theme-chirpy/commit/befc4ce9c5026f67f99bce66e223d056229f0bdb))
+* **dev:** add vscode tasks ([#1843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1843)) ([e4db1a1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e4db1a176f3f69f676cbc0bf27b1d5a657ece05e))
+* **dev:** support vscode dev-container ([#1781](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1781)) ([1e3d4a6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1e3d4a6323ba3eed06a57f8bf1b2edefd890b127))
+* **ui:** improve block quote layout ([80bd792](https://github.com/cotes2020/jekyll-theme-chirpy/commit/80bd7928a02c75c843a550bd377d11b574e8bfda))
+* **ui:** improve visibility of inline code ([#1831](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1831)) ([c876731](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c876731901784a72ef9d2e9e2936df65ddff5f61))
+* **ui:** make `info-prompt` icon looks like the letter "i" ([#1835](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1835)) ([a07a57e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a07a57ec922249d3a22da56fbcb30d83eadef728))
+* **ui:** set `<kbd>` font to 'Lato' ([64c7262](https://github.com/cotes2020/jekyll-theme-chirpy/commit/64c7262245e878534971a2e3a2630b614daf72f3))
+
+### Bug Fixes
+
+* adapt the giscus localization parameter ([#1810](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1810)) ([0709854](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0709854dc8f6099d38c2578967a02f73b4be0dc8))
+* avoid caching pageviews data ([#1849](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1849)) ([979f86c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/979f86cf64e1fcace4231fb070c7e6398fd4e5ec))
+* remove extra dual-mode images from lightbox ([#1883](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1883)) ([5c5910f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5c5910f1fc661ec3dce203ac961c7f64f1991895))
+
+## [7.0.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.0.0...v7.0.1) (2024-05-18)
+
+### Bug Fixes
+
+* **analytics:** goatcounter pv greater than 1K cannot be converted to numbers ([#1762](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1762)) ([33a1fa7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/33a1fa7cae2181625e2f335708d59de4dd20ee7d))
+* audio/video path apply variable `media_subpath` ([#1745](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1745)) ([00a27a1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/00a27a1b85f665d0642b77babd54c6903fbdeb22))
+
+## [7.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.5...v7.0.0) (2024-05-11)
+
+### ⚠ BREAKING CHANGES
+
+* optimize the resource hints (#1717)
+* rename media-url file and related parameters (#1651)
+* rename comment setting parameter (#1563)
+* **analytics:** add post pageviews for GoatCounter (#1543)
+
+### Features
+
+* add cloudflare web analytics ([#1723](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1723)) ([c17fba4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c17fba44f53767c9dfaa8d92cfc6e275e5977f8a))
+* add support for embed video files ([#1558](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1558)) ([9592146](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9592146ca392236e69ee358412ecc32ef1662127))
+* add support for giscus strict title matching ([#1614](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1614)) ([700fd5b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/700fd5bad7272dd950f861e8550215cd8fafb413))
+* **analytics:** add post pageviews for GoatCounter ([#1543](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1543)) ([b641b3f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b641b3f1f2e54bcfe96d8dff46d4f94186492d98))
+* **analytics:** add Umami and Matomo tracking codes ([#1658](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1658)) ([61bdca2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/61bdca2db45179cd0d1b4b885a4c4864e3ffa3c1))
+* change site verification settings ([#1561](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1561)) ([e436387](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e4363871b5be0608d2b92b8aff482825a8044c1b))
+* **deps:** move `MathJax` configuration to a separate file ([#1670](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1670)) ([44f552c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/44f552cbcee83d037de0e59496bf6bb19eea2691))
+* display theme version in footer ([#1611](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1611)) ([8349314](https://github.com/cotes2020/jekyll-theme-chirpy/commit/834931486dc3e5ed544ce4ff47cd1b2bc45f42fd))
+* **i18n:** allow `page.lang` to override `site.lang` ([#1586](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1586)) ([547b95c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/547b95cc7ae35018dadcc01b6eb1dc8c8943e67e))
+* make post description customizable ([#1602](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1602)) ([f865336](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f865336c896e0db34edf8482a53e0e5d8f07ff95))
+* **media:** support audio and video tag with multi sources ([#1618](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1618)) ([23be416](https://github.com/cotes2020/jekyll-theme-chirpy/commit/23be4162b3f8598db14dc5b39726932ccf2cdc23))
+
+### Bug Fixes
+
+* make TOC title and entries visible at the same time ([#1711](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1711)) ([e0950fc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e0950fc973d029dc65d0bc1bd68f3d11242527c8))
+* mode toggle not outlined when receiving keyboard focus ([#1690](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1690)) ([cd37f63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/cd37f63a0144e0499ea991d3309da064ad5eccea))
+* prevent footnote back arrow from becoming an emoji ([#1716](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1716)) ([8608147](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8608147fb5037804695d93496c62f96b9c41e9cd))
+* **pwa:** skip range requests in service worker ([#1672](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1672)) ([76d58fe](https://github.com/cotes2020/jekyll-theme-chirpy/commit/76d58fe0ffdc4bd1df35b60815e97560c3564700))
+* search result prompt is empty ([#1583](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1583)) ([8a2afae](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a2afae6cab8fc9639be0a866b71699c8a80084c))
+* use `https` for Weibo sharing URL ([#1612](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1612)) ([8e5fbb7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8e5fbb7a74d04a4b3cdde69bcc821f8ccd1a3bc0))
+
+### Improvements
+
+* improve \<hr> visibility in dark mode ([#1565](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1565)) ([4ddd5c4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4ddd5c437046a1e70cf396113e2351c452a25493))
+* lean bootstrap javascript ([#1734](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1734)) ([ddb48ed](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ddb48eda52827aae16aff720212d7b6d2d8647f9))
+* rename comment setting parameter ([#1563](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1563)) ([f8390d4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f8390d4384600fb015728b1b186570fa58ca216f))
+* replace jQuery with Vanilla JS ([#1681](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1681)) ([fe7afa3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe7afa379f0af0ca98a207f85bdc0fa98575b1ad))
+* simplify mode toggle script ([#1692](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1692)) ([d4a6d64](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d4a6d640bd6d4ab185faf96c0255369a9903ee1d))
+* tree shaking Bootstrap CSS ([#1736](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1736)) ([363a3d9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/363a3d936bbd688fa4f28527e85ef7dd3fe3a79b))
+
+### Changes
+
+* optimize the resource hints ([#1717](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1717)) ([dcb0add](https://github.com/cotes2020/jekyll-theme-chirpy/commit/dcb0add47bf1adf92215514f1ccfa4661d5215be))
+* rename media-url file and related parameters ([#1651](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1651)) ([9f8aeaa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9f8aeaadbfef9967a9b0a9dd323d8bed46e14d9f))
 
 ## [6.5.5](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.4...v6.5.5) (2024-03-23)
 
@@ -17,6 +192,8 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [6.5.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.2...v6.5.3) (2024-03-07)
 
+### Changes
+
 * replace `polyfill.io` with `cdnjs` hosted link ([#1598](https://github.com/cotes2020/jekyll-theme-chirpy/pull/1598)) ([75a3d73](https://github.com/cotes2020/jekyll-theme-chirpy/commit/75a3d7399b257256a09d602cbe01062fe1cdf68d))
 
 ## [6.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.1...v6.5.2) (2024-02-29)
diff --git a/docs/SECURITY.md b/docs/SECURITY.md
index 5a07d266457..8d357fe5219 100644
--- a/docs/SECURITY.md
+++ b/docs/SECURITY.md
@@ -2,10 +2,10 @@
 
 ## Supported Versions
 
-| Version   | Supported |
-|:----------|:---------:|
-| `6.x`     |     ✓     |
-| < `6.0.0` |     ✗     |
+| Version    | Supported |
+| :--------- | :-------: |
+| >= `7.0.0` |     ✓     |
+| <= `6.0.0` |     ✗     |
 
 ## Reporting a Vulnerability
 
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000000..b6d8f1924ba
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,35 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import js from '@eslint/js';
+import globals from 'globals';
+
+export default defineConfig([
+  globalIgnores(['assets/*', 'node_modules/*', '_site/*']),
+  js.configs.recommended,
+  {
+    rules: {
+      semi: ['error', 'always'],
+      quotes: ['error', 'single']
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ['_javascript/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker,
+        ClipboardJS: 'readonly',
+        GLightbox: 'readonly',
+        Theme: 'readonly',
+        dayjs: 'readonly',
+        mermaid: 'readonly',
+        tocbot: 'readonly',
+        swconf: 'readonly'
+      }
+    }
+  }
+]);
diff --git a/jekyll-theme-chirpy.gemspec b/jekyll-theme-chirpy.gemspec
index 3b2335a2d58..4694d7d529f 100644
--- a/jekyll-theme-chirpy.gemspec
+++ b/jekyll-theme-chirpy.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "6.5.5"
+  spec.version       = "7.4.1"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 
@@ -23,11 +23,10 @@ Gem::Specification.new do |spec|
     "plugin_type"       => "theme"
   }
 
-  spec.required_ruby_version = ">= 3.0"
+  spec.required_ruby_version = "~> 3.1"
 
   spec.add_runtime_dependency "jekyll", "~> 4.3"
   spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
-  spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
   spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.8"
   spec.add_runtime_dependency "jekyll-archives", "~> 2.2"
   spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4"
diff --git a/package.json b/package.json
index a5f4045bf3f..61e4a425a0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "6.5.5",
+  "version": "7.4.1",
   "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
@@ -8,32 +8,50 @@
   },
   "author": "Cotes Chung",
   "license": "MIT",
+  "since": 2019,
   "bugs": {
     "url": "https://github.com/cotes2020/jekyll-theme-chirpy/issues"
   },
   "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
+  "type": "module",
   "scripts": {
-    "prebuild": "npx rimraf assets/js/dist",
-    "build": "NODE_ENV=production npx rollup -c --bundleConfigAsCjs",
-    "prewatch": "npx rimraf assets/js/dist",
-    "watch": "npx rollup -c --bundleConfigAsCjs -w",
-    "test": "npx stylelint _sass/**/*.scss",
-    "fixlint": "npm run test -- --fix"
+    "build": "concurrently npm:build:*",
+    "build:css": "node purgecss.js",
+    "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
+    "watch:js": "rollup -c --bundleConfigAsCjs -w",
+    "lint:js": "eslint",
+    "lint:scss": "stylelint _sass/**/*.scss",
+    "lint:fix:scss": "npm run lint:scss -- --fix",
+    "test": "npm run lint:js && npm run lint:scss",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.9",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
-    "@rollup/plugin-babel": "^6.0.4",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-private-methods": "^7.27.1",
+    "@babel/preset-env": "^7.28.3",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "husky": "^9.0.11",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.10.0",
-    "rollup-plugin-license": "^3.2.0",
-    "stylelint": "^16.2.1",
-    "stylelint-config-standard-scss": "^13.0.0"
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "concurrently": "^9.2.1",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
+    "husky": "^9.1.7",
+    "purgecss": "^7.0.2",
+    "rollup": "^4.52.5",
+    "semantic-release": "^25.0.1",
+    "stylelint": "^16.25.0",
+    "stylelint-config-standard-scss": "^16.0.0"
   },
   "prettier": {
     "trailingComma": "none"
@@ -54,59 +72,76 @@
       ]
     }
   },
-  "stylelint": {
-    "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,
-      "color-function-notation": "legacy",
-      "alpha-value-notation": "number",
-      "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",
+  "release": {
+    "branches": [
+      "production"
+    ],
+    "plugins": [
+      [
+        "@semantic-release/commit-analyzer",
         {
-          "ignore": [
-            "after-comment",
-            "first-nested"
-          ]
+          "preset": "conventionalcommits"
         }
       ],
-      "value-keyword-case": [
-        "lower",
+      [
+        "@semantic-release/release-notes-generator",
         {
-          "ignoreProperties": [
-            "/^\\$/"
-          ]
+          "preset": "conventionalcommits",
+          "presetConfig": {
+            "types": [
+              {
+                "type": "feat",
+                "section": "Features"
+              },
+              {
+                "type": "fix",
+                "section": "Bug Fixes"
+              },
+              {
+                "type": "perf",
+                "section": "Improvements"
+              },
+              {
+                "type": "refactor",
+                "section": "Changes",
+                "hidden": true
+              }
+            ]
+          }
         }
       ],
-      "media-feature-range-notation": "prefix"
-    }
-  },
-  "standard-version": {
-    "skip": {
-      "commit": true,
-      "tag": true
-    },
-    "types": [
-      {
-        "type": "feat",
-        "section": "Features"
-      },
-      {
-        "type": "fix",
-        "section": "Bug Fixes"
-      },
-      {
-        "type": "perf",
-        "section": "Improvements"
-      }
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "docs/CHANGELOG.md",
+          "changelogTitle": "# Changelog"
+        }
+      ],
+      [
+        "@semantic-release/npm",
+        {
+          "npmPublish": false
+        }
+      ],
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "bash tools/release.sh --prepare",
+          "publishCmd": "bash tools/release.sh"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "docs",
+            "package.json",
+            "*.gemspec"
+          ],
+          "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
+        }
+      ],
+      "@semantic-release/github"
     ]
   }
 }
diff --git a/purgecss.js b/purgecss.js
new file mode 100644
index 00000000000..2380f6f770c
--- /dev/null
+++ b/purgecss.js
@@ -0,0 +1,31 @@
+import { promises as fs } from 'fs';
+import { PurgeCSS } from 'purgecss';
+
+const DIST_PATH = '_sass/vendors';
+const output = `${DIST_PATH}/_bootstrap.scss`;
+
+const config = {
+  content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
+  css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
+  keyframes: true,
+  variables: true,
+  // The `safelist` should be changed appropriately for future development
+  safelist: {
+    standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
+    greedy: [/^col-/, /tooltip/]
+  }
+};
+
+function main() {
+  fs.rm(DIST_PATH, { recursive: true, force: true })
+    .then(() => fs.mkdir(DIST_PATH))
+    .then(() => new PurgeCSS().purge(config))
+    .then((result) => {
+      return fs.writeFile(output, result[0].css);
+    })
+    .catch((err) => {
+      console.error('Error during PurgeCSS process:', err);
+    });
+}
+
+main();
diff --git a/rollup.config.js b/rollup.config.js
index 7f2d14a6101..42e205e01a4 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,46 +1,86 @@
 import babel from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
-import license from 'rollup-plugin-license';
-import path from 'path';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import fs from 'fs';
+import pkg from './package.json';
 
 const SRC_DEFAULT = '_javascript';
-const DIST_DEFAULT = 'assets/js/dist';
-const isProd = process.env.NODE_ENV === 'production';
+const SRC_PWA = `${SRC_DEFAULT}/pwa`;
+const DIST = 'assets/js/dist';
 
-function build(filename) {
+const banner = `/*!
+ * ${pkg.name} v${pkg.version} | © ${pkg.since} ${pkg.author} | ${pkg.license} Licensed | ${pkg.homepage}
+ */`;
+const frontmatter = '---\npermalink: /:basename\n---\n';
+const isProd = process.env.BUILD === 'production';
+
+let hasWatched = false;
+
+function cleanup() {
+  fs.rmSync(DIST, { recursive: true, force: true });
+  console.log(`> Directory "${DIST}" has been cleaned.`);
+}
+
+function insertFrontmatter() {
   return {
-    input: [`${SRC_DEFAULT}/${filename}.js`],
+    name: 'insert-frontmatter',
+    generateBundle(_, bundle) {
+      for (const chunkOrAsset of Object.values(bundle)) {
+        if (chunkOrAsset.type === 'chunk') {
+          chunkOrAsset.code = frontmatter + chunkOrAsset.code;
+        }
+      }
+    }
+  };
+}
+
+function build(
+  filename,
+  { src = SRC_DEFAULT, jekyll = false, outputName = null } = {}
+) {
+  const input = `${src}/${filename}.js`;
+  const shouldWatch = hasWatched ? false : true;
+
+  if (!hasWatched) {
+    hasWatched = true;
+  }
+
+  return {
+    input,
     output: {
-      file: `${DIST_DEFAULT}/${filename}.min.js`,
+      file: `${DIST}/${filename}.min.js`,
       format: 'iife',
-      name: 'Chirpy',
-      sourcemap: !isProd
-    },
-    watch: {
-      include: `${SRC_DEFAULT}/**`
+      ...(outputName !== null && { name: outputName }),
+      banner,
+      sourcemap: !isProd && !jekyll
     },
+    ...(shouldWatch && { watch: { include: `${SRC_DEFAULT}/**/*.js` } }),
     plugins: [
       babel({
         babelHelpers: 'bundled',
         presets: ['@babel/env'],
-        plugins: ['@babel/plugin-proposal-class-properties']
+        plugins: [
+          '@babel/plugin-transform-class-properties',
+          '@babel/plugin-transform-private-methods'
+        ]
       }),
-      license({
-        banner: {
-          commentStyle: 'ignored',
-          content: { file: path.join(__dirname, SRC_DEFAULT, '_copyright') }
-        }
-      }),
-      isProd && terser()
+      nodeResolve(),
+      isProd && terser(),
+      jekyll && insertFrontmatter()
     ]
   };
 }
 
+cleanup();
+
 export default [
   build('commons'),
   build('home'),
   build('categories'),
   build('page'),
   build('post'),
-  build('misc')
+  build('misc'),
+  build('theme', { outputName: 'Theme' }),
+  build('app', { src: SRC_PWA, jekyll: true }),
+  build('sw', { src: SRC_PWA, jekyll: true })
 ];
diff --git a/tools/init b/tools/init.sh
similarity index 59%
rename from tools/init
rename to tools/init.sh
index 5baac5d829c..d710182be4e 100755
--- a/tools/init
+++ b/tools/init.sh
@@ -9,6 +9,8 @@ CLI=("git" "npm")
 
 ACTIONS_WORKFLOW=pages-deploy.yml
 
+RELEASE_HASH=$(git log --grep="chore(release):" -1 --pretty="%H")
+
 # temporary file suffixes that make `sed -i` compatible with BSD and Linux
 TEMP_SUFFIX="to-delete"
 
@@ -28,7 +30,7 @@ help() {
 _sedi() {
   regex=$1
   file=$2
-  sed -i.$TEMP_SUFFIX "$regex" "$file"
+  sed -i.$TEMP_SUFFIX -E "$regex" "$file"
   rm -f "$file".$TEMP_SUFFIX
 }
 
@@ -50,22 +52,7 @@ _check_status() {
 }
 
 _check_init() {
-  local _has_inited=false
-
-  if [[ ! -d .github ]]; then # using option `--no-gh`
-    _has_inited=true
-  else
-    if [[ -f .github/workflows/$ACTIONS_WORKFLOW ]]; then
-      # on BSD, the `wc` could contains blank
-      local _count
-      _count=$(find .github/workflows/ -type f -name "*.yml" | wc -l)
-      if [[ ${_count//[[:blank:]]/} == 1 ]]; then
-        _has_inited=true
-      fi
-    fi
-  fi
-
-  if $_has_inited; then
+  if [[ $(git rev-parse HEAD^1) == "$RELEASE_HASH" ]]; then
     echo "Already initialized."
     exit 0
   fi
@@ -77,44 +64,47 @@ check_env() {
   _check_init
 }
 
-checkout_latest_release() {
-  hash=$(git log --grep="chore(release):" -1 --pretty="%H")
-  git reset --hard "$hash"
+reset_latest() {
+  git reset --hard "$RELEASE_HASH"
+  git clean -fd
+  git submodule update --init --recursive
 }
 
 init_files() {
   if $_no_gh; then
     rm -rf .github
   else
-    ## Change the files of `.github`
-    mv .github/workflows/$ACTIONS_WORKFLOW.hook .
-    rm -rf .github
-    mkdir -p .github/workflows
-    mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
-
-    ## Cleanup image settings in site config
-    _sedi "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+    ## Change the files of `.github/`
+    temp="$(mktemp -d)"
+    find .github/workflows -type f -name "*$ACTIONS_WORKFLOW*" -exec mv {} "$temp/$ACTIONS_WORKFLOW" \;
+    rm -rf .github && mkdir -p .github/workflows
+    mv "$temp/$ACTIONS_WORKFLOW" .github/workflows/"$ACTIONS_WORKFLOW"
+    rm -rf "$temp"
   fi
 
+  # Cleanup image settings in site config
+  _sedi "s/(^timezone:).*/\1/;s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
+
   # remove the other files
-  rm -rf _posts/*
+  rm -rf tools/init.sh tools/release.sh _posts/*
 
   # build assets
   npm i && npm run build
 
-  # track the js output
-  _sedi "/^assets.*\/dist/d" .gitignore
+  # track the CSS/JS output
+  _sedi "/^_sass\/vendors/d" .gitignore
+  _sedi "/^assets\/js\/dist/d" .gitignore
 }
 
 commit() {
   git add -A
   git commit -m "chore: initialize the environment" -q
-  echo -e "\n[INFO] Initialization successful!\n"
+  echo -e "\n> Initialization successful!\n"
 }
 
 main() {
   check_env
-  checkout_latest_release
+  reset_latest
   init_files
   commit
 }
diff --git a/tools/release b/tools/release
deleted file mode 100755
index 9ca63dccce4..00000000000
--- a/tools/release
+++ /dev/null
@@ -1,220 +0,0 @@
-#!/usr/bin/env bash
-#
-# Release a new version to the GitLab flow production branch.
-#
-# For a new major/minor version, bump version on the main branch, and then merge into the production branch.
-#
-# For a patch version, bump the version number on the patch branch, then merge that branch into the main branch
-# and production branch.
-#
-#
-# Usage: run on the default, release or the patch branch
-#
-# Requires: Git, NPM and RubyGems
-
-set -eu
-
-opt_pre=false # preview mode option
-
-working_branch="$(git branch --show-current)"
-
-DEFAULT_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
-
-PROD_BRANCH="production"
-
-GEM_SPEC="jekyll-theme-chirpy.gemspec"
-NODE_CONFIG="package.json"
-CHANGE_LOG="docs/CHANGELOG.md"
-
-JS_DIST="assets/js/dist"
-BACKUP_PATH="$(mktemp -d)"
-
-FILES=(
-  "$GEM_SPEC"
-  "$NODE_CONFIG"
-)
-
-TOOLS=(
-  "git"
-  "npm"
-  "standard-version"
-  "gem"
-)
-
-help() {
-  echo "A tool to release new version Chirpy gem"
-  echo
-  echo "Usage:"
-  echo
-  echo "   bash ./tools/release [options]"
-  echo
-  echo "Options:"
-  echo "     -p, --preview            Enable preview mode, only package, and will not modify the branches"
-  echo "     -h, --help               Print this information."
-}
-
-_check_cli() {
-  for i in "${!TOOLS[@]}"; do
-    cli="${TOOLS[$i]}"
-    if ! command -v "$cli" &>/dev/null; then
-      echo "> Command '$cli' not found!"
-      exit 1
-    fi
-  done
-}
-
-_check_git() {
-  # ensure that changes have been committed
-  if [[ -n $(git status . -s) ]]; then
-    echo "> Abort: Commit the staged files first, and then run this tool again."
-    exit 1
-  fi
-
-  $opt_pre || (
-    if [[ $working_branch != "$DEFAULT_BRANCH" &&
-      $working_branch != hotfix/* &&
-      $working_branch != "$PROD_BRANCH" ]]; then
-      echo "> Abort: Please run on the default, release or patch branch."
-      exit 1
-    fi
-  )
-}
-
-_check_src() {
-  for i in "${!FILES[@]}"; do
-    _src="${FILES[$i]}"
-    if [[ ! -f $_src && ! -d $_src ]]; then
-      echo -e "> Error: Missing file \"$_src\"!\n"
-      exit 1
-    fi
-  done
-}
-
-_check_node_packages() {
-  if [[ ! -d node_modules || "$(du node_modules | awk '{print $1}')" == "0" ]]; then
-    npm i
-  fi
-}
-
-check() {
-  _check_cli
-  _check_git
-  _check_src
-  _check_node_packages
-}
-
-# Auto-generate a new version number to the file 'package.json'
-bump_node() {
-  bump="standard-version -i $CHANGE_LOG"
-
-  if $opt_pre; then
-    bump="$bump -p rc"
-  fi
-
-  eval "$bump"
-
-  # Change heading of Patch version to heading level 2 (a bug from `standard-version`)
-  sed -i "s/^### \[/## \[/g" "$CHANGE_LOG"
-  # Replace multiple empty lines with a single empty line
-  sed -i "/^$/N;/^\n$/D" "$CHANGE_LOG"
-}
-
-## Bump new version to gem config file
-bump_gem() {
-  _ver="$1"
-
-  if $opt_pre; then
-    _ver="${1/-/.}"
-  fi
-
-  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_ver/" "$GEM_SPEC"
-}
-
-# Creates a new tag on the production branch with the given version number.
-# Also commits the changes and merges the production branch into the default branch.
-branch() {
-  _version="$1" # X.Y.Z
-
-  git add .
-  git commit -m "chore(release): $_version"
-
-  # Create a new tag on production branch
-  echo -e "> Create tag v$_version\n"
-  git tag "v$_version"
-
-  git checkout "$DEFAULT_BRANCH"
-  git merge --no-ff --no-edit "$PROD_BRANCH"
-
-  if [[ $working_branch == hotfix/* ]]; then
-    # delete the patch branch
-    git branch -D "$working_branch"
-  fi
-}
-
-## Build a Gem package
-build_gem() {
-  git checkout "$PROD_BRANCH"
-
-  # Remove unnecessary theme settings
-  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
-  rm -f ./*.gem
-
-  npm run build
-  git add "$JS_DIST" -f # add JS distribution files to gem
-  gem build "$GEM_SPEC"
-  cp "$JS_DIST"/* "$BACKUP_PATH"
-
-  # Resume the settings
-  git reset
-  git checkout .
-
-  # restore the dist files for future development
-  mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
-
-  # back to the default branch
-  git checkout "$DEFAULT_BRANCH"
-}
-
-main() {
-  check
-
-  if [[ $opt_pre = false && $working_branch != "$PROD_BRANCH" ]]; then
-    git checkout "$PROD_BRANCH"
-    git merge --no-ff --no-edit "$working_branch"
-  fi
-
-  bump_node
-
-  _version="$(grep '"version":' "$NODE_CONFIG" | sed 's/.*: "//;s/".*//')"
-
-  bump_gem "$_version"
-
-  if [[ $opt_pre = false ]]; then
-    branch "$_version"
-  fi
-
-  echo -e "> Build the gem package for v$_version\n"
-
-  build_gem
-}
-
-while (($#)); do
-  opt="$1"
-  case $opt in
-  -p | --preview)
-    opt_pre=true
-    shift
-    ;;
-  -h | --help)
-    help
-    exit 0
-    ;;
-  *)
-    # unknown option
-    help
-    exit 1
-    ;;
-  esac
-done
-
-main
diff --git a/tools/release.sh b/tools/release.sh
new file mode 100755
index 00000000000..36ca88af6a4
--- /dev/null
+++ b/tools/release.sh
@@ -0,0 +1,186 @@
+#!/usr/bin/env bash
+#
+# Requires: Git, NPM and RubyGems
+
+set -eu
+
+opt_pre=false # option for bump gem version
+opt_pkg=false # option for building gem package
+
+MAIN_BRANCH="master"
+RELEASE_BRANCH="production"
+
+GEM_SPEC="jekyll-theme-chirpy.gemspec"
+NODE_SPEC="package.json"
+CHANGELOG="docs/CHANGELOG.md"
+CONFIG="_config.yml"
+
+CSS_DIST="_sass/vendors"
+JS_DIST="assets/js/dist"
+
+FILES=(
+  "$GEM_SPEC"
+  "$NODE_SPEC"
+  "$CHANGELOG"
+  "$CONFIG"
+)
+
+TOOLS=(
+  "git"
+  "npm"
+  "gem"
+)
+
+help() {
+  echo -e "A tool to release new version Chirpy gem.\nThis tool will:"
+  echo "  1. Build a new gem and publish it to RubyGems.org"
+  echo "  2. Merge the release branch into the default branch"
+  echo
+  echo "Usage:"
+  echo "  bash $0 [options]"
+  echo
+  echo "Options:"
+  echo "  --prepare           Preparation for release"
+  echo "  -p, --package       Build a gem package only, for local packaging in case of auto-publishing failure"
+  echo "  -h, --help          Display this help message"
+}
+
+_check_cli() {
+  for i in "${!TOOLS[@]}"; do
+    cli="${TOOLS[$i]}"
+    if ! command -v "$cli" &>/dev/null; then
+      echo "> Command '$cli' not found!"
+      exit 1
+    fi
+  done
+}
+
+_check_git() {
+  $opt_pre || (
+    # ensure that changes have been committed
+    if [[ -n $(git status . -s) ]]; then
+      echo "> Abort: Commit the staged files first, and then run this tool again."
+      exit 1
+    fi
+  )
+
+  $opt_pkg || (
+    if [[ "$(git branch --show-current)" != "$RELEASE_BRANCH" ]]; then
+      echo "> Abort: Please run the tool in the '$RELEASE_BRANCH' branch."
+      exit 1
+    fi
+  )
+}
+
+_check_src() {
+  for i in "${!FILES[@]}"; do
+    _src="${FILES[$i]}"
+    if [[ ! -f $_src && ! -d $_src ]]; then
+      echo -e "> Error: Missing file \"$_src\"!\n"
+      exit 1
+    fi
+  done
+}
+
+init() {
+  _check_cli
+  _check_git
+  _check_src
+  echo -e "> npm install\n"
+  npm i
+}
+
+## Bump new version to gem-spec file
+_bump_version() {
+  _version="$(grep '"version":' "$NODE_SPEC" | sed 's/.*: "//;s/".*//')"
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_version/" "$GEM_SPEC"
+  echo "> Bump gem version to $_version"
+}
+
+_improve_changelog() {
+  # Replace multiple empty lines with a single empty line
+  sed -i '/^$/N;/^\n$/D' "$CHANGELOG"
+  # Escape left angle brackets of HTML tag in the changelog as they break the markdown structure. e.g., '<hr>'
+  sed -i -E 's/\s(<[a-z])/ \\\1/g' "$CHANGELOG"
+}
+
+prepare() {
+  _bump_version
+  _improve_changelog
+}
+
+## Build a Gem package
+build_gem() {
+  # Remove unnecessary theme settings
+  sed -i -E "s/(^timezone:).*/\1/;s/(^cdn:).*/\1/;s/(^avatar:).*/\1/" $CONFIG
+  rm -f ./*.gem
+
+  npm run build
+  # add CSS/JS distribution files to gem package
+  git add "$CSS_DIST" "$JS_DIST" -f
+
+  echo -e "\n> gem build $GEM_SPEC\n"
+  gem build "$GEM_SPEC"
+
+  echo -e "\n> Resume file changes ...\n"
+  git reset
+  git checkout .
+}
+
+# Push the gem to RubyGems.org (using $GEM_HOST_API_KEY)
+push_gem() {
+  gem push ./*.gem
+}
+
+## Merge the release branch into the default branch
+merge() {
+  git fetch origin "$MAIN_BRANCH"
+  git checkout -b "$MAIN_BRANCH" origin/"$MAIN_BRANCH"
+
+  git merge --no-ff --no-edit "$RELEASE_BRANCH" || (
+    git merge --abort
+    echo -e "\n> Conflict detected. Aborting merge.\n"
+    exit 0
+  )
+
+  git push origin "$MAIN_BRANCH"
+}
+
+main() {
+  init
+
+  if $opt_pre; then
+    prepare
+    exit 0
+  fi
+
+  build_gem
+  $opt_pkg && exit 0
+  push_gem
+  merge
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  --prepare)
+    opt_pre=true
+    shift
+    ;;
+  -p | --package)
+    opt_pkg=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
+  esac
+done
+
+main
diff --git a/tools/run b/tools/run
deleted file mode 100755
index 8072e414897..00000000000
--- a/tools/run
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-#
-# Run jekyll serve and then launch the site
-
-bundle exec jekyll s -H 0.0.0.0 -l
diff --git a/tools/run.sh b/tools/run.sh
new file mode 100755
index 00000000000..0efc452d363
--- /dev/null
+++ b/tools/run.sh
@@ -0,0 +1,54 @@
+#!/usr/bin/env bash
+#
+# Run jekyll serve and then launch the site
+
+prod=false
+command="bundle exec jekyll s -l"
+host="127.0.0.1"
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/run [options]"
+  echo
+  echo "Options:"
+  echo "     -H, --host [HOST]    Host to bind to."
+  echo "     -p, --production     Run Jekyll in 'production' mode."
+  echo "     -h, --help           Print this help information."
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -H | --host)
+    host="$2"
+    shift 2
+    ;;
+  -p | --production)
+    prod=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    echo -e "> Unknown option: '$opt'\n"
+    help
+    exit 1
+    ;;
+  esac
+done
+
+command="$command -H $host"
+
+if $prod; then
+  command="JEKYLL_ENV=production $command"
+fi
+
+if [ -e /proc/1/cgroup ] && grep -q docker /proc/1/cgroup; then
+  command="$command --force_polling"
+fi
+
+echo -e "\n> $command\n"
+eval "$command"
diff --git a/tools/test b/tools/test.sh
similarity index 95%
rename from tools/test
rename to tools/test.sh
index 9fa02ad13b9..331de1c3462 100755
--- a/tools/test
+++ b/tools/test.sh
@@ -19,7 +19,7 @@ help() {
   echo
   echo "Usage:"
   echo
-  echo "   bash ./tools/test [options]"
+  echo "   bash $0 [options]"
   echo
   echo "Options:"
   echo '     -c, --config   "<config_a[,config_b[...]]>"    Specify config file(s)'
@@ -62,7 +62,7 @@ main() {
 
   # test
   bundle exec htmlproofer "$SITE_DIR" \
-    --disable-external=true \
+    --disable-external \
     --ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 }