.github/workflows/cd.yml

@@ -2,12 +2,13 @@ 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

.github/workflows/ci.yml

@@ -1,25 +1,17 @@
-name: CI
-
+name: "CI"
 on:
   push:
     branches:
-      - master
-      - "hotfix/*"
+      - "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:

.github/workflows/commitlint.yml

@@ -1,11 +1,5 @@
 name: Lint Commit Messages
-
-on:
-  push:
-    branches:
-      - master
-      - "hotfix/*"
-  pull_request:
+on: pull_request
 
 jobs:
   commitlint:

.github/workflows/pr-filter.yml

@@ -1,25 +0,0 @@
-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@v4
-
-      - name: Check PR Content
-        id: intercept
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const script = require('.github/workflows/scripts/pr-filter.js');
-            await script({ github, context, core });

.github/workflows/publish.yml

@@ -10,7 +10,6 @@ on:
         required: true
       BUILDER:
         required: true
-  workflow_dispatch:
 
 jobs:
   launch:

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

@@ -1,36 +0,0 @@
-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)
-  );
-}
-
-module.exports = async ({ github, context, core }) => {
-  const pr = context.payload.pull_request;
-  const body = pr.body === null ? '' : pr.body;
-  const markdown = body.replace(/<!--[\s\S]*?-->/g, '');
-  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.');
-  }
-};

.github/workflows/stale.yml

@@ -9,7 +9,7 @@ permissions:
   pull-requests: write
 
 env:
-  STALE_LABEL: inactive
+  STALE_LABEL: stale
   EXEMPT_LABELS: "pending,planning,in progress"
   MESSAGE: >
     This conversation has been automatically marked as stale because it has not had recent activity.

.github/workflows/style-lint.yml

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

.gitignore

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

.stylelintrc.json

@@ -1,31 +0,0 @@
-{
-  "ignoreFiles": ["_sass/vendors/**"],
-  "extends": "stylelint-config-standard-scss",
-  "rules": {
-    "no-descending-specificity": null,
-    "shorthand-property-no-redundant-values": null,
-    "at-rule-no-vendor-prefix": null,
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null,
-    "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"
-  }
-}

Gemfile

@@ -11,4 +11,4 @@ platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo-data"
 end
 
-gem "wdm", "~> 0.2.0", :platforms => [:mingw, :x64_mingw, :mswin]
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]

_config.yml

@@ -212,9 +212,8 @@ exclude:
   - tools
   - README.md
   - LICENSE
-  - purgecss.js
   - "*.config.js"
-  - "package*.json"
+  - package*.json
 
 jekyll-archives:
   enabled: [categories, tags]

_data/locales/ca-ES.yml

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

_data/locales/da-DK.yml

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

_data/locales/dv‑MV.yml

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

_data/locales/fa-IR.yml

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

_data/locales/fr-FR.yml

@@ -14,7 +14,7 @@ tabs:
   categories: Catégories
   tags: Tags
   archives: Archives
-  about: À propos
+  about: A propos de
 
 # the text displayed in the search bar & search results
 search:
@@ -32,12 +32,12 @@ 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/deed.fr
+    link: https://creativecommons.org/licenses/by/4.0/
 
   # Displayed in the footer
   brief: Certains droits réservés.
   verbose: >-
-    Sauf mention contraire, les articles de ce site sont publiés
+    Sauf mention contraire, les articles de ce site sont publiés sous licence
     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

_data/locales/hu-HU.yml

@@ -14,23 +14,24 @@ tabs:
   categories: Kategóriák
   tags: Címkék
   archives: Archívum
-  about: Bemutatkozás
+  about: Rólam
 
 # the text displayed in the search bar & search results
 search:
   hint: keresés
   cancel: Mégse
-  no_results: Hoppá! Nincs találat a keresésre.
+  no_results: Oops! 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ést a szerző :LICENSE_NAME licenc alatt engedélyezte.
+    template: A bejegyzés :LICENSE_NAME licenccel rendelkezik.
     name: CC BY 4.0
     link: https://creativecommons.org/licenses/by/4.0/
 
@@ -41,7 +42,7 @@ copyright:
     Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
     hacsak másképp nincs jelezve.
 
-meta: Készítve :THEME témával a :PLATFORM platformra.
+meta: Készítve :PLATFORM motorral :THEME témával
 
 not_found:
   statement: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
@@ -72,21 +73,7 @@ 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:
-    singular: kategória
-    plural: kategória
-  post_measure:
-    singular: bejegyzés
-    plural: bejegyzés
+  category_measure: kategória
+  post_measure: bejegyzés

_data/locales/ja-JP.yml

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

_data/locales/ku-IQ.yml

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

_data/locales/nl-NL.yml

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

_data/locales/ps‑AF.yml

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

_data/locales/ur-PK.yml

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

_data/origin/cors.yml

@@ -20,17 +20,17 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 # Libraries
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
 
 dayjs:
   js:

_data/share.yml

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

_includes/analytics/cloudflare.html

@@ -4,3 +4,4 @@
   src="https://static.cloudflareinsights.com/beacon.min.js"
   data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
 ></script>
+<!-- End Cloudflare Web Analytics -->

_includes/analytics/fathom.html

@@ -2,5 +2,6 @@
 <script
   src="https://cdn.usefathom.com/script.js"
   data-site="{{ site.analytics.fathom.id }}"
-  defer
-></script>
+  defer>
+</script>
+<!-- End Fathom Code -->

_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', () => {
+  document.addEventListener('DOMContentLoaded', function (event) {
     window.dataLayer = window.dataLayer || [];
     function gtag() {
       dataLayer.push(arguments);

_includes/analytics/matomo.html

@@ -1,13 +1,14 @@
 <!-- Matomo -->
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-    var _paq = (window._paq = window._paq || []);
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
+<script type="text/javascript">
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
     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 -->

_includes/comments/disqus.html

@@ -1,25 +1,38 @@
-<script>
+<!-- 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">
   var disqus_config = function () {
     this.page.url = '{{ page.url | absolute_url }}';
     this.page.identifier = '{{ page.url }}';
   };
 
-  function addDisqus() {
-    let disqusThread = document.createElement('div');
-    let paragraph = document.createElement('p');
+  {%- 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);
+        })();
 
-    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);
+        disqus_observer.disconnect();
+      }
+    },
+    { threshold: [0] }
+  );
 
-    const footer = document.querySelector('footer');
-    footer.insertAdjacentElement("beforebegin", disqusThread);
-  }
+  disqus_observer.observe(document.getElementById('disqus_thread'));
 
   {%- comment -%} Auto switch theme {%- endcomment -%}
