diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000..39c428df
--- /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 00000000..a4bc2825
--- /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/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index f22921b7..00000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-ko_fi: coteschung
-custom: https://sponsor.cotes.page
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 7b513fb5..6d64e468 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -53,7 +53,7 @@ body:
       value: |
         - Ruby: <!-- run `ruby -v` -->
         - Jekyll: <!-- run `bundle exec jekyll -v` -->
-        - Chirpy: <!-- run `bundle info jekyll-theme-chirpy` -->
+        - Chirpy: <!-- run `bundle info --version jekyll-theme-chirpy` -->
     validations:
       required: true
 
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 393fa980..c294dc64 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -8,18 +8,22 @@ updates:
     directory: "/"
     versioning-strategy: increase
     groups:
-      npm:
-        update-types:
-          - "major"
-          - "minor"
-          - "patch"
+      prod-deps:
+        dependency-type: production
+      dev-deps:
+        dependency-type: development
     schedule:
       interval: "weekly"
   - package-ecosystem: "github-actions"
-    directory: "/"
+    directories:
+      - "/.github/workflows/**"
     groups:
       gh-actions:
         update-types:
           - "major"
     schedule:
       interval: "weekly"
+  - package-ecosystem: "devcontainers"
+    directory: "/"
+    schedule:
+      interval: weekly
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index 160750d6..f603301f 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -2,29 +2,28 @@ name: CD
 
 on:
   push:
-    branches:
-      - production
-    tags-ignore:
-      - "**"
+    branches: [production]
+    tags-ignore: ["**"]
 
 jobs:
   release:
+    if: ${{ ! startsWith(github.event.head_commit.message, 'chore(release)') }}
     permissions:
       contents: write
       issues: write
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
 
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3
+          ruby-version: 3.4
           bundler-cache: true
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: latest
+          node-version: lts/*
 
       - run: npm install
       - run: npx semantic-release
@@ -35,3 +34,6 @@ jobs:
   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 078e4f13..5423404a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,16 +1,25 @@
-name: "CI"
+name: CI
+
 on:
   push:
     branches:
-      - "master"
+      - master
+      - "hotfix/*"
     paths-ignore:
       - ".github/**"
       - "!.github/workflows/ci.yml"
-      - ".gitignore"
+      - .gitignore
       - "docs/**"
-      - "README.md"
-      - "LICENSE"
+      - README.md
+      - LICENSE
   pull_request:
+    paths-ignore:
+      - ".github/**"
+      - "!.github/workflows/ci.yml"
+      - .gitignore
+      - "docs/**"
+      - README.md
+      - LICENSE
 
 jobs:
   build:
@@ -18,11 +27,11 @@ jobs:
 
     strategy:
       matrix:
-        ruby: ["3.1", "3.2", "3.3"]
+        ruby: ["3.3", "3.4"]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0 # for posts's lastmod
 
@@ -33,12 +42,12 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: latest
+          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 06feb7fd..c122bed9 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -24,11 +24,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
       # 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
@@ -36,9 +36,9 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@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 c9c48c33..5248c167 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -1,9 +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
+      - uses: actions/checkout@v7
       - 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 00000000..47ee7cba
--- /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@v7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Lint JS
+        run: npm run lint:js
diff --git a/.github/workflows/lint-scss.yml b/.github/workflows/lint-scss.yml
new file mode 100644
index 00000000..c96958ce
--- /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@v7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Lint SCSS
+        run: npm run lint:scss
diff --git a/.github/workflows/pr-filter.yml b/.github/workflows/pr-filter.yml
new file mode 100644
index 00000000..6224d18f
--- /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@v7
+
+      - name: Check PR Content
+        id: intercept
+        uses: actions/github-script@v9
+        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
index 20e46915..b0f9713f 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -5,6 +5,12 @@ on:
     branches:
       - docs
   workflow_call:
+    secrets:
+      GH_PAT:
+        required: true
+      BUILDER:
+        required: true
+  workflow_dispatch:
 
 jobs:
   launch:
diff --git a/.github/workflows/scripts/pr-filter.js b/.github/workflows/scripts/pr-filter.js
new file mode 100644
index 00000000..52e8d526
--- /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 bcf425ae..1c9913f5 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/starter/pages-deploy.yml b/.github/workflows/starter/pages-deploy.yml
index cc28f99f..b865061e 100644
--- a/.github/workflows/starter/pages-deploy.yml
+++ b/.github/workflows/starter/pages-deploy.yml
@@ -28,7 +28,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
           # submodules: true
@@ -37,12 +37,12 @@ jobs:
 
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v6
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3
+          ruby-version: 3.4
           bundler-cache: true
 
       - name: Build site
@@ -57,7 +57,7 @@ jobs:
             \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v5
         with:
           path: "_site${{ steps.pages.outputs.base_path }}"
 
@@ -70,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5
diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml
deleted file mode 100644
index 89eeaeff..00000000
--- a/.github/workflows/style-lint.yml
+++ /dev/null
@@ -1,23 +0,0 @@
-name: "Style Lint"
-
-on:
-  push:
-    branches: ["master"]
-    paths: ["_sass/**/*.scss"]
-  pull_request:
-    paths: ["_sass/**/*.scss"]
-
-jobs:
-  stylelint:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: latest
-      - run: npm i
-      - run: npm test
diff --git a/.gitignore b/.gitignore
index d6bf5096..562f4e59 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,10 +17,16 @@ package-lock.json
 
 # IDE configurations
 .idea
