Merge branch 'master' into production

Resolves #846

.commitlintrc.json

@@ -1,5 +1,8 @@
 {
   "rules": {
-    "body-max-line-length": [0, "always"]
+    "body-max-line-length": [
+      0,
+      "always"
+    ]
   }
 }

.editorconfig

@@ -2,10 +2,15 @@ root = true
 
 [*]
 charset = utf-8
-# 2 space indentation
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
 # Unix-style newlines with a newline ending every file
 end_of_line = lf
 insert_final_newline = true
+
+[*.js]
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false

.github/CONTRIBUTING.md

@@ -33,7 +33,7 @@ During JavaScript development, real-time debugging can be performed through the
 Firstly, start a Jekyll server:
 
 ```console
-$ bash tools/run.sh
+$ bash tools/run
 ```
 
 And then open a new terminal tab and run:

.github/FUNDING.yml

@@ -1,2 +1,2 @@
 ko_fi: coteschung
-custom: https://cotes.gitee.io/alipay-wechat-donation
+custom: https://sponsor.cotes.page

.github/PULL_REQUEST_TEMPLATE.md

@@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->
 
-- [ ] I have run `bash ./tools/deploy.sh --dry-run` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser
 
 ### Test Configuration

.github/workflows/cd.yml

@@ -0,0 +1,14 @@
+name: CD
+on:
+  push:
+    branches: [production, docs]
+
+jobs:
+  launch:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          curl -X POST -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
+            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'

.github/workflows/ci.yml

@@ -2,14 +2,11 @@ name: 'CI'
 on:
   push:
     branches-ignore:
-      - 'release/**'
+      - 'production'
       - 'docs'
-    tags-ignore:
-      - '**'
     paths-ignore:
       - '.github/**'
       - '!.github/workflows/ci.yml'
-      - '.travis.yml'
       - '.gitignore'
       - 'README.md'
       - 'LICENSE'
@@ -20,18 +17,22 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+
     strategy:
       matrix:
-        ruby: [2.5, 2.6, 2.7, 3]
+        ruby: [2.7, 3]
+
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0  # for posts's lastmod
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
           bundler-cache: true
+
       - name: Test Site
-        run: bash tools/deploy.sh --dry-run
+        run: bash tools/test

.github/workflows/pages-deploy.yml.hook

@@ -1,29 +1,71 @@
-name: 'Automatic build'
+name: "Build and Deploy"
 on:
   push:
     branches:
+      - main
       - master
     paths-ignore:
       - .gitignore
       - README.md
       - LICENSE
 
-jobs:
+  # Allows you to run this workflow manually from the Actions tab
-  continuous-delivery:
+  workflow_dispatch:
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
-          fetch-depth: 0  # for posts's lastmod
+          fetch-depth: 0
+          # submodules: true
+          # If using the 'assets' git submodule from Chirpy Starter, uncomment above
+          # (See: https://github.com/cotes2020/chirpy-starter/tree/main/assets)
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v1
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 2.7
+          ruby-version: 3   # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
           bundler-cache: true
 
-      - name: Deploy
+      - name: Build site
-        run: bash tools/deploy.sh
+        run: bundle exec jekyll b -d "_site${{ steps.pages.outputs.base_path }}"
+        env:
+          JEKYLL_ENV: "production"
+
+      - name: Test site
+        run: |
+          bundle exec htmlproofer _site --disable-external --check-html --allow_hash_href
+
+      - name: Upload site artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "_site${{ steps.pages.outputs.base_path }}"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/style-lint.yml

@@ -0,0 +1,25 @@
+name: 'Style Lint'
+
+on:
+  push:
+    branches-ignore:
+      - 'production'
+      - 'docs'
+    paths:
+      - '_sass/**/*.scss'
+  pull_request:
+    paths:
+      - '_sass/**/*.scss'
+
+jobs:
+  stylelint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+      - run: npm i
+      - run: npm test

.gitignore

@@ -3,10 +3,10 @@
 !.git*
 !.editorconfig
 !.nojekyll
-!.travis.yml
 !.husky
 !.commitlintrc.json
 !.versionrc.json
+!.stylelintrc.json
 
 # bundler cache
 _site

.nojekyll

@@ -1 +0,0 @@
-

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+  "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
+  }
+}

.travis.yml

@@ -1,48 +0,0 @@
-os: linux
-dist: bionic
-language: ruby
-rvm: 2.7.0
-
-addons:
-  apt:
-    packages:
-      - libcurl4-openssl-dev  # to avoid SSL error (for htmlproofer)
-
-# Overriding to drop the `--development` flag which requires the Gemfile.lock at build
-install: bundle install --jobs=3 --retry=3 --path=vendor/bundle
-
-before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
-
-jobs:
-  include:
-    - stage: Upgrade
-      git:
-        depth: false  # for posts' lastmod
-      script: eval "$BUILD_CMD"
-    - stage: Starter
-      language: minimal
-      install: true   # skip install step
-      script: eval "$FLUSH_STARTER"
-    - stage: Docs
-      cache: bundler
-      git:
-        depth: false  # for posts' lastmod
-      script: eval "$DOCS_CMD"
-
-stages:
-  - name: Upgrade
-    if: branch = production
-  - name: Starter
-    if: branch = production
-  - name: Docs
-    if: branch = docs
-
-notifications:
-  email:
-    recipients:
-      - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
-    on_success: never
-
-env:
-  global:
-    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

CHANGELOG.md