-  function reloadDisqus(event) {
-    if (event.source === window && event.data && event.data.id === Theme.ID) {
+  function reloadDisqus() {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
       {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
@@ -31,27 +44,7 @@
     }
   }
 
-  addDisqus();
-
-  if (Theme.switchable) {
-    addEventListener('message', reloadDisqus);
+  if (document.getElementById('mode-toggle')) {
+    window.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>

_includes/comments/giscus.html

@@ -1,8 +1,21 @@
 <!-- https://giscus.app/ -->
-<script>
+<script type="text/javascript">
   (function () {
-    const themeMapper = Theme.getThemeMapper('light', 'dark_dimmed');
-    const initTheme = themeMapper[Theme.visualState];
+    const origin = 'https://giscus.app';
+    const lightTheme = 'light';
+    const darkTheme = 'dark_dimmed';
+
+    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 -%}
@@ -28,27 +41,30 @@
       async: ''
     };
 
-    let giscusNode = document.createElement('script');
+    let giscusScript = document.createElement('script');
     Object.entries(giscusAttributes).forEach(([key, value]) =>
-      giscusNode.setAttribute(key, value)
+      giscusScript.setAttribute(key, value)
     );
-
-    const $footer = document.querySelector('footer');
-    $footer.insertAdjacentElement("beforebegin", giscusNode);
+    document.getElementById('tail-wrapper').appendChild(giscusScript);
 
     addEventListener('message', (event) => {
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
-        const newTheme = themeMapper[Theme.visualState];
+      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;
 
         const message = {
           setConfig: {
-            theme: newTheme
+            theme: theme
           }
         };
 
-        const giscus =
-          document.getElementsByClassName('giscus-frame')[0].contentWindow;
-        giscus.postMessage({ giscus: message }, 'https://giscus.app');
+        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, origin);
       }
     });
   })();

_includes/comments/utterances.html

@@ -1,38 +1,49 @@
 <!-- https://utteranc.es/ -->
-<script>
+<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">
   (function () {
     const origin = 'https://utteranc.es';
-    const themeMapper = Theme.getThemeMapper('github-light', 'github-dark');
-    const initTheme = themeMapper[Theme.visualState];
+    const lightTheme = 'github-light';
+    const darkTheme = 'github-dark';
+    let initTheme = lightTheme;
+    const html = document.documentElement;
 
-    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;
-
-    const $footer = document.querySelector('footer');
-    $footer.insertAdjacentElement('beforebegin', script);
+    if (
+      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = darkTheme;
+    }
 
     addEventListener('message', (event) => {
-      let newTheme;
+      let theme;
 
-      {%- comment -%}
-        Credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347>
-      {%- endcomment -%}
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
-        newTheme = themeMapper[Theme.visualState];
-
-        const message = {
-          type: 'set-theme',
-          theme: newTheme
-        };
-
-        const utterances = document.querySelector('.utterances-frame').contentWindow;
-        utterances.postMessage(message, origin);
+      {%- 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;
       }
+
+      const message = {
+        type: 'set-theme',
+        theme: theme
+      };
+
+      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
+      utterances.postMessage(message, origin);
     });
   })();
 </script>

_includes/head.html

@@ -2,7 +2,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
-  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta
     name="viewport"
@@ -70,7 +70,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
   {% endunless %}
 
   <!-- Theme style -->
@@ -97,30 +97,11 @@
     <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
-  <!-- Scripts -->
+  <!-- JavaScript -->
 
-  <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 %}
+  {% unless site.theme_mode %}
+    {% include mode-toggle.html %}
+  {% endunless %}
 
   {% include metadata-hook.html %}
 </head>

_includes/js-selector.html

@@ -62,12 +62,12 @@
 
 {% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
 
-<script defer src="{{ script | relative_url }}"></script>
+<script src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
   <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
-  <script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
+  <script 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 %}
 
@@ -84,3 +84,23 @@
     {% 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' | 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 %}

_includes/jsdelivr-combine.html

@@ -1,6 +1,6 @@
 {% assign urls = include.urls | split: ',' %}
 
-{% assign combined_urls = null %}
+{% assign combined_urls = nil %}
 
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
@@ -15,12 +15,12 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-    <script defer src="{{ url }}"></script>
+    <script src="{{ url }}"></script>
   {% else %}
-    <script defer src="{{ url | relative_url }}"></script>
+    <script src="{{ url | relative_url }}"></script>
   {% endif %}
 {% endfor %}
 
 {% if combined_urls %}
-  <script defer src="{{ combined_urls }}"></script>
+  <script src="{{ combined_urls }}"></script>
 {% endif %}

_includes/mermaid.html

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

_includes/mode-toggle.html

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

_includes/no-linenos.html

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

_includes/pageviews/goatcounter.html

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

_includes/post-description.html

@@ -8,17 +8,8 @@
 {%- if post.description -%}
   {{- post.description -}}
 {%- else -%}
-  {% comment %}
-    Remove the line number of 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 %}
-
-  {{- content | markdownify | strip_html | newline_to_br | replace: '<br />', ' ' | strip_newlines -}}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
 {%- endif -%}
 {%- endcapture -%}
 

_includes/refactor-content.html

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

_includes/search-loader.html

@@ -12,38 +12,36 @@
         {tags}
       </div>
     </header>
-    <p>{content}</p>
+    <p>{snippet}</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 %}
-  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>`;
-          }
+  {%- 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>`;
         }
       }
-    });
+
+      if (prop === 'tags') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+        }
+      }
+    }
   });
 </script>

_includes/search-results.html

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

_includes/sidebar.html

@@ -11,7 +11,9 @@
       {%- endif -%}
     </a>
 
-    <a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a>
+    <h1 class="site-title">
+      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
+    </h1>
     <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
   </header>
   <!-- .profile-wrapper -->

_includes/toc-status.html

@@ -1,10 +0,0 @@
-{% 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 %}

_includes/toc.html

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

_includes/topbar.html

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

_javascript/categories.js

@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { categoryCollapse } from './modules/components';
+import { categoryCollapse } from './modules/plugins';
 
 basic();
 initSidebar();

_javascript/home.js

@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime, loadImg } from './modules/components';
+import { initLocaleDatetime, loadImg } from './modules/plugins';
 
 loadImg();
 initLocaleDatetime();

_javascript/misc.js

@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime } from './modules/components';
+import { initLocaleDatetime } from './modules/plugins';
 
 initSidebar();
 initTopbar();

_javascript/modules/components/img-popup.js

@@ -4,6 +4,7 @@
  * Dependencies: https://github.com/biati-digital/glightbox
  */
 
+const html = document.documentElement;
 const lightImages = '.popup:not(.dark)';
 const darkImages = '.popup:not(.light)';
 let selector = lightImages;
@@ -32,17 +33,26 @@ export function imgPopup() {
     document.querySelector('.popup.dark') === null
   );
 