-.vscode
+.vscode/*
 !.vscode/settings.json
 !.vscode/extensions.json
+!.vscode/tasks.json
 
 # Misc
-_sass/dist
+_sass/vendors
 assets/js/dist
+
+# Hidden system files
+*~
+.DS_Store
+Thumbs.db
diff --git a/.husky/commit-msg b/.husky/commit-msg
old mode 100755
new mode 100644
index 7f23494b..0a4b97de
--- 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/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 00000000..c0c1b95a
--- /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 52bd6fbd..082bc94c 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,13 +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",
-    "yzhang.markdown-all-in-one"
-  ]
+  "recommendations": ["ms-vscode-remote.remote-containers"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b0e2e099..5e8a04f3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,6 @@
   // Prettier
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "prettier.trailingComma": "none",
   // Shopify Liquid
   "files.associations": {
     "*.html": "liquid"
@@ -15,13 +14,17 @@
     "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 00000000..99ed5c5b
--- /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 672e9e4b..62a840ea 100644
--- a/Gemfile
+++ b/Gemfile
@@ -4,6 +4,11 @@ source "https://rubygems.org"
 
 gemspec
 
-group :test do
-  gem "html-proofer", "~> 5.0"
+gem "html-proofer", "~> 5.0", group: :test
+
+platforms :windows, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
 end
+
+gem "wdm", "~> 0.2.0", :platforms => [:windows]
diff --git a/README.md b/README.md
index 747b8bc1..b5ef1a7d 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,11 @@
 
   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][badge-ci]][ci]&nbsp;
+  [![Codacy Badge][badge-codacy]][codacy]&nbsp;
+  [![GitHub license][badge-license]][license]&nbsp;
+  [![Gem Version][badge-gem]][gem]&nbsp;
+  [![Open in Dev Containers][badge-open-container]][open-container]
 
   [**Live Demo** →][demo]
 
@@ -20,64 +20,58 @@
 
 ## Features
 
-- Dark Theme
-- Localized UI language
-- Pinned Posts on Home Page
-- Hierarchical Categories
-- Trending Tags
-- Table of Contents
-- Last Modified Date
-- Syntax Highlighting
-- Mathematical Expressions
-- Mermaid Diagrams & Flowcharts
-- Dark Mode Images
-- Embed Media
-- Comment Systems
-- Built-in Search
-- Atom Feeds
-- PWA
-- Web Analytics
-- SEO & Performance Optimization
+- **Design & UX** - Responsive layout, Dark/Light modes, Localized UI language,
+  and Dark mode images.
+- **Content Management** - Pinned posts, Hierarchical categories, Trending tags,
+  Auto-generated Table of Contents, and Last modified dates.
+- **Rich Text Support** - Syntax highlighting, Mathematical expressions, Mermaid
+  diagrams & flowcharts, and Embedded media.
+- **Interactivity & Outreach** - Built-in search, Multiple comment systems, and
+  Atom feeds.
+- **System & Optimization** - PWA support, integrated Web analytics, and
+  advanced SEO performance.
 
 ## Documentation
 
-To learn how to use, develop, and upgrade the project, please refer to the [Wiki][wiki].
+To learn how to use, develop, and upgrade the project, please refer to the
+[Wiki][wiki].
 
 ## Contributing
 
-Contributions (_pull requests_, _issues_, and _discussions_) are what make the open-source community such an amazing place
-to learn, inspire, and create. Any contributions you make are greatly appreciated.
-For details, see the "[Contributing Guidelines][contribute-guide]".
+Contributions (_pull requests_, _issues_, and _discussions_) are what make the
+open-source community such an amazing place to learn, inspire, and create. Any
+contributions you make are greatly appreciated.
+For details, please refer to our [Contributing Guidelines][contribute-guide].
 
 ## Credits
 
-### Contributors
+This project is built on the [Jekyll][jekyllrb] ecosystem and integrates a
+collection of [excellent libraries][lib]. Its avatar and favicon are sourced
+from [ClipartMAX][clipartmax].
 
-Thanks to [all the contributors][contributors] involved in the development of the project!
+Furthermore, thanks to everyone who contributed to the development of this project!
 
-[![all-contributors](https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16)][contributors]
-<sub> — Made with [contrib.rocks](https://contrib.rocks)</sub>
-
-### Third-Party Assets
-
-This project is built on the [Jekyll][jekyllrb] ecosystem and some [great libraries][lib], and is developed using [VS Code][vscode] as well as tools provided by [JetBrains][jetbrains] under a non-commercial open-source software license.
-
-The avatar and favicon for the project's website are from [ClipartMAX][clipartmax].
+[![all-contributors][contributors-avatar]][contributors]
 
 ## License
 
-This project is published under [MIT License][license].
+This project is licensed under the [MIT License][license].
 
+[badge-ci]: https://img.shields.io/github/actions/workflow/status/cotes2020/jekyll-theme-chirpy/ci.yml?logo=github
+[badge-codacy]: https://img.shields.io/codacy/grade/4e556876a3c54d5e8f2d2857c4f43894?logo=codacy
+[badge-license]: https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy?color=goldenrod
+[badge-gem]: https://img.shields.io/gem/v/jekyll-theme-chirpy?&logo=RubyGems&logoColor=ghostwhite&label=gem&color=orange
+[badge-open-container]: https://img.shields.io/badge/Dev_Containers-Open-deepskyblue?logo=linuxcontainers
 [gem]: https://rubygems.org/gems/jekyll-theme-chirpy
 [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/
 [wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md
 [contributors]: https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors
+[contributors-avatar]: https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16&max=112
 [lib]: https://github.com/cotes2020/chirpy-static-assets
-[vscode]: https://code.visualstudio.com/
-[jetbrains]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
diff --git a/_config.yml b/_config.yml
index 613b043b..36ce54ea 100644
--- a/_config.yml
+++ b/_config.yml
@@ -8,41 +8,38 @@ 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
 # ↓ --------------------------
 
-title: Chirpy # the main title
+title: The Open Space Program
 
-tagline: A text-focused Jekyll theme # it will display as the sub-title
+tagline: Open Source Space Program
 
 description: >- # used by seo meta and the atom feed
-  A minimal, responsive and feature-rich Jekyll theme for technical writing.
-
+  Open Source Space Program
 # Fill in the protocol & hostname for your site.
-# e.g. 'https://username.github.io', note that it does not end with a '/'.
-url: ""
+# E.g. 'https://username.github.io', note that it does not end with a '/'.
+url: 'https://TheOpenSpaceProgram.github.io'
 
 github:
-  username: github_username # change to your github username
+  username: TheOpenSpaceProgram # 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
+  name: TheOpenSpaceProgram
+  # email: example@domain.com # change to your email address
+  #fediverse_handle: # fill in your fediverse handle. E.g. "@username@domain.com"
   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
-    # Uncomment below to add more social links
-    # - https://www.facebook.com/username
-    # - https://www.linkedin.com/in/username
+    - https://github.com/TheOpenSpaceProgram
+    - https://discord.gg/CjbdXQt3j7
 
 # Site Verification Settings
 webmaster_verifications:
@@ -70,8 +67,10 @@ analytics:
     domain: # fill in your Matomo domain
   cloudflare:
     id: # fill in your Cloudflare Web Analytics token
+  fathom:
+    id: # fill in your Fathom Site ID
 
-# Pageviews settings
+# Page views settings
 pageviews:
   provider: # now only supports 'goatcounter'
 
@@ -83,8 +82,8 @@ pageviews:
 #
 # 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]
 
@@ -105,8 +104,18 @@ social_preview_image: # string, local or CORS resources
 # boolean type, the global switch for TOC in posts.
 toc: true
 
+actions:
+  # Display "Edit this post" action on each post page to encourage contributions.
+  edit_post:
+    enabled: false # set to true to display the "Edit this post" action.
+    url: "" # repository base URL, e.g. https://github.com/cotes2020/jekyll-theme-chirpy/edit/master
+    # Use dynamic or static URL for the edit link.
+    # If `static_url` is false, the post's path will be appended to the `url` above as the final edit link.
+    # Set to true if the URL should remain unchanged, which means each post will share the same edit link.
+    static_url: false # [ true | false ]
+
 comments:
-  # Global switch for the post comment system. Keeping it empty means disabled.
+  # Global switch for the post-comment system. Keeping it empty means disabled.
   provider: # [disqus | utterances | giscus]
   # The provider options are as follows:
   disqus:
@@ -136,9 +145,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.
@@ -190,10 +199,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-  - scope:
-      path: assets/js/dist
-    values:
-      swcache: true
 
 sass:
   style: compressed
@@ -214,8 +219,9 @@ exclude:
   - tools
   - README.md
   - LICENSE
+  - purgecss.js
   - "*.config.js"
-  - package*.json
+  - "package*.json"
 
 jekyll-archives:
   enabled: [categories, tags]
diff --git a/_data/contact.yml b/_data/contact.yml
index 1ed228a0..ed40acb7 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 c6082981..31477053 100644
--- a/_data/locales/ar.yml
+++ b/_data/locales/ar.yml
@@ -43,12 +43,17 @@ copyright:
 meta: باستخدام :PLATFORM السمة :THEME
 
 not_found:
-  statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
+  statement: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
 
 notification:
-  update_found: يتوفر اصدار جديد للمحتوى.
+  update_found: يتوفر محتوى جديد
   update: تحديث
 
+theme:
+  light: فاتح
+  dark: داكن
+  system: النظام
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: دقيقة
     prompt: قراءة
+  edit: حرر هذا المنشور
   relate_posts: إقرأ المزيد
   share: شارك
   button:
diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml
index 3e049938..e2f77c34 100644
--- a/_data/locales/bg-BG.yml
+++ b/_data/locales/bg-BG.yml
@@ -43,12 +43,17 @@ copyright:
 meta: Създадено чрез :PLATFORM и :THEME тема
 
 not_found:
-  statment: Съжалявам, но на този URL адрес няма налично съдържание.
+  statement: Съжалявам, но на този URL адрес няма налично съдържание.
 
 notification:
-  update_found: Налична е нова версия на съдържанието.
+  update_found: Има ново съдържание
   update: Обнови
 
+theme:
+  light: Светла
+  dark: Тъмна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: мин
     prompt: четиво
+  edit: Редактирай тази публикация
   relate_posts: Още за четене
   share: Споделете
   button:
diff --git a/_data/locales/ca-ES.yml b/_data/locales/ca-ES.yml
new file mode 100644
index 00000000..9f4c6a2e
--- /dev/null
+++ b/_data/locales/ca-ES.yml
@@ -0,0 +1,90 @@
+# 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 contingut nou disponible
+  update: Actualitzar
+
+theme:
+  light: Clar
+  dark: Fosc
+  system: Sistema
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Per
+  posted: Publicat
+  updated: Actualitzat
+  words: paraules
+  pageview_measure: visites
+  read_time:
+    unit: min
+    prompt: " de lectura"
+  edit: Edita aquesta entrada
+  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 e515c08f..f3019565 100644
--- a/_data/locales/cs-CZ.yml
+++ b/_data/locales/cs-CZ.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Je tu nový obsah
   update: Aktualizace
 
+theme:
+  light: Světlý
+  dark: Tmavý
+  system: Systém
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: minut
     prompt: čtení
+  edit: Uprav tento příspěvek
   relate_posts: Další čtení
   share: Sdílet
   button:
diff --git a/_data/locales/da-DK.yml b/_data/locales/da-DK.yml
new file mode 100644
index 00000000..5fe2f1e0
--- /dev/null
+++ b/_data/locales/da-DK.yml
@@ -0,0 +1,92 @@
+# 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: Der er nyt indhold
+  update: Opdater
+
+theme:
+  light: Lys
+  dark: Mørk
+  system: System
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Af
+  posted: Udgivet
+  updated: Opdateret
+  words: ord
+  pageview_measure: visninger
+  read_time:
+    unit: min
+    prompt: læsetid
+  edit: Rediger dette opslag
+  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 6b187b4c..0784524e 100644
--- a/_data/locales/de-DE.yml
+++ b/_data/locales/de-DE.yml
@@ -42,12 +42,17 @@ 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.
+  update_found: Neue Inhalte verfügbar
   update: Neue Version
 
+theme:
+  light: Hell
+  dark: Dunkel
+  system: System
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: Minuten
     prompt: Lesezeit
+  edit: Diesen Eintrag bearbeiten
   relate_posts: Weiterlesen
   share: Teilen
   button:
@@ -76,7 +82,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 00000000..86416f66
--- /dev/null
+++ "b/_data/locales/dv\342\200\221MV.yml"
@@ -0,0 +1,96 @@
+# 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: އޮޕްޑޭޓް
+
+theme:
+  light: އަލި
+  dark: އަނދިރި
+  system: ސިސްޓަމް
+
+# ----- Posts related labels -----
+
+post:
+  written_by: ލެކްއޯލް
+  posted: ޕޯސްޓްކުރެވި
+  updated: އޮޕްޑޭޓްކުރެވި
+  words: ބަސް
+  pageview_measure: ބަނޑުކުރާ
+  read_time:
+    unit: މިނެޓް
+    prompt: އިސްކާރު
+  edit: މި ޕޯސްޓް އެޑިޓް ކުރު
+  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 ab5fb0e7..fb8f8729 100644
--- a/_data/locales/el-GR.yml
+++ b/_data/locales/el-GR.yml
@@ -43,12 +43,17 @@ copyright:
 meta: Αξιοποιώντας την :PLATFORM theme :THEME
 
 not_found:
-  statment: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
+  statement: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
 
 notification:
-  update_found: Υπάρχει διαθέσιμη μια νέα έκδοση του περιεχομένου.
+  update_found: Νέο περιεχόμενο διαθέσιμο
   update: Ενημέρωση
 
+theme:
+  light: Φωτεινό
+  dark: Σκοτεινό
+  system: Σύστημα
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: Λεπτά
     prompt: διαβάσματος
+  edit: Επεξεργασία αυτής της δημοσίευσης
   relate_posts: Περισσότερα
   share: Κοινοποιήστε
   button:
diff --git a/_data/locales/en.yml b/_data/locales/en.yml
index 0dbe7136..7f995222 100644
--- a/_data/locales/en.yml
+++ b/_data/locales/en.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: New content available
   update: Update
 
+theme:
+  light: Light
+  dark: Dark
+  system: System
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: read
+  edit: Edit this post
   relate_posts: Further Reading
   share: Share
   button:
diff --git a/_data/locales/es-ES.yml b/_data/locales/es-ES.yml
index 55292308..0fd70dce 100644
--- a/_data/locales/es-ES.yml
+++ b/_data/locales/es-ES.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Hay contenido nuevo
   update: Actualizar
 
+theme:
+  light: Claro
+  dark: Oscuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: " de lectura"
+  edit: Edita esta entrada
   relate_posts: Lecturas adicionales
   share: Compartir
   button:
diff --git a/_data/locales/fa-IR.yml b/_data/locales/fa-IR.yml
new file mode 100644
index 00000000..aaca8d46
--- /dev/null
+++ b/_data/locales/fa-IR.yml
@@ -0,0 +1,97 @@
+# 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: به‌روزرسانی
+
+theme:
+  light: روشن
+  dark: تیره
+  system: سیستم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: نوشته شده توسط
+  posted: منتشر شده
+  updated: به‌روزرسانی شده
+  words: کلمه
+  pageview_measure: بازدید
+  read_time:
+    unit: "دقیقه "
+    prompt: " زمان مطالعه"
+  edit: ویرایش این پست
+  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 c817d2b8..459a9542 100644
--- a/_data/locales/fi-FI.yml
+++ b/_data/locales/fi-FI.yml
@@ -42,12 +42,17 @@ 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.
+  update_found: Uutta sisältöä löytyi
   update: Päivitä
 
+theme:
+  light: Vaalea
+  dark: Tumma
+  system: Järjestelmä
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: minuuttia
     prompt: lukea
+  edit: Muokkaa tätä julkaisua
   relate_posts: Jatka lukemista
   share: Jaa
   button:
diff --git a/_data/locales/fr-FR.yml b/_data/locales/fr-FR.yml
index 72b034db..bcfa3d15 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,23 +32,28 @@ 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.
+  update_found: Nouveau contenu trouvé
   update: Mise à jour
 
+theme:
+  light: Clair
+  dark: Sombre
+  system: Système
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: lire
+  edit: Modifier cet article
   relate_posts: Autres lectures
   share: Partager
   button:
diff --git a/_data/locales/hu-HU.yml b/_data/locales/hu-HU.yml
index b09f2cdc..4173cc63 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,15 +41,20 @@ 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.
+  update_found: Új tartalom található
   update: Frissítés
 
+theme:
+  light: Világos
+  dark: Sötét
+  system: Rendszer
+
 # ----- Posts related labels -----
 
 post:
@@ -62,6 +66,7 @@ post:
   read_time:
     unit: perc
     prompt: elolvasni
+  edit: Szerkesztés
   relate_posts: További olvasnivaló
   share: Megosztás
   button:
@@ -73,7 +78,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 29ad1569..1f578ccd 100644
--- a/_data/locales/id-ID.yml
+++ b/_data/locales/id-ID.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Konten baru tersedia
   update: Perbarui
 
+theme:
+  light: Terang
+  dark: Gelap
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: menit
     prompt: baca
+  edit: Sunting entri ini
   relate_posts: Postingan Lainya
   share: Bagikan
   button:
diff --git a/_data/locales/it-IT.yml b/_data/locales/it-IT.yml
index cf7b691b..f11cb5ff 100644
--- a/_data/locales/it-IT.yml
+++ b/_data/locales/it-IT.yml
@@ -42,12 +42,17 @@ 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.
+  update_found: Nuovi contenuti trovati
   update: Aggiornamento
 
+theme:
+  light: Chiaro
+  dark: Scuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: min
     prompt: lettura
+  edit: Modifica questo post
   relate_posts: Continua a leggere
   share: Condividi
   button:
diff --git a/_data/locales/ja-JP.yml b/_data/locales/ja-JP.yml
new file mode 100644
index 00000000..f5f677c7
--- /dev/null
+++ b/_data/locales/ja-JP.yml
@@ -0,0 +1,90 @@
+# 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: 更新
+
+theme:
+  light: ライト
+  dark: ダーク
+  system: システム
+
+# ----- Posts related labels -----
+
+post:
+  written_by: 投稿者
+  posted: 投稿日
+  updated: 更新日
+  words: 語
+  pageview_measure: 回閲覧
+  read_time:
+    unit: 分
+    prompt: で読めます
+  edit: この投稿を編集
+  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 4dd221b9..623036f4 100644
--- a/_data/locales/ko-KR.yml
+++ b/_data/locales/ko-KR.yml
@@ -43,12 +43,17 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: 해당 URL은 존재하지 않습니다.
+  statement: 해당 URL은 존재하지 않습니다.
 
 notification:
-  update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
+  update_found: 새 콘텐츠가 있습니다
   update: 업데이트
 
+theme:
+  light: 라이트
+  dark: 다크
+  system: 시스템
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: 분
     prompt: 읽는 시간
+  edit: 이 글 편집
   relate_posts: 관련된 글
   share: 공유하기
   button:
diff --git a/_data/locales/ku-IQ.yml b/_data/locales/ku-IQ.yml
new file mode 100644
index 00000000..03ee5d1a
--- /dev/null
+++ b/_data/locales/ku-IQ.yml
@@ -0,0 +1,97 @@
+# 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: نوێکردنەوە
+
+theme:
+  light: ڕووناک
+  dark: تاریک
+  system: سیستەم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: نووسەر
+  posted: بڵاوکراوەتەوە
+  updated: نوێکراوەتەوە
+  words: وشە
+  pageview_measure: بینین
+  read_time:
+    unit: خولەک
+    prompt: خوێندنەوە
+  edit: ئەم بابەتە دەستکاری بکە
+  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 98848d59..486f2aa2 100644
--- a/_data/locales/my-MM.yml
+++ b/_data/locales/my-MM.yml
@@ -43,12 +43,17 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
+  statement: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
 
 notification:
-  update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
+  update_found: အကြောင်းအရာအသစ် တွေ့ရှိပါသည်
   update: အပ်ဒိတ်
 
+theme:
+  light: အလင်း
+  dark: အမှောင်
+  system: စနစ်
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: မိနစ်
     prompt: ဖတ်ပါမည်
+  edit: ဤပို့စ်ကို တည်းဖြတ်ပါ
   relate_posts: နောက်ထပ်ဖတ်ရန်
   share: မျှဝေရန်
   button:
diff --git a/_data/locales/nl-NL.yml b/_data/locales/nl-NL.yml
new file mode 100644
index 00000000..97ff16cb
--- /dev/null
+++ b/_data/locales/nl-NL.yml
@@ -0,0 +1,96 @@
+# 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 inhoud gevonden
+  update: Update
+
+theme:
+  light: Licht
+  dark: Donker
+  system: Systeem
+
+# ----- Posts related labels -----
+post:
+  written_by: Door
+  posted: Posted
+  updated: Bijgewerkt
+  words: woorden
+  pageview_measure: Gelezen
+  read_time:
+    unit: min
+    prompt: lees
+  edit: Bewerk dit bericht
+  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 00000000..c10321c7
--- /dev/null
+++ "b/_data/locales/ps\342\200\221AF.yml"
@@ -0,0 +1,96 @@
+# 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: تازه
+
+theme:
+  light: روښانه
+  dark: تیاره
+  system: سیستم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: لیکوال
+  posted: خپره شوې
+  updated: تازه شوې
+  words: کلمې
+  pageview_measure: کتنې
+  read_time:
+    unit: دقیقې
+    prompt: لوستل
+  edit: دغه لیکنه سمول
+  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 4cef833d..98be016e 100644
--- a/_data/locales/pt-BR.yml
+++ b/_data/locales/pt-BR.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Novo conteúdo encontrado
   update: atualização
 
+theme:
+  light: Claro
+  dark: Escuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: " de leitura"
+  edit: Editar esta postagem
   relate_posts: Leia também
   share: Compartilhar
   button:
diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml
index 185407c1..8ecfb45b 100644
--- a/_data/locales/ru-RU.yml
+++ b/_data/locales/ru-RU.yml
@@ -42,12 +42,17 @@ copyright:
 meta: Использует тему :THEME для :PLATFORM
 
 not_found:
-  statment: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
+  statement: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
 
 notification:
-  update_found: Доступна новая версия контента.
+  update_found: Найден новый контент
   update: Обновить
 
+theme:
+  light: Светлая
+  dark: Темная
+  system: Системная
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: мин.
     prompt: чтения
+  edit: Редактировать этот пост
   relate_posts: Похожие посты
   share: Поделиться
   button:
@@ -76,7 +82,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 7ab18b1d..946b41fd 100644
--- a/_data/locales/sl-SI.yml
+++ b/_data/locales/sl-SI.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Nova vsebina je na voljo
   update: Posodobi #Update
 
+theme:
+  light: Svetla
+  dark: Temna
+  system: Sistemska
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: beri #read
+  edit: Uredi to objavo #Edit this post
   relate_posts: Nadaljnje branje #Further Reading
   share: Deli #Share
   button:
diff --git a/_data/locales/sv-SE.yml b/_data/locales/sv-SE.yml
index 7ec2ee23..5f1bcca6 100644
--- a/_data/locales/sv-SE.yml
+++ b/_data/locales/sv-SE.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Nytt innehåll hittades
   update: Uppdatera sidan
 
+theme:
+  light: Ljust
+  dark: Mörkt
+  system: System
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: läsning
+  edit: Redigera detta inlägg
   relate_posts: Mer läsning
   share: Dela
   button:
diff --git a/_data/locales/th.yml b/_data/locales/th.yml
index 22cb00aa..64308ffd 100644
--- a/_data/locales/th.yml
+++ b/_data/locales/th.yml
@@ -43,12 +43,17 @@ copyright:
 meta: กำลังใช้ธีมของ :PLATFORM ชื่อ :THEME
 
 not_found:
-  statment: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
+  statement: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
 
 notification:
-  update_found: มีเวอร์ชันใหม่ของเนื้อหา
+  update_found: พบเนื้อหาใหม่
   update: อัปเดต
 
+theme:
+  light: สว่าง
+  dark: มืด
+  system: ระบบ
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: นาที
     prompt: อ่าน
+  edit: แก้ไขโพสต์นี้
   relate_posts: อ่านต่อ
   share: แชร์
   button:
diff --git a/_data/locales/tr-TR.yml b/_data/locales/tr-TR.yml
index 50d81102..9f919f1c 100644
--- a/_data/locales/tr-TR.yml
+++ b/_data/locales/tr-TR.yml
@@ -43,12 +43,17 @@ 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.
+  update_found: Yeni içerik bulundu
   update: Güncelle
 
+theme:
+  light: Açık
+  dark: Koyu
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: dakikada
     prompt: okunabilir
+  edit: Bu gönderiyi düzenle
   relate_posts: Benzer Gönderiler
   share: Paylaş
   button:
diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml
index b6050738..0de70abd 100644
--- a/_data/locales/uk-UA.yml
+++ b/_data/locales/uk-UA.yml
@@ -43,12 +43,17 @@ copyright:
 meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
-  statment: Вибачте, це посилання вказує на ресурс, що не існує.
+  statement: Вибачте, це посилання вказує на ресурс, що не існує.
 
 notification:
-  update_found: Доступна нова версія вмісту.
+  update_found: Знайдено новий вміст
   update: Оновлення
 
+theme:
+  light: Світла
+  dark: Темна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: хвилин
     prompt: читання
+  edit: Редагувати цей пост
   relate_posts: Вас також може зацікавити
   share: Поділитися
   button:
diff --git a/_data/locales/ur-PK.yml b/_data/locales/ur-PK.yml
new file mode 100644
index 00000000..28aa31e9
--- /dev/null
+++ b/_data/locales/ur-PK.yml
@@ -0,0 +1,96 @@
+# 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: اپ ڈیٹ
+
+theme:
+  light: روشن
+  dark: تاریک
+  system: سسٹم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: از
+  posted: شائع شدہ
+  updated: اپ ڈیٹ شدہ
+  words: لفظ
+  pageview_measure: مشاہدات
+  read_time:
+    unit: منٹ
+    prompt: پڑھیں
+  edit: اس تحریر میں ترمیم کریں
+  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 617431a0..ef6321fa 100644
--- a/_data/locales/vi-VN.yml
+++ b/_data/locales/vi-VN.yml
@@ -42,12 +42,17 @@ 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.
+  update_found: Đã tìm thấy nội dung mới
   update: Cập nhật
 
+theme:
+  light: Sáng
+  dark: Tối
+  system: Hệ thống
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: phút
     prompt: đọc
+  edit: Chỉnh sửa bài viết này
   relate_posts: Bài viết liên quan
   share: Chia sẻ
   button:
diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml
index f8281346..c082bd1b 100644
--- a/_data/locales/zh-CN.yml
+++ b/_data/locales/zh-CN.yml
@@ -42,12 +42,17 @@ copyright:
 meta: 本站采用 :PLATFORM 主题 :THEME
 
 not_found:
-  statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
+  statement: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
 
 notification:
-  update_found: 发现新版本的内容。
+  update_found: 发现新内容
   update: 更新
 
+theme:
+  light: 浅色
+  dark: 深色
+  system: 跟随系统
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: 分钟
     prompt: 阅读
+  edit: 编辑此文
   relate_posts: 相关文章
   share: 分享
   button:
diff --git a/_data/locales/zh-TW.yml b/_data/locales/zh-TW.yml
index 911253b6..883062fe 100644
--- a/_data/locales/zh-TW.yml
+++ b/_data/locales/zh-TW.yml
@@ -42,12 +42,17 @@ copyright:
 meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題
 
 not_found:
-  statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
+  statement: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
 
 notification:
-  update_found: 發現新版本更新。
+  update_found: 發現新內容
   update: 更新
 
+theme:
+  light: 淺色
+  dark: 深色
+  system: 跟隨系統
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: 分鐘
     prompt: 閱讀
+  edit: 編輯此文
   relate_posts: 相關文章
   share: 分享
   button:
diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml
index 9027e6e4..2d529822 100644
--- a/_data/origin/basic.yml
+++ b/_data/origin/basic.yml
@@ -20,9 +20,9 @@ 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
 
 glightbox:
   css: /assets/lib/glightbox/glightbox.min.css
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index abedb6c6..719d8fbe 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -19,36 +19,39 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 # Libraries
 
+bootstrap:
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css
+
 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/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@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/css/all.min.css
 
 search:
-  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
+  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1/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/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
+    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/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
+  css: https://cdn.jsdelivr.net/npm/glightbox@3/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3/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
-  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js
+  css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2/dist/loading-attribute-polyfill.min.css
+  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2/dist/loading-attribute-polyfill.umd.min.js
 
 clipboard:
-  js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
+  js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
 
 mathjax:
-  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js
+  js: https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js
diff --git a/_data/share.yml b/_data/share.yml
index b1d077dc..edbc02b2 100644
--- a/_data/share.yml
+++ b/_data/share.yml
@@ -18,7 +18,7 @@ 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"
@@ -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
index 1eeb1a92..9faa11ee 100644
--- a/_includes/analytics/cloudflare.html
+++ b/_includes/analytics/cloudflare.html
@@ -4,4 +4,3 @@
   src="https://static.cloudflareinsights.com/beacon.min.js"
   data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
 ></script>
-<!-- End Cloudflare Web Analytics -->
diff --git a/_includes/analytics/fathom.html b/_includes/analytics/fathom.html
new file mode 100644
index 00000000..216bb140
--- /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/google.html b/_includes/analytics/google.html
index d0aac651..dfe4828c 100644
--- a/_includes/analytics/google.html
+++ b/_includes/analytics/google.html
@@ -1,7 +1,7 @@
 <!-- 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', function (event) {
+  document.addEventListener('DOMContentLoaded', () => {
     window.dataLayer = window.dataLayer || [];
     function gtag() {
       dataLayer.push(arguments);
diff --git a/_includes/analytics/matomo.html b/_includes/analytics/matomo.html
index 72b2c463..caaa63e3 100644
--- a/_includes/analytics/matomo.html
+++ b/_includes/analytics/matomo.html
@@ -1,14 +1,13 @@
 <!-- Matomo -->
-<script type="text/javascript">
-  var _paq = window._paq = window._paq || [];
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
+<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>
-<!-- End Matomo Code -->
diff --git a/_includes/comments.html b/_includes/comment.html
similarity index 100%
rename from _includes/comments.html
rename to _includes/comment.html
diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
index 2b889a4e..0fb67660 100644
--- a/_includes/comments/disqus.html
+++ b/_includes/comments/disqus.html
@@ -1,38 +1,25 @@
-<!-- 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 }}';
   };
 
-  {%- comment -%} Lazy loading {%- endcomment -%}
-  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.getElementById('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);
+  }
 
   {%- comment -%} Auto switch theme {%- endcomment -%}
-  function reloadDisqus() {
-    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+  function reloadDisqus(event) {
+    if (event.source === window && event.data && event.data.id === Theme.eventId) {
       {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
@@ -44,7 +31,27 @@
     }
   }
 
-  if (document.getElementById('mode-toggle')) {
-    window.addEventListener('message', reloadDisqus);
+  addDisqus();
+
+  if (Theme.isToggleable) {
+    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 c8d48e67..ddaf6470 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -1,20 +1,13 @@
 <!-- https://giscus.app/ -->
-<script type="text/javascript">
+<script>
   (function () {
-    const origin = 'https://giscus.app';
-    const lightTheme = 'light';
-    const darkTheme = 'dark_dimmed';
+    const themeMap = Theme.newThemeMap('light', 'dark_dimmed');
+    const initTheme = themeMap[Theme.resolvedTheme];
 
-    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 = {
@@ -29,36 +22,43 @@
       '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
-      ) {
-        {%- comment -%} global theme mode changed {%- endcomment -%}
-        const mode = event.data.message;
-        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+      if (event.source === window && event.data && event.data.id === Theme.eventId) {
+        const newTheme = themeMap[Theme.resolvedTheme];
 
         const message = {
           setConfig: {
-            theme: theme
+            theme: newTheme
           }
         };
 
-        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
-        giscus.postMessage({ giscus: message }, origin);
+        const iframe = document.querySelector('.giscus-frame');
+
+        if (!iframe) {
+          return;
+        }
+
+        if (iframe.classList.contains('giscus-frame--loading')) {
+          let url = new URL(iframe.src);
+          url.searchParams.set('theme', newTheme);
+          iframe.src = url.toString();
+        }
+
+        iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
       }
     });
   })();
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
index 5dd78ed0..211ebed7 100644
--- a/_includes/comments/utterances.html
+++ b/_includes/comments/utterances.html
@@ -1,49 +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 lightTheme = 'github-light';
-    const darkTheme = 'github-dark';
-    let initTheme = lightTheme;
-    const html = document.documentElement;
+    const themeMap = Theme.newThemeMap('github-light', 'github-dark');
+    const initTheme = themeMap[Theme.resolvedTheme];
+
+    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;
 
-      {%- comment -%} credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> {%- endcomment -%}
-      if (event.origin === origin) {
-        {%- comment -%} page initial {%- endcomment -%}
-        theme = initTheme;
-      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        {%- comment -%} global theme mode changed {%- endcomment -%}
-        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.eventId) {
+        newTheme = themeMap[Theme.resolvedTheme];
 
-      const message = {
-        type: 'set-theme',
-        theme: theme
-      };
+        const message = {
+          type: 'set-theme',
+          theme: newTheme
+        };
 
-      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
-      utterances.postMessage(message, origin);
+        const utterances = document.querySelector('.utterances-frame').contentWindow;
+        utterances.postMessage(message, origin);
+      }
     });
   })();
 </script>
diff --git a/_includes/datetime.html b/_includes/datetime.html
index 9f954b69..b07b132a 100644
--- a/_includes/datetime.html
+++ b/_includes/datetime.html
@@ -1,6 +1,6 @@
 <!--
   Date format snippet
-  See: ${JS_ROOT}/utils/locale-dateime.js
+  See: ${JS_ROOT}/modules/components/locale-datetime.js
 -->
 
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html
index e2b89790..bb20688e 100644
--- a/_includes/embed/audio.html
+++ b/_includes/embed/audio.html
@@ -4,12 +4,12 @@
 
 {% unless src contains '://' %}
   {%- capture src -%}
-    {% include media-url.html src=src %}
+    {% include media-url.html src=src subpath=page.media_subpath %}
   {%- endcapture -%}
 {% endunless %}
 
 <p>
-  <audio class="embed-audio" controls>
+  <audio class="embed-audio file" controls>
     {% assign extension = src | split: '.' | last %}
     {% assign types = extension | concat: types %}
 
diff --git a/_includes/embed/spotify.html b/_includes/embed/spotify.html
new file mode 100644
index 00000000..4e0a848d
--- /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
index 712a266a..9b6918f7 100644
--- a/_includes/embed/video.html
+++ b/_includes/embed/video.html
@@ -5,7 +5,7 @@
 
 {% unless video_url contains '://' %}
   {%- capture video_url -%}
-    {% include media-url.html src=video_url %}
+    {% include media-url.html src=video_url subpath=page.media_subpath %}
   {%- endcapture -%}
 {% endunless %}
 
diff --git a/_includes/favicons.html b/_includes/favicons.html
index 957c933f..2ca276e8 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/head.html b/_includes/head.html
index fd260c0e..0ce5315d 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -2,8 +2,6 @@
   <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="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta
     name="viewport"
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
@@ -50,11 +48,24 @@
 
   {{ 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: ' | ' }}
+      {%- capture title -%}
+        {%- if page.collection == 'tabs' -%}
+          {%- assign tab_key = page.title | downcase -%}
+          {{- site.data.locales[include.lang].tabs[tab_key] -}}
+        {%- else -%}
+          {{- page.title -}}
+        {%- endif -%}
+      {%- endcapture -%}
+      {{- title | append: ' | ' -}}
     {%- endunless -%}
-    {{ site.title }}
+    {{- site.title -}}
   </title>
 
   {% include_cached favicons.html %}
@@ -70,7 +81,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ site.data.origin.cors.bootstrap.css }}">
   {% endunless %}
 
   <!-- Theme style -->
@@ -97,11 +108,30 @@
     <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 b229b70d..cdd60e7d 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -6,8 +6,6 @@
 
 <!-- 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 %}
 
@@ -62,13 +60,13 @@
     {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
-<script src="{{ script | relative_url }}"></script>
+{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
+
+<script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
   <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
-  <script 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 %}
 
@@ -85,23 +83,3 @@
     {% endcase %}
   {% endif %}
 {% endif %}
-
-{% if page.mermaid %}
-  {% include mermaid.html %}
-{% endif %}
-
-{% if jekyll.environment == 'production' %}
-  <!-- PWA -->
-  {% if site.pwa.enabled %}
-    <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
-  {% endif %}
-
-  <!-- Web Analytics -->
-  {% for analytics in site.analytics %}
-    {% capture str %}{{ analytics }}{% endcapture %}
-    {% assign type = str | split: '{' | first %}
-    {% if site.analytics[type].id and site.analytics[type].id != empty %}
-      {% include analytics/{{ type }}.html %}
-    {% endif %}
-  {% endfor %}
-{% endif %}
diff --git a/_includes/jsdelivr-combine.html b/_includes/jsdelivr-combine.html
index cffa6995..0611213b 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/language-alias.html b/_includes/language-alias.html
index abfa7ba9..c2e9adbb 100644
--- a/_includes/language-alias.html
+++ b/_includes/language-alias.html
@@ -1,9 +1,7 @@
 {% comment %}
-
   Convert the alias of the syntax language to the official name
 
   See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
-
 {% endcomment %}
 
 {% assign _lang = include.language | default: '' %}
@@ -20,13 +18,13 @@
   {% when 'coffeescript', 'coffee', 'coffee-script' %}
     {{ 'CoffeeScript' }}
   {% when 'cs', 'csharp' %}
-   {{ 'C#' }}
+    {{ 'C#' }}
   {% when 'erl' %}
     {{ 'Erlang' }}
   {% when 'graphql' %}
-   {{ 'GraphQL' }}
+    {{ 'GraphQL' }}
   {% when 'haskell', 'hs' %}
-   {{ 'Haskell' }}
+    {{ 'Haskell' }}
   {% when 'javascript', 'js' %}
     {{ 'JavaScript' }}
   {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
@@ -39,22 +37,22 @@
     {{ 'Objective-C' }}
   {% when 'perl', 'pl' %}
     {{ 'Perl' }}
-  {% when 'php','php3','php4','php5' %}
+  {% when 'php', 'php3', 'php4', 'php5' %}
     {{ 'PHP' }}
   {% when 'py' %}
     {{ 'Python' }}
   {% when 'rb' %}
     {{ 'Ruby' }}
-  {% when 'rs','no_run','ignore','should_panic' %}
+  {% when 'rs', 'no_run', 'ignore', 'should_panic' %}
     {{ 'Rust' }}
   {% when 'bash', 'zsh', 'ksh', 'sh' %}
     {{ 'Shell' }}
   {% when 'st', 'squeak' %}
     {{ 'Smalltalk' }}
-  {% when 'tex'%}
+  {% when 'tex' %}
     {{ 'TeX' }}
   {% when 'latex' %}
-    {{ 'LaTex' }}
+    {{ 'LaTeX' }}
   {% when 'ts', 'typescript' %}
     {{ 'TypeScript' }}
   {% when 'vb', 'visualbasic' %}
diff --git a/_includes/media-url.html b/_includes/media-url.html
index ea410750..7ace24a5 100644
--- a/_includes/media-url.html
+++ b/_includes/media-url.html
@@ -17,7 +17,7 @@
     {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
     {% assign url = include.subpath | default: '' | append: '/' | append: url %}
 
-    {%- comment -%} Prepend CND URL {%- endcomment -%}
+    {%- comment -%} Prepend CDN URL {%- endcomment -%}
     {% if site.cdn %}
       {% assign url = site.cdn | append: '/' | append: url %}
     {% endif %}
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
deleted file mode 100644
index a3a83edb..00000000
--- a/_includes/mermaid.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!-- mermaid-js loader -->
-<script type="text/javascript">
-  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 };
-
-      {%- comment -%}
-        Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
-      {%- endcomment -%}
-      const mermaidList = document.getElementsByClassName('mermaid');
-
-      [...mermaidList].forEach((elem) => {
-        const svgCode = elem.previousSibling.children.item(0).innerHTML;
-        elem.innerHTML = svgCode;
-        elem.removeAttribute('data-processed');
-      });
-
-      mermaid.initialize(config);
-      mermaid.init(undefined, '.mermaid');
-    }
-  }
-
-  (function () {
-    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 {%- comment -%}  <default | dark | forest | neutral> {%- endcomment -%}
-    };
-
-    {%- comment -%} Create mermaid tag {%- endcomment -%}
-    const basicList = document.getElementsByClassName('language-mermaid');
-    [...basicList].forEach((elem) => {
-      const svgCode = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('d-none');
-      {%- comment -%} create mermaid node {%- endcomment -%}
-      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 113ec375..00000000
--- a/_includes/mode-toggle.html
+++ /dev/null
@@ -1,116 +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() {
-      let self = this;
-
-      {%- comment -%} always follow the system prefers {%- endcomment -%}
-      this.sysDarkPrefers.addEventListener('change', () => {
-        if (self.hasMode) {
-          self.clearMode();
-        }
-        self.notify();
-      });
-
-      if (!this.hasMode) {
-        return;
-      }
-
-      if (this.isDarkMode) {
-        this.setDark();
-      } else {
-        this.setLight();
-      }
-    }
-
-    get sysDarkPrefers() {
-      return window.matchMedia('(prefers-color-scheme: dark)');
-    }
-
-    get isPreferDark() {
-      return this.sysDarkPrefers.matches;
-    }
-
-    get isDarkMode() {
-      return this.mode === ModeToggle.DARK_MODE;
-    }
-
-    get hasMode() {
-      return this.mode != null;
-    }
-
-    get mode() {
-      return sessionStorage.getItem(ModeToggle.MODE_KEY);
-    }
-
-    {%- comment -%} get the current mode on screen {%- endcomment -%}
-    get modeStatus() {
-      if (this.hasMode) {
-        return this.mode;
-      } else {
-        return this.isPreferDark ? ModeToggle.DARK_MODE : 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);
-    }
-
-    {%- comment -%}
-      Notify another plugins that the theme mode has changed
-    {%- endcomment -%}
-    notify() {
-      window.postMessage(
-        {
-          direction: ModeToggle.ID,
-          message: this.modeStatus
-        },
-        '*'
-      );
-    }
-
-    flipMode() {
-      if (this.hasMode) {
-        this.clearMode();
-      } else {
-        if (this.isPreferDark) {
-          this.setLight();
-        } else {
-          this.setDark();
-        }
-      }
-
-      this.notify();
-    }
-  }
-
-  const modeToggle = new ModeToggle();
-</script>
diff --git a/_includes/no-linenos.html b/_includes/no-linenos.html
deleted file mode 100644
index 85006933..00000000
--- 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/notification.html b/_includes/notification.html
index 80049b0a..ffb94b0a 100644
--- a/_includes/notification.html
+++ b/_includes/notification.html
@@ -1,24 +1,28 @@
 <aside
   id="notification"
-  class="toast"
+  class="toast w-auto rounded-5 text-nowrap"
   role="alert"
   aria-live="assertive"
   aria-atomic="true"
   data-bs-animation="true"
   data-bs-autohide="false"
 >
-  <div class="toast-header">
+  <div class="d-flex align-items-center">
+    <div class="toast-body ps-3">
+      {{- site.data.locales[include.lang].notification.update_found -}}
+    </div>
     <button
       type="button"
-      class="btn-close ms-auto"
+      class="btn btn-primary btn-sm rounded-2 py-0"
+      aria-label="Update"
+    >
+      {{- site.data.locales[include.lang].notification.update -}}
+    </button>
+    <button
+      type="button"
+      class="btn-close mx-3 ms-2"
       data-bs-dismiss="toast"
       aria-label="Close"
     ></button>
   </div>
-  <div class="toast-body text-center pt-0">
-    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
-    <button type="button" class="btn btn-primary" aria-label="Update">
-      {{ site.data.locales[include.lang].notification.update }}
-    </button>
-  </div>
 </aside>
diff --git a/_includes/pageviews/goatcounter.html b/_includes/pageviews/goatcounter.html
index af536dbd..9cd1281e 100644
--- a/_includes/pageviews/goatcounter.html
+++ b/_includes/pageviews/goatcounter.html
@@ -1,18 +1,21 @@
 <!-- Display GoatCounter pageviews -->
 <script>
-  let pv = document.getElementById('pageviews');
+  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`;
+    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) => {
-        pv.innerText = new Intl.NumberFormat().format(data.count);
-      })
-      .catch((error) => {
-        pv.innerText = '1';
-      });
-  }
+      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-description.html b/_includes/post-description.html
deleted file mode 100644
index 6c400360..00000000
--- a/_includes/post-description.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{%- comment -%}
-  Get post description or generate it from the post content.
-{%- endcomment -%}
-
-{%- assign max_length = include.max_length | default: 200 -%}
-
-{%- capture description -%}
-{%- if post.description -%}
-  {{- post.description -}}
-{%- else -%}
-  {%- include no-linenos.html content=post.content -%}
-  {{- content | markdownify | strip_html -}}
-{%- endif -%}
-{%- endcapture -%}
-
-{{- description | strip | truncate: max_length | escape -}}
diff --git a/_includes/post-edit.html b/_includes/post-edit.html
new file mode 100644
index 00000000..a97890e1
--- /dev/null
+++ b/_includes/post-edit.html
@@ -0,0 +1,23 @@
+<!-- Link to edit the post to contribute. -->
+
+{% assign enabled = site.actions.edit_post.enabled %}
+{% assign url = site.actions.edit_post.url %}
+{% assign static_url = site.actions.edit_post.static_url %}
+
+{% unless static_url %}
+  {% assign url = url | append: '/' | append: page.path %}
+{% endunless %}
+
+{% if enabled %}
+  <div class="post-edit">
+    {% assign edit = site.data.locales[include.lang].post.edit %}
+    <a
+      href="{{ url }}"
+      target="_blank"
+      rel="noopener"
+    >
+      <i class="fa fa-pen fa-fw me-1"></i>
+      <span>{{ edit }}</span>
+    </a>
+  </div>
+{% endif %}
diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
index c74e978a..5ccad708 100644
--- a/_includes/post-paginator.html
+++ b/_includes/post-paginator.html
@@ -1,4 +1,4 @@
-<!-- The paginator for post list on HomgPage. -->
+<!-- The paginator for post list on HomePage. -->
 
 <nav aria-label="Page Navigation">
   <ul class="pagination align-items-center mt-4 mb-0">
diff --git a/_includes/post-summary.html b/_includes/post-summary.html
new file mode 100644
index 00000000..c9314fc8
--- /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 8d298cde..bb22e28e 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -88,9 +88,41 @@
     {% 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 %}
@@ -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' %}
@@ -141,7 +173,7 @@
       {% assign _parent = _right | slice: 1, 4 %}
 
       {% if _parent == '</a>' %}
-        <!-- add class to exist <a> tag -->
+        <!-- add class to existing <a> tag -->
         {% assign _size = _img_content | size | minus: 1 %}
         {% capture _class %}
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
@@ -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 37a295bd..4b4f8088 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -82,7 +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 post-description.html %}</p>
+                <p>{% include post-summary.html %}</p>
               </div>
             </div>
           </a>
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
index 2582580a..5a43fba8 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>
-  {%- comment -%} Note: dependent library will be loaded in `js-selector.html` {%- endcomment -%}
-  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 00a31828..04a10305 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -3,7 +3,7 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center d-none">
   <div class="col-11 content">
     <div id="search-hints">
-      {% include_cached trending-tags.html %}
+      {% 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 4f0bb8ca..b325ba87 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -11,9 +11,7 @@
       {%- 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 -->
@@ -42,11 +40,53 @@ <h1 class="site-title">
     </ul>
   </nav>
 
-  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
-    {% unless site.theme_mode %}
-      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
-        <i class="fas fa-adjust"></i>
-      </button>
+  <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
+    {% unless site.theme_mode == 'light' or site.theme_mode == 'dark' %}
+      {%- capture icon_system -%}
+        <i class="fa-solid fa-display" data-theme-mode="system"></i>
+      {%- endcapture -%}
+
+      {%- capture icon_light -%}
+        <i class="fa-regular fa-sun" data-theme-mode="light"></i>
+      {%- endcapture -%}
+
+      {%- capture icon_dark -%}
+        <i class="fa-regular fa-moon" data-theme-mode="dark"></i>
+      {%- endcapture -%}
+
+      <div class="btn-group dropup">
+        <button
+          type="button"
+          class="btn btn-link nav-link"
+          aria-label="Switch Mode"
+          id="mode-toggle"
+          data-bs-toggle="dropdown"
+        >
+          {{- icon_light -}}
+          {{- icon_dark -}}
+          {{- icon_system -}}
+        </button>
+        <ul class="dropdown-menu rounded-3 mb-1 p-1">
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="light">
+              {{- icon_light -}}
+              {{- site.data.locales[lang].theme.light -}}
+            </button>
+          </li>
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="dark">
+              {{- icon_dark -}}
+              {{- site.data.locales[lang].theme.dark -}}
+            </button>
+          </li>
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="system">
+              {{- icon_system -}}
+              {{- site.data.locales[lang].theme.system -}}
+            </button>
+          </li>
+        </ul>
+      </div>
 
       {% if site.data.contact.size > 0 %}
         <span class="icon-border"></span>
@@ -54,15 +94,23 @@ <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('@')
+            javascript:void(location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
           {%- endcapture -%}
         {% when 'rss' %}
           {% assign url = '/feed.xml' | relative_url %}
diff --git a/_includes/toc-status.html b/_includes/toc-status.html
new file mode 100644
index 00000000..4b71caee
--- /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 15eb9345..0f877267 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="d-none ps-0 pe-4">
-    <h2 class="panel-heading ps-3 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 fd68d1fe..735f1d1c 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,7 +55,7 @@
       {% 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>
 
diff --git a/_javascript/_copyright b/_javascript/_copyright
deleted file mode 100644
index 60a706be..00000000
--- 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 15d82513..ce87d671 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/home.js b/_javascript/home.js
index ef22cb97..7f628a17 100644
--- a/_javascript/home.js
+++ b/_javascript/home.js
@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime, loadImg } from './modules/plugins';
+import { initLocaleDatetime, loadImg } from './modules/components';
 
 loadImg();
 initLocaleDatetime();
diff --git a/_javascript/misc.js b/_javascript/misc.js
index 52b40438..37130da1 100644
--- a/_javascript/misc.js
+++ b/_javascript/misc.js
@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime } from './modules/plugins';
+import { initLocaleDatetime } from './modules/components';
 
 initSidebar();
 initTopbar();
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 fb892e25..f5dd780c 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 { loadTooltip } from './components/tooltip-loader';
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
index b5c7c6ea..34db948f 100644
--- a/_javascript/modules/components/img-popup.js
+++ b/_javascript/modules/components/img-popup.js
@@ -4,12 +4,51 @@
  * Dependencies: https://github.com/biati-digital/glightbox
  */
 