@@ -2,6 +2,104 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.4.0...v5.5.0) (2023-01-29)
+
+
+### Features
+
+* **i18n:** add Arabic translation ([#857](https://github.com/cotes2020/jekyll-theme-chirpy/issues/857)) ([765af53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/765af53b77e5c63804784d5728f5970ae274c2c7))
+* **i18n:** add Czech language ([#833](https://github.com/cotes2020/jekyll-theme-chirpy/issues/833)) ([98d48f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/98d48f5da412276d4a0c99cd01a87b19349bc6bc))
+* **i18n:** add Finnish translations ([#843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/843)) ([d6d0318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d6d03183eaf94b44e037cc48b6e1c47cee183f6e))
+* **i18n:** add Italian translation ([#850](https://github.com/cotes2020/jekyll-theme-chirpy/issues/850)) ([9a011e1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9a011e14d66195d8b2fb9ec62f3e60a3e56cd032))
+
+
+### Bug Fixes
+
+*  copy command line incomplete(`.gp` part) ([41ed331](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41ed33145639415148aec8e85edc7a6fd0de0ca3))
+* correct encoding of spaces in share URLs ([#835](https://github.com/cotes2020/jekyll-theme-chirpy/issues/835)) ([f2d2858](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f2d285844e6e2979f2b0eec1d20073d3c05b6c0c))
+* post's image would cover the PWA update alert ([bd374dd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bd374dd383c50f89c8f018ecb4e25772eeb8f6d8))
+* prompt with nested blockquotes renders incorrectly ([#846](https://github.com/cotes2020/jekyll-theme-chirpy/issues/846)) ([babb4a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/babb4a0c5a58ceb2e4093bc465670accdd526c18))
+
+## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
+
+
+### Features
+
+* add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
+* add embed video support ([ed6dc53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ed6dc539eff7003a3765bcd8c31ae5e91a863d65))
+* add shimmer background when image loads ([ab16fdc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ab16fdc7fc26811130b98a1773beb62bff6182e8))
+* set preview image ratio to 1.91 : 1 ([4b6ccbc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4b6ccbcbccce27b9fcb035812efefe4eb69301cf))
+* support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
+* support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
+
+
+### Bug Fixes
+
+* `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
+* `og:image` will be incorrect if the image uses a cross-domain URL ([8de1abd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8de1abda6be3633982392178731431b0ddb1b52b))
+* refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
+* spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
+
+
+### Improvements
+
+* **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
+
+## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)
+
+
+### Bug Fixes
+
+* `mermaid` occasionally fails to initialize ([#536](https://github.com/cotes2020/jekyll-theme-chirpy/issues/536)) ([48f14e3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae))
+* **comment:** disqus doesn't follow theme mode switching ([b0d5956](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0d5956f5a0ed894984d6b1754efeba04d8bc966))
+* restore full-text search ([#741](https://github.com/cotes2020/jekyll-theme-chirpy/issues/741)) ([6774e0e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6774e0e1fb37cf467b14be481347412713763f05))
+* the image URL in the SEO-related tags is incomplete ([#754](https://github.com/cotes2020/jekyll-theme-chirpy/issues/754)) ([f6e9a3f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f6e9a3fccf7ab34db71f8aefaf86fdcc05861076))
+
+## [5.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.0...v5.3.1) (2022-10-25)
+
+
+### Bug Fixes
+
+* 404 page missing title in tablet/desktop view ([5511b28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5511b2883fd5a395fddfb642588d00c122f18da7))
+* prompt content overflows horizontally ([#705](https://github.com/cotes2020/jekyll-theme-chirpy/issues/705)) ([fb13e32](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fb13e3219b5eca0d2e4f86a1ecabfab75240369f))
+* **tools:** multiple configuration files will fail the test ([80cb0b3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/80cb0b371754e96772a7907877a8ce196398ba3d))
+
+
+### Improvements
+
+* **layout:** improve the min-height of main content ([#674](https://github.com/cotes2020/jekyll-theme-chirpy/issues/674)) ([49bb93c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/49bb93cc0c89ad9cfaad5edcf9cb28c3d5134575))
+* modify checkbox icon with `Liquid` ([1fd665b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1fd665bf4990c26ae23635c511c5abc9640184d1))
+* optimize the extra padding in lists ([#703](https://github.com/cotes2020/jekyll-theme-chirpy/issues/703)) ([39da11e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/39da11e3f3685f49321757576d2b87a48bf25db5)), closes [#702](https://github.com/cotes2020/jekyll-theme-chirpy/issues/702)
+* **posts:** improve core block bottom padding ([d2fb98b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2fb98b3e57f2f6c3fc3816551cd0721731adf40))
+* truncate post content for search results ([647eea8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/647eea8dbd716f9d3cb8330c3139fa753903f51d))
+* **typography:** optimize the line height of post content ([eac3f9b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/eac3f9b434ca77e3dc64eea9cedea7b93e7b306b))
+
+### Others
+
+* **giscus:** add `reactions-enabled` option ([#712](https://github.com/cotes2020/jekyll-theme-chirpy/issues/712)) ([70662a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/70662a0365e6b9378602dc0a57462ddad5aebcf5))
+* **locale:** restore options for changing date format ([#716](https://github.com/cotes2020/jekyll-theme-chirpy/issues/716)) ([f904e8c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f904e8cd48c343cc31e25859d9d50bfe2c056f41))
+* remove site config option `prefer_datetime_locale` ([6852ceb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6852ceb280927ff4e753a3e1131f2b396d9807d0))
+
+## [5.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.1...v5.3.0) (2022-09-23)
+
+
+### Features
+
+* add multiple authors to a post ([#677](https://github.com/cotes2020/jekyll-theme-chirpy/issues/677)) ([f1d9e99](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f1d9e99bc02d3cd0a6b0cd1beac545f0cc7a24f8)), closes [#675](https://github.com/cotes2020/jekyll-theme-chirpy/issues/675)
+* **i18n:** add Bulgarian support  ([#612](https://github.com/cotes2020/jekyll-theme-chirpy/issues/612)) ([2fed338](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2fed338ce6d078bf528c9717201fbc475f88cd22))
+* **i18n:** add German locale file ([#663](https://github.com/cotes2020/jekyll-theme-chirpy/issues/663)) ([940b281](https://github.com/cotes2020/jekyll-theme-chirpy/commit/940b2810e95065e30600ae8d5e4612e7183da60e))
+* **i18n:** add Hungarian locale file ([#597](https://github.com/cotes2020/jekyll-theme-chirpy/issues/597), [#598](https://github.com/cotes2020/jekyll-theme-chirpy/issues/598)) ([b032977](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0329775fc24d0323e5cc04cda46ece8b4531802))
+* **i18n:** add Turkish language ([#631](https://github.com/cotes2020/jekyll-theme-chirpy/issues/631)) ([ad137fa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ad137fa2945b1870b9c1dd5e9212a5f4af7c3580))
+
+
+### Bug Fixes
+
+* add missing color to linkedin icon for share list ([#683](https://github.com/cotes2020/jekyll-theme-chirpy/issues/683)) ([0dcd39d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0dcd39d491c9c49e4acf7f75f83fe6e1d1839e37))
+* code contains spaces in headings ([#644](https://github.com/cotes2020/jekyll-theme-chirpy/issues/644)) ([3fa1bf3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3fa1bf305451f645a7f3aa93863b076463c8f165))
+* correct spelling of `panel` ([#686](https://github.com/cotes2020/jekyll-theme-chirpy/issues/686)) ([b288587](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b288587c1c3d113a1c52c2d25fb46cddda348961))
+* correct the i18n for tab titles ([0c5b697](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c5b697fd3b283b6a5c926742b61ed49d8688c18))
+* the `code` doesn't wrap inside the prompt ([#626](https://github.com/cotes2020/jekyll-theme-chirpy/issues/626)) ([378b65a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/378b65a0617787813519dde74d6f741f255eff3d))
+
 ## [5.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.0...v5.2.1) (2022-06-17)
 
 

Gemfile

@@ -10,13 +10,19 @@ end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
 # and associated library.
-install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
+platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", "~> 1.2"
+  gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"
 end
 
 # Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 
-# Jekyll <= 4.2.0 compatibility with Ruby 3.0
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-gem "webrick", "~> 1.7"
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+
+# Lock jekyll-sass-converter to 2.x on Linux-musl
+if RUBY_PLATFORM =~ /linux-musl/
+  gem "jekyll-sass-converter", "~> 2.0"
+end

README.md

@@ -5,37 +5,38 @@
   A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
 
   [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
-  [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml)
   [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)](https://www.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade)
   [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
   [**Live Demo →**](https://cotes2020.github.io/chirpy-demo)
 
-  [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/chirpy-images/main/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
+  [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
 
 </div>
 
 ## Features
 
-- Localized Layout
 - Dark/Light Theme Mode
+- Localized UI language
 - Pinned Posts
 - Hierarchical Categories
-- Last Modified Date for Posts
+- Trending Tags
 - Table of Contents
-- Auto-generated Related Posts
+- Last Modified Date of Posts
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagram & Flowchart
+- Dark/Light Mode Images
+- Embed Videos
 - Disqus/Utterances/Giscus Comments
 - Search
 - Atom Feeds
 - Google Analytics
-- GA Pageviews Reporting
+- Page Views Reporting
 - SEO & Performance Optimization
 
-
 ## Quick Start
 
 Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.
@@ -73,7 +74,7 @@ After a while, navigate to the site at <http://localhost:4000>.
 
 ## Documentation
 
-For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/) / [wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Note that the tutorial is based on the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags), and the features of the default branch are usually ahead of the documentation.
+For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/) / [wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Note that the tutorial is based on the [latest release](https://github.com/cotes2020/jekyll-theme-chirpy/releases/latest), and the features of the default branch are usually ahead of the documentation.
 
 ## Contributing
 
@@ -102,4 +103,4 @@ This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chi
 <!-- ReadMe links -->
 
 [jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
-[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/
+[cn-donation]: https://sponsor.cotes.page/

_config.yml

@@ -12,8 +12,6 @@ baseurl: ''
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# Additional parameters for datetime localization, optional. › https://github.com/iamkun/dayjs/tree/dev/src/locale
-prefer_datetime_locale:
 
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
 timezone: Asia/Shanghai
@@ -41,7 +39,7 @@ social:
   # Change to your full name.
   # It will be displayed as the default author of the posts and the copyright owner in the Footer
   name: your_full_name
-  email: example@doamin.com             # change to your email address
+  email: example@domain.com             # change to your email address
   links:
     # The first element serves as the copyright owner's link
     - https://twitter.com/username      # change to your twitter homepage
@@ -80,7 +78,7 @@ theme_mode:   # [light|dark]
 # will be added to all image (site avatar & posts' images) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: 'https://raw.githubusercontent.com/cotes2020/chirpy-images/main'
+img_cdn: 'https://chirpy-img.netlify.app'
 
 # the avatar on sidebar, support local or CORS resources
 avatar: '/commons/avatar.jpg'
@@ -106,6 +104,7 @@ comments:
     mapping:           # optional, default to 'pathname'
     input_position:    # optional, default to 'bottom'
     lang:              # optional, default to the value of `site.lang`
+    reactions_enabled: # optional, default to the value of `1`
 
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:

_data/assets/cross_origin.yml

@@ -16,47 +16,47 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
+  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
 
 bootstrap-toc:
   css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
   js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/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@8/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js
 
 countup:
   js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
 
 magnific-popup:
-  css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css
+  css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
-  js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js
+  js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
 
-lozad:
+lazysizes:
-  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+  js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
 
 clipboard:
-  js:  https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
+  js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
 
 polyfill:
   js: https://polyfill.io/v3/polyfill.min.js?features=es6
 
 mathjax:
-  js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
+  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js

_data/assets/self_host.yml

@@ -16,13 +16,13 @@ bootstrap-toc:
   js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
 
 fontawesome:
-  css: /assets/lib/fontawesome-free-5.15.4/css/all.min.css
+  css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css
 
 search:
   js: /assets/lib/simple-jekyll-search-1.10.0/simple-jekyll-search.min.js
 
 mermaid:
-  js: /assets/lib/mermaid-8.13.10/mermaid.min.js
+  js: /assets/lib/mermaid-9.1.7/mermaid.min.js
 
 dayjs:
   js:
@@ -38,8 +38,8 @@ magnific-popup:
   css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
   js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
 
-lozad:
+lazysizes:
-  js: /assets/lib/lozad-1.16.0/lozad.min.js
+  js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js
 
 clipboard:
   js: /assets/lib/clipboard-2.0.9/clipboard.min.js

_data/contact.yml

@@ -19,7 +19,7 @@
 # -
 #   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
-#   url:  ''                  # Fill with your mastodon account page
+#   url:  ''                  # Fill with your Mastodon account page, rel="me" will be applied for verification
 # -
 #   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>

_data/locales/ar.yml

@@ -0,0 +1,93 @@
+# 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: باستخدام :PLATFORM السمة :THEME.
+
+not_found:
+  statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
+
+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: تم نسخ الرابط بنجاح!
+  # pinned prompt of posts list on homepage
+  pin_prompt: مثبت
+
+# 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/bg-BG.yml

@@ -0,0 +1,83 @@
+# 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 (CC BY 4.0) от автора.
+
+meta: Създадено чрез :PLATFORM и :THEME тема.
+
+not_found:
+  statment: Съжалявам, но на този 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: Линкът е копиран успешно!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Прикрепенa
+
+# categories page
+categories:
+  category_measure:
+    singular: категория
+    plural: категории
+  post_measure:
+    singular: публикация
+    plural: публикации

_data/locales/cs-CZ.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Příspěvek
+  category: Kategorie
+  tag: Štítek
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Domů
+  categories: Kategorie
+  tags: Štítky
+  archives: Archivy
+  about: O mně
+
+# the text displayed in the search bar & search results
+search:
+  hint: hledat
+  cancel: Zrušit
+  no_results: Ups! Žádný výsledek nenalezen.
+
+panel:
+  lastmod: Nedávno aktualizováno
+  trending_tags: Trendy štítky
+  toc: Obsah
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tento příspěvek je licencován pod :LICENSE_NAME autorem.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Některá práva vyhrazena.
+  verbose: >-
+    Pokud není uvedeno jinak, jsou příspěvky na tomto webu licencovány
+    pod licencí Creative Commons Attribution 4.0 International (CC BY 4.0) Licence autora.
+
+meta: Použití :PLATFORM s motivem :THEME.
+
+not_found:
+  statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
+
+notification:
+  update_found: Je k dispozici nová verze obsahu.
+  update: Aktualizace
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Od
+  posted: Zveřejněno
+  updated: Aktualizováno
+  words: slova
+  pageview_measure: zhlednutí
+  read_time:
+    unit: minut
+    prompt: čtení
+  relate_posts: Další čtení
+  share: Sdílet
+  button:
+    next: Novější
+    previous: Starší
+    copy_code:
+      succeed: Zkopírováno!
+    share_link:
+      title: Kopírovat odkaz
+      succeed: Zkopírováno!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Připnuto
+
+# 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: kategorie
+  post_measure:
+    singular: příspěvěk
+    plural: příspěvky

_data/locales/de-DE.yml

@@ -0,0 +1,82 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Eintrag
+  category: Kategorie
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Startseite
+  categories: Kategorien
+  tags: Tags
+  archives: Archiv
+  about: Über
+
+# the text displayed in the search bar & search results
+search:
+  hint: Suche
+  cancel: Abbrechen
+  no_results: Ups! Keine Einträge gefunden.
+
+panel:
+  lastmod: Kürzlich aktualisiert
+  trending_tags: Beliebte Tags
+  toc: Inhalt
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Dieser Eintrag ist vom Autor unter :LICENSE_NAME lizensiert.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Einige Rechte vorbehalten.
+  verbose: >-
+    Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0).
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
+
+notification:
+  update_found: Eine neue Version ist verfügbar.
+  update: Neue Version
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Von
+  posted: Veröffentlicht
+  updated: Aktualisiert
+  words: Wörter
+  pageview_measure: Aufrufe
+  read_time:
+    unit: Minuten
+    prompt: lesen
+  relate_posts: Weiterlesen
+  share: Teilen
+  button:
+    next: Nächster Eintrag
+    previous: Eintrag vorher
+    copy_code:
+      succeed: Kopiert!
+    share_link:
+      title: Link kopieren
+      succeed: Link erfolgreich kopiert!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Angepinnt
+
+# categories page
+categories:
+  category_measure:
+    singular: Kategorie
+    plural: Kategorien
+  post_measure:
+    singular: Eintrag
+    plural: Einträge

_data/locales/en.yml

@@ -40,7 +40,7 @@ copyright:
     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: Powered by :PLATFORM with :THEME theme.
+meta: Using the :PLATFORM theme :THEME.
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
@@ -73,6 +73,16 @@ post:
   # pinned prompt of posts list on homepage
   pin_prompt: Pinned
 
+# 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:

_data/locales/fi-FI.yml

@@ -0,0 +1,92 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Julkaisu
+  category: Kateogoria
+  tag: Tagi
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Koti
+  categories: Kateogoriat
+  tags: Tagit
+  archives: Arkistot
+  about: Minusta
+
+# the text displayed in the search bar & search results
+search:
+  hint: etsi
+  cancel: Peruuta
+  no_results: Hups! Ei tuloksia.
+
+panel:
+  lastmod: Viimeksi päivitetty
+  trending_tags: Trendaavat tagit
+  toc: Sisältö
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tämä julkaisu on lisenssoitu :LICENSE_NAME julkaisijan toimesta.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Jotkut oikeudet pidätetään.
+  verbose: >-
+    Paitsi jos erikseen mainitaan on kaikki sisältö Creative Commons Attribution 4.0 International (CC BY 4.0) Lisensoitu kirjoittajan toimesta.
+
+meta: Käytetään :PLATFORM iä Teema :THEME.
+
+not_found:
+  statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
+
+notification:
+  update_found: Uusi versio sisällöstä on saatavilla.
+  update: Päivitä
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Kirjoittaja
+  posted: Julkaistu
+  updated: Päivitetty
+  words: sanaa
+  pageview_measure: katselukertoja
+  read_time:
+    unit: minuuttia
+    prompt: lukea
+  relate_posts: Jatka lukemista
+  share: Jaa
+  button:
+    next: Uudempi
+    previous: Vanhempi
+    copy_code:
+      succeed: Kopiotu!
+    share_link:
+      title: Kopioi linkki
+      succeed: Linkki kopioitu onnistuneesti!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Kiinnitetty
+
+# 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: kategoria
+    plural: kategoriat
+  post_measure:
+    singular: julkaisu
+    plural: julkaisut

_data/locales/hu-HU.yml

@@ -0,0 +1,81 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Bejegyzés
+  category: Kategória
+  tag: Címke
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Kezdőlap
+  categories: Kategóriák
+  tags: Címkék
+  archives: Archívum
+  about: Rólam
+
+# the text displayed in the search bar & search results
+search:
+  hint: keresés
+  cancel: Mégse
+  no_results: Oops! Nincs találat a keresésre.
+
+panel:
+  lastmod: Legutóbb frissítve
+  trending_tags: Népszerű Címkék
+  toc: Tartalom
+  links: Blog linkek
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: A bejegyzés :LICENSE_NAME licenccel rendelkezik.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Néhány jog fenntartva.
+  verbose: >-
+   Az oldalon található tartalmak
+   Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
+   hacsak másképp nincs jelezve.
+
+meta: Készítve :PLATFORM motorral :THEME témával.
+
+not_found:
+  statment: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
+
+notification:
+  update_found: Elérhető a tartalom új verziója.
+  update: Frissítés
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Szerző
+  posted: Létrehozva
+  updated: Frissítve
+  words: szó
+  pageview_measure: látogató
+  read_time:
+    unit: perc
+    prompt: elolvasni
+  relate_posts: További olvasnivaló
+  share: Megosztás
+  button:
+    next: Újabb
+    previous: Régebbi
+    copy_code:
+      succeed: Másolva!
+    share_link:
+      title: Link másolása
+      succeed: Link sikeresen másolva!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Kitűzve
+
+# categories page
+categories:
+  category_measure: kategória
+  post_measure: bejegyzés

_data/locales/it-IT.yml

@@ -0,0 +1,93 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categoria
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Pagina principale
+  categories: Categorie
+  tags: Tags
+  archives: Archivio
+  about: Informazioni
+
+# the text displayed in the search bar & search results
+search:
+  hint: ricerca
+  cancel: Cancella
+  no_results: Oops! La ricerca non ha fornito risultati.
+
+panel:
+  lastmod: Aggiornati recentemente
+  trending_tags: Tags più cliccati
+  toc: Contenuti
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Questo post è sotto licenza :LICENSE_NAME a nome dell'autore.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alcuni diritti riservati.
+  verbose: >-
+    Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto
+    i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0).
+
+
+meta: Servizio offerto da :PLATFORM con tema :THEME.                                       
+not_found:
+  statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
+
+notification:
+  update_found: Nuova versione del contenuto disponibile.
+  update: Aggiornamento
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Da
+  posted: Postato
+  updated: Aggiornato
+  words: parole
+  pageview_measure: visioni
+  read_time:
+    unit: min
+    prompt: lettura
+  relate_posts: Continua a leggere
+  share: Condividi
+  button:
+    next: Più recenti
+    previous: Meno recenti
+    copy_code:
+      succeed: Copiato!
+    share_link:
+      title: Copia link
+      succeed: Link copiato con successo!
+  # pinned prompt of posts list on homepage
+  pin_prompt: In alto
+
+# 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: categoria
+    plural: categorie
+  post_measure:
+    singular: post
+    plural: posts

_data/locales/ko-KR.yml

@@ -73,6 +73,13 @@ post:
   # pinned prompt of posts list on homepage
   pin_prompt: 핀
 
+# 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: 카테고리

_data/locales/tr-TR.yml

@@ -0,0 +1,79 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Gönderi
+  category: Kategori
+  tag: Etiket
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Ana Sayfa
+  categories: Kategoriler
+  tags: Etiketler
+  archives: Arşiv
+  about: Hakkında
+
+# the text displayed in the search bar & search results
+search:
+  hint: Ara...
+  cancel: İptal
+  no_results: Hop! Öyle bir şey bulamadım.
+
+panel:
+  lastmod: Yeni Güncellendi
+  trending_tags: Yükselen Etiketler
+  toc: İçindekiler
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Bu gönderi :LICENSE_NAME lisansı altındadır.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/deed.tr
+
+  # Displayed in the footer
+  brief: Bazı hakları saklıdır.
+  verbose: >-
+    Aksi belirtilmediği sürece, bu sitedeki gönderiler Creative Commons Atıf 4.0 Uluslararası (CC BY 4.0) Lisansı altındadır.
+    Kısaca sayfa linkini de vererek paylaşabilir veya düzenleyip paylaşabilirsin.
+
+meta: :PLATFORM ve :THEME teması.
+
+not_found:
+  statment: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
+
+notification:
+  update_found: İçeriğin yeni bir sürümü mevcut.
+  update: Güncelle
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Yazan
+  posted: Gönderilme Tarihi
+  updated: Güncellenme Tarihi
+  words: sözcük
+  pageview_measure: görüntülenme
+  read_time:
+    unit: dakikada
+    prompt: okunabilir
+  relate_posts: Benzer Gönderiler
+  share: Paylaş
+  button:
+    next: İleri
+    previous: Geri
+    copy_code:
+      succeed: Kopyalandı.
+    share_link:
+      title: Linki kopyala
+      succeed: Link kopyalandı.
+  # pinned prompt of posts list on homepage
+  pin_prompt: Sabitlendi
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: gönderi

_data/locales/zh-CN.yml

@@ -72,6 +72,13 @@ post:
   # pinned prompt of posts list on homepage
   pin_prompt: 顶置
 
+# 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: 个分类

_includes/comments/disqus.html

@@ -15,7 +15,6 @@
   };
 
   /* Lazy loading */
-
   var disqus_observer = new IntersectionObserver(function (entries) {
     if(entries[0].isIntersecting) {
         (function () {
@@ -32,8 +31,9 @@
   disqus_observer.observe(document.querySelector('#disqus_thread'));
 
   /* Auto switch theme */
-
   function reloadDisqus() {
+    if (event.source === window && event.data &&
+      event.data.direction === ModeToggle.ID) {
       /* Disqus hasn't been loaded */
       if (typeof DISQUS === "undefined") {
         return;
@@ -43,12 +43,12 @@
         DISQUS.reset({ reload: true, config: disqus_config });
       }
     }
+  }
 
   const modeToggle = document.querySelector(".mode-toggle");
 
   if (typeof modeToggle !== "undefined") {
-    /*  modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme'  */
+    window.addEventListener("message", reloadDisqus);
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
   }
 
 </script>

_includes/comments/giscus.html

@@ -20,7 +20,7 @@
       "data-category": "{{ site.comments.giscus.category }}",
       "data-category-id": "{{ site.comments.giscus.category_id }}",
       "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
-      "data-reactions-enabled": "1",
+      "data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
       "data-emit-metadata": "0",
       "data-theme": initTheme,
       "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",

_includes/datetime.html

@@ -4,14 +4,8 @@
 -->
 
 {% assign wrap_elem = include.wrap | default: 'em' %}
-
+{% assign df_strftime = site.data.locales[site.lang].df.post.strftime | default: '%d/%m/%Y' %}
-{% if site.prefer_datetime_locale == 'en' or lang == 'en' %}
+{% assign df_dayjs = site.data.locales[site.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
-  {% assign df_strftime = '%b %e, %Y' %}
-  {% assign df_dayjs = 'll' %}
-{% else %}
-  {% assign df_strftime = '%F' %}
-  {% assign df_dayjs = 'YYYY-MM-DD' %}
-{% endif %}
 
 <{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}"
     data-ts="{{ include.date | date: '%s' }}"

_includes/embed/twitch.html

@@ -0,0 +1,4 @@
+<iframe class="embed-video twitch lazyload"
+  src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
+  frameborder="0" allowfullscreen="true"
+  scrolling="no"></iframe>

_includes/embed/youtube.html

@@ -0,0 +1,6 @@
+<iframe class="embed-video youtube lazyload"
+  src="https://www.youtube.com/embed/{{ include.id }}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen></iframe>

_includes/footer.html

@@ -1,36 +1,36 @@
 <!-- The Footer -->
 
-<footer class="row pl-3 pr-3">
+<footer>
-  <div class="col-12 d-flex justify-content-between align-items-center text-muted pl-0 pr-0">
+  <div class="container pl-lg-4 pr-lg-4">
+    <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
       <div class="footer-left">
         <p class="mb-0">
           © {{ 'now' | date: "%Y" }}
           <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.locales[lang].copyright.brief %}
+          {% if site.data.locales[site.lang].copyright.brief %}
           <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
+            title="{{ site.data.locales[site.lang].copyright.verbose }}">{{ site.data.locales[site.lang].copyright.brief }}</span>
           {% endif %}
         </p>
       </div>
 
       <div class="footer-right">
         <p class="mb-0">
-        {% capture _platform %}
+
+          {%- capture _platform -%}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {% endcapture %}
+          {%- endcapture -%}
 
-        {% capture _theme %}
+          {%- capture _theme -%}
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-        {% endcapture %}
+          {%- endcapture -%}
 
-        {{ site.data.locales[lang].meta
+          {{ site.data.locales[site.lang].meta
-          | default: 'Powered by :PLATFORM with :THEME theme.'
+            | default: 'Using the :PLATFORM theme :THEME.'
             | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
           }}
-
         </p>
       </div>
-
     </div>
-
+  </div>
 </footer>

_includes/head.html

@@ -6,11 +6,6 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-  <!-- Allow having a localized datetime different from the appearance language -->
-  {% if site.prefer_datetime_locale %}
-    <meta name="prefer-datetime-locale" content="{{ site.prefer_datetime_locale }}">
-  {% endif %}
-
   {% if page.layout == 'home' or page.layout == 'post' %}
 
     {% if site.google_analytics.pv.proxy_endpoint %}
@@ -27,23 +22,27 @@
     {% seo title=false %}
   {% endcapture %}
 
-  {% if site.img_cdn and seo_tags contains 'og:image' %}
+  {% if page.image %}
-    {% assign properties = 'og:image,twitter:image' | split: ',' %}
+    {% assign img = page.image.path | default: page.image %}
+
+    {% unless img contains '://' %}
+      {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
+      {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
 
-    {% for prop in properties %}
       {% if site.img_cdn contains '//' %}
-        <!-- `site.img_cdn` is a cross-origin URL -->
+        <!-- it's a cross-origin URL -->
-        {% capture target %}<meta property="{{ prop }}" content="{{ site.url }}{% endcapture %}
+        {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
-        {% capture replacement %}<meta property="{{ prop }}" content="{{ site.img_cdn }}{% endcapture %}
       {% else %}
-        <!-- `site.img_cdn` is a local file path -->
+        <!-- it's a local file path -->
-        {% capture target %}<meta property="{{ prop }}" content="{{ site.url }}{{ site.baseurl }}{% endcapture %}
+        {%- capture replacement -%}
-        {% assign replacement = target | append: site.img_cdn %}
+          "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
+        {%- endcapture -%}
       {% endif %}
 
       {% assign seo_tags = seo_tags | replace: target, replacement %}
 
-    {% endfor %}
+    {% endunless %}
+
   {% endif %}
 
   {{ seo_tags }}

_includes/js-selector.html

@@ -15,12 +15,11 @@
 {% if page.layout == 'post' or page.layout == 'page' %}
   <!-- image lazy-loading & popup & clipboard -->
   {% assign _urls = site.data.assets[origin].magnific-popup.js
-      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].lazysizes.js
       | append: ',' | append: site.data.assets[origin].clipboard.js
   %}
 
   {% include jsdelivr-combine.html urls=_urls %}
-
 {% endif %}
 
 {% if page.layout == 'home'
@@ -29,11 +28,7 @@
     or page.layout == 'category'
     or page.layout == 'tag' %}
 
-  {% if site.prefer_datetime_locale %}
-    {% assign locale = site.prefer_datetime_locale | downcase %}
-  {% else %}
   {% assign locale = site.lang | split: '-' | first %}
-  {% endif %}
 
   {% assign _urls = site.data.assets[origin].dayjs.js.common
       | append: ',' | append: site.data.assets[origin].dayjs.js.locale

_includes/lang.html

@@ -1,8 +0,0 @@
-{% comment %}
-Detect appearance language and return it through variable "lang"
-{% endcomment %}
-{% if site.data.locales[site.lang] %}
-  {% assign lang = site.lang %}
-{% else %}
-  {% assign lang = 'en' %}
-{% endif %}

_includes/mermaid.html

@@ -5,7 +5,8 @@
 <script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
 
 <script>
-  $(function() {
+  (function () {
+
     function updateMermaid(event) {
       if (event.source === window && event.data &&
         event.data.direction === ModeToggle.ID) {
@@ -16,11 +17,11 @@
           return;
         }
 
-        let expectedTheme = (mode === ModeToggle.DARK_MODE? "dark" : "default");
+        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
-        let config = { theme: expectedTheme };
+        let config = {theme: expectedTheme};
 
         /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function() {
+        $(".mermaid").each(function () {
           let svgCode = $(this).prev().children().html();
           $(this).removeAttr("data-processed");
           $(this).html(svgCode);
@@ -35,7 +36,7 @@
 
     if ($("html[data-mode=dark]").length > 0
       || ($("html[data-mode]").length == 0
-        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
       initTheme = "dark";
     }
 
@@ -43,15 +44,16 @@
       theme: initTheme  /* <default|dark|forest|neutral> */
     };
 
-    /* Markdown converts to HTML */
+    /* Create mermaid tag */
-    $("pre").has("code.language-mermaid").each(function() {
+    $("pre").has("code.language-mermaid").each(function () {
       let svgCode = $(this).children().html();
       $(this).addClass("unloaded");
-      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
     });
 
     mermaid.initialize(mermaidConf);
 
     window.addEventListener("message", updateMermaid);
-  });
+  })();
+
 </script>

_includes/post-nav.html

@@ -5,24 +5,24 @@
 <div class="post-navigation d-flex justify-content-between">
   {% if page.previous.url %}
   <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[lang].post.button.previous }}">
+    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
   <div class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[lang].post.button.previous }}">
+    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
     <p>-</p>
   </div>
   {% endif %}
 
   {% if page.next.url %}
   <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[lang].post.button.next }}">
+    prompt="{{ site.data.locales[site.lang].post.button.next }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
   <div class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[lang].post.button.next }}">
+    prompt="{{ site.data.locales[site.lang].post.button.next }}">
     <p>-</p>
   </div>
   {% endif %}

_includes/post-paginator.html

@@ -2,7 +2,7 @@
   The paginator for post list on HomgPage.
 -->
 
-<ul class="pagination align-items-center mt-4 mb-5 pl-lg-2">
+<ul class="pagination align-items-center mt-4 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}

_includes/post-sharing.html

@@ -3,10 +3,10 @@
 -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.locales[lang].post.share }}</span>
+  <span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
-    {% assign title = title | url_encode %}
+    {% assign title = title | uri_escape %}
     {% assign url = page.url | absolute_url | url_encode %}
 
     {% for share in site.data.share.platforms %}
@@ -19,8 +19,8 @@
 
     <i id="copy-link" class="fa-fw fas fa-link small"
         data-toggle="tooltip" data-placement="top"
-        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        title="{{ site.data.locales[site.lang].post.button.share_link.title }}"
-        data-title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
+        data-title-succeed="{{ site.data.locales[site.lang].post.button.share_link.succeed }}">
     </i>
 
   </span>

_includes/read-time.html

@@ -16,13 +16,13 @@
 {% endunless %}
 
 {% capture read_prompt %}
-  {{- site.data.locales[lang].post.read_time.prompt -}}
+  {{- site.data.locales[site.lang].post.read_time.prompt -}}
 {% endcapture %}
 
 <!-- return element -->
 <span class="readtime" data-toggle="tooltip" data-placement="bottom"
-  title="{{ words }} {{ site.data.locales[lang].post.words }}">
+  title="{{ words }} {{ site.data.locales[site.lang].post.words }}">
-  <em>{{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}</em>
+  <em>{{- read_time -}}{{" "}}{{- site.data.locales[site.lang].post.read_time.unit -}}</em>
   {%- if include.prompt -%}
     {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
     {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}

_includes/refactor-content.html

@@ -31,11 +31,15 @@
   %}
 {% endif %}
 
-<!-- Add attribute 'hide-bullet' to the checkbox list -->
+<!-- Change the icon of checkbox -->
-
+{% if _content contains '<input type="checkbox"' %}
-{% if _content contains '<li class="task-list-item"><' %}
   {% assign _content = _content
-    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+    | replace:
+        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
+        '<i class="fas fa-check-circle fa-fw checked"></i>'
+    | replace:
+        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
+        '<i class="far fa-circle fa-fw"></i>'
   %}
 {% endif %}
 
@@ -47,31 +51,52 @@
   {% assign _img_content = nil %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
+  <!-- CDN URL -->
+  {% if site.img_cdn %}
+    {% if site.img_cdn contains '//' %}
+      {% assign _path_prefix = site.img_cdn %}
+    {% else %}
+      {% assign _path_prefix = site.img_cdn | relative_url %}
+    {% endif %}
+  {% else %}
+    {% assign _path_prefix = site.baseurl %}
+  {% endif %}
+
+  <!-- Add image path -->
+  {% if page.img_path %}
+    {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
+    {% assign _path_prefix = _path_prefix | append: _path %}
+  {% endif %}
+
   {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
       {% assign _img_content = _img_snippet %}
       {% continue %}
     {% endif %}
 
-    {% assign _width = nil %}
-    {% assign _height = nil %}
-    {% assign _src = nil %}
-
     {% assign _left = _img_snippet | split: '>' | first %}
     {% assign _right = _img_snippet | remove: _left %}
 
-    {% assign _left = _left | remove: ' /' %}
+    {% unless _left contains 'src=' %}
-    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+      {% continue %}
-    {% assign _attrs = _left | split: ' ' %}
+    {% endunless %}
+
+    {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: '" ' %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _lqip = nil %}
+    {% assign _class = nil %}
 
     {% for _attr in _attrs %}
-      {% assign _pair = _attr | split: '=' %}
+      {% unless _attr contains '=' %}
-      {% if _pair.size < 2 %}
         {% continue %}
-      {% endif %}
+      {% endunless %}
 
+      {% assign _pair = _attr | remove: '"' | split: '=' %}
       {% capture _key %}{{ _pair | first }}{% endcapture %}
-      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
+      {% capture _value %}{{ _pair | last }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
@@ -80,68 +105,91 @@
           {% assign _height = _value %}
         {% when 'src' %}
           {% assign _src = _value %}
+        {% when 'lqip' %}
+          {% assign _lqip = _value %}
+        {% when 'class' %}
+          {% assign _class = _value %}
       {% endcase %}
 
-      {% if _width and _height and _src %}
-        {% break %}
-      {% endif %}
     {% endfor %}
 
-    {% if _src %}
+    <!-- take out classes -->
-      {% unless _src contains '://' %}
+    {% if _class %}
-
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
-        <!-- Add CDN URL -->
+      {% assign _left = _left | remove: _old_class %}
-        {% if site.img_cdn %}
-          {% if site.img_cdn contains '//' %}
-            {% assign _src_prefix = site.img_cdn %}
-          {% else %}
-            {% assign _src_prefix = site.img_cdn | relative_url %}
-          {% endif %}
-        {% else %}
-          {% assign _src_prefix = site.baseurl %}
     {% endif %}
 
-        <!-- Add image path -->
+    {% assign _final_src = nil %}
-        {% if page.img_path %}
-          {% assign _path = page.img_path %}
-          {% assign last_char = _path | slice: -1 %}
 
-          {% unless last_char == '/' %}
+    {% unless _src contains '//' %}
-            {% assign _path = _path | append: '/' %}
+      {% assign _final_src = _path_prefix | append: _src %}
+      {% capture _src_from %}"{{ _src }}"{% endcapture %}
+      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
+      {% assign _left = _left | replace: _src_from, _src_to %}
     {% endunless %}
 
-          {% assign _src_prefix = _src_prefix | append: _path %}
+    {% if _lqip %}
+      {% unless _lqip contains ':' %}
+        {% assign _final_lqip = _path_prefix | append: _lqip %}
+        {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
+        {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
+        {% assign _left = _left | replace: _lqip_from, _lqip_to %}
+      {% endunless %}
     {% endif %}
 
-        {% assign _final_src = _src_prefix | append: _src %}
+    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
-        {% assign _left = _left | replace: _src, _final_src %}
-
-      {% endunless %}
-
-      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-
     {% assign _left = _left | replace: 'src=', 'data-src=' %}
-
+    {% if _left contains 'class=' %}
+      {% assign _left = _left | replace: 'class="', 'class="lazyload '%}
+    {% else %}
+      {% assign _left = _left | append: ' class="lazyload"' %}
     {% endif %}
 
-    <!-- Add SVG placehoder to prevent layout reflow -->
+    <!-- add image placeholder -->
-
+    {% if _lqip %}
+      {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
+    {% else %}
       {% if _width and _height %}
+        <!-- add SVG placehoder -->
         {%- capture _svg -%}
           src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width  }} {{ _height }}'%3E%3C/svg%3E"
         {%- endcapture -%}
-
         {% assign _left =  _svg | append: ' ' | append: _left %}
+        {% assign _class = _class | append: ' shimmer' %}
+      {% endif %}
     {% endif %}
 
     <!-- Bypass the HTML-proofer test -->
     {% assign _left = _left | append: ' data-proofer-ignore' %}
 
+    <!-- make sure the `<img>` is wrapped by `<a>` -->
+    {% assign _parent = _right | slice: 1, 4 %}
+
+    {% if _parent == '</a>' %}
+      <!-- add class to exist <a> tag -->
+      {% assign _size = _img_content | size | minus: 1 %}
+      {% capture _class %}
+        class="img-link{% unless _lqip %} shimmer{% endunless %}"
+      {% endcapture %}
+      {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+
+    {% else %}
+      <!-- create the image wrapper -->
+      {%- capture _wrapper_start -%}
+        <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
+      {%- endcapture -%}
+      {% assign _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></a' %}
+    {% endif %}
+
+    <!-- combine -->
     {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
+  {% if _img_content %}
     {% assign _content = _img_content %}
+  {% endif %}
 
 {% endif %}
 
@@ -177,7 +225,7 @@
           | append: '<div class="code-header">'
           | append: _label
           | append: '<button aria-label="copy" data-title-succeed="'
-          | append: site.data.locales[lang].post.button.copy_code.succeed
+          | append: site.data.locales[site.lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'
       %}
@@ -214,7 +262,7 @@
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
-      {% assign left = left | replace: '">', '"><span class="mr-2">' | append: '</span>' %}
+      {% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
 
       {% assign _new_content = _new_content | append: mark_start
           | append: left | append: anchor | append: right
@@ -229,54 +277,6 @@
 
 {% assign _content = _heading_content %}
 
-<!-- Wrap prompt element of blockquote with the <div> tag -->
-
-{% assign blockquote_start = '<blockquote class=' %}
-{% assign blockquote_end = '</blockquote>' %}
-{% assign cls_prefix = 'prompt-' %}
-
-{% if _content contains blockquote_start %}
-
-  {% assign _prompt_content = nil %}
-  {% assign _prompt_snippets = _content | split: blockquote_start %}
-
-  {% for _snippet in _prompt_snippets %}
-
-    {% if forloop.first %}
-      {% assign _prompt_content =  _snippet %}
-      {% continue %}
-    {% endif %}
-
-    {% assign left = _snippet | split: blockquote_end | first %}
-    {% assign right = _snippet | slice: left.size, _snippet.size %}
-
-    {% assign cls_str = left | split: '>' | first %}
-    {% assign cls_array = cls_str | remove: '"' | split: ' ' %}
-    {% assign is_prompt = false %}
-
-    {% for cls in cls_array %}
-      {% if cls contains cls_prefix %}
-        {% assign is_prompt = true %}
-        {% break %}
-      {% endif %}
-    {% endfor %}
-
-    {% unless is_prompt %}
-      {% assign _prompt_content = _prompt_content | append: blockquote_start | append: _snippet %}
-      {% continue %}
-    {% endunless %}
-
-    {% assign left = left | slice: cls_str.size, left.size %}
-    {% assign left = cls_str | append: '><div' | append: left | append: '</div>' %}
-
-    {% assign _prompt_content = _prompt_content | append: blockquote_start | append: left | append: right %}
-
-  {% endfor %}
-
-  {% assign _content = _prompt_content %}
-
-{% endif %}
-
 <!-- return -->
 
 {{ _content }}

_includes/related-posts.html

@@ -76,9 +76,9 @@
 {% endif %}
 
 {% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
+  <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mt-1 mb-4 ml-1"
+    <h3 class="pt-2 mb-4 ml-1"
-      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
+      data-toc-skip>{{ site.data.locales[site.lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}

_includes/search-loader.html

@@ -14,7 +14,7 @@
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[site.lang].search.no_results }}</p>{% endcapture %}
 
 <script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
 

_includes/sidebar.html

@@ -21,7 +21,7 @@
       </a>
     </div>
 
-    <div class="site-title mt-3">
+    <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
     <div class="site-subtitle font-italic">{{ site.tagline }}</div>
@@ -34,7 +34,7 @@
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
+        <span>{{ site.data.locales[site.lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
@@ -44,7 +44,7 @@
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+        <span>{{ site.data.locales[site.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
     {% endfor %}
@@ -81,7 +81,17 @@
 
       {% if url %}
       <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+        {% assign link_types = nil %}
+        {% unless entry.noblank %}
+          {% assign link_types = link_types | append: " noopener" %}
+          target="_blank"
+        {% endunless %}
+
+        {% if entry.type == 'mastodon' %}
+          {% assign link_types = link_types | append: " me" %}
+        {% endif %}
+
+        {% if link_types %}rel="{{ link_types | lstrip }}"{% endif %}>
         <i class="{{ entry.icon }}"></i>
       </a>
       {% endif %}

_includes/toc.html

@@ -10,7 +10,7 @@
 <script src="{{ site.data.assets[origin].bootstrap-toc.js | relative_url }}"></script>
 
 <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
+  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
   <nav id="toc" data-toggle="toc"></nav>
 </div>
 {% endif %}

_includes/topbar.html

@@ -10,7 +10,7 @@
 
     {% if paths.size == 0 or page.layout == 'home' %}
       <!-- index page -->
-      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
+      <span>{{ site.data.locales[site.lang].tabs.home | capitalize }}</span>
 
     {% else %}
 
@@ -19,14 +19,14 @@
         {% if forloop.first %}
           <span>
             <a href="{{ '/' | relative_url }}">
-              {{ site.data.locales[lang].tabs.home | capitalize }}
+              {{ site.data.locales[site.lang].tabs.home | capitalize }}
             </a>
           </span>
 
         {% elsif forloop.last %}
 
           {% if page.collection == 'tabs' %}
-            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
+            <span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
           {% else %}
             <span>{{ page.title }}</span>
           {% endif %}
@@ -34,7 +34,7 @@
         {% elsif page.layout == 'category' or page.layout == 'tag' %}
           <span>
             <a href="{{ item | relative_url }}">
-              {{ site.data.locales[lang].tabs[item] | default: page.title }}
+              {{ site.data.locales[site.lang].tabs[item] | default: page.title }}
             </a>
           </span>
         {% endif %}
@@ -49,12 +49,12 @@
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.data.locales[lang].title | default: site.title -}}
+        {{- site.data.locales[site.lang].title | default: site.title -}}
       {% elsif page.collection == 'tabs' or page.layout == 'page' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
+        {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
+        {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
@@ -62,9 +62,9 @@
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
-        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | capitalize }}...">
     </span>
-    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
+    <span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel }}</span>
   </div>
 
 </div>

_includes/trending-tags.html

@@ -37,7 +37,7 @@
 
 {% if trending_tags.size > 0 %}
   <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[lang].panel.trending_tags -}}</div>
+    <div class="panel-heading">{{- site.data.locales[site.lang].panel.trending_tags -}}</div>
     <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
     {% for tag_name in trending_tags %}

_includes/update-list.html

@@ -26,7 +26,7 @@
 {% if update_list.size > 0 %}
 
   <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[lang].panel.lastmod -}}</div>
+    <div class="panel-heading">{{- site.data.locales[site.lang].panel.lastmod -}}</div>
     <ul class="post-content pl-0 pb-1 ml-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: "::" | last | plus: 0 %}

_javascript/commons/back-to-top.js

@@ -1,6 +1,6 @@
-/*
+/**
-Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
+ * Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
-*/
+ */
 $(function() {
     $(window).scroll(() => {
         if ($(this).scrollTop() > 50 &&

_javascript/commons/mode-toggle.js

@@ -1,7 +1,7 @@
-/*
+/**
  * Listener for theme mode toggle
  */
-$(function() {
+$(function () {
     $(".mode-toggle").click((e) => {
         const $target = $(e.target);
         let $btn = ($target.prop("tagName") === "button".toUpperCase() ?

_javascript/commons/scroll-helper.js

@@ -18,7 +18,9 @@ const ScrollHelper = (function () {
 
         addScrollUpTask: () => {
             scrollUpCount += 1;
-      if (!topbarLocked) { topbarLocked = true; }
+            if (!topbarLocked) {
+                topbarLocked = true;
+            }
         },
         popScrollUpTask: () => scrollUpCount -= 1,
         hasScrollUpTask: () => scrollUpCount > 0,

_javascript/commons/search-display.js

@@ -1,8 +1,8 @@
-/*
+/**
-* This script make #search-result-wrapper switch to unloaded or shown automatically.
+ * This script make #search-result-wrapper switch to unloaded or shown automatically.
-*/
+ */
 
-$(function() {
+$(function () {
     const btnSbTrigger = $("#sidebar-trigger");
     const btnSearchTrigger = $("#search-trigger");
     const btnCancel = $("#search-cancel");
@@ -91,22 +91,22 @@ $(function() {
         return btnCancel.hasClass("loaded");
     }
 
-  btnSearchTrigger.click(function() {
+    btnSearchTrigger.click(function () {
         mobileSearchBar.on();
         resultSwitch.on();
         input.focus();
     });
 
-  btnCancel.click(function() {
+    btnCancel.click(function () {
         mobileSearchBar.off();
         resultSwitch.off();
     });
 
-  input.focus(function() {
+    input.focus(function () {
         searchWrapper.addClass("input-focus");
     });
 
-  input.focusout(function() {
+    input.focusout(function () {
         searchWrapper.removeClass("input-focus");
     });
 

_javascript/commons/sidebar.js

@@ -2,8 +2,7 @@
  * Expand or close the sidebar in mobile screens.
  */
 
-$(function() {
+$(function () {
-
     const sidebarUtil = (function () {
         const ATTR_DISPLAY = "sidebar-display";
         let isExpanded = false;
@@ -26,5 +25,4 @@ $(function() {
     $("#sidebar-trigger").click(sidebarUtil.toggle);
 
     $("#mask").click(sidebarUtil.toggle);
-
 });

_javascript/commons/tooltip-loader.js

@@ -1,6 +1,6 @@
 /**
  * Initial Bootstrap Tooltip.
-*/
+ */
 $(function () {
     $("[data-toggle=\"tooltip\"]").tooltip();
 });

_javascript/commons/topbar-switcher.js

@@ -1,8 +1,8 @@
-/*
+/**
  * Hide Header on scroll down
  */
 
-$(function() {
+$(function () {
     const $searchInput = $("#search-input");
     const delta = ScrollHelper.getTopbarHeight();
 
@@ -17,7 +17,7 @@ $(function() {
             return;
         }
 
-    if (st > lastScrollTop ) { // Scroll Down
+        if (st > lastScrollTop) { // Scroll Down
             ScrollHelper.hideTopbar();
 
             if ($searchInput.is(":focus")) {
@@ -66,7 +66,7 @@ $(function() {
 
     } else {
         // for the browsers that not support `window.screen.orientation` API
-    $(window).on("orientationchange",() => {
+        $(window).on("orientationchange", () => {
             if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
                 handleLandscape();
             }
@@ -86,5 +86,4 @@ $(function() {
             didScroll = false;
         }
     }, 250);
-
 });

_javascript/commons/topbar-title.js

@@ -1,8 +1,8 @@
-/*
+/**
  * Top bar title auto change while scrolling up/down in mobile screens.
-*/
+ */
 
-$(function() {
+$(function () {
     const titleSelector = "div.post>h1:first-of-type";
     const $pageTitle = $(titleSelector);
     const $topbarTitle = $("#topbar-title");
@@ -60,7 +60,7 @@ $(function() {
     observer.observe(document.querySelector(titleSelector));
 
     /* Click title will scroll to top */
-  $topbarTitle.click(function() {
+    $topbarTitle.click(function () {
         $("body,html").animate({scrollTop: 0}, 800);
     });
 

_javascript/copyright

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_javascript/utils/category-collapse.js

@@ -1,8 +1,8 @@
-/*
+/**
  * Tab 'Categories' expand/close effect.
  */
 
-$(function() {
+$(function () {
     const childPrefix = "l_";
     const parentPrefix = "h_";
     const collapse = $(".collapse");
@@ -18,7 +18,7 @@ $(function() {
     });
 
     /* expand the top category */
-  collapse.on("show.bs.collapse", function() {
+    collapse.on("show.bs.collapse", function () {
         const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
         if (parentId) {
             $(`#${parentId} .far.fa-folder`).attr("class", "far fa-folder-open fa-fw");

_javascript/utils/checkbox.js

@@ -1,12 +0,0 @@
-/*
- * Create a more beautiful checkbox
- */
-
-$(function() {
-  /* hide browser default checkbox */
-  $("input[type=checkbox]").addClass("unloaded");
-  /* create checked checkbox */
-  $("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
-  /* create normal checkbox */
-  $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
-});

_javascript/utils/clipboard.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Clipboard functions
  *
  * Dependencies:
@@ -6,7 +6,7 @@
  *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
-$(function() {
+$(function () {
     const btnSelector = '.code-header>button';
     const ICON_SUCCESS = 'fas fa-check';
     const ATTR_TIMEOUT = 'timeout';

_javascript/utils/img-extra.js

@@ -1,34 +1,13 @@
 /**
-  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
+ * Set up image stuff
-  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+ */
-*/
 
-$(function() {
+(function() {
-
+    if ($('#core-wrapper img[data-src]') <= 0) {
-  const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
-
-  if ($(`${IMG_SCOPE} img`).length <= 0 ) {
         return;
     }
 
-  /* lazy loading */
+    /* See: <https://github.com/dimsemenov/Magnific-Popup> */
-
-  const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
-  const observer = lozad(imgList);
-  observer.observe();
-
-  /* popup */
-
-  $(`${IMG_SCOPE} p > img[data-src],${IMG_SCOPE} img[data-src].preview-img`).each(
-    function() {
-      let nextTag = $(this).next();
-      const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
-      const src = $(this).attr('data-src'); // created by lozad.js
-
-      $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
-    }
-  );
-
     $('.popup').magnificPopup({
         type: 'image',
         closeOnContentClick: true,
@@ -40,8 +19,10 @@ $(function() {
         }
     });
 
-  /* markup the image links */
+    /* Stop shimmer when image loaded */
+    document.addEventListener('lazyloaded', function(e) {
+        const $img = $(e.target);
+        $img.parent().removeClass('shimmer');
+    });
 
-  $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
+})();
-
-});

_javascript/utils/locale-datetime.js

@@ -6,9 +6,7 @@
 
 /* A tool for locale datetime */
 const LocaleHelper = (function () {
-  const $preferLocale = $('meta[name="prefer-datetime-locale"]');
+    const locale = $('html').attr('lang').substr(0, 2);
-  const locale = $preferLocale.length > 0 ?
-      $preferLocale.attr('content').toLowerCase() : $('html').attr('lang').substr(0, 2);
     const attrTimestamp = 'data-ts';
     const attrDateFormat = 'data-df';
 
@@ -22,7 +20,7 @@ const LocaleHelper = (function () {
 
 }());
 
-$(function() {
+$(function () {
     dayjs.locale(LocaleHelper.locale());
     dayjs.extend(window.dayjs_plugin_localizedFormat);
 

_javascript/utils/pageviews.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Count page views form GA or local cache file.
  *
  * Dependencies:
@@ -106,7 +106,7 @@ const PvStorage = (function () {
                 return;
             }
 
-      for(let i = 0; i < localStorage.length; i++){
+            for (let i = 0; i < localStorage.length; i++) {
                 const key = localStorage.key(i);
                 switch (key) {
                     case Keys.KEY_PV:
@@ -136,7 +136,7 @@ function countUp(min, max, destId) {
 function countPV(path, rows) {
     let count = 0;
 
-  if (typeof rows !== "undefined" ) {
+    if (typeof rows !== "undefined") {
         for (let i = 0; i < rows.length; ++i) {
             const gaPath = rows[parseInt(i, 10)][0];
             if (gaPath === path) { /* path format see: site.permalink */
@@ -172,7 +172,7 @@ function displayPageviews(data) {
     const rows = data.rows; /* could be undefined */
 
     if ($("#post-list").length > 0) { /* the Home page */
-    $(".post-preview").each(function() {
+        $(".post-preview").each(function () {
             const path = $(this).find("a").attr("href");
             tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
         });
@@ -215,7 +215,7 @@ function fetchLocalPageviews(hasCache = false) {
         });
 }
 
-$(function() {
+$(function () {
     if ($(".pageviews").length <= 0) {
         return;
     }

_javascript/utils/smooth-scroll.js

@@ -1,13 +1,13 @@
-/*
+/**
  Safari doesn't support CSS `scroll-behavior: smooth`,
  so here is a compatible solution for all browser to smooth scrolling
 
  See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
 
  Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
-*/
+ */
 
-$(function() {
+$(function () {
     const $topbarTitle = $("#topbar-title");
     const REM = 16; // in pixels
     const ATTR_SCROLL_FOCUS = "scroll-focus";
@@ -15,7 +15,7 @@ $(function() {
     $("a[href*='#']")
         .not("[href='#']")
         .not("[href='#0']")
-    .click(function(event) {
+        .click(function (event) {
             if (this.pathname.replace(/^\//, "") !==
                 location.pathname.replace(/^\//, "")) {
                 return;
@@ -28,7 +28,7 @@ $(function() {
             const hash = decodeURI(this.hash);
             let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
             let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
-      let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
+            let selector = hash.includes(":") ? hash.replace(/:/g, "\\:") : hash;
             let $target = $(selector);
 
             let isMobileViews = $topbarTitle.is(":visible");

_layouts/archives.html

@@ -3,46 +3,32 @@ layout: page
 # The Archives of posts.
 ---
 
-{% include lang.html %}
+{% assign df_strftime_m = site.data.locales[site.lang].df.archives.strftime | default: '/ %m' %}
+{% assign df_dayjs_m = site.data.locales[site.lang].df.archives.dayjs | default: '/ MM' %}
 
-{% if site.prefer_datetime_locale == 'en' or lang == 'en' %}
+<div id="archives" class="pl-xl-3">
-  {% assign df_strftime_m = '%b' %}
-  {% assign df_dayjs_m = 'MMM' %}
-{% else %}
-  {% assign df_strftime_m = '/ %m' %}
-  {% assign df_dayjs_m = '/ MM' %}
-{% endif %}
 
-<div id="archives" class="pl-xl-2">
 {% for post in site.posts %}
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+
-  {% if forloop.first %}
+  {% if cur_year != last_year %}
-    {% assign last_day = "" %}
+    {% unless forloop.first %}</ul>{% endunless %}
-    {% assign last_month = "" %}
+    <div class="year lead">{{ cur_year }}</div>
-  <span class="lead">{{this_year}}</span>
     <ul class="list-unstyled">
+    {% assign last_year = cur_year %}
   {% endif %}
+
   <li>
-      <div>
   {% assign ts = post.date | date: '%s' %}
-        <span class="date day" data-ts="{{ ts }}" data-df="DD">
+    <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-          {{ post.date | date: "%d" }}
+    <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
-        </span>
-        <span class="date month small text-muted" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
       {{ post.date | date: df_strftime_m }}
     </span>
     <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      </div>
   </li>
-  {% if forloop.last %}
+
-  </ul>
+  {% if forloop.last %}</ul>{% endif %}
-  {% elsif this_year != pre_year %}
+
-  </ul>
-  <span class="lead">{{pre_year}}</span>
-  <ul class="list-unstyled">
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  {% endif %}
 {% endfor %}
+
 </div>

_layouts/categories.html

@@ -3,8 +3,6 @@ layout: page
 # All the Categories of posts
 ---
 
-{% include lang.html %}
-
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
@@ -48,22 +46,22 @@ layout: page
           {% if sub_categories_size > 0 %}
             {{ sub_categories_size }}
             {% if sub_categories_size > 1 %}
-              {{ site.data.locales[lang].categories.category_measure.plural
+              {{ site.data.locales[site.lang].categories.category_measure.plural
-                | default: site.data.locales[lang].categories.category_measure }}
+                | default: site.data.locales[site.lang].categories.category_measure }}
             {% else %}
-              {{ site.data.locales[lang].categories.category_measure.singular
+              {{ site.data.locales[site.lang].categories.category_measure.singular
-                | default: site.data.locales[lang].categories.category_measure }}
+                | default: site.data.locales[site.lang].categories.category_measure }}
             {% endif %},
           {% endif %}
 
           {{ top_posts_size }}
 
           {% if top_posts_size > 1 %}
-            {{ site.data.locales[lang].categories.post_measure.plural
+            {{ site.data.locales[site.lang].categories.post_measure.plural
-              | default: site.data.locales[lang].categories.post_measure }}
+              | default: site.data.locales[site.lang].categories.post_measure }}
           {% else %}
-            {{ site.data.locales[lang].categories.post_measure.singular
+            {{ site.data.locales[site.lang].categories.post_measure.singular
-              | default: site.data.locales[lang].categories.post_measure }}
+              | default: site.data.locales[site.lang].categories.post_measure }}
           {% endif %}
         </span>
       </span>
@@ -99,11 +97,11 @@ layout: page
             {{ posts_size }}
 
             {% if posts_size > 1 %}
-              {{ site.data.locales[lang].categories.post_measure.plural
+              {{ site.data.locales[site.lang].categories.post_measure.plural
-                | default: site.data.locales[lang].categories.post_measure }}
+                | default: site.data.locales[site.lang].categories.post_measure }}
             {% else %}
-              {{ site.data.locales[lang].categories.post_measure.singular
+              {{ site.data.locales[site.lang].categories.post_measure.singular
-                | default: site.data.locales[lang].categories.post_measure }}
+                | default: site.data.locales[site.lang].categories.post_measure }}
             {% endif %}
           </span>
         </li>

_layouts/category.html

@@ -3,8 +3,6 @@ layout: page
 # The Category layout
 ---
 
-{% include lang.html %}
-
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>

_layouts/default.html

@@ -5,8 +5,6 @@ layout: compress
 
 <!DOCTYPE html>
 
-{% include lang.html %}
-
 {% include assets-origin.html %}
 
 {% capture prefer_mode %}
@@ -15,7 +13,8 @@ layout: compress
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang }}"{{ prefer_mode }}>
+<!-- `site.alt_lang` can specify a language different from the UI -->
+<html lang="{{ site.alt_lang | default: site.lang }}"{{ prefer_mode }}>
 
   {% include head.html %}
 
@@ -27,17 +26,15 @@ layout: compress
 
     <div id="main-wrapper" class="d-flex justify-content-center">
       <div id="main" class="container pl-xl-4 pr-xl-4">
-
         {{ content }}
-
-        {% include footer.html %}
-
       </div>
 
       {% include search-results.html %}
 
     </div> <!-- #main-wrapper -->
 
+    {% include footer.html %}
+
     {% if page.mermaid %}
       {% include mermaid.html %}
     {% endif %}
@@ -57,9 +54,9 @@ layout: compress
           </button>
         </div>
         <div class="toast-body text-center pt-0">
-          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
+          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[site.lang].notification.update_found }}</p>
           <button type="button" class="btn btn-primary" aria-label="Update">
-            {{ site.data.locales[lang].notification.update }}
+            {{ site.data.locales[site.lang].notification.update }}
           </button>
         </div>
       </div>

_layouts/home.html

@@ -3,8 +3,6 @@ layout: page
 # The Home page layout
 ---
 
-{% include lang.html %}
-
 {% assign pinned = site.posts | where: "pin", "true" %}
 {% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
 
@@ -79,7 +77,7 @@ layout: page
       {% if post.pin %}
       <div class="pin">
         <i class="fas fa-thumbtack fa-fw"></i>
-        <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+        <span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
       </div>
       {% endif %}
 

_layouts/page.html

@@ -2,8 +2,6 @@
 layout: default
 ---
 
-{% include lang.html %}
-
 {% include assets-origin.html %}
 
 <div class="row">
@@ -20,8 +18,9 @@ layout: default
       {% endif %}
     {% endcapture %}
 
-    {% if page.layout == 'page' or page.collection == 'tabs'%}
+    {% if page.layout == 'page' or page.collection == 'tabs' %}
-      {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+      {% assign tab_key = page.title | downcase %}
+      {% assign title = site.data.locales[site.lang].tabs[tab_key] | default: page.title %}
       <h1 class="dynamic-title">
         {{ title }}
       </h1>
@@ -35,7 +34,7 @@ layout: default
     </div>
   </div> <!-- #core-wrapper -->
 
-  <!-- pannel -->
+  <!-- panel -->
   <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
 
     <div class="access">
@@ -43,7 +42,7 @@ layout: default
       {% include trending-tags.html %}
     </div>
 
-    {% for _include in layout.pannel_includes %}
+    {% for _include in layout.panel_includes %}
       {% assign _include_path = _include | append: '.html' %}
       {% include {{ _include_path }} %}
     {% endfor %}
@@ -54,7 +53,7 @@ layout: default
 <!-- tail -->
 {% if layout.tail_includes %}
 <div class="row">
-  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4">
+  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4 mt-5">
     {% for _include in layout.tail_includes %}
       {% assign _include_path = _include | append: '.html' %}
       {% include {{ _include_path }} %}

_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 refactor: true
-pannel_includes:
+panel_includes:
   - toc
 tail_includes:
   - related-posts
@@ -9,72 +9,61 @@ tail_includes:
   - comments
 ---
 
-{% include lang.html %}
-
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted">
     <!-- published date -->
     <span>
-      {{ site.data.locales[lang].post.posted }}
+      {{ site.data.locales[site.lang].post.posted }}
       {% include datetime.html date=page.date tooltip=true %}
     </span>
 
     <!-- lastmod date -->
     {% if page.last_modified_at %}
     <span>
-      {{ site.data.locales[lang].post.updated }}
+      {{ site.data.locales[site.lang].post.updated }}
       {% include datetime.html date=page.last_modified_at tooltip=true %}
     </span>
     {% endif %}
 
-  {% if page.image.path %}
+  {% if page.image %}
-    {% capture bg %}
+    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-      {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+    {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
+
+    {% capture lqip %}
+      {% if page.image.lqip %}
+        lqip="{{ page.image.lqip }}"
+      {% endif %}
     {% endcapture %}
 
     <div class="mt-3 mb-3">
-      <img src="{{ page.image.path }}" class="preview-img {{ bg | strip }}"
+      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
-        alt="{{ page.image.alt | default: "Preview Image" }}"
+      {%- if page.image.alt -%}
-
+        <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {% if page.image.width %}
+      {%- endif -%}
-        width="{{ page.image.width }}"
-      {% elsif page.image.w %}
-        width="{{ page.image.w }}"
-      {% endif %}
-
-      {% if page.image.height %}
-        height="{{ page.image.height }}"
-      {% elsif page.image.h %}
-        height="{{ page.image.h }}"
-      {% endif %}>
-
-      {% if page.image.alt %}
-        <figcaption class="pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {% endif %}
-
     </div>
   {% endif %}
 
   <div class="d-flex justify-content-between">
-    <!-- author -->
+    <!-- author(s) -->
     <span>
-      {% capture author_name %}{{ site.data.authors[page.author].name | default: site.social.name }}{% endcapture %}
-      {% assign author_link = nil %}
-
       {% if page.author %}
-        {% assign author_link = site.data.authors[page.author].url %}
+        {% assign authors = page.author %}
-      {% elsif author_name == site.social.name %}
+      {% elsif page.authors %}
-        {% assign author_link = site.social.links[0] %}
+        {% assign authors = page.authors %}
       {% endif %}
 
-      {{ site.data.locales[lang].post.written_by }}
+      {{ site.data.locales[site.lang].post.written_by }}
 
       <em>
-        {% if author_link %}
+      {% if authors %}
-          <a href="{{ author_link }}">{{ author_name }}</a>
+        {% for author in authors %}
+          <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+          {% unless forloop.last %}</em>, <em>{% endunless %}
+        {% endfor %}
       {% else %}
-        {{ author_name }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
       {% endif %}
       </em>
     </span>
@@ -86,7 +75,7 @@ tail_includes:
         <em id="pv" class="pageviews">
           <i class="fas fa-spinner fa-spin fa-fw"></i>
         </em>
-        {{ site.data.locales[lang].post.pageview_measure }}
+        {{ site.data.locales[site.lang].post.pageview_measure }}
       </span>
       {% endif %}
 
@@ -132,15 +121,15 @@ tail_includes:
     d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
     <div class="license-wrapper">
 
-      {% if site.data.locales[lang].copyright.license.template %}
+      {% if site.data.locales[site.lang].copyright.license.template %}
 
         {% capture _replacement %}
-        <a href="{{ site.data.locales[lang].copyright.license.link }}">
+        <a href="{{ site.data.locales[site.lang].copyright.license.link }}">
-          {{ site.data.locales[lang].copyright.license.name }}
+          {{ site.data.locales[site.lang].copyright.license.name }}
         </a>
         {% endcapture %}
 
-        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+        {{ site.data.locales[site.lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
 
       {% endif %}
     </div>

_layouts/tag.html

@@ -3,8 +3,6 @@ layout: page
 # The layout for Tag page
 ---
 
-{% include lang.html %}
-
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>

_posts/2019-08-08-text-and-typography.md

@@ -8,14 +8,12 @@ math: true
 mermaid: true
 image:
   path: /commons/devices-mockup.png
-  width: 800
+  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
-  height: 500
   alt: Responsive rendering of Chirpy theme on multiple devices.
 ---
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
 
-
 ## Titles
 ---
 # H1 - heading
@@ -26,21 +24,10 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 <h4>H4 - heading</h4>
 ---
-<br>
 
 ## Paragraph
 
-I wandered lonely as a cloud
+Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.
-
-That floats on high o'er vales and hills,
-
-When all at once I saw a crowd,
-
-A host, of golden daffodils;
-
-Beside the lake, beneath the trees,
-
-Fluttering and dancing in the breeze.
 
 ## Lists
 
@@ -53,17 +40,15 @@ Fluttering and dancing in the breeze.
 ### Unordered list
 
 - Chapter
-  - Section
+  + Section
-    - Paragraph
+    * Paragraph
 
-### Task list
+### ToDo list
 
-- [ ] TODO
+- [ ] Job
-- [x] Completed
+  + [x] Step 1
-- [ ] Defeat COVID-19
+  + [x] Step 2
-  - [x] Vaccine production
+  + [ ] Step 3
-  - [ ] Economic recovery
-  - [ ] People smile again
 
 ### Description list
 
@@ -107,62 +92,6 @@ Moon
 
 Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
 
-## Images
-
-- Default (with caption)
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
-_Full screen width and center alignment_
-
-<br>
-
-- Shadow
-
-![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
-_shadow effect (visible in light mode)_
-
-<br>
-
-- Left aligned
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
-
-<br>
-
-- Float to left
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left}
-  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
-
-<br>
-
-- Float to right
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right}
-  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
-
-<br>
-
-## Mermaid SVG
-
-```mermaid
- gantt
-  title  Adding GANTT diagram functionality to mermaid
-  apple :a, 2017-07-20, 1w
-  banana :crit, b, 2017-07-23, 1d
-  cherry :active, c, after b a, 1d
-```
-
-## Mathematics
-
-The mathematics powered by [**MathJax**](https://www.mathjax.org/):
-
-$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
-
-When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
-
-$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
-
 ## Inline code
 
 This is an example of `Inline Code`.
@@ -171,7 +100,7 @@ This is an example of `Inline Code`.
 
 Here is the `/path/to/the/file.extend`{: .filepath}.
 
-## Code block
+## Code blocks
 
 ### Common
 
@@ -179,17 +108,7 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 This is a common code snippet, without syntax highlight and line number.
 ```
 
-### Specific Languages
+### Specific Language
-
-#### Console
-
-```console
-$ env |grep SHELL
-SHELL=/usr/local/bin/bash
-PYENV_SHELL=bash
-```
-
-#### Shell
 
 ```bash
 if [ $? -ne 0 ]; then
@@ -207,6 +126,58 @@ fi;
 ```
 {: file='_sass/jekyll-theme-chirpy.scss'}
 
+## Mathematics
+
+The mathematics powered by [**MathJax**](https://www.mathjax.org/):
+
+$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## Images
+
+### Default (with caption)
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
+_Full screen width and center alignment_
+
+### Left aligned
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+
+### Float to left
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Float to right
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Dark/Light mode & Shadow
+
+The image below will toggle dark/light mode based on theme preference, notice it has shadows.
+
+![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
+![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+
+## Video
+
+{% include embed/youtube.html id='Balreaj8Yqs' %}
+
 ## Reverse Footnote
 
 [^footnote]: The footnote source

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

@@ -7,7 +7,7 @@ tags: [writing]
 render_with_liquid: false
 ---
 
-This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
+This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.
 
 ## Naming and Path
 
@@ -48,7 +48,7 @@ tags: [bee]
 
 The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
 
-Add author information in `_data/authors.yml` (If your website doesn't have this file, don't hesitate to create one.)
+Adding author information in `_data/authors.yml` (If your website doesn't have this file, don't hesitate to create one).
 
 ```yaml
 <author_id>:
@@ -58,15 +58,21 @@ Add author information in `_data/authors.yml` (If your website doesn't have this
 ```
 {: file="_data/authors.yml" }
 
-And then set up the custom author in the post's YAML block:
+
+And then use `author` to specify a single entry or `authors` to specify multiple entries:
 
 ```yaml
 ---
-author: <author_id>
+author: <author_id>                     # for single entry
+# or
+authors: [<author1_id>, <author2_id>]   # for multiple entries
 ---
 ```
 
-> Another benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
+
+Having said that, the key `author` can also identify multiple entries.
+
+> The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
 {: .prompt-info }
 
 ## Table of Contents
@@ -171,9 +177,18 @@ By default, the image is centered, but you can specify the position by using one
   ```
   {: .nolineno}
 
+### Dark/Light mode
+
+You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
+
+```markdown
+![Light mode only](/path/to/light-mode.png){: .light }
+![Dark mode only](/path/to/dark-mode.png){: .dark }
+```
+
 ### Shadow
 
-The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
+The screenshots of the program window can be considered to show the shadow effect:
 
 ```markdown
 ![Desktop View](/assets/img/sample/mockup.png){: .shadow }
@@ -203,7 +218,7 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```html
 <img src="https://cdn.com/path/to/flower.png" alt="The flower">
 ```
-{: .nolineno}
+{: .nolineno }
 
 ### Image Path
 
@@ -214,7 +229,6 @@ When a post contains many images, it will be a time-consuming task to repeatedly
 img_path: /img/path/
 ---
 ```
-{: .nolineno }
 
 And then, the image source of Markdown can write the file name directly:
 
@@ -232,21 +246,48 @@ The output will be:
 
 ### Preview Image
 
-If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image:
+If you want to add an image at the top of the post, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
+
+Knowing these prerequisites, you can start setting the image's attribute:
 
 ```yaml
 ---
 image:
-  path: /path/to/image/file
+  path: /path/to/image
-  width: 1000   # in pixels
-  height: 400   # in pixels
   alt: image alternative text
 ---
 ```
 
-Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
+Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.
 
-Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.
+For simple use, you can also just use `image` to define the path.
+
+```yml
+---
+image: /path/to/image
+---
+```
+
+### LQIP
+
+For preview images:
+
+```yaml
+---
+image:
+  lqip: /path/to/lqip-file # or base64 URI
+---
+```
+
+> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
+
+
+For normal images:
+
+```markdown
+![Image description](/path/to/image){: lqip="/path/to/lqip-file" }
+```
+{: .nolineno }
 
 ## Pinned Posts
 
@@ -345,6 +386,24 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 
 Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
+## Videos
+
+You can embed a video with the following syntax:
+
+```liquid
+{% include embed/{Platform}.html id='{ID}' %}
+```
+Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
+
+The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
+
+| Video URL                                                                                          | Platform  | ID            |
+|----------------------------------------------------------------------------------------------------|-----------|:--------------|
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`  | `1634779211`  |
+
+
+
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).

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

@@ -31,7 +31,7 @@ Create a new repository from the [**Chirpy Starter**][use-starter] and name it `
 And then execute:
 
 ```console
-$ bash tools/init.sh
+$ bash tools/init
 ```
 
 > If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
@@ -39,15 +39,11 @@ $ bash tools/init.sh
 
 The above command will:
 
-1. Removes some files or directories from your repository:
+1. Remove the files in `_posts`{: .filepath} from your repository.
-    - `.travis.yml`{: .filepath}
-    - files under `_posts`{: .filepath}
 
 2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}.
 
-3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}.
+3. Create a new commit to save the changes automatically.
-
-4. Creates a new commit to save the changes automatically.
 
 ### Installing Dependencies
 
@@ -68,11 +64,11 @@ Update the variables of `_config.yml`{: .filepath} as needed. Some of them are t
 - `timezone`
 - `lang`
 
-### Customing Stylesheet
+### Customizing Stylesheet
 
-If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
 
-Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, create a new file `_sass/variables-hook.scss`{: .filepath} and assign new values to the target variable in it.
+Starting with version `4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main sass file `_sass/jekyll-theme-chirpy.scss`{: .filepath} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.
 
 ### Customing Static Assets
 
@@ -105,31 +101,21 @@ Before the deployment begins, check out the file `_config.yml`{: .filepath} and
 
 Now you can choose ONE of the following methods to deploy your Jekyll site.
 
-### Deploy by Using Github Actions
+### Deploy by Using GitHub Actions
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
+Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`{: .filepath}. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. And then rename your repository to `<GH_USERNAME>.github.io` on GitHub.
 
-Quickly check the files needed for GitHub Actions build:
+Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repository and your local machine is not Linux, go the the root directory of your site and update the platform list:
 
-- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`{: .filepath}. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+```console
+$ bundle lock --add-platform x86_64-linux
+```
 
-- Ensure your Jekyll site has file `tools/deploy.sh`{: .filepath}. Otherwise, copy it from here to your Jekyll site.
+Now publish your Jekyll site:
 
-- Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file:
+1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.
 
-  ```console
+2. Push any commit to remote to trigger the GitHub Actions workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site should be deployed automatically.
-  $ bundle lock --add-platform x86_64-linux
-  ```
-
-After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
-
-Now publish your Jekyll site by:
-
-1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
-
-2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
-
-    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="1580" height="250" }
 
 3. Visit your website at the address indicated by GitHub.
 
@@ -181,6 +167,5 @@ The merge is likely to conflict with your local modifications. Please be patient
 [starter]: https://github.com/cotes2020/chirpy-starter
 [use-starter]: https://github.com/cotes2020/chirpy-starter/generate
 [workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
-[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
+[pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
-[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
 [latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags

_posts/2021-01-03-enable-google-pv.md

@@ -6,6 +6,8 @@ categories: [Blogging, Tutorial]
 tags: [google analytics, pageviews]
 ---
 
+> The content of this post applies only to [_Universal Analytics property_](https://support.google.com/analytics/answer/10220206) (UA), not [_Google Analytics 4_](https://support.google.com/analytics/answer/10089681) (GA 4). In addition, since [UA is about to be deprecated on Jul 1, 2023](https://support.google.com/analytics/answer/11583528), the Page Views feature of [_Chirpy_][chirpy-homepage] will also be deprecated at that time.
+{: .prompt-danger }
 
 This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv.*` empty unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
 

_sass/addon/commons.scss

@@ -5,22 +5,22 @@
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-scheme;
     }
 
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-scheme;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-scheme;
     }
 
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-scheme;
     }
   }
@@ -29,11 +29,11 @@ html {
 }
 
 body {
-  line-height: 1.75rem;
   background: var(--body-bg);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
-  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
+  font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
+  line-height: 1.75;
 }
 
 /* --- Typography --- */
@@ -76,14 +76,6 @@ h5 {
   font-size: 1.1rem;
 }
 
-ol,
-ul {
-  ol,
-  ul {
-    margin-bottom: 1rem;
-  }
-}
-
 a {
   @extend %link-color;
 }
@@ -91,6 +83,46 @@ a {
 img {
   max-width: 100%;
   height: auto;
+
+  &[data-src] {
+    &.lazyloaded {
+      -webkit-animation: fade-in 0.4s ease-in;
+      animation: fade-in 0.4s ease-in;
+    }
+
+    &[data-lqip="true"] {
+      &.lazyload,
+      &.lazyloading {
+        -webkit-filter: blur(20px);
+        filter: blur(20px);
+      }
+    }
+
+    &:not([data-lqip="true"]) {
+      &.lazyload,
+      &.lazyloading {
+        background: var(--img-bg);
+      }
+    }
+
+    &.shadow {
+      -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
+    }
+
+    @extend %img-caption;
+  }
+
+  @-webkit-keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 }
 
 blockquote {
@@ -99,30 +131,30 @@ blockquote {
   color: var(--blockquote-text-color);
 
   &[class^="prompt-"] {
-    display: flex;
     border-left: 0;
-    border-radius: 6px;
+    padding: 1rem 1rem 1rem 3rem;
-    padding: 0.75rem 1.2rem;
     color: var(--prompt-text-color);
 
+    @extend %rounded;
+
     &::before {
-      margin-right: 1rem;
-      font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;
+      position: absolute;
+      left: 2.5rem;
+      margin-top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
     }
 
-    p:last-child {
+    > p:last-child {
-      margin-bottom: 0rem;
+      margin-bottom: 0;
     }
   }
 
-  @include prompt("tip", "\f0eb", 400);
+  @include prompt("tip", "\f0eb", "regular");
-
   @include prompt("info", "\f06a");
-
   @include prompt("warning", "\f06a");
-
   @include prompt("danger", "\f071");
 }
 
@@ -148,11 +180,10 @@ kbd {
 }
 
 footer {
-  @include pl-pr(1.5rem);
-
   font-size: 0.8rem;
+  background-color: var(--main-bg);
 
-  > div.d-flex {
+  div.d-flex {
     height: $footer-height;
     line-height: 1.2rem;
     padding-bottom: 1rem;
@@ -172,7 +203,6 @@ footer {
 
     &:hover {
       @extend %link-hover;
-
       @include no-text-decoration;
     }
   }
@@ -189,36 +219,6 @@ i { /* fontawesome icons */
   }
 }
 
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-img[data-src] {
-  margin: 0.5rem 0;
-
-  &[data-loaded=true] {
-    animation: fade-in linear 0.5s;
-  }
-
-  &.left {
-    float: left;
-    margin: 0.75rem 1rem 1rem 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0.75rem 0 1rem 1rem;
-  }
-
-  &.shadow {
-    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
-  }
-
-  @extend %img-caption;
-}
-
 /* --- Panels --- */
 
 .access {
@@ -228,7 +228,7 @@ img[data-src] {
   margin-bottom: 4rem;
 
   &:only-child {
-    position: -webkit-sticky; /* Safari */
+    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -244,7 +244,6 @@ img[data-src] {
   .post-content {
     font-size: 0.9rem;
   }
-
 }
 
 #panel-wrapper {
@@ -266,12 +265,12 @@ img[data-src] {
     &:hover {
       background-color: #2a408e;
       border-color: #2a408e;
-      color: #fff;
+      color: #ffffff;
       transition: none;
     }
   }
 
-  [data-topbar-visible=true] & > div {
+  [data-topbar-visible="true"] & > div {
     top: 6rem;
   }
 }
@@ -296,7 +295,6 @@ img[data-src] {
 
     color: inherit;
   }
-
 }
 
 .footnotes > ol {
@@ -316,10 +314,11 @@ img[data-src] {
 
     /* [scroll-focus] added by `smooth-scroll.js` */
     &:target:not([scroll-focus]),
-    &[scroll-focus=true] > p {
+    &[scroll-focus="true"] > p {
       background-color: var(--footnote-target-bg);
+      width: -moz-fit-content;
+      width: -webkit-fit-content;
       width: fit-content;
-      -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
       transition: background-color 1.5s ease-in-out;
     }
   }
@@ -331,7 +330,6 @@ img[data-src] {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
 
@@ -401,27 +399,14 @@ img[data-src] {
     margin-bottom: 1.5rem;
   }
 
-  a {
+  p {
-    &.img-link {
+    > img[data-src],
-      @extend %no-cursor;
+    > a.popup {
-    }
+      &:not(.normal):not(.left):not(.right) {
-
-    /* created by `_includes/img-extra.html` */
-    &.popup {
-      cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
         @include align-center;
       }
     }
-
-    &:hover {
-      code {
-        @extend %link-hover;
   }
-    }
-  } /* a */
-
 }
 
 .pageviews .fa-spinner {
@@ -449,12 +434,18 @@ img[data-src] {
 
 .post-content {
   font-size: 1.08rem;
-  line-height: 1.8;
   margin-top: 2rem;
   overflow-wrap: break-word;
-  word-wrap: break-word;
 
   a {
+    &.popup {
+      @extend %no-cursor;
+      @extend %img-caption;
+      @include mt-mb(0.5rem);
+
+      cursor: zoom-in;
+    }
+
     &:not(.img-link) {
       @extend %link-underline;
 
@@ -462,21 +453,40 @@ img[data-src] {
         @extend %link-hover;
       }
     }
-
-    &.img-link {
-      @extend %img-caption;
-    }
-
   }
 
+  ol,
   ul {
-    /* attribute 'hide-bullet' was added by liquid */
+    &:not([class]),
-    .task-list-item[hide-bullet] {
+    &.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;
 
       > i { /* checkbox icon */
-        margin: 0 0.4rem 0.2rem -1.4rem;
+        width: 2rem;
-        vertical-align: middle;
+        margin-left: -1.25rem;
         color: var(--checkbox-color);
 
         &.checked {
@@ -484,39 +494,21 @@ img[data-src] {
         }
       }
 
+      ul {
+        -webkit-padding-start: 1.75rem;
+        padding-inline-start: 1.75rem;
+      }
     }
 
-    input[type=checkbox] {
+    input[type="checkbox"] {
       margin: 0 0.5rem 0.2rem -1.3rem;
       vertical-align: middle;
     }
-
   } /* ul */
 
-  > ol,
-  > ul {
-    padding-left: 2rem;
-
-    li {
-      ol,
-      ul { /* sub list */
-        padding-left: 2rem;
-        margin-top: 0.3rem;
-      }
-    }
-
-  }
-
-  > ol {
-    li {
-      padding-left: 0.25em;
-    }
-  }
-
   dl > dd {
     margin-left: 1rem;
   }
-
 } /* .post-content */
 
 .tag:hover {
@@ -546,6 +538,58 @@ img[data-src] {
   }
 }
 
+.rounded-10 {
+  border-radius: 10px !important;
+}
+
+.img-link {
+  color: transparent;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.shimmer {
+  overflow: hidden;
+  position: relative;
+  background: var(--img-bg);
+
+  &::before {
+    content: "";
+    position: absolute;
+    background: var(--shimmer-bg);
+    height: 100%;
+    width: 100%;
+    -webkit-animation: shimmer 1s infinite;
+    animation: shimmer 1s infinite;
+  }
+
+  @-webkit-keyframes shimmer {
+    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+  }
+
+  @keyframes shimmer {
+    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+  }
+}
+
+.embed-video {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+
+  @extend %rounded;
+
+  &.youtube {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.twitch {
+    aspect-ratio: 310 / 189;
+  }
+}
+
 /* --- buttons --- */
 .btn-lang {
   border: 1px solid !important;
@@ -581,7 +625,6 @@ img[data-src] {
 }
 
 .flex-grow-1 {
-  -ms-flex-positive: 1 !important;
   flex-grow: 1 !important;
 }
 
@@ -616,6 +659,16 @@ img[data-src] {
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+.left {
+  float: left;
+  margin: 0.75rem 1rem 1rem 0 !important;
+}
+
+.right {
+  float: right;
+  margin: 0.75rem 0 1rem 1rem !important;
+}
+
 /* --- Overriding --- */
 
 /* magnific-popup */
@@ -673,9 +726,8 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
       border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
+      -webkit-transform: translateZ(0);
       transform: translateZ(0); /* fixed the zoom in Safari */
-      -webkit-transition: border-color 0.35s ease-in-out;
-      -moz-transition: border-color 0.35s ease-in-out;
       transition: border-color 0.35s ease-in-out;
 
       &:hover {
@@ -686,13 +738,11 @@ $sidebar-display: "sidebar-display";
     img {
       width: 100%;
       height: 100%;
-      -webkit-transition: transform 0.5s;
+      transition: -webkit-transform 0.5s;
-      -moz-transition: transform 0.5s;
       transition: transform 0.5s;
+      transition: transform 0.5s, -webkit-transform 0.5s;
 
       &:hover {
-        -ms-transform: scale(1.2);
-        -moz-transform: scale(1.2);
         -webkit-transform: scale(1.2);
         transform: scale(1.2);
       }
@@ -700,23 +750,27 @@ $sidebar-display: "sidebar-display";
   } /* #avatar */
 
   .site-title {
+    margin-top: 0.55rem;
+
     a {
       @extend %clickable-transition;
 
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 99%);
+      color: rgba(134, 133, 133, 0.99);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
     color: var(--sidebar-muted-color);
-    line-height: 1.2rem;
+    line-height: 1.25rem;
     word-spacing: 1px;
-    margin: 0.5rem 1.5rem 0.5rem 1.5rem;
+    margin: 0.2rem 1.5rem 0.5rem 1.5rem;
     min-height: 3rem; /* avoid vertical shifting in multi-line words */
+    -webkit-user-select: none;
+    -moz-user-select: none;
     user-select: none;
   }
 
@@ -756,7 +810,7 @@ $sidebar-display: "sidebar-display";
       &:last-child {
         a {
           position: relative;
-          left: $cursor-width / 2;
+          left: calc($cursor-width / 2);
           width: 100%;
         }
 
@@ -782,7 +836,7 @@ $sidebar-display: "sidebar-display";
 
     @for $i from 1 through $tab-count {
       $offset: $tab-count - $i;
-      $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
+      $top: (-$offset * $tab-height) + (($tab-height - $tab-cursor-height) * 0.5);
 
       @if $i < $tab-count {
         > li.active:nth-child(#{$i}),
@@ -797,9 +851,7 @@ $sidebar-display: "sidebar-display";
           @include fix-cursor($top);
         }
       }
-
     } /* @for */
-
   } /* ul */
 
   .sidebar-bottom {
@@ -850,16 +902,11 @@ $sidebar-display: "sidebar-display";
       height: 3px;
       border-radius: 50%;
     }
-
   } /* .sidebar-bottom */
-
 } /* #sidebar */
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
-    -webkit-transition: top 0.5s ease;
-    -moz-transition: top 0.5s ease;
-    -o-transition: top 0.5s ease;
     transition: top 0.5s ease;
   }
 }
@@ -893,14 +940,14 @@ $sidebar-display: "sidebar-display";
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   background-color: var(--topbar-wrapper-bg);
 
-  [data-topbar-visible=false] & {
+  [data-topbar-visible="false"] & {
     top: -$topbar-height; /* same as topbar height. */
   }
 }
 
 #topbar {
   i { /* icons */
-    color: #999;
+    color: #999999;
   }
 
   #breadcrumb {
@@ -964,9 +1011,8 @@ $sidebar-display: "sidebar-display";
     background: center;
 
     &.form-control {
-      &::-webkit-input-placeholder { @include input-placeholder; }
       &::-moz-placeholder { @include input-placeholder; }
-      &:-ms-input-placeholder { @include input-placeholder; }
+      &::-webkit-input-placeholder { @include input-placeholder; }
       &::placeholder { @include input-placeholder; }
     }
   }
@@ -1052,8 +1098,6 @@ $sidebar-display: "sidebar-display";
 }
 
 #core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-
   .categories,
   #tags,
   #archives {
@@ -1061,6 +1105,10 @@ $sidebar-display: "sidebar-display";
       @extend %no-bottom-border;
     }
   }
+
+  @at-root .row:only-child > #{&} {
+    padding-bottom: 3rem;
+  }
 }
 
 #mask {
@@ -1082,9 +1130,9 @@ $sidebar-display: "sidebar-display";
 /* --- main wrapper --- */
 
 #main-wrapper {
-  background-color: var(--main-wrapper-bg);
+  background-color: var(--main-bg);
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh - #{$footer-height});
 
   @include pl-pr(0);
 }
@@ -1116,7 +1164,9 @@ $sidebar-display: "sidebar-display";
   height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
+  transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   -webkit-transition: transform 0.2s ease-out;
 
   i {
@@ -1132,6 +1182,13 @@ $sidebar-display: "sidebar-display";
 }
 
 #notification {
+  @-webkit-keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
   @keyframes popup {
     from {
       opacity: 0;
@@ -1146,7 +1203,7 @@ $sidebar-display: "sidebar-display";
   }
 
   .toast-body {
-    font-family: 'Lato';
+    font-family: Lato, sans-serif;
     line-height: 1.25rem;
 
     button {
@@ -1169,11 +1226,12 @@ $sidebar-display: "sidebar-display";
       position: fixed;
       left: 50%;
       bottom: 20%;
+      -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
+      -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
     }
   }
-
 }
 
 /*
@@ -1189,10 +1247,10 @@ $sidebar-display: "sidebar-display";
   footer {
     height: $footer-height-mobile;
 
-    > div.d-flex {
+    div.d-flex {
       padding: 1.5rem 0;
+      line-height: 1.65;
       flex-wrap: wrap;
-      -ms-flex-pack: distribute !important;
       justify-content: space-around !important;
     }
 
@@ -1202,6 +1260,10 @@ $sidebar-display: "sidebar-display";
     }
   }
 
+  #main-wrapper {
+    min-height: calc(100vh - #{$footer-height-mobile});
+  }
+
   #core-wrapper {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height-mobile}) !important;
 
@@ -1211,12 +1273,17 @@ $sidebar-display: "sidebar-display";
     }
 
     .post-content {
-      > blockquote[class^=prompt-] {
+      > blockquote[class^="prompt-"] {
         @include ml-mr(-1.25rem);
-        border-radius: 0;
-      }
-    }
 
+        border-radius: 0;
+        max-width: none;
+
+        &::before {
+          left: 1rem;
+        }
+      }
+    }
   }
 
   #avatar > a {
@@ -1227,7 +1294,6 @@ $sidebar-display: "sidebar-display";
   .site-subtitle {
     @include ml-mr(1.8rem);
   }
-
 }
 
 @media all and (max-width: 768px) {
@@ -1249,11 +1315,10 @@ $sidebar-display: "sidebar-display";
 @media all and (max-width: 849px) {
   @mixin slide($append: null) {
     $basic: transform 0.4s ease;
+
     @if $append {
-      -webkit-transition: $basic, $append;
       transition: $basic, $append;
     } @else {
-      -webkit-transition: $basic;
       transition: $basic;
     }
   }
@@ -1263,13 +1328,20 @@ $sidebar-display: "sidebar-display";
     overflow-x: hidden;
   }
 
+  footer {
+    @include slide;
+  }
+
   [#{$sidebar-display}] {
     #sidebar {
+      -webkit-transform: translateX(0);
       transform: translateX(0);
     }
 
     #topbar-wrapper,
-    #main-wrapper {
+    #main-wrapper,
+    footer {
+      -webkit-transform: translateX(#{$sidebar-width});
       transform: translateX(#{$sidebar-width});
     }
   }
@@ -1281,8 +1353,6 @@ $sidebar-display: "sidebar-display";
     -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
-      -webkit-transition: none;
-      -moz-transition: none;
       transition: none;
     }
   }
@@ -1294,7 +1364,8 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar,
-  #main {
+  #main,
+  footer > .container {
     max-width: 100%;
   }
 
@@ -1329,8 +1400,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #tags {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
@@ -1341,18 +1410,17 @@ $sidebar-display: "sidebar-display";
       margin-top: 3rem;
     }
   }
-
 } /* max-width: 849px */
 
 @media all and (max-width: 849px) and (orientation: portrait) {
-  [data-topbar-visible=false] #topbar-wrapper {
+  [data-topbar-visible="false"] #topbar-wrapper {
     top: 0;
   }
 }
 
 /* Phone & Pad */
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer > .d-flex > div {
+  footer .d-flex > div {
     width: 312px;
   }
 }
@@ -1364,7 +1432,8 @@ $sidebar-display: "sidebar-display";
     overflow-y: scroll;
   }
 
-  #main-wrapper {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width;
   }
 
@@ -1395,21 +1464,14 @@ $sidebar-display: "sidebar-display";
     right: 5%;
   }
 
-  #topbar {
-    @include pl-pr(2rem);
-  }
-
   #topbar-title {
     text-align: left;
   }
-
 }
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
   #main .col-lg-11 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 96%;
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1438,7 +1500,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar-wrapper {
-    left: 210px;
+    left: $sidebar-width-small;
   }
 
   #search-results > div {
@@ -1456,8 +1518,9 @@ $sidebar-display: "sidebar-display";
     font-size: 90%;
   }
 
-  #main-wrapper {
+  #main-wrapper,
-    margin-left: 210px;
+  footer {
+    margin-left: $sidebar-width-small;
   }
 
   #breadcrumb {
@@ -1467,7 +1530,6 @@ $sidebar-display: "sidebar-display";
     word-break: keep-all;
     white-space: nowrap;
   }
-
 }
 
 /* panel hidden */
@@ -1477,8 +1539,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #main > div.row {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 }
@@ -1495,7 +1555,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #search-input {
-    -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
   }
 
@@ -1520,10 +1579,11 @@ $sidebar-display: "sidebar-display";
     font-size: 1.03rem;
   }
 
-  footer > div.d-felx {
+  footer {
+    div.d-felx {
       width: 85%;
     }
-
+  }
 }
 
 @media all and (min-width: 1400px) {
@@ -1533,7 +1593,8 @@ $sidebar-display: "sidebar-display";
 }
 
 @media all and (min-width: 1650px) {
-  #main-wrapper {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width-large;
   }
 
@@ -1546,7 +1607,8 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar,
-  #main {
+  #main,
+  footer > .container {
     max-width: $main-content-max-width;
   }
 
@@ -1590,6 +1652,8 @@ $sidebar-display: "sidebar-display";
       .site-title {
         @extend %profile-ml;
 
+        margin-top: 0.4rem;
+
         a {
           font-size: 1.7rem;
           letter-spacing: 1px;
@@ -1600,9 +1664,8 @@ $sidebar-display: "sidebar-display";
         @extend %profile-ml;
 
         word-spacing: 0;
-        margin-top: 0.3rem;
+        margin-top: 0;
       }
-
     } /* .profile-wrapper (min-width: 1650px) */
 
     ul {
@@ -1628,7 +1691,6 @@ $sidebar-display: "sidebar-display";
             }
           }
         }
-
       }
     }
 
@@ -1639,8 +1701,6 @@ $sidebar-display: "sidebar-display";
       $icon-block-size: 2rem;
 
       &.justify-content-center {
-        -webkit-box-pack: start !important;
-        -ms-flex-pack: start !important;
         justify-content: flex-start !important;
       }
 
@@ -1665,6 +1725,7 @@ $sidebar-display: "sidebar-display";
           position: absolute;
           top: 50%;
           left: 50%;
+          -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
         }
       }
@@ -1672,9 +1733,6 @@ $sidebar-display: "sidebar-display";
       .icon-border {
         top: 0.9rem;
       }
-
     } /* .sidebar-bottom */
-
   } /* #sidebar */
-
 } /* min-width: 1650px */

_sass/addon/module.scss

@@ -7,7 +7,7 @@
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+  font-family: Lato, "Microsoft Yahei", sans-serif;
 }
 
 %section {
@@ -73,6 +73,8 @@
 }
 
 %no-cursor {
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
 }
 
@@ -88,6 +90,10 @@
   font-style: normal;
 }
 
+%rounded {
+  border-radius: 6px;
+}
+
 %img-caption {
   + em {
     display: block;
@@ -101,6 +107,8 @@
 
 %sidebar-links {
   color: rgba(117, 117, 117, 0.9);
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
 }
 
@@ -110,6 +118,11 @@
   text-decoration: none;
 }
 
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;
@@ -134,18 +147,17 @@
   position: relative;
   left: 50%;
   -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 
-@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+@mixin prompt($type, $fa-content, $fa-style: "solid") {
   &.prompt-#{$type} {
     background-color: var(--prompt-#{$type}-bg);
 
     &::before {
-      content: $fw-icon;
+      content: $fa-content;
       color: var(--prompt-#{$type}-icon-color);
-      font-weight: $icon-weight;
+      font: var(--fa-font-#{$fa-style});
     }
   }
 }

_sass/addon/syntax.scss

@@ -8,39 +8,33 @@
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-syntax;
     }
 
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-syntax;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-syntax;
     }
 
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-syntax;
     }
   }
 }
 
-/* -- Codes Snippet -- */
+/* -- code snippets -- */
-
-$code-radius: 6px;
 
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
-%code-snippet-radius {
-  border-radius: $code-radius;
-}
-
 %code-snippet-padding {
   padding-left: 1rem;
   padding-right: 1.5rem;
@@ -48,7 +42,7 @@ $code-radius: 6px;
 
 .highlighter-rouge {
   @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
+  @extend %rounded;
 
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
@@ -56,7 +50,7 @@ $code-radius: 6px;
 }
 
 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
   @extend %code-snippet-bg;
 
   @at-root figure#{&} {
@@ -72,6 +66,13 @@ $code-radius: 6px;
     font-size: $code-font-size;
     line-height: 1.4rem;
     word-wrap: normal; /* Fixed Safari overflow-x */
+
+    /* set the dollar sign to non-selectable */
+    >.gp:first-child {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
   }
 
   table {
@@ -87,29 +88,20 @@ $code-radius: 6px;
     text-align: right;
     color: var(--highlight-lineno-color);
     -webkit-user-select: none;
-    -khtml-user-select: none;
     -moz-user-select: none;
-    -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
   }
-
-  /* set the dollar sign to non-selectable */
-  .gp {
-    user-select: none;
-  }
-
 } /* .highlight */
 
 code {
   -webkit-hyphens: none;
-  -ms-hyphens: none;
-  -moz-hyphens: none;
   hyphens: none;
 
   &.highlighter-rouge {
     font-size: $code-font-size;
     padding: 3px 5px;
+    word-break: break-word;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
@@ -151,16 +143,15 @@ td.rouge-code {
     border-bottom: none !important;
     pointer-events: none;
   }
-
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
+  &[class^="highlighter-rouge"],
+  &.nolineno,
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge,
+  &.language-terminal.highlighter-rouge {
-  &.nolineno {
     pre.lineno {
       display: none;
     }
@@ -176,8 +167,6 @@ div {
 
   $code-header-height: 2.25rem;
 
-  border-top-left-radius: $code-radius;
-  border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -229,9 +218,9 @@ div {
   /* clipboard */
   button {
     @extend %cursor-pointer;
+    @extend %rounded;
 
     border: 1px solid transparent;
-    border-radius: $code-radius;
     height: $code-header-height;
     width: $code-header-height;
     padding: 0;
@@ -251,6 +240,10 @@ div {
       }
     }
 
+    &:focus {
+      outline: none;
+    }
+
     &:not([timeout]):hover {
       background-color: rgba(128, 128, 128, 0.37);
 
@@ -258,18 +251,12 @@ div {
         color: white;
       }
     }
-
-    &:focus {
-      outline: none;
   }
-
-  }
-
 }
 
 @media all and (max-width: 576px) {
   .post-content {
-    > div[class^='language-'] {
+    > div[class^="language-"] {
       @include ml-mr(-1.25rem);
 
       border-radius: 0;

_sass/addon/variables.scss

@@ -13,20 +13,16 @@ $sidebar-width-large: 350px !default;  /* screen width: >= 1650px */
 $tab-count: 5 !default;   /* backward compatible (version <= 4.0.2) */
 $tab-height: 3rem !default;
 $tab-cursor-height: 1.6rem !default;
-
 $cursor-width: 2px !default;    /* the cursor width of the selected tab */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-
 $search-max-width: 210px !default;
-
 $footer-height: 5rem !default;
 $footer-height-mobile: 6rem !default;   /* screen width: <= 576px */
 
 $main-content-max-width: 1250px !default;
-
 $bottom-min-height: 35rem !default;
 
 /* syntax highlight */

_sass/colors/dark-syntax.scss

@@ -3,7 +3,24 @@
  */
 
 @mixin dark-syntax {
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: rgb(60, 60, 60);
+  --code-header-icon-color: rgb(86, 86, 86);
+  --clipboard-checked-color: #2bcc2b;
+  --filepath-text-color: #bdbdbd;
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+
   .highlight pre { background-color: var(--highlight-bg-color); }
   .highlight .hll { background-color: var(--highlight-bg-color); }
   .highlight .c { color: #75715e; } /* Comment */
@@ -67,22 +84,4 @@
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
   .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
-
-  /* -----  custom styles ------ */
-
-  --highlight-bg-color: #252525;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --inline-code-bg: #272822;
-  --code-header-text-color: #6a6a6a;
-  --code-header-muted-color: rgb(60 60 60);
-  --code-header-icon-color: rgb(86 86 86);
-  --clipboard-checked-color: #2bcc2b;
-  --filepath-text-color: #bdbdbd;
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  pre { color: #bfbfbf; } /* override Bootstrap */
 }

_sass/colors/dark-typography.scss

@@ -4,9 +4,9 @@
 
 @mixin dark-scheme {
   /* Framework color */
-  --body-bg: var(--main-wrapper-bg);
+  --body-bg: var(--main-bg);
   --mask-bg: rgb(68, 69, 70);
-  --main-wrapper-bg: rgb(27, 27, 30);
+  --main-bg: rgb(27, 27, 30);
   --main-border-color: rgb(44, 45, 45);
 
   /* Common color */
@@ -21,18 +21,26 @@
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
-  --btn-box-shadow: var(--main-wrapper-bg);
+  --btn-box-shadow: var(--main-bg);
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
-  --checkbox-color: rgb(118 120 121);
+  --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
+  --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
+  --shimmer-bg:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(58, 55, 55, 0.4) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
   --sidebar-muted-color: #6d6c6b;
-  --sidebar-active-color: rgb(255 255 255 / 80%);
+  --sidebar-active-color: rgb(255, 255, 255, 0.8);
   --nav-cursor-color: rgb(183, 182, 182);
-  --sidebar-btn-bg: rgb(117 116 116 / 20%);
+  --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
 
   /* Topbar */
   --topbar-text-color: var(--text-color);
@@ -48,7 +56,7 @@
   --btn-paginator-hover-color: rgb(64, 65, 66);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-text-color: var(--text-color);
-  --pin-bg: rgb(34 35 37);
+  --pin-bg: rgb(34, 35, 37);
   --pin-color: inherit;
 
   /* Posts */
@@ -64,19 +72,18 @@
   --relate-post-date: var(--text-muted-color);
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
-  --card-box-shadow: var(--main-wrapper-bg);
+  --card-box-shadow: var(--main-bg);
-  --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
-  --prompt-text-color: rgb(216 212 212 / 75%);
+  --prompt-text-color: rgb(216, 212, 212, 0.75);
   --prompt-tip-bg: rgba(77, 187, 95, 0.2);
-  --prompt-tip-icon-color: rgb(5 223 5 / 68%);
+  --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
-  --prompt-info-bg: rgb(7 59 104 / 80%);
+  --prompt-info-bg: rgb(7, 59, 104, 0.8);
   --prompt-info-icon-color: #0075d1;
-  --prompt-warning-bg: rgb(90 69 3 / 95%);
+  --prompt-warning-bg: rgb(90, 69, 3, 0.95);
-  --prompt-warning-icon-color: rgb(255 165 0 / 80%);
+  --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
-  --prompt-danger-bg: rgb(86 28 8 / 80%);
+  --prompt-danger-bg: rgb(86, 28, 8, 0.8);
   --prompt-danger-icon-color: #cd0202;
 
   /* tags */
@@ -96,19 +103,26 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   .post img[data-src] {
+    &.lazyloaded {
+      -webkit-filter: brightness(95%);
       filter: brightness(95%);
     }
+  }
+
+  .light {
+    display: none;
+  }
 
   hr {
     border-color: var(--main-border-color);
   }
 
   /* posts' toc, override BS */
-  nav[data-toggle=toc] .nav-link.active,
+  nav[data-toggle="toc"] .nav-link.active,
-  nav[data-toggle=toc] .nav-link.active:focus,
+  nav[data-toggle="toc"] .nav-link.active:focus,
-  nav[data-toggle=toc] .nav-link.active:hover,
+  nav[data-toggle="toc"] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav > li > a:focus,
+  nav[data-toggle="toc"] .nav > li > a:focus,
-  nav[data-toggle=toc] .nav > li > a:hover {
+  nav[data-toggle="toc"] .nav > li > a:hover {
     color: var(--toc-highlight) !important;
     border-left-color: var(--toc-highlight) !important;
   }
@@ -150,8 +164,7 @@
 
   color-scheme: dark;
 
-  #disqus_thread {
+  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
     color-scheme: none;
   }
-
 } /* dark-scheme */

_sass/colors/light-syntax.scss

@@ -76,9 +76,8 @@
   --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
-  [class^=prompt-] {
+  [class^="prompt-"] {
     --inline-code-bg: #fbfafa;
-    --highlighter-rouge-color: rgb(82 82 82);
+    --highlighter-rouge-color: rgb(82, 82, 82);
   }
-
 } /* light-syntax */

_sass/colors/light-typography.scss

@@ -6,24 +6,32 @@
   /* Framework color */
   --body-bg: #fafafa;
   --mask-bg: #c1c3c5;
-  --main-wrapper-bg: white;
+  --main-bg: white;
   --main-border-color: #f3f3f3;
 
   /* Common color */
   --text-color: #34343c;
   --text-muted-color: gray;
   --heading-color: black;
-  --blockquote-border-color: #eee;
+  --blockquote-border-color: #eeeeee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;
   --link-underline-color: #dee2e6;
-  --button-bg: #fff;
+  --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(249, 249, 249) 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 */
   --sidebar-bg: #eeeeee;
@@ -35,8 +43,8 @@
   /* Topbar */
   --topbar-text-color: rgb(78, 78, 78);
   --topbar-wrapper-bg: white;
-  --search-wrapper-bg: rgb(245 245 245 / 50%);
+  --search-wrapper-bg: rgb(245, 245, 245, 0.5);
-  --search-wrapper-border-color: rgb(245 245 245);
+  --search-wrapper-border-color: rgb(245, 245, 245);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: var(--btn-border-color);
@@ -53,7 +61,7 @@
   /* Posts */
   --btn-share-hover-color: var(--link-color);
   --card-border-color: #f1f1f1;
-  --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
+  --card-box-shadow: rgba(234, 234, 234, 0.76);
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
@@ -64,22 +72,25 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
-  --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
-  --prompt-text-color: rgb(46 46 46 / 77%);
+  --prompt-text-color: rgb(46, 46, 46, 0.77);
-  --prompt-tip-bg: rgb(123 247 144 / 20%);
+  --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-bg: rgb(255, 243, 205);
   --prompt-warning-icon-color: #ef9c03;
-  --prompt-danger-bg: rgb(248 215 218 / 56%);
+  --prompt-danger-bg: rgb(248, 215, 218, 0.56);
   --prompt-danger-icon-color: #df3c30;
 
-  [class^=prompt-] {
+  [class^="prompt-"] {
-    --link-underline-color: rgb(219 216 216);
+    --link-underline-color: rgb(219, 216, 216);
+  }
+
+  .dark {
+    display: none;
   }
 
   /* Categories */
@@ -90,5 +101,4 @@
   --timeline-color: rgba(0, 0, 0, 0.075);
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
-
 } /* light-scheme */

_sass/jekyll-theme-chirpy.scss

@@ -1,7 +1,7 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v5.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_sass/layout/archives.scss

@@ -2,139 +2,128 @@
   Style for Archives
 */
 
-%date-timeline {
-  content: "";
-  width: 4px;
-  left: 75px;
-  display: inline-block;
-  float: left;
-  position: relative;
-  background-color: var(--timeline-color);
-}
-
 #archives {
   letter-spacing: 0.03rem;
 
-  span.lead {
+  $timeline-width: 4px;
+
+  %timeline {
+    content: "";
+    width: $timeline-width;
+    position: relative;
+    float: left;
+    background-color: var(--timeline-color);
+  }
+
+  .year {
+    height: 3.5rem;
     font-size: 1.5rem;
     position: relative;
-    left: 8px;
+    left: 2px;
+    margin-left: -$timeline-width;
+
+    &::before {
+      @extend %timeline;
+
+      height: 72px;
+      left: 79px;
+      bottom: 16px;
+    }
+
+    &:first-child::before {
+      @extend %timeline;
+
+      height: 32px;
+      top: 24px;
+    }
 
     &::after { /* Year dot */
       content: "";
-      display: block;
+      display: inline-block;
       position: relative;
-      -webkit-border-radius: 50%;
-      -moz-border-radius: 50%;
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      top: -26px;
+      left: 21.5px;
-      left: 63px;
       border: 3px solid;
       background-color: var(--timeline-year-dot-color);
       border-color: var(--timeline-node-bg);
       box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
-
-    &:not(:first-child) {
-      position: relative;
-      left: 4px;
-
-      &::after {
-        left: 67px;
   }
-    }
-
-  } // #archives span.lead
 
   ul {
     li {
       font-size: 1.1rem;
       line-height: 3rem;
-
-      div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
 
+      &:nth-child(odd) {
+        background-color: var(--main-bg, #ffffff);
+        background-image: linear-gradient(to left, #ffffff, #fbfbfb, #fbfbfb, #fbfbfb, #ffffff);
+      }
+
+      &::before {
+        @extend %timeline;
+
+        top: 0;
+        left: 77px;
+        height: 3.1rem;
+      }
+    }
+
+    &:last-child li:last-child::before {
+      height: 1.5rem;
+    }
+  } /* #archives ul */
+
+  .date {
+    white-space: nowrap;
+    display: inline-block;
+    position: relative;
+    right: 0.5rem;
+
+    &.month {
+      width: 1.4rem;
+      text-align: center;
+    }
+
+    &.day {
+      font-size: 85%;
+      font-family: Lato, sans-serif;
+    }
+  }
+
   a {
     /* post title in Archvies */
     margin-left: 2.5rem;
     position: relative;
     top: 0.1rem;
-        }
+
+    &:hover {
+      border-bottom: none;
     }
 
-      &:nth-child(odd) {
+    &::before {
-        background-color: var(--main-wrapper-bg, #fff);
+      /* the dot before post title */
-        background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
-      }
-
-      &::after {
-        @extend %date-timeline;
-
-        height: 2.8rem;
-        top: -1.3rem;
-      }
-
-      &:first-child::before {
-        @extend %date-timeline;
-
-        height: 3.06rem;
-        top: -1.61rem;
-      }
-    }
-
-    &:not(:last-child) > li:last-child::after {
-      height: 3.4rem;
-    }
-
-    &:last-child > li:last-child::after {
-      display: none;
-    }
-  } // #archives ul
-
-  .date {
-    white-space: nowrap;
-    display: inline-block;
-
-    &.month {
-      width: 1.4rem;
-      text-align: center;
-
-      ~ a::before {
-        /* A dot for Month and Day */
       content: "";
       display: inline-block;
       position: relative;
-        -webkit-border-radius: 50%;
-        -moz-border-radius: 50%;
       border-radius: 50%;
       width: 8px;
       height: 8px;
       float: left;
       top: 1.35rem;
-        left: 69px;
+      left: 71px;
       background-color: var(--timeline-node-bg);
       box-shadow: 0 0 3px 0 #c2c6cc;
       z-index: 1;
     }
   }
-
+} /* #archives */
-    &.day {
-      font-size: 85%;
-      font-family: 'Lato', sans-serif;
-      text-align: center;
-      margin-right: -2px;
-      width: 1.2rem;
-      position: relative;
-      left: -0.15rem;
-    }
-  } // #archives .date
-
-} // #archives
 
 @media all and (max-width: 576px) {
   #archives {

_sass/layout/categories.scss

@@ -16,7 +16,7 @@
   i {
     @extend %category-icon-color;
 
-    font-size: 86%; // fontawesome icons
+    font-size: 86%; /* fontawesome icons */
   }
 
   .list-group-item {
@@ -28,10 +28,8 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
-
   }
-
+} /* .categories */
-} // .categories
 
 .category-trigger {
   width: 1.7rem;
@@ -40,28 +38,29 @@
   text-align: center;
   color: #6c757d !important;
 
+  i {
+    position: relative;
+    height: 0.7rem;
+    width: 1rem;
+    transition: -webkit-transform 300ms ease;
+    transition: transform 300ms ease;
+    transition: transform 300ms ease, -webkit-transform 300ms ease;
+  }
+
   &:hover {
     i {
       color: var(--categories-icon-hover-color);
     }
   }
-
-  i {
-    position: relative;
-    height: 0.7rem;
-    width: 1rem;
-    transition: transform 300ms ease;
-  }
 }
 
-@media (hover: hover) { // only works on desktop
+@media (hover: hover) { /* only works on desktop */
   .category-trigger:hover {
     background-color: var(--categories-hover-bg);
   }
 }
 
 .rotate {
-  -ms-transform: rotate(-90deg); /* IE 9 */
+  -webkit-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
 }

_sass/layout/category-tag.scss

@@ -13,8 +13,8 @@
     line-height: 1.5rem;
     padding: 0.6rem 0;
 
-    &::before { // dot
+    &::before { /* dot */
-      background: #999;
+      background: #999999;
       width: 5px;
       height: 5px;
       border-radius: 50%;
@@ -37,7 +37,7 @@
   }
 }
 
-#page-tag h1 > i { // tag icon
+#page-tag h1 > i { /* tag icon */
   font-size: 1.2rem;
 }
 
@@ -51,7 +51,7 @@
   a:hover {
     @extend %link-hover;
 
-    margin-bottom: -1px; // Avoid jumping
+    margin-bottom: -1px; /* Avoid jumping */
   }
 }
 

_sass/layout/home.scss

@@ -4,7 +4,7 @@
 
 .pagination {
   color: var(--btn-patinator-text-color);
-  font-family: 'Lato', sans-serif;
+  font-family: Lato, sans-serif;
 
   a:hover {
     text-decoration: none;
@@ -49,9 +49,8 @@
     &:last-child .page-link {
       border-radius: 50%;
     }
-  } // .page-item
+  } /* .page-item */
-
+} /* .pagination */
-} // .pagination
 
 #post-list {
   margin-top: 1rem;
@@ -83,6 +82,19 @@
       em {
         @extend %normal-font-style;
       }
+
+      .pin {
+        i {
+          -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+          padding-left: 3px;
+          color: var(--pin-color);
+        }
+
+        span {
+          display: none;
+        }
+      }
     }
 
     .post-content {
@@ -100,21 +112,8 @@
         -webkit-box-orient: vertical;
       }
     }
-
+  } /* .post-preview */
-    .pin {
+} /* #post-list */
-      > i {
-        transform: rotate(45deg);
-        padding-left: 3px;
-        color: var(--pin-color);
-      }
-
-      > span {
-        display: none;
-      }
-    }
-
-  } // .post-preview
-} // #post-list
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
@@ -125,9 +124,7 @@
       &:not(:first-child):not(:last-child) {
         display: none;
       }
-
     }
-
   }
 }
 
@@ -165,18 +162,15 @@
         width: 2rem;
         height: 2rem;
       }
-
     }
 
     .page-index {
       display: none;
     }
-
+  } /* .pagination */
-  } // .pagination
-
 }
 
-/* Pannel hidden */
+/* Panel hidden */
 @media all and (max-width: 1200px) {
   #post-list {
     padding-right: 0;

_sass/layout/post.scss

@@ -26,6 +26,33 @@
   color: var(--text-color);
 }
 
+%preview-margin {
+  margin: 0;
+}
+
+.preview-img {
+  @include align-center;
+  @extend %preview-margin;
+  @extend %rounded;
+
+  max-width: 100%;
+
+  &:not(.no-bg) {
+    img.lazyloaded {
+      background: var(--img-bg);
+    }
+  }
+
+  img {
+    aspect-ratio: 40 / 21;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %preview-margin;
+    @extend %rounded;
+  }
+}
+
 h1 + .post-meta {
   span + span::before {
     @include dot;
@@ -40,23 +67,96 @@ h1 + .post-meta {
   }
 }
 
-img.preview-img {
-  margin: 0;
-  border-radius: 6px;
-
-  &.bg[data-loaded=true] {
-    background: var(--preview-img-bg);
-  }
-}
-
 .post-tail-wrapper {
   margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 
+  .post-tail-bottom a {
+    color: inherit;
+  }
+
+  .license-wrapper {
+    line-height: 1.2rem;
+
+    > a {
+      color: var(--text-color);
+
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+
+    span:last-child {
+      font-size: 0.85rem;
+    }
+  } /* .license-wrapper */
+
   .post-meta a:not(:hover) {
     @extend %link-underline;
   }
+
+  .share-wrapper {
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+
+    .share-icons {
+      font-size: 1.2rem;
+
+      > i {
+        position: relative;
+        bottom: 1px;
+
+        @extend %cursor-pointer;
+
+        &:hover {
+          @extend %btn-share-hovor;
+        }
+      }
+
+      a {
+        &:not(:last-child) {
+          margin-right: 0.25rem;
+        }
+
+        &:hover {
+          text-decoration: none;
+
+          >i {
+            @extend %btn-share-hovor;
+          }
+        }
+      }
+
+      .fab {
+        &.fa-twitter {
+          @include btn-sharing-color(rgba(29, 161, 242, 1));
+        }
+
+        &.fa-facebook-square {
+          @include btn-sharing-color(rgb(66, 95, 156));
+        }
+
+        &.fa-telegram {
+          @include btn-sharing-color(rgb(39, 159, 217));
+        }
+
+        &.fa-linkedin {
+          @include btn-sharing-color(rgb(0, 119, 181));
+        }
+
+        &.fa-weibo {
+          @include btn-sharing-color(rgb(229, 20, 43));
+        }
+      }
+    } /* .share-icons */
+
+    .fas.fa-link {
+      @include btn-sharing-color(rgb(171, 171, 171));
+    }
+  } /* .share-wrapper */
 }
 
 .post-tags {
@@ -74,7 +174,7 @@ img.preview-img {
 
     &:hover {
       background: #2a408e;
-      color: #fff;
+      color: #ffffff;
       border-color: #2a408e;
     }
 
@@ -121,15 +221,29 @@ img.preview-img {
     margin-top: 0.3rem;
     white-space: normal;
   }
-
 } /* .post-navigation */
 
+@-webkit-keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
 @keyframes fade-up {
   from {
     opacity: 0;
     position: relative;
     top: 2rem;
   }
+
   to {
     opacity: 1;
     position: relative;
@@ -143,19 +257,23 @@ img.preview-img {
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
+  -webkit-animation: fade-up 0.8s;
   animation: fade-up 0.8s;
 }
 
-#toc li a {
+#toc {
-  font-size: 0.8rem;
+  ul.nav.navbar-nav {
+    margin: 0.5rem 0;
+    padding: 0;
 
-  &.nav-link:not(.active) {
+    li {
-    color: inherit;
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
   }
-
 }
 
-nav[data-toggle=toc] {
+nav[data-toggle="toc"] {
   .nav {
     .nav > li > a.active {
       font-weight: 600 !important;
@@ -176,25 +294,6 @@ nav[data-toggle=toc] {
     color: var(--relate-post-date);
   }
 
-  .card {
-    border-color: var(--card-border-color);
-    background-color: var(--card-bg);
-    box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all 0.3s ease-in-out;
-    transition: all 0.3s ease-in-out;
-
-    h3 {
-      @extend %text-color;
-    }
-
-    &:hover {
-      -webkit-transform: translate3d(0, -3px, 0);
-      transform: translate3d(0, -3px, 0);
-      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
-    }
-  }
-
   p {
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
@@ -209,20 +308,20 @@ nav[data-toggle=toc] {
     text-decoration: none;
   }
 
-  ul {
+  .card {
-    list-style-type: none;
+    border-color: var(--card-border-color);
-    padding-inline-start: 1.5rem;
+    background-color: var(--card-bg);
+    box-shadow: 0 0 5px 0 var(--card-box-shadow);
+    transition: all 0.3s ease-in-out;
 
-    > li::before {
+    h3 {
-      background: #c2c9d4;
+      @extend %text-color;
-      width: 5px;
+    }
-      height: 5px;
+
-      border-radius: 1px;
+    &:hover {
-      display: block;
+      -webkit-transform: translate3d(0, -3px, 0);
-      content: "";
+      transform: translate3d(0, -3px, 0);
-      position: relative;
+      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
-      top: 1rem;
-      right: 1rem;
     }
   }
 }
@@ -234,78 +333,15 @@ nav[data-toggle=toc] {
     margin-bottom: 2rem;
   }
 
-  #disqus_thread {
+  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
     min-height: 8.5rem;
   }
-
-}
-
-.post-tail-bottom a {
-  color: inherit;
 }
 
 %btn-share-hovor {
   color: var(--btn-share-hover-color) !important;
 }
 
-.share-wrapper {
-  vertical-align: middle;
-  user-select: none;
-
-  .share-icons {
-    font-size: 1.2rem;
-
-    a {
-      &:not(:last-child) {
-        margin-right: 0.25rem;
-      }
-
-      &:hover {
-        text-decoration: none;
-
-        > i {
-          @extend %btn-share-hovor;
-        }
-      }
-    }
-
-    > i {
-      position: relative;
-      bottom: 1px;
-
-      @extend %cursor-pointer;
-
-      &:hover {
-        @extend %btn-share-hovor;
-      }
-    }
-
-    .fab {
-      &.fa-twitter {
-        @include btn-sharing-color(rgba(29, 161, 242, 1));
-      }
-
-      &.fa-facebook-square {
-        @include btn-sharing-color(rgb(66, 95, 156));
-      }
-
-      &.fa-telegram {
-        @include btn-sharing-color(rgb(39, 159, 217));
-      }
-
-      &.fa-weibo {
-        @include btn-sharing-color(rgb(229, 20, 43));
-      }
-    }
-
-  } /* .share-icons */
-
-  .fas.fa-link {
-    @include btn-sharing-color(rgb(171, 171, 171));
-  }
-
-} /* .share-wrapper */
-
 .share-label {
   @include label(inherit, 400, inherit);
 
@@ -314,30 +350,12 @@ nav[data-toggle=toc] {
   }
 }
 
-.license-wrapper {
-  line-height: 1.2rem;
-
-  > a {
-    color: var(--text-color);
-
-    &:hover {
-      @extend %link-hover;
-    }
-  }
-
-  span:last-child {
-    font-size: 0.85rem;
-  }
-
-} /* .license-wrapper */
-
 @media all and (max-width: 576px) {
   .preview-img[data-src] {
     margin-top: 2.2rem;
   }
 
   .post-tail-bottom {
-    -ms-flex-wrap: wrap-reverse !important;
     flex-wrap: wrap-reverse !important;
 
     > div:first-child {

_sass/layout/tags.scss

@@ -14,6 +14,6 @@
   span {
     margin-left: 0.6em;
     font-size: 0.7em;
-    font-family: 'Oswald', sans-serif;
+    font-family: Oswald, sans-serif;
   }
 }

_tabs/about.md

@@ -1,5 +1,5 @@
 ---
-title: About
+# the default layout is 'page'
 icon: fas fa-info-circle
 order: 4
 ---

_tabs/archives.md

@@ -1,7 +1,5 @@
 ---
 layout: archives
-title: Archives
 icon: fas fa-archive
 order: 3
 ---
-

_tabs/categories.md

@@ -1,6 +1,5 @@
 ---
 layout: categories
-title: Categories
 icon: fas fa-stream
 order: 1
 ---

_tabs/tags.md

@@ -1,6 +1,5 @@
 ---
 layout: tags
-title: Tags
 icon: fas fa-tag
 order: 2
 ---