-  if (Theme.visualState === Theme.DARK) {
+  if (
+    (html.hasAttribute('data-mode') &&
+      html.getAttribute('data-mode') === 'dark') ||
+    (!html.hasAttribute('data-mode') &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
     selector = darkImages;
   }
 
   let current = GLightbox({ selector: `${selector}` });
 
-  if (hasDualImages && Theme.switchable) {
+  if (hasDualImages && document.getElementById('mode-toggle')) {
     let reverse = null;
 
     window.addEventListener('message', (event) => {
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
         updateImages(current, reverse);
       }
     });

_javascript/modules/components/mermaid.js

@@ -1,60 +0,0 @@
-/**
- * Mermaid-js loader
- */
-
-const MERMAID = 'mermaid';
-const themeMapper = Theme.getThemeMapper('default', 'dark');
-
-function refreshTheme(event) {
-  if (event.source === window && event.data && event.data.id === Theme.ID) {
-    // Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
-    const mermaidList = document.getElementsByClassName(MERMAID);
-
-    [...mermaidList].forEach((elem) => {
-      const svgCode = elem.previousSibling.children.item(0).textContent;
-      elem.textContent = svgCode;
-      elem.removeAttribute('data-processed');
-    });
-
-    const newTheme = themeMapper[Theme.visualState];
-
-    mermaid.initialize({ theme: newTheme });
-    mermaid.init(null, `.${MERMAID}`);
-  }
-}
-
-function setNode(elem) {
-  const svgCode = elem.textContent;
-  const backup = elem.parentElement;
-  backup.classList.add('d-none');
-  // Create mermaid node
-  const mermaid = document.createElement('pre');
-  mermaid.classList.add(MERMAID);
-  const text = document.createTextNode(svgCode);
-  mermaid.appendChild(text);
-  backup.after(mermaid);
-}
-
-export function loadMermaid() {
-  if (
-    typeof mermaid === 'undefined' ||
-    typeof mermaid.initialize !== 'function'
-  ) {
-    return;
-  }
-
-  const initTheme = themeMapper[Theme.visualState];
-
-  let mermaidConf = {
-    theme: initTheme
-  };
-
-  const basicList = document.getElementsByClassName('language-mermaid');
-  [...basicList].forEach(setNode);
-
-  mermaid.initialize(mermaidConf);
-
-  if (Theme.switchable) {
-    window.addEventListener('message', refreshTheme);
-  }
-}

_javascript/modules/components/mode-toggle.js

@@ -1,15 +0,0 @@
-/**
- * Add listener for theme mode toggle
- */
-
-const $toggle = document.getElementById('mode-toggle');
-
-export function modeWatcher() {
-  if (!$toggle) {
-    return;
-  }
-
-  $toggle.addEventListener('click', () => {
-    Theme.flip();
-  });
-}

_javascript/modules/components/mode-watcher.js

@@ -0,0 +1,14 @@
+/**
+ * Add listener for theme mode toggle
+ */
+const toggle = document.getElementById('mode-toggle');
+
+export function modeWatcher() {
+  if (!toggle) {
+    return;
+  }
+
+  toggle.addEventListener('click', () => {
+    modeToggle.flipMode();
+  });
+}

_javascript/modules/components/sidebar.js

@@ -0,0 +1,27 @@
+/**
+ * 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);
+}

_javascript/modules/components/toc.js

@@ -1,36 +1,15 @@
-import { TocMobile as mobile } from './toc/toc-mobile';
-import { TocDesktop as desktop } from './toc/toc-desktop';
+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
+    });
 
-const desktopMode = matchMedia('(min-width: 1200px)');
-
-function refresh(e) {
-  if (e.matches) {
-    if (mobile.popupOpened) {
-      mobile.hidePopup();
-    }
-
-    desktop.refresh();
-  } else {
-    mobile.refresh();
+    document.getElementById('toc-wrapper').classList.remove('d-none');
   }
 }
-
-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 };

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

@@ -1,20 +0,0 @@
-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);
-  }
-}

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

@@ -1,125 +0,0 @@
-/**
- * TOC button, topbar and popup for mobile devices
- */
-
-const $tocBar = document.getElementById('toc-bar');
-const $soloTrigger = document.getElementById('toc-solo-trigger');
-const $triggers = document.getElementsByClassName('toc-trigger');
-const $popup = document.getElementById('toc-popup');
-const $btnClose = document.getElementById('toc-popup-close');
-
-const SCROLL_LOCK = 'overflow-hidden';
-const CLOSING = 'closing';
-
-export class TocMobile {
-  static #invisible = true;
-  static #barHeight = 16 * 3; // 3rem
-
-  static options = {
-    tocSelector: '#toc-popup-content',
-    contentSelector: '.content',
-    ignoreSelector: '[data-toc-skip]',
-    headingSelector: 'h2, h3, h4',
-    orderedList: false,
-    scrollSmooth: false,
-    collapseDepth: 4,
-    headingsOffset: this.#barHeight
-  };
-
-  static initBar() {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          $tocBar.classList.toggle('invisible', entry.isIntersecting);
-        });
-      },
-      { rootMargin: `-${this.#barHeight}px 0px 0px 0px` }
-    );
-
-    observer.observe($soloTrigger);
-    this.#invisible = false;
-  }
-
-  static listenAnchors() {
-    const $anchors = document.getElementsByClassName('toc-link');
-    [...$anchors].forEach((anchor) => {
-      anchor.onclick = () => this.hidePopup();
-    });
-  }
-
-  static refresh() {
-    if (this.#invisible) {
-      this.initComponents();
-    }
-    tocbot.refresh(this.options);
-    this.listenAnchors();
-  }
-
-  static get popupOpened() {
-    return $popup.open;
-  }
-
-  static showPopup() {
-    this.lockScroll(true);
-    $popup.showModal();
-    const activeItem = $popup.querySelector('li.is-active-li');
-    activeItem.scrollIntoView({ block: 'center' });
-  }
-
-  static hidePopup() {
-    $popup.toggleAttribute(CLOSING);
-
-    $popup.addEventListener(
-      'animationend',
-      () => {
-        $popup.toggleAttribute(CLOSING);
-        $popup.close();
-      },
-      { once: true }
-    );
-
-    this.lockScroll(false);
-  }
-
-  static lockScroll(enable) {
-    document.documentElement.classList.toggle(SCROLL_LOCK, enable);
-    document.body.classList.toggle(SCROLL_LOCK, enable);
-  }
-
-  static clickBackdrop(event) {
-    if ($popup.hasAttribute(CLOSING)) {
-      return;
-    }
-
-    const rect = event.target.getBoundingClientRect();
-    if (
-      event.clientX < rect.left ||
-      event.clientX > rect.right ||
-      event.clientY < rect.top ||
-      event.clientY > rect.bottom
-    ) {
-      this.hidePopup();
-    }
-  }
-
-  static initComponents() {
-    this.initBar();
-
-    [...$triggers].forEach((trigger) => {
-      trigger.onclick = () => this.showPopup();
-    });
-
-    $popup.onclick = (e) => this.clickBackdrop(e);
-    $btnClose.onclick = () => this.hidePopup();
-    $popup.oncancel = (e) => {
-      e.preventDefault();
-      this.hidePopup();
-    };
-  }
-
-  static init() {
-    tocbot.init(this.options);
-    this.listenAnchors();
-    this.initComponents();
-  }
-}