-const IMG_CLASS = 'popup';
+const lightImages = '.popup:not(.dark)';
+const darkImages = '.popup:not(.light)';
+let selector = lightImages;
+
+function swapImages(current, reverse) {
+  if (selector === lightImages) {
+    selector = darkImages;
+  } else {
+    selector = lightImages;
+  }
+
+  if (reverse === null) {
+    reverse = GLightbox({ selector: `${selector}` });
+  }
+
+  return [reverse, current];
+}
 
 export function imgPopup() {
-  if (document.getElementsByClassName(IMG_CLASS).length === 0) {
+  if (document.querySelector('.popup') === null) {
     return;
   }
 
-  GLightbox({ selector: `.${IMG_CLASS}` });
+  const hasDualImages = !(
+    document.querySelector('.popup.light') === null &&
+    document.querySelector('.popup.dark') === null
+  );
+
+  if (Theme.isDark) {
+    selector = darkImages;
+  }
+
+  let current = GLightbox({ selector: `${selector}` });
+
+  if (hasDualImages && Theme.isToggleable) {
+    let reverse = null;
+
+    window.addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.id === Theme.eventId
+      ) {
+        [current, reverse] = swapImages(current, reverse);
+      }
+    });
+  }
 }
diff --git a/_javascript/modules/components/mermaid.js b/_javascript/modules/components/mermaid.js
new file mode 100644
index 00000000..17e3a8ae
--- /dev/null
+++ b/_javascript/modules/components/mermaid.js
@@ -0,0 +1,64 @@
+/**
+ * Mermaid-js loader
+ */
+
+const MERMAID = 'mermaid';
+const themeMap = Theme.newThemeMap('default', 'dark');
+
+function refreshTheme(event) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.id === Theme.eventId
+  ) {
+    // 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 = themeMap[Theme.resolvedTheme];
+
+    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 = themeMap[Theme.resolvedTheme];
+
+  let mermaidConf = {
+    theme: initTheme
+  };
+
+  const basicList = document.getElementsByClassName('language-mermaid');
+  [...basicList].forEach(setNode);
+
+  mermaid.initialize(mermaidConf);
+
+  if (Theme.isToggleable) {
+    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 00000000..4f69d0b7
--- /dev/null
+++ b/_javascript/modules/components/mode-toggle.js
@@ -0,0 +1,46 @@
+/**
+ * Sets up the mode toggle dropdown, allowing users to switch between light, dark, and system themes.
+ *
+ * Dependencies:
+ *  - Theme (${JS_ROOT}/theme.js)
+ */
+
+import 'bootstrap/js/src/dropdown.js';
+
+const ACTIVE_CLASS = 'active';
+const dropdown = document.querySelector('#mode-toggle + .dropdown-menu');
+const activeMode = Theme.isSystemTheme
+  ? Theme.Mode.SYSTEM
+  : Theme.resolvedTheme;
+
+export function modeWatcher() {
+  if (!Theme.isToggleable) {
+    return;
+  }
+
+  dropdown.querySelectorAll('.dropdown-item').forEach((option) => {
+    const mode = option.dataset.themeMode;
+    if (mode === activeMode) {
+      option.classList.add(ACTIVE_CLASS);
+      return;
+    }
+  });
+
+  dropdown.addEventListener('click', (event) => {
+    const current = event.target.closest('.dropdown-item');
+
+    if (!current) {
+      return;
+    }
+
+    const lastActive = dropdown.querySelector(`.${ACTIVE_CLASS}`);
+
+    if (lastActive === current) {
+      return;
+    }
+
+    lastActive.classList.remove(ACTIVE_CLASS);
+    current.classList.add(ACTIVE_CLASS);
+    Theme.update(current.dataset.themeMode);
+  });
+}
diff --git a/_javascript/modules/components/mode-watcher.js b/_javascript/modules/components/mode-watcher.js
deleted file mode 100644
index 9eecd096..00000000
--- a/_javascript/modules/components/mode-watcher.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Add listener for theme mode toggle
- */
-const toggle = document.getElementById('mode-toggle');
-
-export function modeWatcher() {
-  if (!toggle) {
-    return;
-  }
-
-  toggle.addEventListener('click', () => {
-    modeToggle.flipMode();
-  });
-}
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
index 21d634ef..64305168 100644
--- a/_javascript/modules/components/search-display.js
+++ b/_javascript/modules/components/search-display.js
@@ -1,5 +1,5 @@
 /**
- * This script make #search-result-wrapper switch to unloaded or shown automatically.
+ * This script makes #search-result-wrapper switch to unload or shown automatically.
  */
 
 const btnSbTrigger = document.getElementById('sidebar-trigger');
diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js
deleted file mode 100644
index 6b562d84..00000000
--- a/_javascript/modules/components/sidebar.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Expand or close the sidebar in mobile screens.
- */
-
-const ATTR_DISPLAY = 'sidebar-display';
-
-class SidebarUtil {
-  static isExpanded = false;
-
-  static toggle() {
-    if (SidebarUtil.isExpanded === false) {
-      document.body.setAttribute(ATTR_DISPLAY, '');
-    } else {
-      document.body.removeAttribute(ATTR_DISPLAY);
-    }
-
-    SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
-  }
-}
-
-export function sidebarExpand() {
-  document
-    .getElementById('sidebar-trigger')
-    .addEventListener('click', SidebarUtil.toggle);
-
-  document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
-}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
index 56ce26fa..dec814f5 100644
--- a/_javascript/modules/components/toc.js
+++ b/_javascript/modules/components/toc.js
@@ -1,15 +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
-    });
-
-    document.getElementById('toc-wrapper').classList.remove('d-none');
+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 00000000..ea4986ba
--- /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 00000000..0df7c80d
--- /dev/null
+++ b/_javascript/modules/components/toc/toc-mobile.js
@@ -0,0 +1,126 @@
+/**
+ * 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();
+    $btnClose.blur();
+    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 c36c8799..d30e81cf 100644
--- a/_javascript/modules/components/tooltip-loader.js
+++ b/_javascript/modules/components/tooltip-loader.js
@@ -1,6 +1,6 @@
 import Tooltip from 'bootstrap/js/src/tooltip';
 
-export function loadTooptip() {
+export function loadTooltip() {
   const tooltipTriggerList = document.querySelectorAll(
     '[data-bs-toggle="tooltip"]'
   );
diff --git a/_javascript/modules/layouts/basic.js b/_javascript/modules/layouts/basic.js
index fb36a8b8..8e104dcc 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, loadTooltip, modeWatcher } from '../components';
 
 export function basic() {
+  modeWatcher();
   back2top();
-  loadTooptip();
+  loadTooltip();
 }
diff --git a/_javascript/modules/layouts/sidebar.js b/_javascript/modules/layouts/sidebar.js
index 8795693c..bbf5e7da 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 76e8ce97..4b03b790 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';
 
 loadImg();
 imgPopup();
 initSidebar();
 initTopbar();
 initClipboard();
+loadMermaid();
 basic();
diff --git a/_javascript/post.js b/_javascript/post.js
index 9340f05e..dc472b42 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';
 
 loadImg();
-toc();
+initToc();
 imgPopup();
 initSidebar();
 initLocaleDatetime();
 initClipboard();
 initTopbar();
+loadMermaid();
 basic();
diff --git a/_javascript/pwa/_frontmatter b/_javascript/pwa/_frontmatter
deleted file mode 100644
index 97ecf0a6..00000000
--- a/_javascript/pwa/_frontmatter
+++ /dev/null
@@ -1,3 +0,0 @@
----
-permalink: /:basename
----
diff --git a/_javascript/pwa/app.js b/_javascript/pwa/app.js
index c71036a5..6bb2e5a5 100644
--- a/_javascript/pwa/app.js
+++ b/_javascript/pwa/app.js
@@ -1,15 +1,19 @@
-import { pwa, baseurl } from '../../_config.yml';
 import Toast from 'bootstrap/js/src/toast';
 
 if ('serviceWorker' in navigator) {
-  if (pwa.enabled) {
-    const swUrl = `${baseurl}/sw.min.js`;
-    const notification = document.getElementById('notification');
-    const btnRefresh = notification.querySelector('.toast-body>button');
-    const popupWindow = Toast.getOrCreateInstance(notification);
+  // 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 (register) {
+    const swUrl = `${baseUrl}/sw.min.js`;
+    const $notification = document.getElementById('notification');
+    const $btnUpdate = $notification.querySelector('[aria-label="Update"]');
+    const popupWindow = Toast.getOrCreateInstance($notification);
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
-      // In case the user ignores the notification
+      // Restore the update window that was last manually closed by the user
       if (registration.waiting) {
         popupWindow.show();
       }
@@ -24,7 +28,7 @@ if ('serviceWorker' in navigator) {
         });
       });
 
-      btnRefresh.addEventListener('click', () => {
+      $btnUpdate.addEventListener('click', () => {
         if (registration.waiting) {
           registration.waiting.postMessage('SKIP_WAITING');
         }
diff --git a/_javascript/pwa/sw.js b/_javascript/pwa/sw.js
index bc67bd83..ff9125dd 100644
--- a/_javascript/pwa/sw.js
+++ b/_javascript/pwa/sw.js
@@ -1,13 +1,23 @@
-import { baseurl } from '../../_config.yml';
-
-importScripts(`${baseurl}/assets/js/data/swconf.js`);
+importScripts('./assets/js/data/swconf.js');
 
 const purge = swconf.purge;
+const interceptor = swconf.interceptor;
 
 function verifyUrl(url) {
-  const requestPath = new URL(url).pathname;
+  const requestUrl = new URL(url);
+  const requestPath = requestUrl.pathname;
+
+  if (!requestUrl.protocol.startsWith('http')) {
+    return false;
+  }
+
+  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;
     }
diff --git a/_javascript/theme.js b/_javascript/theme.js
new file mode 100644
index 00000000..a10dd3e4
--- /dev/null
+++ b/_javascript/theme.js
@@ -0,0 +1,156 @@
+/**
+ *  A utility class that manages the site's theme mode.
+ *
+ * Concepts:
+ *  - Mode: dark, light, or system. The latter follows the operating system's preference.
+ *  - Theme: The actual theme applied to the DOM, either dark or light. Determined by the mode or system preference.
+ */
+class Theme {
+  /** @type {string} LocalStorage key for the selected theme mode. */
+  static #storageKey = 'theme';
+
+  static Mode = Object.freeze({
+    DARK: 'dark',
+    LIGHT: 'light',
+    SYSTEM: 'system'
+  });
+
+  static #root = document.documentElement;
+
+  /** @type {MediaQueryList} System dark-mode preference query. */
+  static #mediaDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+  /** @returns {string|null} The theme currently set on the DOM. */
+  static get #domTheme() {
+    return this.#root.dataset.bsTheme || null;
+  }
+
+  /** @returns {string|null} The theme stored on the client. */
+  static get #storedTheme() {
+    return localStorage.getItem(this.#storageKey);
+  }
+
+  /** @returns {string} The theme preferred by the operating system. */
+  static get #systemTheme() {
+    return this.#prefersDark ? this.Mode.DARK : this.Mode.LIGHT;
+  }
+
+  /** @returns {boolean} Whether the operating system prefers dark mode. */
+  static get #prefersDark() {
+    return this.#mediaDark.matches;
+  }
+
+  /**
+   * Applies a theme and optionally persists it as a user preference.
+   *
+   * @param {'light'|'dark'} theme
+   * @param {{ persist?: boolean, domPersist?: boolean }} [options]
+   *        - `persist`: Whether the theme is persisted in localStorage.
+   *        - `domPersist`: Whether the theme is persisted in data attributes on the DOM.
+   */
+  static #apply(theme, { persist = false, domPersist = false } = {}) {
+    this.#root.dataset.bsTheme = theme;
+
+    if (persist) {
+      localStorage.setItem(this.#storageKey, theme);
+    }
+
+    if (domPersist || persist) {
+      this.#root.toggleAttribute('data-theme-persisted', true);
+    }
+  }
+
+  /** Removes the stored user preference. */
+  static #clearStorage() {
+    localStorage.removeItem(this.#storageKey);
+    this.#root.toggleAttribute('data-theme-persisted', false);
+  }
+
+  /** Broadcasts a theme change event to dependent modules. */
+  static #notify() {
+    window.postMessage({ id: this.eventId }, '*');
+  }
+
+  /** @type {boolean} Whether the current page allows theme toggling. */
+  static isToggleable = this.#domTheme === null;
+
+  static eventId = 'theme-updated';
+
+  /** @returns {string} Resolved theme, falling back to the system preference. */
+  static get resolvedTheme() {
+    return this.#storedTheme || this.#systemTheme;
+  }
+
+  /** @returns {boolean} Whether the theme is determined by the system preference. */
+  static get isSystemTheme() {
+    return this.#storedTheme === null;
+  }
+
+  /** @returns {boolean} Whether the resolved theme is dark. */
+  static get isDark() {
+    return this.resolvedTheme === this.Mode.DARK;
+  }
+
+  /**
+   * Creates a mode-indexed value map.
+   *
+   * @template T
+   * @param {T} light Value for light mode.
+   * @param {T} dark Value for dark mode.
+   * @returns {{ light: T, dark: T }}
+   */
+  static newThemeMap(light, dark) {
+    return {
+      [this.Mode.LIGHT]: light,
+      [this.Mode.DARK]: dark
+    };
+  }
+
+  /** Initializes the theme from the stored value or system preference. */
+  static init() {
+    if (!this.isToggleable) {
+      this.#clearStorage();
+      return;
+    }
+
+    const storedTheme = this.#storedTheme;
+
+    if (storedTheme) {
+      this.#apply(storedTheme, { domPersist: true });
+    } else {
+      this.#apply(this.#systemTheme);
+    }
+
+    this.#mediaDark.addEventListener('change', () => {
+      if (this.#storedTheme) {
+        return;
+      }
+
+      this.#apply(this.#systemTheme);
+      this.#notify();
+    });
+  }
+
+  /**
+   * Updates the theme by the specified mode.
+   *
+   * @param {'light'|'dark'|'system'} mode
+   */
+  static update(mode) {
+    const newTheme = mode === this.Mode.SYSTEM ? this.#systemTheme : mode;
+
+    if (newTheme !== this.resolvedTheme) {
+      this.#notify();
+    }
+
+    this.#apply(newTheme, { persist: mode !== this.Mode.SYSTEM });
+
+    if (mode === this.Mode.SYSTEM) {
+      this.#clearStorage();
+    }
+  }
+}
+
+Theme.init();
+
+export default Theme;
diff --git a/_layouts/default.html b/_layouts/default.html
index ea438fe7..704bebae 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,13 +8,14 @@
 
 {% include lang.html %}
 