_javascript/modules/layouts/basic.js

@@ -1,7 +1,7 @@
-import { back2top, loadTooptip, modeWatcher } from '../components';
+import { back2top } from '../components/back-to-top';
+import { loadTooptip } from '../components/tooltip-loader';
 
 export function basic() {
-  modeWatcher();
   back2top();
   loadTooptip();
 }

_javascript/modules/layouts/sidebar.js

@@ -1,19 +1,7 @@
-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);
-  }
-}
+import { modeWatcher } from '../components/mode-watcher';
+import { sidebarExpand } from '../components/sidebar';
 
 export function initSidebar() {
-  $trigger.onclick = $mask.onclick = () => SidebarUtil.toggle();
+  modeWatcher();
+  sidebarExpand();
 }

_javascript/modules/plugins.js

@@ -3,8 +3,4 @@ export { initClipboard } from './components/clipboard';
 export { loadImg } from './components/img-loading';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
-export { initToc } from './components/toc';
-export { loadMermaid } from './components/mermaid';
-export { modeWatcher } from './components/mode-toggle';
-export { back2top } from './components/back-to-top';
-export { loadTooptip } from './components/tooltip-loader';
+export { toc } from './components/toc';

_javascript/page.js

@@ -1,15 +1,9 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import {
-  loadImg,
-  imgPopup,
-  initClipboard,
-  loadMermaid
-} from './modules/components';
+import { loadImg, imgPopup, initClipboard } from './modules/plugins';
 
 loadImg();
 imgPopup();
 initSidebar();
 initTopbar();
 initClipboard();
-loadMermaid();
 basic();

_javascript/post.js

@@ -1,20 +1,17 @@
-import { basic, initTopbar, initSidebar } from './modules/layouts';
-
+import { basic, initSidebar, initTopbar } from './modules/layouts';
 import {
   loadImg,
   imgPopup,
   initLocaleDatetime,
   initClipboard,
-  initToc,
-  loadMermaid
-} from './modules/components';
+  toc
+} from './modules/plugins';
 
 loadImg();
-initToc();
+toc();
 imgPopup();
 initSidebar();
 initLocaleDatetime();
 initClipboard();
 initTopbar();
-loadMermaid();
 basic();

_javascript/pwa/app.js

@@ -1,19 +1,15 @@
+import { pwa, baseurl } from '../../_config.yml';
 import Toast from 'bootstrap/js/src/toast';
 
 if ('serviceWorker' in navigator) {
-  // 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`;
+  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);
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
-      // Restore the update window that was last manually closed by the user
+      // In case the user ignores the notification
       if (registration.waiting) {
         popupWindow.show();
       }

_javascript/pwa/sw.js

@@ -1,4 +1,6 @@
-importScripts('./assets/js/data/swconf.js');
+import { baseurl } from '../../_config.yml';
+
+importScripts(`${baseurl}/assets/js/data/swconf.js`);
 
 const purge = swconf.purge;
 const interceptor = swconf.interceptor;

_javascript/theme.js

@@ -1,138 +0,0 @@
-/**
- * Theme management class
- *
- * To reduce flickering during page load, this script should be loaded synchronously.
- */
-class Theme {
-  static #modeKey = 'mode';
-  static #modeAttr = 'data-mode';
-  static #darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
-  static switchable = !document.documentElement.hasAttribute(this.#modeAttr);
-
-  static get DARK() {
-    return 'dark';
-  }
-
-  static get LIGHT() {
-    return 'light';
-  }
-
-  /**
-   * @returns {string} Theme mode identifier
-   */
-  static get ID() {
-    return 'theme-mode';
-  }
-
-  /**
-   * Gets the current visual state of the theme.
-   *
-   * @returns {string} The current visual state, either the mode if it exists,
-   *                   or the system dark mode state ('dark' or 'light').
-   */
-  static get visualState() {
-    if (this.#hasMode) {
-      return this.#mode;
-    } else {
-      return this.#sysDark ? this.DARK : this.LIGHT;
-    }
-  }
-
-  static get #mode() {
-    return (
-      sessionStorage.getItem(this.#modeKey) ||
-      document.documentElement.getAttribute(this.#modeAttr)
-    );
-  }
-
-  static get #isDarkMode() {
-    return this.#mode === this.DARK;
-  }
-
-  static get #hasMode() {
-    return this.#mode !== null;
-  }
-
-  static get #sysDark() {
-    return this.#darkMedia.matches;
-  }
-
-  /**
-   * Maps theme modes to provided values
-   * @param {string} light Value for light mode
-   * @param {string} dark Value for dark mode
-   * @returns {Object} Mapped values
-   */
-  static getThemeMapper(light, dark) {
-    return {
-      [this.LIGHT]: light,
-      [this.DARK]: dark
-    };
-  }
-
-  /**
-   * Initializes the theme based on system preferences or stored mode
-   */
-  static init() {
-    if (!this.switchable) {
-      return;
-    }
-
-    this.#darkMedia.addEventListener('change', () => {
-      const lastMode = this.#mode;
-      this.#clearMode();
-
-      if (lastMode !== this.visualState) {
-        this.#notify();
-      }
-    });
-
-    if (!this.#hasMode) {
-      return;
-    }
-
-    if (this.#isDarkMode) {
-      this.#setDark();
-    } else {
-      this.#setLight();
-    }
-  }
-
-  /**
-   * Flips the current theme mode
-   */
-  static flip() {
-    if (this.#hasMode) {
-      this.#clearMode();
-    } else {
-      this.#sysDark ? this.#setLight() : this.#setDark();
-    }
-    this.#notify();
-  }
-
-  static #setDark() {
-    document.documentElement.setAttribute(this.#modeAttr, this.DARK);
-    sessionStorage.setItem(this.#modeKey, this.DARK);
-  }
-
-  static #setLight() {
-    document.documentElement.setAttribute(this.#modeAttr, this.LIGHT);
-    sessionStorage.setItem(this.#modeKey, this.LIGHT);
-  }
-
-  static #clearMode() {
-    document.documentElement.removeAttribute(this.#modeAttr);
-    sessionStorage.removeItem(this.#modeKey);
-  }
-
-  /**
-   * Notifies other plugins that the theme mode has changed
-   */
-  static #notify() {
-    window.postMessage({ id: this.ID }, '*');
-  }
-}
-
-Theme.init();
-
-export default Theme;

_layouts/default.html

@@ -33,7 +33,7 @@ layout: compress
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}
@@ -68,18 +68,14 @@ layout: compress
       </aside>
     </div>
 
-    <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
+    <div id="mask"></div>
 
     {% if site.pwa.enabled %}
       {% include_cached notification.html lang=lang %}
     {% endif %}
 
-    <!-- Embedded scripts -->
-
-    {% for _include in layout.script_includes %}
-      {% assign _include_path = _include | append: '.html' %}
-      {% include {{ _include_path }} %}
-    {% endfor %}
+    <!-- JavaScripts -->
+    {% include js-selector.html lang=lang %}
 
     {% include_cached search-loader.html lang=lang %}
   </body>

_layouts/home.html

@@ -5,45 +5,38 @@ refactor: true
 
 {% include lang.html %}
 
-{% assign all_pinned = site.posts | where: 'pin', 'true' %}
-{% assign all_normal = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
+{% assign pinned = site.posts | where: 'pin', 'true' %}
+{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
 
 {% assign posts = '' | split: '' %}
 
-<!-- Get pinned posts on current page -->
+<!-- Get pinned posts -->
 
-{% assign visible_start = paginator.page | minus: 1 | times: paginator.per_page %}
-{% assign visible_end = visible_start | plus: paginator.per_page %}
+{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
+{% assign pinned_num = pinned.size | minus: offset %}
 
-{% 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] %}
+{% if pinned_num > 0 %}
+  {% for i in (offset..pinned.size) limit: pinned_num %}
+    {% assign posts = posts | push: pinned[i] %}
   {% endfor %}
 {% else %}
-  {% assign pinned_size = 0 %}
+  {% assign pinned_num = 0 %}
 {% endif %}
 
-<!-- Get normal posts on current page -->
+<!-- Get default posts -->
 
-{% assign normal_size = paginator.posts | size | minus: pinned_size %}
+{% assign default_beg = offset | minus: pinned.size %}
 
-{% if normal_size > 0 %}
-  {% if pinned_size > 0 %}
-    {% assign normal_start = 0 %}
-  {% else %}
-    {% assign normal_start = visible_start | minus: all_pinned.size %}
-  {% endif %}
+{% if default_beg < 0 %}
+  {% assign default_beg = 0 %}
+{% endif %}
 
-  {% assign normal_end = normal_start | plus: normal_size | minus: 1 %}
+{% assign default_num = paginator.posts | size | minus: pinned_num %}
+{% assign default_end = default_beg | plus: default_num | minus: 1 %}
 
-  {% for i in (normal_start..normal_end) %}
-    {% assign posts = posts | push: all_normal[i] %}
+{% if default_num > 0 %}
+  {% for i in (default_beg..default_end) %}
+    {% assign posts = posts | push: default[i] %}
   {% endfor %}
 {% endif %}
 

_layouts/post.html

@@ -6,15 +6,12 @@ panel_includes:
 tail_includes:
   - related-posts
   - post-nav
-script_includes:
-  - comment
+  - comments
 ---
 
 {% include lang.html %}
 
-{% include toc-status.html %}
-
-<article class="px-1" data-toc="{{ enable_toc }}">
+<article class="px-1">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
     {% if page.description %}
@@ -98,30 +95,6 @@ script_includes:
     </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 mx-1 my-1 opacity-75">
-          <i class="fas fa-close"></i>
-        </button>
-      </div>
-      <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
-    </dialog>
-  {% endif %}
-
   <div class="content">
     {{ content }}
   </div>

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

@@ -21,7 +21,7 @@ Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-m
 ---
 title: TITLE
 date: YYYY-MM-DD HH:MM:SS +/-TTTT
-categories: [TOP_CATEGORY, SUB_CATEGORY]
+categories: [TOP_CATEGORIE, SUB_CATEGORIE]
 tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
@@ -97,7 +97,7 @@ toc: false
 
 ## Comments
 
-The global setting for comments is defined by the `comments.provider` option in the `_config.yml`{: .filepath} file. Once a comment system is selected for this variable, comments will be enabled for all posts.
+The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
 
 If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
 

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

@@ -68,7 +68,7 @@ For Unix-like systems, you can set up the environment natively for optimal perfo
 To run the site locally, use the following command:
 
 ```terminal
-$ bundle exec jekyll serve
+$ bundle exec jekyll s
 ```
 
 > If you are using Dev Containers, you must run that command in the **VS Code** Terminal.
@@ -93,6 +93,8 @@ Social contact options are displayed at the bottom of the sidebar. You can enabl
 
 To customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
 
+Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main SASS file `_sass/main.scss`{: .filepath} to the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign your new values there.
+
 ### Customizing Static Assets
 
 Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in `_data/origin/cors.yml`{: .filepath }. You can replace some of them based on the network conditions in the region where your website is published.

_sass/abstracts/_breakpoints.scss

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

_sass/abstracts/_index.scss

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

_sass/abstracts/_mixins.scss

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

_sass/addon/module.scss

@@ -1,11 +1,13 @@
-@use 'variables' as v;
-@use 'mixins' as mx;
+/*
+* Mainly scss modules, only imported to `assets/css/main.scss`
+*/
+
+/* ---------- scss placeholder --------- */
 
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: v.$font-family-heading;
-  scroll-margin-top: 3.5rem;
+  font-family: $font-family-heading;
 }
 
 %anchor {
@@ -31,10 +33,7 @@
 }
 
 %tag-hover {
-  @extend %link-color;
-
   background: var(--tag-hover);
-  border-color: var(--tag-hover);
   transition: background 0.35s ease-in-out;
 }
 
@@ -82,7 +81,7 @@
 }
 
 %rounded {
-  border-radius: v.$radius-lg;
+  border-radius: $radius-lg;
 }
 
 %img-caption {
@@ -112,10 +111,6 @@
   -webkit-box-orient: vertical;
 }
 
-%text-ellipsis {
-  @include mx.text-ellipsis;
-}
-
 %text-highlight {
   color: var(--text-muted-highlight-color);
   font-weight: 600;
@@ -139,25 +134,60 @@
   }
 }
 