-{% if site.theme_mode %}
-  {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
-{% endif %}
-
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
-  {% include head.html %}
+<html
+  lang="{{ page.lang | default: site.alt_lang | default: site.lang }}"
+  {%- if site.theme_mode == 'light' or site.theme_mode == 'dark' -%}
+    data-bs-theme="{{ site.theme_mode }}"
+  {%- endif -%}
+>
+  {% include head.html lang=lang %}
 
   <body>
     {% include sidebar.html lang=lang %}
@@ -25,7 +26,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 +34,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,14 +69,18 @@
       </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 -->
-    {% include js-selector.html lang=lang %}
+    <!-- Embedded scripts -->
+
+    {% for _include in layout.script_includes %}
+      {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
+    {% endfor %}
 
     {% include_cached search-loader.html lang=lang %}
   </body>
diff --git a/_layouts/home.html b/_layouts/home.html
index e44efe8f..0161ad8f 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.media_subpath | 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,7 +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 post-description.html %}</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 f17ceea8..9e277f42 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,17 +1,19 @@
 ---
 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 %}
@@ -95,21 +97,48 @@ <h1 data-toc-skip>{{ page.title }}</h1>
     </div>
   </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-close btn-sm mx-3" aria-label="Close"></button>
+      </div>
+      <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
+    </dialog>
+  {% endif %}
+
   <div class="content">
     {{ content }}
   </div>
 
   <div class="post-tail-wrapper text-muted">