-%btn-color {
-  button i {
-    color: #999999;
+/* ---------- 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;
+}
+
+@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);
+      }
+    }
   }
 }
-
-%code-snippet-bg {
-  background-color: var(--highlight-bg-color);
-}
-
-%code-snippet-padding {
-  padding-left: 1rem;
-  padding-right: 1.5rem;
-}
-
-%max-w-100 {
-  max-width: 100%;
-}
-
-%panel-border {
-  border-left: 1px solid var(--main-border-color);
-}

_sass/addon/syntax.scss

@@ -1,7 +1,44 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
+/*
+* 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;
+}
 
 .highlighter-rouge {
   color: var(--highlighter-rouge-color);
@@ -22,7 +59,7 @@
 
   pre {
     margin-bottom: 0;
-    font-size: v.$code-font-size;
+    font-size: $code-font-size;
     line-height: 1.4rem;
     word-wrap: normal; /* Fixed Safari overflow-x */
   }
@@ -64,10 +101,10 @@ code {
   color: var(--code-color);
 
   &.highlighter-rouge {
-    font-size: v.$code-font-size;
+    font-size: $code-font-size;
     padding: 3px 5px;
     word-break: break-word;
-    border-radius: v.$radius-sm;
+    border-radius: $radius-sm;
     background-color: var(--inline-code-bg);
   }
 
@@ -113,42 +150,9 @@ div[class^='language-'] {
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
   .content > & {
-    @include mx.ml-mr(-1rem);
+    @include 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 {
@@ -180,18 +184,18 @@ div {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: v.$code-header-height;
+  height: $code-header-height;
   margin-left: 0.75rem;
   margin-right: 0.25rem;
 
   /* the label block */
   span {
-    line-height: v.$code-header-height;
+    line-height: $code-header-height;
 
     /* label icon */
     i {
       font-size: 1rem;
-      width: v.$code-icon-width;
+      width: $code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -219,8 +223,8 @@ div {
     @extend %rounded;
 
     border: 1px solid transparent;
-    height: v.$code-header-height;
-    width: v.$code-header-height;
+    height: $code-header-height;
+    width: $code-header-height;
     padding: 0;
     background-color: inherit;
 
@@ -251,3 +255,38 @@ div {
     }
   }
 }
+
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .content > & {
+      @include ml-mr(0);
+
+      border-radius: $radius-lg;
+    }
+
+    .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);
+      }
+    }
+  }
+}

_sass/addon/variables.scss

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

_sass/base/_base.scss

@@ -1,476 +0,0 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
-@use '../themes/light';
-@use '../themes/dark';
-
-:root {
-  font-size: 16px;
-}
-
-html {
-  @media (prefers-color-scheme: light) {
-    &:not([data-mode]),
-    &[data-mode='light'] {
-      @include light.styles;
-    }
-
-    &[data-mode='dark'] {
-      @include dark.styles;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:not([data-mode]),
-    &[data-mode='dark'] {
-      @include dark.styles;
-    }
-
-    &[data-mode='light'] {
-      @include light.styles;
-    }
-  }
-
-  @include bp.lg {
-    overflow-y: scroll;
-  }
-}
-
-body {
-  background: var(--main-bg);
-  padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
-  color: var(--text-color);
-  -webkit-font-smoothing: antialiased;
-  font-family: v.$font-family-base;
-}
-
-h1.dynamic-title {
-  @include bp.lt(bp.get(lg)) {
-    display: none;
-
-    ~ .content {
-      margin-top: 2.5rem;
-    }
-  }
-}
-
-main {
-  &.col-12 {
-    @include bp.xxxl {
-      padding-right: 4.5rem !important;
-    }
-  }
-}
-
-.preview-img {
-  aspect-ratio: 40 / 21;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  @extend %rounded;
-
-  &:not(.no-bg) {
-    background: var(--img-bg);
-  }
-
-  img {
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover;
-
-    @extend %rounded;
-
-    @at-root #post-list & {
-      width: 100%;
-    }
-  }
-}
-
-.post-preview {
-  @extend %rounded;
-
-  border: 0;
-  background: var(--card-bg);
-  box-shadow: var(--card-shadow);
-
-  &::before {
-    @extend %rounded;
-
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: var(--card-hovor-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%;
-  display: block;
-
-  @extend %img-caption;
-}
-
-/* --- Effects classes --- */
-
-.flex-grow-1 {
-  flex-grow: 1 !important;
-}
-
-.btn-box-shadow {
-  box-shadow: var(--card-shadow);
-}
-
-/* overwrite bootstrap muted */
-.text-muted {
-  color: var(--text-muted-color) !important;
-}
-
-/* Overwrite bootstrap tooltip */
-.tooltip-inner {
-  font-size: 0.7rem;
-  max-width: 220px;
-  text-align: left;
-}
-
-/* Overwrite bootstrap outline button */
-.btn.btn-outline-primary {
-  &:not(.disabled):hover {
-    border-color: #007bff !important;
-  }
-}
-
-.disabled {
-  color: rgb(206, 196, 196);
-  pointer-events: auto;
-  cursor: not-allowed;
-}
-
-.hide-border-bottom {
-  border-bottom: none !important;
-}
-
-.input-focus {
-  box-shadow: none;
-  border-color: var(--input-focus-border-color) !important;
-  background: center !important;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-}
-
-.left {
-  float: left;
-  margin: 0.75rem 1rem 1rem 0;
-}
-
-.right {
-  float: right;
-  margin: 0.75rem 0 1rem 1rem;
-}
-
-/* --- Overriding --- */
-
-/* mermaid */
-.mermaid {
-  text-align: center;
-}
-
-/* MathJax */
-mjx-container {
-  overflow-y: hidden;
-  min-width: auto !important;
-}
-
-@media (hover: hover) {
-  #sidebar ul > li:last-child::after {
-    transition: top 0.5s ease;
-  }
-
-  .nav-link {
-    transition: background-color 0.3s ease-in-out;
-  }
-
-  .post-preview {
-    transition: background-color 0.35s ease-in-out;
-  }
-}
-
-#mask {
-  inset: 0 0 0 0;
-}
-
-#main-wrapper {
-  position: relative;
-
-  @include mx.pl-pr(0);
-
-  @include bp.lt(bp.get(lg)) {
-    @include mx.slide;
-  }
-
-  @include bp.lg {
-    margin-left: v.$sidebar-width;
-  }
-
-  @include bp.xxxl {
-    margin-left: v.$sidebar-width-large;
-  }
-
-  > .container {
-    min-height: 100vh;
-
-    @include bp.lte(bp.get(md)) {
-      @include mx.max-w-100;
-      @include mx.pl-pr(0);
-    }
-
-    @include bp.lt(bp.get(lg)) {
-      max-width: 100%;
-    }
-
-    /* Pad horizontal */
-    @include bp.between(992px, calc(#{bp.get(xl)} - 1px)) {
-      .col-lg-11 {
-        flex: 0 0 96%;
-        max-width: 96%;
-      }
-    }
-
-    @include bp.lt(bp.get(xl)) {
-      > .row {
-        justify-content: center !important;
-      }
-    }
-
-    @include bp.xxxl {
-      max-width: v.$main-content-max-width;
-
-      @include mx.pl-pr(1.75rem, true);
-    }
-  }
-}
-
-/* --- basic wrappers --- */
-
-#topbar-wrapper.row,
-#main-wrapper > .container > .row,
-#search-result-wrapper > .row {
-  @include mx.ml-mr(0);
-}
-
-#tail-wrapper {
-  @include bp.xxxl {
-    padding-right: 4.5rem !important;
-  }
-
-  > :not(script) {
-    margin-top: 3rem;
-  }
-}