-    <!-- categories -->
-    {% if page.categories.size > 0 %}
-      <div class="post-meta mb-3">
-        <i class="far fa-folder-open fa-fw me-1"></i>
-        {% for category in page.categories %}
-          <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
-          {%- unless forloop.last -%},{%- endunless -%}
-        {% endfor %}
-      </div>
-    {% endif %}
+    <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
+      <!-- categories -->
+      {% if page.categories.size > 0 %}
+        <div class="post-meta">
+          <i class="far fa-folder-open fa-fw me-1"></i>
+          {% for category in page.categories %}
+            <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
+            {%- unless forloop.last -%},{%- endunless -%}
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <!-- "Edit this post" link -->
+      {% include post-edit.html lang=lang %}
+    </div>
 
     <!-- tags -->
     {% if page.tags.size > 0 %}
diff --git a/_posts/2017-06-20-Update _1.md b/_posts/2017-06-20-Update _1.md
new file mode 100644
index 00000000..259e24cd
--- /dev/null
+++ b/_posts/2017-06-20-Update _1.md	
@@ -0,0 +1,12 @@
+---
+title: Update 1
+date: 2017-06-20
+categories: [Website, Developer Note]
+tags: [developer-note, website]
+---
+Changelog so far:
+
+ - Website installed
+ - Base modules configured
+ - Core users added
+ - Basic pages added as placeholders.
diff --git a/_posts/2017-06-21-Update_2.md b/_posts/2017-06-21-Update_2.md
new file mode 100644
index 00000000..6433e77e
--- /dev/null
+++ b/_posts/2017-06-21-Update_2.md
@@ -0,0 +1,15 @@
+---
+title: Update 2
+date: 2017-06-21
+categories: [Website, Developer Note]
+tags: [developer-note, website]
+---
+
+Following administrators added:
+
+ - Troonie
+ - Jon
+ - Wuddupdude
+ - 190n
+
+Say hello to your new website over-lings! They'll be helping keep this website up-to-date with information on the OSP project.
\ No newline at end of file
diff --git a/_posts/2017-06-27-Update_3.md b/_posts/2017-06-27-Update_3.md
new file mode 100644
index 00000000..21a75b96
--- /dev/null
+++ b/_posts/2017-06-27-Update_3.md
@@ -0,0 +1,19 @@
+---
+title: Update 3
+date: 2017-06-27
+categories: [Game Engine, Developer Note]
+tags: [developer-note, engine]
+---
+
+The last couple of weeks have been full of experiments. We've been testing out ideas in Unity, Ogre and Godot and exploring the capabilities of the various engines.
+
+The Discord server is buzzing with activity and our GitHub has a few commits! Check out the screenshots below of what we've been working on.
+
+<figure class="video_container">
+  <video controls="true" allowfullscreen="true">
+    <source src="https://zippy.gfycat.com/RedWickedAmoeba.webm" type="video/webm">
+  </video>
+  <video controls="true" allowfullscreen="true">
+    <source src="https://zippy.gfycat.com/MajesticHarmfulKinkajou.webm type="video/webm">
+  </video>
+</figure>
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
deleted file mode 100644
index 7064d5d4..00000000
--- a/_posts/2019-08-08-text-and-typography.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-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]
-tags: [typography]
-pin: true
-math: true
-mermaid: true
-image:
-  path: /commons/devices-mockup.png
-  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
-  alt: Responsive rendering of Chirpy theme on multiple devices.
----
-
-## Headings
-
-<!-- markdownlint-capture -->
-<!-- markdownlint-disable -->
-# H1 - heading
-{: .mt-4 .mb-0 }
-
-## H2 - heading
-{: data-toc-skip='' .mt-4 .mb-0 }
-
-### H3 - heading
-{: data-toc-skip='' .mt-4 .mb-0 }
-
-#### H4 - heading
-{: data-toc-skip='' .mt-4 }
-<!-- markdownlint-restore -->
-
-## Paragraph
-
-Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.
-
-## Lists
-
-### Ordered list
-
-1. Firstly
-2. Secondly
-3. Thirdly
-
-### Unordered list
-
-- Chapter
-  - Section
-    - Paragraph
-
-### ToDo list
-
-- [ ] Job
-  - [x] Step 1
-  - [x] Step 2
-  - [ ] Step 3
-
-### Description list
-
-Sun
-: the star around which the earth orbits
-
-Moon
-: the natural satellite of the earth, visible by reflected light from the sun
-
-## Block Quote
-
-> This line shows the _block quote_.
-
-## Prompts
-
-<!-- markdownlint-capture -->
-<!-- markdownlint-disable -->
-> An example showing the `tip` type prompt.
-{: .prompt-tip }
-
-> An example showing the `info` type prompt.
-{: .prompt-info }
-
-> An example showing the `warning` type prompt.
-{: .prompt-warning }
-
-> 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 |
-
-## Links
-
-<http://127.0.0.1:4000>
-
-## Footnote
-
-Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
-
-## Inline code
-
-This is an example of `Inline Code`.
-
-## Filepath
-
-Here is the `/path/to/the/file.extend`{: .filepath}.
-
-## Code blocks
-
-### Common
-
-```text
-This is a common code snippet, without syntax highlight and line number.
-```
-
-### Specific Language
-
-```bash
-if [ $? -ne 0 ]; then
-  echo "The command was not successful.";
-  #do the needful / exit
-fi;
-```
-
-### Specific filename
-
-```sass
-@import
-  "colors/light-typography",
-  "colors/dark-typography";
-```
-{: file='_sass/jekyll-theme-chirpy.scss'}
-
-## Mathematics
-
-The mathematics powered by [**MathJax**](https://www.mathjax.org/):
-
-$$
-\begin{equation}
-  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
-  \label{eq:series}
-\end{equation}
-$$
-
-We can reference the equation as \eqref{eq:series}.
-
-When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
-
-$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
-
-## Mermaid SVG
-
-```mermaid
- gantt
-  title  Adding GANTT diagram functionality to mermaid
-  apple :a, 2017-07-20, 1w
-  banana :crit, b, 2017-07-23, 1d
-  cherry :active, c, after b a, 1d
-```
-
-## Images
-
-### Default (with caption)
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
-_Full screen width and center alignment_
-
-### Left aligned
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
-
-### Float to left
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
-Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
-
-### Float to right
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
-Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
-
-### Dark/Light mode & Shadow
-
-The image below will toggle dark/light mode based on theme preference, notice it has shadows.
-
-![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
-![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
-
-## Video
-
-{% include embed/youtube.html id='Balreaj8Yqs' %}
-
-## Reverse Footnote
-
-[^footnote]: The footnote source
-[^fn-nth-2]: The 2nd footnote source
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
deleted file mode 100644
index bda7705e..00000000
--- a/_posts/2019-08-08-write-a-new-post.md
+++ /dev/null
@@ -1,538 +0,0 @@
----
-title: Writing a New Post
-author: cotes
-date: 2019-08-08 14:10:00 +0800
-categories: [Blogging, Tutorial]
-tags: [writing]
-render_with_liquid: false
----
-
-This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.
-
-## Naming and Path
-
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION`{: .filepath} and put it in the `_posts`{: .filepath} of the root directory. Please note that the `EXTENSION`{: .filepath} must be one of `md`{: .filepath} and `markdown`{: .filepath}. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this.
-
-## Front Matter
-
-Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-matter/) as below at the top of the post:
-
-```yaml
----
-title: TITLE
-date: YYYY-MM-DD HH:MM:SS +/-TTTT
-categories: [TOP_CATEGORIE, SUB_CATEGORIE]
-tags: [TAG]     # TAG names should always be lowercase
----
-```
-
-> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
-{: .prompt-tip }
-
-### 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`.
-
-### Categories and Tags
-
-The `categories` of each post are designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
-
-```yaml
----
-categories: [Animal, Insect]
-tags: [bee]
----
-```
-
-### Author Information
-
-The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
-
-Adding author information in `_data/authors.yml` (If your website doesn't have this file, don't hesitate to create one).
-
-```yaml
-<author_id>:
-  name: <full name>
-  twitter: <twitter_of_author>
-  url: <homepage_of_author>
-```
-{: file="_data/authors.yml" }
-
-And then use `author` to specify a single entry or `authors` to specify multiple entries:
-
-```yaml
----
-author: <author_id>                     # for single entry
-# or
-authors: [<author1_id>, <author2_id>]   # for multiple entries
----
-```
-
-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 }
-
-### Post Description
-
-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
----
-description: Short summary of the post.
----
-```
-
-Additionally, the `description` text will also be displayed under the post title on the post's page.
-
-## Table of Contents
-
-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
----
-toc: false
----
-```
-
-## Comments
-
-The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
-
-If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
-
-```yaml
----
-comments: false
----
-```
-
-## Mathematics
-
-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:
-
-[mathjax]: https://www.mathjax.org/
-
-```yaml
----
-math: true
----
-```
-
-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 }
-
-[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
-
-## 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 ```` ``` ````.
-
-## Images
-
-### Caption
-
-Add italics to the next line of an image, then it will become the caption and appear at the bottom of the image:
-
-```markdown
-![img-description](/path/to/image)
-_Image Caption_
-```
-{: .nolineno}
-
-### 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.
-
-```markdown
-![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
-```
-{: .nolineno}
-
-> For an SVG, you have to at least specify its _width_, otherwise it won't be rendered.
-{: .prompt-info }
-
-Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`height` → `h`, `width` → `w`). The following example has the same effect as the above:
-
-```markdown
-![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }
-```
-{: .nolineno}
-
-### Position
-
-By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
-
-> Once the position is specified, the image caption should not be added.
-{: .prompt-warning }
-
-- **Normal position**
-
-  Image will be left aligned in below sample:
-
-  ```markdown
-  ![Desktop View](/assets/img/sample/mockup.png){: .normal }
-  ```
-  {: .nolineno}
-
-- **Float to the left**
-
-  ```markdown
-  ![Desktop View](/assets/img/sample/mockup.png){: .left }
-  ```
-  {: .nolineno}
-
-- **Float to the right**
-
-  ```markdown
-  ![Desktop View](/assets/img/sample/mockup.png){: .right }
-  ```
-  {: .nolineno}
-
-### 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`):
-
-```markdown
-![Light mode only](/path/to/light-mode.png){: .light }
-![Dark mode only](/path/to/dark-mode.png){: .dark }
-```
-
-### Shadow
-
-The screenshots of the program window can be considered to show the shadow effect:
-
-```markdown
-![Desktop View](/assets/img/sample/mockup.png){: .shadow }
-```
-{: .nolineno}
-
-### CDN URL
-
-If you host the media resources on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `cdn` of `_config.yml`{: .filepath} file:
-
-```yaml
-cdn: https://cdn.com
-```
-{: file='_config.yml' .nolineno}
-
-Once `cdn` is assigned, the CDN URL will be added to the path of all media resources (site avatar, posts' images, audio and video files) 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 }
-
-### Media Subpath
-
-When a post contains many images, it will be a time-consuming task to repeatedly define the path of the media resources. To solve this, we can define this path in the YAML block of the post:
-
-```yml
----
-media_subpath: /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
-
-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.
-
-Knowing these prerequisites, you can start setting the image's attribute:
-
-```yaml
----
-image:
-  path: /path/to/image
-  alt: image alternative text
----
-```
-
-Note that the [`media_subpath`](#media-subpath) 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.
-
-```yml
----
-image: /path/to/image
----
-```
-
-### LQIP
-
-For preview images:
-
-```yaml
----
-image:
-  lqip: /path/to/lqip-file # or base64 URI
----
-```
-
-> You can observe LQIP in the preview image of post \"[Text and Typography](../text-and-typography/)\".
-
-For normal images:
-
-```markdown
-![Image description](/path/to/image){: lqip="/path/to/lqip-file" }
-```
-{: .nolineno }
-
-## 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:
-
-```yaml
----
-pin: true
----
-```
-
-## Prompts
-
-There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They can be generated by adding the class `prompt-{type}` to the blockquote. For example, define a prompt of type `info` as follows:
-
-```md
-> Example line for prompt.
-{: .prompt-info }
-```
-{: .nolineno }
-
-## Syntax
-
-### Inline Code
-
-```md
-`inline code part`
-```
-{: .nolineno }
-
-### Filepath Hightlight
-
-```md
-`/path/to/a/file.extend`{: .filepath}
-```
-{: .nolineno }
-
-### Code Block
-
-Markdown symbols ```` ``` ```` can easily create a code block as follows:
-
-````md
-```
-This is a plaintext code snippet.
-```
-````
-
-#### Specifying Language
-
-Using ```` ```{language} ```` you will get a code block with syntax highlight:
-
-````markdown
-```yaml
-key: value
-```
-````
-
-> The Jekyll tag `{% highlight %}` is not compatible with this theme.
-{: .prompt-danger }
-
-#### Line Number
-
-By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it:
-
-````markdown
-```shell
-echo 'No more line numbers!'
-```
-{: .nolineno }
-````
-
-#### Specifying the Filename
-
-You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
-
-````markdown
-```shell
-# content
-```
-{: file="path/to/file" }
-````
-
-#### Liquid Codes
-
-If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
-
-````markdown
-{% raw %}
-```liquid
-{% if product.title contains 'Pack' %}
-  This product's title contains the word Pack.
-{% endif %}
-```
-{% endraw %}
-````
-
-Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
-
-## Videos
-
-### Video Sharing Platform
-
-You can embed a video 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 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` |
-
-### Video File
-
-If you want to embed a video file directly, use the following syntax:
-
-```liquid
-{% include embed/video.html src='{URL}' %}
-```
-
-Where `URL` is an URL to a video file e.g. `/assets/img/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 utilizing all of the above:
-
-```liquid
-{%
-  include embed/video.html
-  src='/path/to/video/video.mp4'
-  types='ogg|mov'
-  poster='poster.png'
-  title='Demo video'
-  autoplay=true
-  loop=true
-  muted=true
-%}
-```
-
-> It's not recommended to host video files in `assets` folder as they cannot be cached by PWA and may cause issues.
-> Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
-{: .prompt-warning }
-
-## Audios
-
-### Audio File
-
-If you want to embed an audio file directly, use the following syntax:
-
-```liquid
-{% include embed/audio.html src='{URL}' %}
-```
-
-Where `URL` is an URL to an audio file e.g. `/assets/img/sample/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 utilizing all of the above:
-
-```liquid
-{%
-  include embed/audio.html
-  src='/path/to/audio/audio.mp3'
-  types='ogg|wav|aac'
-  title='Demo audio'
-%}
-```
-
-> It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues.
-> Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
-{: .prompt-warning }
-
-## Learn More
-
-For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
deleted file mode 100644
index 1cea5be9..00000000
--- a/_posts/2019-08-09-getting-started.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-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
-media_subpath: '/posts/20180809'
----
-
-## Prerequisites
-
-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.
-
-## Installation
-
-### Creating a New Site
-
-There are two ways to create a new repository for this theme:
-
-- [**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 1. Using the Chirpy Starter
-
-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.
-
-#### Option 2. GitHub Fork
-
-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).
-
-Next, clone the repository to your local machine, make sure it has [Node.js][nodejs] installed, then go to the root directory of the repo and run the following command:
-
-```console
-$ bash tools/init
-```
-
-> 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 }
-
-The above command will:
-
-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 CSS/JS assets files and then make them tracked by Git.
-4. Automatically create a new commit to save the changes above.
-
-### Installing Dependencies
-
-Before running local server for the first time, go to the root directory of your site and run:
-
-```console
-$ bundle
-```
-
-## Usage
-
-### Configuration
-
-Update the variables of `_config.yml`{: .filepath} as needed. Some of them are typical options:
-
-- `url`
-- `avatar`
-- `timezone`
-- `lang`
-
-### 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.
-
-### Customing Static Assets
-
-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.
-
-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).
-
-### Running Local Server
-
-You may want to preview the site contents before publishing, so just run it by:
-
-```console
-$ bundle exec jekyll s
-```
-
-After a few seconds, the local service will be published at _<http://127.0.0.1:4000>_.
-
-## 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`.
-
-Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
-
-### Deploy by Using GitHub Actions
-
-There are a few things to get ready for.
-
-- 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:
-
-  ```console
-  $ bundle lock --add-platform x86_64-linux
-  ```
-
-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' }
-
-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.
-
-### Manually Build and Deploy
-
-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.
-
-Go to the root of the source project, and build your site as follows:
-
-```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.
-
-[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
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
deleted file mode 100644
index a3278fa9..00000000
--- a/_posts/2019-08-11-customize-the-favicon.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Customize the Favicon
-author: cotes
-date: 2019-08-11 00:34:00 +0800
-categories: [Blogging, Tutorial]
-tags: [favicon]
----
-
-The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`{: .filepath}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
-
-## 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.
-
-In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
-
-## Download & Replace
-
-Download the generated package, unzip and delete the following two 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.
-
-The following table will help you understand the changes to the favicon files:
-
-| File(s)             | From Online Tool                  | From Chirpy |
-|---------------------|:---------------------------------:|:-----------:|
-| `*.PNG`             | ✓                                 | ✗           |
-| `*.ICO`             | ✓                                 | ✗           |
-
-<!-- markdownlint-disable-next-line -->
->  ✓ means keep, ✗ means delete.
-{: .prompt-info }
-
-The next time you build the site, the favicon will be replaced with a customized edition.
diff --git a/_posts/2021-07-01-Welcome.md b/_posts/2021-07-01-Welcome.md
new file mode 100644
index 00000000..d99e2930
--- /dev/null
+++ b/_posts/2021-07-01-Welcome.md
@@ -0,0 +1,30 @@
+---
+title: Welcome!
+date: 2021-07-01
+categories: [Welcome]
+tags: [welcome]     # TAG names should always be lowercase
+pin: true
+---
+## Welcome to the Open Space Program!
+The Open Space Program is an ongoing open source project to create a game engine for powering semi-realistic space flight gameplay boasting N-body physics, blazingly fast performance, and easy addition of features, with gameplay loosely based off Kerbal Space Program.
+
+## Features
+
+### Core
+* Modular ECS Game Engine
+* Newton Dynamics Physics Engine integration 
+* Simple Asset management
+* Interactive Vehicles
+* Load Parts from glTF files
+* Virtual Wiring System for controlling vehicles (For routable user controls, PID, auto-landing, ...)
+* Can extend bulleted lists
+
+### Extras
+* Rockets and RCS
+* Rocket exhaust plume effects 
+* Ship Resource (Fuel) system
+* Icosahedron-based Planet surfaces with Level-of-detail subdivision
+
+## Links:
+ - Discord: <https://discord.gg/CjbdXQt3j7>
+ - Website: <https://theopenspaceprogram.github.io/>
diff --git a/_sass/abstracts/_breakpoints.scss b/_sass/abstracts/_breakpoints.scss
new file mode 100644
index 00000000..e40cefee
--- /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 00000000..6c9e21cf
--- /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 00000000..b08bc811
--- /dev/null
+++ b/_sass/abstracts/_mixins.scss
@@ -0,0 +1,86 @@
+@mixin color-scheme($mode) {
+  @media (prefers-color-scheme: #{$mode}) {
+    @content;
+  }
+}
+
+@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 d1b7103c..d8a10604 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 76%
rename from _sass/addon/variables.scss
rename to _sass/abstracts/_variables.scss
index 8924a00b..39c3b4a1 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 */
@@ -31,3 +28,9 @@ $code-icon-width: 1.75rem !default;
 
 $font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
 $font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;