_sass/base/_index.scss

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

_sass/base/_reset.scss

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

_sass/base/_typography.scss

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

_sass/colors/syntax-dark.scss

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

_sass/colors/syntax-light.scss

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

_sass/colors/typography-dark.scss

@@ -1,6 +1,8 @@
-@mixin styles {
-  color-scheme: dark;
+/*
+ * The main dark mode styles
+ */
 
+@mixin dark-scheme {
   /* Framework color */
   --main-bg: rgb(27, 27, 30);
   --mask-bg: rgb(68, 69, 70);
@@ -20,6 +22,7 @@
   --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);
@@ -57,7 +60,6 @@
 
   /* 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 */
@@ -98,18 +100,7 @@
   --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: rgba(255, 255, 255, 0.05);
-  --code-color: #b0b0b0;
-  --code-header-text-color: #6a6a6a;
-  --code-header-muted-color: #353535;
-  --code-header-icon-color: #565656;
-  --clipboard-checked-color: #2bcc2b;
-  --filepath-text-color: #cacaca;
+  color-scheme: dark;
 
   .light {
     display: none;
@@ -153,151 +144,4 @@
   #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;
-  }
-}
+} /* dark-scheme */

_sass/colors/typography-light.scss

@@ -0,0 +1,112 @@
+/*
+ * The syntax light mode typography colors
+ */
+
+@mixin light-scheme {
+  /* Framework color */
+  --main-bg: white;
+  --mask-bg: #c1c3c5;
+  --main-border-color: #f3f3f3;
+
+  /* Common color */
+  --text-color: #34343c;
+  --text-muted-color: #757575;
+  --text-muted-highlight-color: inherit;
+  --heading-color: #2a2a2a;
+  --label-color: #585858;
+  --blockquote-border-color: #eeeeee;
+  --blockquote-text-color: #757575;
+  --link-color: #0056b2;
+  --link-underline-color: #dee2e6;
+  --button-bg: #ffffff;
+  --btn-border-color: #e9ecef;
+  --btn-backtotop-color: #686868;
+  --btn-backtotop-border-color: #f1f1f1;
+  --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;
+
+  /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
+  /* Archive */
+  --timeline-color: rgba(0, 0, 0, 0.075);
+  --timeline-node-bg: #c2c6cc;
+  --timeline-year-dot-color: #ffffff;
+
+  [class^='prompt-'] {
+    --link-underline-color: rgb(219, 216, 216);
+  }
+
+  .dark {
+    display: none;
+  }
+} /* light-scheme */

_sass/components/_buttons.scss

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

_sass/components/_index.scss

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

_sass/components/_popups.scss

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

_sass/layout/_footer.scss

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

_sass/layout/_index.scss

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

_sass/layout/_panel.scss

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

_sass/layout/_sidebar.scss

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

_sass/layout/_topbar.scss

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

_sass/layout/archives.scss

@@ -1,17 +1,10 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
+/*
+  Style for Archives
+*/
 
 #archives {
   letter-spacing: 0.03rem;
 
-  @include bp.lt(bp.get(sm)) {
-    margin-top: -1rem;
-
-    ul {
-      letter-spacing: 0;
-    }
-  }
-
   $timeline-width: 4px;
 
   %timeline {
@@ -65,8 +58,9 @@
     li {
       font-size: 1.1rem;
       line-height: 3rem;
-
-      @extend %text-ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:nth-child(odd) {
         background-color: var(--main-bg, #ffffff);
@@ -138,3 +132,13 @@
     }
   }
 } /* #archives */
+
+@media all and (max-width: 576px) {
+  #archives {
+    margin-top: -1rem;
+
+    ul {
+      letter-spacing: 0;
+    }
+  }
+}

_sass/layout/categories.scss

@@ -1,7 +1,8 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/placeholders';
+/*
+  Style for Tab Categories
+*/
 
-%-category-icon-color {
+%category-icon-color {
   color: gray;
 }
 
@@ -15,7 +16,7 @@
   }
 
   .card-header {
-    $radius: calc(v.$radius-lg - 1px);
+    $radius: calc($radius-lg - 1px);
 
     padding: 0.75rem;
     border-radius: $radius;
@@ -28,7 +29,7 @@
   }
 
   i {
-    @extend %-category-icon-color;
+    @extend %category-icon-color;
 
     font-size: 86%; /* fontawesome icons */
   }

_sass/layout/category-tag.scss

@@ -1,6 +1,6 @@
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
+/*
+  Style for page Category and Tag
+*/
 
 .dash {
   margin: 0 0.5rem 0.6rem 0.5rem;
@@ -24,10 +24,6 @@
       position: relative;
       top: 0.6rem;
       margin-right: 0.5rem;
-
-      @include bp.lt(bp.get(sm)) {
-        margin: 0 0.5rem;
-      }
     }
 
     /* post's title */
@@ -35,10 +31,6 @@
       @extend %no-bottom-border;
 
       font-size: 1.1rem;
-
-      @include bp.lt(bp.get(sm)) {
-        @include mx.text-ellipsis;
-      }
     }
   }
 }
@@ -61,3 +53,20 @@
     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;
+      }
+    }
+  }
+}

_sass/layout/home.scss

@@ -1,14 +1,10 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/placeholders';
+/*
+  Style for Homepage
+*/
 
 #post-list {
   margin-top: 2rem;
 