+
+/* Theme mode settings */
+
+$theme-attr: 'data-bs-theme'; /* the attribute used to indicate the resolved theme */
+$theme-options: light, dark;
+$theme: null !default; /* set by Jekyll site configuration */
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
deleted file mode 100644
index e6cf7c26..00000000
--- a/_sass/addon/commons.scss
+++ /dev/null
@@ -1,1532 +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);
-}
-
-hr {
-  border-color: var(--main-border-color);
-  opacity: 1;
-}
-
-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;
-  }
-
-  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;
-  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%;
-  display: block;
-
-  @extend %img-caption;
-}
-
-/* --- buttons --- */
-.btn-lang {
-  border: 1px solid !important;
-  padding: 1px 3px;
-  border-radius: 3px;
-  color: var(--link-color);
-
-  &:focus {
-    box-shadow: none;
-  }
-}
-
-/* --- 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;
-}
-
-/* --- 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;
-
-      &: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: $sb-btn-gap;
-      }
-    }
-
-    i {
-      line-height: $btn-size;
-    }
-
-    #mode-toggle {
-      @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 {
-  visibility: hidden;
-  opacity: 0;
-  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: opacity 0.5s ease-in-out, 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;
-  }
-
-  &.show {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-#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 00000000..6a5df78f
--- /dev/null
+++ b/_sass/base/_base.scss
@@ -0,0 +1,491 @@
+@use 'sass:list';
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
+@use '../themes/light';
+@use '../themes/dark';
+
+$enable-dual: not list.index(v.$theme-options, v.$theme);
+$enable-light: v.$theme == light or $enable-dual;
+$enable-dark: v.$theme == dark or $enable-dual;
+
+@if $enable-light {
+  :root[#{v.$theme-attr}='light'] {
+    @include light.styles;
+  }
+}
+
+@if $enable-dark {
+  :root[#{v.$theme-attr}='dark'] {
+    @include dark.styles;
+  }
+}
+
+@if $enable-dual {
+  :root:not([#{v.$theme-attr}]) {
+    @include mx.color-scheme(light) {
+      @include light.styles;
+    }
+
+    @include mx.color-scheme(dark) {
+      @include dark.styles;
+    }
+  }
+}
+
+:root {
+  font-size: 16px;
+
+  @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 {
+  a {
+    display: inline-block;
+  }
+}
+
+@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 00000000..611d28ff
--- /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 00000000..1e5a6294
--- /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 71%
rename from _sass/addon/syntax.scss
rename to _sass/base/_syntax.scss
index 68796f28..a7a5cba9 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);
   }
 
@@ -116,7 +78,7 @@ code {
   }
 
   a > &.highlighter-rouge {
-    padding-bottom: 0; /* show link's underlinke */
+    padding-bottom: 0; /* show link's underline */
     color: inherit;
   }
 
@@ -150,9 +112,43 @@ 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 +180,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 +219,9 @@ div {
     @extend %rounded;
 
     border: 1px solid transparent;
-    height: $code-header-height;
-    width: $code-header-height;
+    height: 2rem;
+    width: 2rem;
+    margin-right: 0.125rem;
     padding: 0;
     background-color: inherit;
 
@@ -238,6 +235,7 @@ div {
       }
 
       i {
+        font-size: 90%;
         color: var(--clipboard-checked-color);
       }
     }
@@ -247,7 +245,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 +253,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 00000000..8b679726
--- /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 d898c651..00000000
--- 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 6562c76f..00000000
--- 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 d9b1df62..00000000
--- a/_sass/colors/typography-dark.scss
+++ /dev/null
@@ -1,147 +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;
-  }
-
-  /* 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 11f052cf..00000000
--- 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 00000000..bd7363e5
--- /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 00000000..ffbb9083
--- /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 00000000..2511b486
--- /dev/null
+++ b/_sass/components/_popups.scss
@@ -0,0 +1,161 @@
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/placeholders';
+
+/* PWA update popup */
+#notification {
+  @-webkit-keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 10%;
+    }
+  }
+
+  @keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 10%;
+    }
+  }
+
+  &.toast {
+    &.show {
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      position: fixed;
+      left: 50%;
+      bottom: 30%;
+      transform: translateX(-50%);
+      -webkit-animation: popup 0.8s;
+      animation: popup 0.8s;
+    }
+
+    .toast-body {
+      line-height: 1.25rem;
+      font-family: v.$font-family-heading;
+    }
+
+    button[aria-label='Update'] {
+      font-size: 0.8rem;
+    }
+
+    .btn-close {
+      font-size: 0.625rem;
+    }
+  }
+}
+
+#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 {
+    font-size: 0.75rem;
+
+    &: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 00000000..fd49ea04
--- /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 00000000..fa75daf9
--- /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 00000000..c0d5e9eb
--- /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 00000000..913c5fcb
--- /dev/null
+++ b/_sass/layout/_sidebar.scss
@@ -0,0 +1,346 @@
+@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);
+
+  /* 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 {
+    @extend %clickable-transition;
+
+    padding-left: 2.5rem;
+    padding-right: 1.25rem;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    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: -webkit-fit-content;
+    width: -moz-fit-content;
+    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;
+    height: 3rem;
+    -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-link-hover;
+      @extend %clickable-transition;
+
+      > i {
+        display: none;
+
+        @at-root :root[data-bs-theme='light'][data-theme-persisted]
+            &[data-theme-mode='light'] {
+          display: block;
+        }
+
+        @at-root :root[data-bs-theme='dark'][data-theme-persisted]
+            &[data-theme-mode='dark'] {
+          display: block;
+        }
+
+        @at-root :root:not([data-theme-persisted]) &[data-theme-mode='system'] {
+          display: block;
+        }
+      }
+
+      @-webkit-keyframes menu-pop {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+
+        to {
+          opacity: 1;
+          translate: 0 0;
+        }
+      }
+
+      @keyframes menu-pop {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+
+        to {
+          opacity: 1;
+          translate: 0 0;
+        }
+      }
+
+      + .dropdown-menu {
+        background-color: var(--menu-bg);
+        border-color: var(--menu-border-color);
+        box-shadow: var(--menu-shadow-color) 0 1px 4px;
+        border-radius: 0.75rem !important;
+
+        &.show {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+          left: -0.25rem !important;
+          -webkit-animation: menu-pop 0.2s ease-out;
+          animation: menu-pop 0.2s ease-out;
+        }
+
+        .dropdown-item {
+          border-radius: 0.5rem;
+          color: var(--sidebar-muted-color);
+          font-size: 90%;
+
+          &.active {
+            font-weight: 600;
+            color: var(--menu-active-color);
+
+            &::after {
+              content: '\f00c';
+              font: var(--fa-font-solid);
+              font-size: 0.75rem;
+              color: var(--sidebar-btn-color);
+              margin-left: auto;
+              padding-left: 1rem;
+            }
+          }
+
+          &:active,
+          &:hover,
+          &.active {
+            background-color: var(--menu-highlight-bg);
+          }
+
+          > i {
+            color: var(--sidebar-btn-color);
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+
+    .icon-border {
+      @extend %no-cursor;
+      @include mx.ml-mr(0.6rem);
+
+      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 */
+
+[#{$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 00000000..eb0aea9b
--- /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
index 52e893fe..5d84f938 100644
--- a/_sass/main.bundle.scss
+++ b/_sass/main.bundle.scss
@@ -1,2 +1,2 @@
-@import 'dist/bootstrap';
-@import 'main';
+@use 'vendors/bootstrap';
+@use 'main';
diff --git a/_sass/main.scss b/_sass/main.scss
index 1c2311d5..3bbb70d6 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 92%
rename from _sass/layout/archives.scss
rename to _sass/pages/_archives.scss
index 3a2e86b1..833f809d 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);
@@ -106,7 +112,7 @@
   }
 
   a {
-    /* post title in Archvies */
+    /* post title in Archives */
     margin-left: 2.5rem;
     position: relative;
     top: 0.1rem;
@@ -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 330d3d35..64a2df50 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 9e43a911..0a827121 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 7f9fd2e8..84f4b4aa 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 00000000..74e9ea6e
--- /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 59%
rename from _sass/layout/post.scss
rename to _sass/pages/_post.scss
index 112541db..31f7a8e2 100644
--- a/_sass/layout/post.scss
+++ b/_sass/pages/_post.scss
@@ -1,14 +1,15 @@
-/*
-  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;
@@ -24,7 +25,7 @@ header {
 
   .post-meta {
     span + span::before {
-      @include dot;
+      @include -dot;
     }
 
     em,
@@ -97,7 +98,7 @@ header {
 
         &:hover {
           i {
-            @extend %btn-share-hovor;
+            @extend %btn-share-hover;
           }
         }
       }
@@ -113,9 +114,20 @@ header {
   } /* .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);
@@ -131,16 +143,29 @@ header {
 
   .post-tag {
     &:hover {
-      @extend %link-hover;
       @extend %tag-hover;
-      @extend %no-bottom-border;
+    }
+  }
+}
+
+.post-edit {
+  line-height: 1.2rem;
+
+  > a {
+    &:hover {
+      @extend %link-hover;
     }
   }
 }
 
 .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);
@@ -153,7 +178,7 @@ header {
     }
 
     &.disabled {
-      @extend %btn-post-nav;
+      @extend %-btn-post-nav;
 
       pointer-events: auto;
       cursor: not-allowed;
@@ -173,12 +198,12 @@ header {
     }
 
     &: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;
     }
   }
@@ -203,39 +228,50 @@ header {
 @-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;
@@ -244,12 +280,8 @@ header {
     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;
       }
     }
 
@@ -257,9 +289,8 @@ header {
 
     .toc-link {
       display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      @extend %text-ellipsis;
 
       &:hover {
         color: var(--toc-highlight);
@@ -278,7 +309,6 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
-        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -288,13 +318,130 @@ header {
       padding-left: 0.75rem;
     }
   }
+
+  @at-root .toc-border-cover {
+    @extend %top-cover;
+
+    margin-bottom: -4rem;
+  }
+
+  &::before {
+    @extend %top-cover;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    width: 15%;
+    height: 2.25rem;
+    margin-left: -1px;
+    background: linear-gradient(transparent, var(--main-bg) 70%);
+  }
+
+  > * {
+    @extend %panel-border;
+  }
+}
+
+/* --- TOC button, bar and popup in mobile/tablet --- */
+
+#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 {
@@ -305,10 +452,11 @@ header {
   }
 
   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;
@@ -328,43 +476,31 @@ header {
 
 .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 00000000..dfb044ed
--- /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 4cf5d3b7..d22f20d6 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 00000000..be2a3aae
--- /dev/null
+++ b/_sass/themes/_dark.scss
@@ -0,0 +1,308 @@
+@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%
+  );
+  --menu-bg: rgb(30 30 30);
+  --menu-border-color: rgb(77 77 77 / 60%);
+  --menu-shadow-color: rgb(4 4 4 / 42%);
+  --menu-active-color: rgb(240 248 255 / 63%);
+  --menu-highlight-bg: rgb(90 91 92 / 12%);
+
+  /* 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 00000000..19e8e01a
--- /dev/null
+++ b/_sass/themes/_light.scss
@@ -0,0 +1,314 @@
+@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%
+  );
+  --menu-bg: white;
+  --menu-border-color: white;
+  --menu-shadow-color: rgb(0 0 0 / 16%);
+  --menu-active-color: rgb(91 91 91);
+  --menu-highlight-bg: rgb(243 244 245 / 50%);
+
+  /* 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 f27e0eb8..00000000
--- 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 5b46cc8c..cb129c06 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 d20545ba..2f731acc 100644
--- a/assets/css/jekyll-theme-chirpy.scss
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -1,7 +1,12 @@
 ---
 ---
 
-@import 'main
+@use 'abstracts/variables' with (
+  $theme: '{{ site.theme_mode }}'
+);
+
+/* prettier-ignore */
+@use 'main
 {%- if jekyll.environment == 'production' -%}
   .bundle
 {%- endif -%}
diff --git a/assets/feed.xml b/assets/feed.xml
index 0ab20e3b..99373377 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,7 +45,7 @@ permalink: /feed.xml
     {% endfor %}
   {% endif %}
 
-  <summary>{% include post-description.html max_length=400 %}</summary>
+  <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 a949d2fe..00000000
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 a0cdd950..00000000
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 648097f4..60b3d890
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 a02a5c74..00000000
--- 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 f44237a9..00000000
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 d5d021d8..00000000
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 00000000..fb9b67a7
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 56115680..597d6f13
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 00000000..7e1e8cb8
--- /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,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"></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 c0d045e2..00000000
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 03c6113b..aa0a55e7
--- a/assets/img/favicons/site.webmanifest
+++ b/assets/img/favicons/site.webmanifest
@@ -10,17 +10,19 @@ 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",
-  "display": "fullscreen"
+  "display": "standalone"
 }
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 00000000..ec915a3e
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 00000000..fd0ce60a
Binary files /dev/null and b/assets/img/favicons/web-app-manifest-512x512.png differ
diff --git a/assets/js/data/search.json b/assets/js/data/search.json
index 2601ed07..1c35ec18 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 5c1ed292..798888a9 100644
--- a/assets/js/data/swconf.js
+++ b/assets/js/data/swconf.js
@@ -22,14 +22,24 @@ const swconf = {
       {% endfor %}
     ],
 