-  @include bp.lg {
-    margin-top: 2.5rem;
-  }
-
   .card-wrapper {
     &:hover {
       text-decoration: none;
@@ -24,11 +20,7 @@
     background: none;
 
     %img-radius {
-      border-radius: v.$radius-lg v.$radius-lg 0 0;
-
-      @include bp.md {
-        border-radius: 0 v.$radius-lg v.$radius-lg 0;
-      }
+      border-radius: $radius-lg $radius-lg 0 0;
     }
 
     .preview-img {
@@ -43,10 +35,6 @@
       height: 100%;
       padding: 1rem;
 
-      @include bp.md {
-        padding: 1.75rem 1.75rem 1.25rem;
-      }
-
       .card-title {
         @extend %text-clip;
 
@@ -58,20 +46,14 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text {
-        @include bp.md {
-          display: inherit !important;
-        }
+      .card-text.content {
+        @extend %muted;
 
-        &.content {
-          @extend %muted;
+        p {
+          @extend %text-clip;
 
-          p {
-            @extend %text-clip;
-
-            line-height: 1.5;
-            margin: 0;
-          }
+          line-height: 1.5;
+          margin: 0;
         }
       }
 
@@ -81,10 +63,6 @@
         i {
           &:not(:first-child) {
             margin-left: 1.5rem;
-
-            @include bp.md {
-              margin-left: 1.75rem;
-            }
           }
         }
 
@@ -96,8 +74,9 @@
 
         > div:first-child {
           display: block;
-
-          @extend %text-ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -109,28 +88,11 @@
   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;
@@ -164,10 +126,64 @@
       }
     }
   } /* .page-item */
+} /* .pagination */
 
-  .page-index {
-    @include bp.lg {
-      display: none;
+/* Tablet */
+@media all and (min-width: 768px) {
+  %img-radius {
+    border-radius: 0 $radius-lg $radius-lg 0;
+  }
+
+  #post-list {
+    .card {
+      .card-body {
+        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
+
+        .card-text {
+          display: inherit !important;
+        }
+
+        .post-meta {
+          i {
+            &:not(:first-child) {
+              margin-left: 1.75rem;
+            }
+          }
+        }
+      }
     }
   }
 }
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 830px) {
+  .pagination {
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Sidebar is visible */
+@media all and (min-width: 831px) {
+  #post-list {
+    margin-top: 2.5rem;
+  }
+
+  .pagination {
+    font-size: 0.85rem;
+    justify-content: center;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+    }
+
+    .page-index {
+      display: none;
+    }
+  } /* .pagination */
+}

_sass/layout/post.scss

@@ -1,15 +1,14 @@
-@use '../abstracts/variables' as v;
-@use '../abstracts/breakpoints' as bp;
-@use '../abstracts/mixins' as mx;
-@use '../abstracts/placeholders';
+/*
+  Post-specific style
+*/
 
-%-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;
@@ -25,7 +24,7 @@ header {
 
   .post-meta {
     span + span::before {
-      @include -dot;
+      @include dot;
     }
 
     em,
@@ -98,7 +97,7 @@ header {
 
         &:hover {
           i {
-            @extend %btn-share-hover;
+            @extend %btn-share-hovor;
           }
         }
       }
@@ -114,20 +113,9 @@ 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: v.$font-family-base;
+  --wc-stm-font-family: $font-family-base;
   --wc-stm-dialog-background-color: var(--card-bg);
   --wc-stm-form-button-border: 1px solid var(--btn-border-color);
   --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
@@ -143,19 +131,16 @@ header {
 
   .post-tag {
     &:hover {
+      @extend %link-hover;
       @extend %tag-hover;
+      @extend %no-bottom-border;
     }
   }
 }
 
 .post-navigation {
-  @include bp.lt(bp.get(lg)) {
-    @include mx.pl-pr(0);
-    @include mx.ml-mr(-0.5rem);
-  }
-
   .btn {
-    @extend %-btn-post-nav;
+    @extend %btn-post-nav;
 
     &:not(:hover) {
       color: var(--link-color);
@@ -168,7 +153,7 @@ header {
     }
 
     &.disabled {
-      @extend %-btn-post-nav;
+      @extend %btn-post-nav;
 
       pointer-events: auto;
       cursor: not-allowed;
@@ -188,12 +173,12 @@ header {
     }
 
     &:first-child {
-      border-radius: v.$radius-lg 0 0 v.$radius-lg;
+      border-radius: $radius-lg 0 0 $radius-lg;
       left: 0.5px;
     }
 
     &:last-child {
-      border-radius: 0 v.$radius-lg v.$radius-lg 0;
+      border-radius: 0 $radius-lg $radius-lg 0;
       right: 0.5px;
     }
   }
@@ -218,50 +203,39 @@ header {
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;
-    margin-top: 4rem;
+    position: relative;
+    top: 2rem;
   }
 
   to {
     opacity: 1;
+    position: relative;
+    top: 0;
   }
 }
 
 @keyframes fade-up {
   from {
     opacity: 0;
-    margin-top: 4rem;
+    position: relative;
+    top: 2rem;
   }
 
   to {
     opacity: 1;
+    position: relative;
+    top: 0;
   }
 }
 
-/* TOC panel */
-
-%top-cover {
-  content: '';
-  display: block;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  width: 100%;
-  height: 3rem;
-  background: linear-gradient(var(--main-bg) 50%, transparent);
-}
-
 #toc-wrapper {
-  top: 0;
+  border-left: 1px solid rgba(158, 158, 158, 0.17);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 4rem;
   transition: top 0.2s ease-in-out;
-  overflow-y: auto;
-  max-height: 100vh;
-  scrollbar-width: none;
-  margin-top: 2rem;
-
-  &:not(.invisible) {
-    -webkit-animation: fade-up 0.8s;
-    animation: fade-up 0.8s;
-  }
+  -webkit-animation: fade-up 0.8s;
+  animation: fade-up 0.8s;
 
   ul {
     list-style: none;
@@ -270,8 +244,12 @@ header {
     padding-left: 0;
 
     li {
+      &:not(:last-child) {
+        margin: 0.4rem 0;
+      }
+
       a {
-        padding: 0.4rem 0 0.4rem 1.25rem;
+        padding: 0.2rem 0 0.2rem 1.25rem;
       }
     }
 
@@ -279,8 +257,9 @@ header {
 
     .toc-link {
       display: block;
-
-      @extend %text-ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:hover {
         color: var(--toc-highlight);
@@ -299,6 +278,7 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
+        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -308,130 +288,13 @@ 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 mx.label(1.1rem, 600);
+    @include label(1.1rem, 600);
   }
 
   time {
@@ -442,11 +305,10 @@ header {
   }
 
   p {
-    @extend %text-ellipsis;
-
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
-    white-space: break-spaces;
+    overflow: hidden;
+    text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -466,31 +328,43 @@ header {
 
 .utterances {
   max-width: 100%;
-  min-height: 269px;
 }
 
-%btn-share-hover {
+%btn-share-hovor {
   color: var(--btn-share-hover-color) !important;
 }
 
 .share-label {
-  @include mx.label(inherit, 400, inherit);
+  @include label(inherit, 400, inherit);
 
   &::after {
     content: ':';
   }
 }
 
-.content > p > img {
-  @include bp.lte(bp.get(md)) {
+@media all and (max-width: 576px) {
+  .post-tail-bottom {
+    flex-wrap: wrap-reverse !important;
+
+    > div:first-child {
+      width: 100%;
+      margin-top: 1rem;
+    }
+  }
+}
+
+@media all and (max-width: 768px) {
+  .content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
 
-h2,
-h3,
-h4 {
-  @include bp.xl {
-    scroll-margin-top: 2rem;
+/* Hide SideBar and TOC */
+@media all and (max-width: 849px) {
+  .post-navigation {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
   }
 }