-    {%- 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 %}
-    ],
+    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 %}
+      ],
+
+      {%- 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 %}
+      ]
+    },
+
     purge: false
   {% else %}
     purge: true
diff --git a/assets/lib b/assets/lib
index b9c58cf4..5cde3f00 160000
--- a/assets/lib
+++ b/assets/lib
@@ -1 +1 @@
-Subproject commit b9c58cf485a7dcbc833e698d67dd1850bdc93eb3
+Subproject commit 5cde3f0076b62e45fc68291893cf7d93e122adb7
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 777e27b2..75d61f2c 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,164 @@
 # Changelog
 
+## [7.6.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.5.0...v7.6.0) (2026-06-20)
+
+### Features
+
+* add edit this post link ([#2517](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2517)) ([6bd446c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6bd446ccdedbe37752cf24b1866e1e2dd9cb82c8))
+* **theme:** persist user theme preferences ([#2756](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2756)) ([7496dd4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7496dd41fa053c4636a82027fe3fb3e38357e385))
+* **ui:** optimize design of PWA update notification ([#2757](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2757)) ([5cc9dc6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5cc9dc66acb1eb9213988d3ac6de5cf5adf1a6f6))
+
+### Bug Fixes
+
+* **giscus:** synchronize theme state during lazy loading ([#2742](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2742)) ([ceb2a41](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ceb2a41463cbb6251fa257b640990a8d9717b0bb))
+* prevent Firefox from opening blank page on `mailto` links ([#2642](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2642)) ([2685b91](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2685b91957d0207c2d31dab828430c78a2fcc3d0))
+* **pwa:** avoid iOS status bar overlapping PWA content ([#2173](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2173)) ([3823212](https://github.com/cotes2020/jekyll-theme-chirpy/commit/38232120b729de653bfb42909a8dad047559438d))
+
+### Improvements
+
+* **ui:** prevent vertical flickering caused by subtitle loading ([2db0535](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2db053553bcf9606fc80c4a86959d0dd25d0446a))
+
+## [7.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.4.1...v7.5.0) (2026-03-15)
+
+### Features
+
+* add support for `fediverse:creator` meta tag ([#2593](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2593)) ([d2db439](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2db439c169c45ac683fa1c8157c6ea7e0b54b85))
+
+### Bug Fixes
+
+* **i18n:** localize the title ([#2610](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2610)) ([52d160f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/52d160f8574e8d0cddcaa46af114eb382fea1644))
+
+## [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
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..b6d8f192
--- /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 88d5c424..705106ef 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       = "7.0.0"
+  spec.version       = "7.6.0"
   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 00f85453..f61ff9ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "7.0.0",
+  "version": "7.6.0",
   "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
@@ -8,45 +8,51 @@
   },
   "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": {
     "build": "concurrently npm:build:*",
-    "build:css": "purgecss -c purgecss.config.js",
+    "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:scss"
+    "test": "npm run lint:js && npm run lint:scss",
+    "prepare": "husky"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.3"
+    "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/preset-env": "^7.24.5",
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-yaml": "^4.1.2",
+    "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-class-properties": "^7.28.6",
+    "@babel/plugin-transform-private-methods": "^7.28.6",
+    "@babel/preset-env": "^7.29.7",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/js": "^10.0.1",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
-    "concurrently": "^8.2.2",
-    "conventional-changelog-conventionalcommits": "^7.0.2",
-    "husky": "^9.0.11",
-    "purgecss": "^6.0.0",
-    "rollup": "^4.17.2",
-    "rollup-plugin-license": "^3.3.1",
-    "semantic-release": "^23.1.1",
-    "stylelint": "^16.5.0",
-    "stylelint-config-standard-scss": "^13.1.0"
+    "concurrently": "^10.0.3",
+    "conventional-changelog-conventionalcommits": "^9.3.1",
+    "eslint": "^10.5.0",
+    "globals": "^17.6.0",
+    "husky": "^9.1.7",
+    "purgecss": "^8.0.0",
+    "rollup": "^4.62.2",
+    "semantic-release": "^25.0.5",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard-scss": "^17.0.0"
   },
   "prettier": {
     "trailingComma": "none"
@@ -67,41 +73,6 @@
       ]
     }
   },
-  "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",
-        {
-          "ignore": [
-            "after-comment",
-            "first-nested"
-          ]
-        }
-      ],
-      "value-keyword-case": [
-        "lower",
-        {
-          "ignoreProperties": [
-            "/^\\$/"
-          ]
-        }
-      ],
-      "media-feature-range-notation": "prefix"
-    }
-  },
   "release": {
     "branches": [
       "production"
@@ -156,8 +127,8 @@
       [
         "@semantic-release/exec",
         {
-          "prepareCmd": "bash tools/release --prepare",
-          "publishCmd": "bash tools/release"
+          "prepareCmd": "bash tools/release.sh --prepare",
+          "publishCmd": "bash tools/release.sh"
         }
       ],
       [
diff --git a/purgecss.config.js b/purgecss.config.js
deleted file mode 100644
index de370dea..00000000
--- a/purgecss.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const fs = require('fs');
-const DIST_PATH = '_sass/dist';
-
-fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => {
-  if (err) {
-    throw err;
-  }
-
-  fs.mkdirSync(DIST_PATH);
-});
-
-module.exports = {
-  content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
-  css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
-  keyframes: true,
-  variables: true,
-  output: `${DIST_PATH}/bootstrap.css`,
-  // The `safelist` should be changed appropriately for future development
-  safelist: {
-    standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
-    greedy: [/^col-/, /tooltip/]
-  }
-};
diff --git a/purgecss.js b/purgecss.js
new file mode 100644
index 00000000..2380f6f7
--- /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 823401e0..42e205e0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,63 +1,78 @@
 import babel from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
-import license from 'rollup-plugin-license';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import fs from 'fs';
-import path from 'path';
-import yaml from '@rollup/plugin-yaml';
+import pkg from './package.json';
 
 const SRC_DEFAULT = '_javascript';
-const DIST_DEFAULT = 'assets/js/dist';
 const SRC_PWA = `${SRC_DEFAULT}/pwa`;
+const DIST = 'assets/js/dist';
 
+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';
 
-if (fs.existsSync(DIST_DEFAULT)) {
-  fs.rm(DIST_DEFAULT, { recursive: true, force: true }, (err) => {
-    if (err) {
-      throw err;
+let hasWatched = false;
+
+function cleanup() {
+  fs.rmSync(DIST, { recursive: true, force: true });
+  console.log(`> Directory "${DIST}" has been cleaned.`);
+}
+
+function insertFrontmatter() {
+  return {
+    name: 'insert-frontmatter',
+    generateBundle(_, bundle) {
+      for (const chunkOrAsset of Object.values(bundle)) {
+        if (chunkOrAsset.type === 'chunk') {
+          chunkOrAsset.code = frontmatter + chunkOrAsset.code;
+        }
+      }
     }
-  });
+  };
 }
 
-function build(filename, opts = {}) {
-  const src = opts.src || SRC_DEFAULT;
-  const dist = opts.dist || DIST_DEFAULT;
-  const bannerUrl =
-    opts.bannerUrl || path.join(__dirname, SRC_DEFAULT, '_copyright');
-  const commentStyle = opts.commentStyle || 'ignored';
+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: [`${src}/${filename}.js`],
+    input,
     output: {
-      file: `${dist}/${filename}.min.js`,
+      file: `${DIST}/${filename}.min.js`,
       format: 'iife',
-      name: 'Chirpy',
-      sourcemap: !isProd
-    },
-    watch: {
-      include: `${src}/**`
+      ...(outputName !== null && { name: outputName }),
+      banner,
+      sourcemap: !isProd && !jekyll
     },
+    ...(shouldWatch && { watch: { include: `${SRC_DEFAULT}/**/*.js` } }),
     plugins: [
       babel({
         babelHelpers: 'bundled',
         presets: ['@babel/env'],
-        plugins: ['@babel/plugin-transform-class-properties']
+        plugins: [
+          '@babel/plugin-transform-class-properties',
+          '@babel/plugin-transform-private-methods'
+        ]
       }),
       nodeResolve(),
-      yaml(),
-      isProd && commentStyle === 'none' && terser(),
-      license({
-        banner: {
-          commentStyle,
-          content: { file: bannerUrl }
-        }
-      }),
-      isProd && commentStyle !== 'none' && terser()
+      isProd && terser(),
+      jekyll && insertFrontmatter()
     ]
   };
 }
 
+cleanup();
+
 export default [
   build('commons'),
   build('home'),
@@ -65,10 +80,7 @@ export default [
   build('page'),
   build('post'),
   build('misc'),
-  build('app', { src: SRC_PWA }),
-  build('sw', {
-    src: SRC_PWA,
-    bannerUrl: path.join(__dirname, SRC_PWA, '_frontmatter'),
-    commentStyle: 'none'
-  })
+  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 89%
rename from tools/init
rename to tools/init.sh
index ed478d79..d710182b 100755
--- a/tools/init
+++ b/tools/init.sh
@@ -80,19 +80,20 @@ init_files() {
     rm -rf .github && mkdir -p .github/workflows
     mv "$temp/$ACTIONS_WORKFLOW" .github/workflows/"$ACTIONS_WORKFLOW"
     rm -rf "$temp"
-
-    ## Cleanup image settings in site config
-    _sedi "s/(^timezone:).*/\1/;s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
   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 CSS/JS output
-  _sedi "/.*\/dist$/d" .gitignore
+  _sedi "/^_sass\/vendors/d" .gitignore
+  _sedi "/^assets\/js\/dist/d" .gitignore
 }
 
 commit() {
diff --git a/tools/release b/tools/release.sh
similarity index 87%
rename from tools/release
rename to tools/release.sh
index c2ea59e1..36ca88af 100755
--- a/tools/release
+++ b/tools/release.sh
@@ -15,7 +15,7 @@ NODE_SPEC="package.json"
 CHANGELOG="docs/CHANGELOG.md"
 CONFIG="_config.yml"
 
-CSS_DIST="_sass/dist"
+CSS_DIST="_sass/vendors"
 JS_DIST="assets/js/dist"
 
 FILES=(
@@ -37,7 +37,7 @@ help() {
   echo "  2. Merge the release branch into the default branch"
   echo
   echo "Usage:"
-  echo "  bash ./tools/release [options]"
+  echo "  bash $0 [options]"
   echo
   echo "Options:"
   echo "  --prepare           Preparation for release"
@@ -111,13 +111,6 @@ prepare() {
 
 ## Build a Gem package
 build_gem() {
-  if $opt_pkg; then
-    BACKUP_PATH="$(mktemp -d)"
-    mkdir -p "$BACKUP_PATH"/css "$BACKUP_PATH"/js
-    [[ -d $CSS_DIST ]] && cp "$CSS_DIST"/* "$BACKUP_PATH"/css
-    [[ -d $JS_DIST ]] && cp "$JS_DIST"/* "$BACKUP_PATH"/js
-  fi
-
   # Remove unnecessary theme settings
   sed -i -E "s/(^timezone:).*/\1/;s/(^cdn:).*/\1/;s/(^avatar:).*/\1/" $CONFIG
   rm -f ./*.gem
@@ -132,14 +125,6 @@ build_gem() {
   echo -e "\n> Resume file changes ...\n"
   git reset
   git checkout .
-
-  if $opt_pkg; then
-    # restore the dist files for future development
-    mkdir -p "$CSS_DIST" "$JS_DIST"
-    cp "$BACKUP_PATH"/css/* "$CSS_DIST"
-    cp "$BACKUP_PATH"/js/* "$JS_DIST"
-    rm -rf "$BACKUP_PATH"
-  fi
 }
 
 # Push the gem to RubyGems.org (using $GEM_HOST_API_KEY)
diff --git a/tools/run b/tools/run.sh
similarity index 88%
rename from tools/run
rename to tools/run.sh
index 04f23f5e..0efc452d 100755
--- a/tools/run
+++ b/tools/run.sh
@@ -46,5 +46,9 @@ 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 97%
rename from tools/test
rename to tools/test.sh
index fe47d446..331de1c3 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)'