chore(release): 6.3.1

Range of impacted screen widths:

- (width >= 768px) and (width < 1150px)
- (width >= 1200px) and (width <= 1460px)

.browserslistrc

@@ -1,5 +0,0 @@
-# https://github.com/browserslist/browserslist#browserslistrc
-
-last 2 versions
-> 0.2%
-not dead

.commitlintrc.json

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

.github/CONTRIBUTING.md

@@ -1,55 +0,0 @@
-# How to Contribute
-
-:tada: We really appreciate you taking the time to improve this project! :tada:
-
-To ensure that the blog design is not confusing, this project does not accept
-suggestions for design changes, such as color scheme, fonts, typography, etc.
-If your request is about an enhancement, it is recommended to first submit a
-[Feature Request][pr-issue] issue to discuss whether your idea fits the project.
-
-Basically, you can follow these steps to complete the contribution.
-
-1. Fork this project on GitHub and clone it locally.
-2. Create a new branch from the default branch and give it a descriptive name
-   (format: `feature/<add-new-feat>` or `fix/<fix-a-bug>`).
-3. After completing development, create a [Conventional Commit][cc] with git.
-  (See also: ["Verify the commits"](#verify-the-commits))
-4. Create a [Pull Request][gh-pr].
-
-## Make sure you can pass the CI tests
-
-This project has [CI][ci] turned on. In order for your [PR][gh-pr] to pass the test,
-please read the following.
-
-### Check the core functionality
-  
-```console
-bash ./tools/test
-```
-
-### Check the SASS syntax style
-
-```console
-npm test
-```
-
-### Verify the commits
-
-Before you create a git commit, please complete the following setup.
-
-Install `commitlint` & `husky`:
-
-```console
-npm i -g @commitlint/{cli,config-conventional} husky
-```
-
-And then enable `husky`:
-
-```console
-husky install
-```
-
-[pr-issue]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md
-[gh-pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
-[cc]: https://www.conventionalcommits.org/
-[ci]: https://en.wikipedia.org/wiki/Continuous_integration

.github/DISCUSSION_TEMPLATE/general.yml

@@ -0,0 +1,26 @@
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: dropdown
+    attributes:
+      label: What is the topic?
+      options:
+        - Sharing tips and tricks
+        - Just chatting
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true

.github/DISCUSSION_TEMPLATE/q-a.yml

@@ -0,0 +1,40 @@
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: dropdown
+    id: download
+    attributes:
+      label: How did you create the site?
+      options:
+        - Generated from `chirpy-starter`
+        - Built from `jekyll-theme-chirpy`
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe your need in detail.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Operations you have already tried
+      description: Describe the effort you went through.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Or logs? Anything that will give us more context about the issue you are encountering!

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,68 +0,0 @@
----
-name: Bug Report
-about: Create a report to help us improve
----
-
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Make sure the bug is found in the latest code of the `master` branch.
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
-
-## Describe the bug
-
-<!-- A clear and concise description of what the bug is. -->
-
-## To Reproduce
-
-Steps to reproduce the behavior:
-<!--
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
--->
-
-## Expected behavior
-
-<!-- A clear and concise description of what you expected to happen. -->
-
-## Logs/Screenshots
-
-<!-- If applicable, add logs/screenshots to help explain your problem. -->
-
-## Environment
-
-| Command                           | Version |
-|-----------------------------------|---------|
-| `ruby -v`                         |         |
-| `gem -v`                          |         |
-| `bundle -v`                       |         |
-| `bundle exec jekyll -v`           |         |
-| `bundle info jekyll-theme-chirpy` |         |
-
-<!-- If necessary, uncomment and fill in the following list:
-
-### Desktop
-
-- OS: [e.g. macOS 10.15.6]
-- Browser: [e.g. Chrome 85.0.4183.83 (64-bit)]
-
--->
-
-<!-- If necessary, uncomment and fill in the following list:
-
-### Smartphone
-
-- Device: [e.g. iPhone 6]
-- OS: [e.g. iOS 13.6.1]
-- Browser: [e.g. Chrome 22]
-
--->
-
-## Additional context
-
-<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,64 @@
+name: Bug Report
+description: Create a report to help us improve
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: dropdown
+    id: download
+    attributes:
+      label: How did you create the site?
+      options:
+        - Generated from `chirpy-starter`
+        - Built from `jekyll-theme-chirpy`
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. In this environment...
+        2. With this config...
+        3. Run '...'
+        4. See error...
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Environment
+      value: |
+        - Ruby: <!-- run `ruby -v` -->
+        - Jekyll: <!-- run `bundle exec jekyll -v` -->
+        - Chirpy: <!-- run `bundle info jekyll-theme-chirpy` -->
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Or logs? Anything that will give us more context about the issue you are encountering!

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Ask the community for help
+    url: https://github.com/cotes2020/jekyll-theme-chirpy/discussions
+    about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,33 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea for this project
-labels: enhancement
----
-
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Make sure the request is based on the latest code in the `master` branch.
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
-
-## Is your feature request related to a problem? Please describe
-
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-
-## Describe the solution you'd like
-
-<!-- A clear and concise description of what you want to happen. -->
-
-
-## Describe alternatives you've considered
-
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-
-## Additional context
-
-<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,38 @@
+name: Feature Request
+description: Suggest an idea for this project
+labels:
+  - enhancement
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Is your feature request related to a problem? Please describe
+      description: A clear and concise description of what the problem is.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/help_wanted.md

@@ -1,28 +0,0 @@
----
-name: Help Wanted
-about: Need help that is not covered in the tutorial
-labels: 'help wanted'
----
-
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow].
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
-[forum]: https://talk.jekyllrb.com/
-[stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll
-
-## Description
-
-<!-- Please describe your need in detail. -->
-
-## Operations you have already tried
-
-<!-- Describe the effort you went through. -->
-
-## Logs/Screenshots
-
-<!-- If applicable, add logs/screenshots to help explain your problem. -->

.github/ISSUE_TEMPLATE/question.md

@@ -1,20 +0,0 @@
----
-name: Question
-about: Issues that differ from other templates
-labels: question
----
-
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow].
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
-[forum]: https://talk.jekyllrb.com/
-[stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll
-
-## Description
-
-<!-- Please describe your question in detail. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,29 +1,17 @@
-## Description
-
-<!--
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
--->
-
 ## Type of change
-
-<!--
-Please select the desired item checkbox and change it to "[x]", then delete options that are not relevant.
--->
+<!-- Please select the desired item checkbox and change it from `[ ]` to `[x]` and then delete the irrelevant options. -->
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Improvement (refactoring and improving code)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
 
-## Additional context
-
-<!-- e.g. Fixes #(issue) -->
-
-## How has this been tested
-
+## Description
 <!--
-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
+  Please include a summary of the change and which issue is fixed. 
+  Please also include relevant motivation and context. 
+  List any dependencies that are required for this change.
 -->
 
-- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
-- [ ] I have tested this feature in the browser
+## Additional context
+<!-- e.g. Fixes #(issue) -->

.github/SECURITY.md

@@ -1,12 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-| Version | Supported          |
-|---------| ------------------ |
-| 5.x     | :white_check_mark: |
-| < 5.0.0 | :x:                |
-
-## Reporting a Vulnerability
-
-If you find a vulnerability, please report it to `cotes.chung@gmail.com`. We will try our best to respond within a week. Thank you for your time!

.github/dependabot.yml

@@ -0,0 +1,26 @@
+version: 2
+updates:
+  - package-ecosystem: "bundler"
+    directory: "/"
+    versioning-strategy: increase
+    groups:
+      bundler:
+        dependency-type: "production"
+    schedule:
+      interval: "monthly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    versioning-strategy: increase
+    groups:
+      npm:
+        dependency-type: "development"
+    schedule:
+      interval: "monthly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    groups:
+      gh-actions:
+        update-types:
+          - "major"
+    schedule:
+      interval: "monthly"

.github/workflows/cd.yml

@@ -1,7 +1,10 @@
 name: CD
 on:
   push:
-    branches: [production, docs]
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+"
+    branches:
+      - docs
 
 jobs:
   launch:

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ on:
       - ".github/**"
       - "!.github/workflows/ci.yml"
       - ".gitignore"
+      - "docs/**"
       - "README.md"
       - "LICENSE"
   pull_request:
@@ -18,24 +19,20 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        ruby: [2.7, 3]
-
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # for posts's lastmod
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: ${{ matrix.ruby }}
+          ruby-version: 3
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
 
       - name: Build Assets
         run: npm i && npm run build

.github/workflows/codeql.yml

@@ -25,7 +25,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/commitlint.yml

@@ -5,7 +5,7 @@ jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: wagoid/commitlint-github-action@v5

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

@@ -28,7 +28,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # submodules: true
@@ -42,7 +42,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3   # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
+          ruby-version: 3
           bundler-cache: true
 
       - name: Build site
@@ -52,7 +52,9 @@ jobs:
 
       - name: Test site
         run: |
-          bundle exec htmlproofer _site --disable-external --check-html --allow_hash_href
+          bundle exec htmlproofer _site \
+            \-\-disable-external=true \
+            \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
         uses: actions/upload-pages-artifact@v1

.github/workflows/style-lint.yml

@@ -17,9 +17,9 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
       - run: npm i
       - run: npm test

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "trailingComma": "none"
-}

.stylelintrc.json

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

.versionrc.json

@@ -1,20 +0,0 @@
-{
-  "skip": {
-    "commit": true,
-    "tag": true
-  },
-  "types": [
-    {
-      "type": "feat",
-      "section": "Features"
-    },
-    {
-      "type": "fix",
-      "section": "Bug Fixes"
-    },
-    {
-      "type": "perf",
-      "section": "Improvements"
-    }
-  ]
-}

Gemfile

@@ -5,7 +5,7 @@ source "https://rubygems.org"
 gemspec
 
 group :test do
-  gem "html-proofer", "~> 3.18"
+  gem "html-proofer", "~> 4.4"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -21,8 +21,3 @@ gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 # Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
 # do not have a Java counterpart.
 gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
-
-# Lock jekyll-sass-converter to 2.x on Linux-musl
-if RUBY_PLATFORM =~ /linux-musl/
-  gem "jekyll-sass-converter", "~> 2.0"
-end

README.md

@@ -2,12 +2,12 @@
 
   # Chirpy Jekyll Theme
 
-  A minimal, responsive and feature-rich Jekyll theme for technical writing.
+  A minimal, responsive, and feature-rich Jekyll theme for technical writing.
 
-  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
-  [![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)
+  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)][gem] 
+  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg?branch=master&event=push)][ci] 
+  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)][codacy] 
+  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)][license] 
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
   [**Live Demo →**][demo]
@@ -19,76 +19,76 @@
 ## Features
 
 <details>
-  <summary>
-    <i>Click to view features</i>
-  </summary>
-  <p>
+  <summary>Click to expand/close details</summary>
+  &nbsp;
 
-  - Dark / Light Theme Mode
-  - Localized UI language
-  - Pinned Posts
-  - Hierarchical Categories
-  - Trending Tags
-  - Table of Contents
-  - 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
-  - SEO & Performance Optimization
+- Dark / Light Theme Mode
+- Localized UI language
+- Pinned Posts on Home Page
+- Hierarchical Categories
+- Trending Tags
+- Table of Contents
+- Last Modified Date
+- Syntax Highlighting
+- Mathematical Expressions
+- Mermaid Diagrams & Flowcharts
+- Dark / Light Mode Images
+- Embed Videos
+- Disqus / Giscus / Utterances Comments
+- Built-in Search
+- Atom Feeds
+- PWA
+- Google Analytics
+- SEO & Performance Optimization
 
-  </p>
 </details>
 
 ## Documentation
 
-To explore usage, development, and upgrade guide of the project, please refer to
-the [Wiki][wiki].
+To learn how to use, develop, and upgrade the project, please refer to the [Wiki][wiki].
 
 ## Contributing
 
-Welcome to report bugs, help improve the code or submit new features.
-For more information, please see the ["Contributing Guidelines"][contribute-guide].
+Contributions (_pull requests_, _issues_, and _discussions_) are what make the open-source community such an amazing place
+to learn, inspire, and create. Any contributions you make are greatly appreciated.
+For details, see the "[Contributing Guidelines][contribute-guide]".
 
 ## Credits
 
-This theme is mainly built with [Jekyll][jekyllrb] ecosystem,
-[Bootstrap][bootstrap], [Font Awesome][icons] and some other [wonderful tools][lib].
-The avatar and favicon design come from [Clipart Max][image].
+This project was built primarily with the [Jekyll][jekyllrb] ecosystem,
+[Bootstrap][bootstrap], [Font Awesome][icons], and some other [wonderful tools][lib].
+The avatar and favicon design from [Clipart Max][image].
 
-Thanks to all the [contributors][contributors]. Also, folks who submitted issues
-or unmerged PRs should not be forgotten. Because they reported bugs, shared ideas,
-or inspired me to write more readable documentation.
+Many thanks to the [contributors][contributors] who participated in the development
+and to the folks who reported bugs or shared ideas.
 
-Last but not least, thanks to [JetBrains][jetbrains] for providing the
-_Open Source Development_ license.
+Last but not least, thanks to [JetBrains][jetbrains] for providing the _Open Source License_.
 
 ## Sponsoring
 
-If you'd like to sponsor this project, the following options are available.
+If you like this project or have built something through it, please consider sponsoring it, and your support would be greatly appreciated.
 
-[![Ko-fi](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff5f5f?logo=ko-fi&logoColor=white)](https://ko-fi.com/coteschung)
-[![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][donation]
-[![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][donation]
+[![Ko-fi](https://img.shields.io/badge/Support_Me_on_Ko--fi-ff5e5b?logo=ko-fi&logoColor=white)][ko-fi]&nbsp;
+[![Wechat Pay](https://img.shields.io/badge/Support_Me_on_WeChat-brightgreen?logo=wechat&logoColor=white)][donation]&nbsp;
+[![Alipay](https://img.shields.io/badge/Support_Me_on_Alipay-blue?logo=alipay&logoColor=white)][donation]
 
 ## License
 
-This work is published under [MIT][mit] License.
+This project is published under [MIT License][license].
 
+[gem]: https://rubygems.org/gems/jekyll-theme-chirpy
+[ci]: https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml?query=event%3Apush+branch%3Amaster
+[codacy]: https://app.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade
+[license]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE
 [jekyllrb]: https://jekyllrb.com/
 [bootstrap]: https://getbootstrap.com/
 [icons]: https://fontawesome.com/
 [image]: https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/
 [demo]: https://cotes2020.github.io/chirpy-demo/
 [wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md
+[contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md
 [contributors]: https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors
 [lib]: https://github.com/cotes2020/chirpy-static-assets
 [jetbrains]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[ko-fi]: https://ko-fi.com/coteschung/
 [donation]: https://sponsor.cotes.page/
-[mit]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE

_config.yml

@@ -3,16 +3,12 @@
 # Import the theme
 theme: jekyll-theme-chirpy
 
-# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
-# and doesn't have a custom domain.
-baseurl: ""
-
 # The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
 # If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker
 timezone: Asia/Shanghai
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
@@ -25,7 +21,8 @@ tagline: A text-focused Jekyll theme # it will display as the sub-title
 description: >- # used by seo meta and the atom feed
   A minimal, responsive and feature-rich Jekyll theme for technical writing.
 
-# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
+# Fill in the protocol & hostname for your site.
+# e.g. 'https://username.github.io', note that it does not end with a '/'.
 url: ""
 
 github:
@@ -114,6 +111,9 @@ pwa:
 
 paginate: 10
 
+# The base URL of your site
+baseurl: ""
+
 # ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
@@ -177,12 +177,11 @@ compress_html:
 exclude:
   - "*.gem"
   - "*.gemspec"
+  - docs
   - tools
   - README.md
-  - CHANGELOG.md
   - LICENSE
   - rollup.config.js
-  - node_modules
   - package*.json
 
 jekyll-archives:

_data/contact.yml

@@ -4,7 +4,7 @@
   icon: "fab fa-github"
 
 - type: twitter
-  icon: "fab fa-twitter"
+  icon: "fa-brands fa-x-twitter"
 
 - type: email
   icon: "fas fa-envelope"

_data/locales/de-DE.yml

@@ -58,7 +58,7 @@ post:
   pageview_measure: Aufrufe
   read_time:
     unit: Minuten
-    prompt: lesen
+    prompt: Lesezeit
   relate_posts: Weiterlesen
   share: Teilen
   button:
@@ -70,6 +70,13 @@ post:
       title: Link kopieren
       succeed: Link erfolgreich kopiert!
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%d.%m.%Y"
+    dayjs: "DD.MM.YYYY"
+    
 # categories page
 categories:
   category_measure:

_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: Using the :PLATFORM theme :THEME
+meta: Using the :THEME theme for :PLATFORM.
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.

_data/locales/ru-RU.yml

@@ -3,14 +3,14 @@
 # ----- Commons label -----
 
 layout:
-  post: Публикация
+  post: Пост
   category: Категория
   tag: Тег
 
 # The tabs of sidebar
 tabs:
   # format: <filename_without_extension>: <value>
-  home: Домашняя страница
+  home: Главная
   categories: Категории
   tags: Теги
   archives: Архив
@@ -19,8 +19,8 @@ tabs:
 # the text displayed in the search bar & search results
 search:
   hint: поиск
-  cancel: Отменить
-  no_results: Ох! Ничего не найдено.
+  cancel: Отмена
+  no_results: Упс! Ничего не найдено.
 
 panel:
   lastmod: Недавно обновлено
@@ -30,48 +30,58 @@ panel:
 copyright:
   # Shown at the bottom of the post
   license:
-    template: Публикация защищена лицензией :LICENSE_NAME.
+    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),
-    если в тексте публикации не указано иное.
+    Если не указано иное, авторские посты на этом сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0).
 
-meta: Powered by :PLATFORM with :THEME theme
+meta: Использует тему :THEME для :PLATFORM
 
 not_found:
-  statment: Извините, эта ссылка указывает на ресурс который не существует.
+  statment: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
 
 notification:
   update_found: Доступна новая версия контента.
-  update: Обновлять
+  update: Обновить
 
 # ----- Posts related labels -----
 
 post:
   written_by: Автор
-  posted: Время публикации
+  posted: Опубликовано
   updated: Обновлено
   words: слов
   pageview_measure: просмотров
   read_time:
-    unit: минут
+    unit: мин.
     prompt: чтения
-  relate_posts: Вам также может быть интересно
+  relate_posts: Похожие посты
   share: Поделиться
   button:
-    next: Предыдущая публикация
-    previous: Следующая публикация
+    next: Следующий пост
+    previous: Предыдущий пост
     copy_code:
-      succeed: Скопировано успешно!
+      succeed: Скопировано!
     share_link:
       title: Скопировать ссылку
       succeed: Ссылка успешно скопирована!
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%d.%m.%Y"
+    dayjs: "DD.MM.YYYY"
+    
 # categories page
 categories:
-  category_measure: категории
-  post_measure: публикации
+  category_measure:
+    singular: категория
+    plural: категории
+  post_measure:
+    singular: пост
+    plural: посты

_data/locales/tr-TR.yml

@@ -23,7 +23,7 @@ search:
   no_results: Hop! Öyle bir şey bulamadım.
 
 panel:
-  lastmod: Yeni Güncellendi
+  lastmod: Son Güncellenenler
   trending_tags: Yükselen Etiketler
   toc: İçindekiler
 
@@ -38,7 +38,7 @@ copyright:
   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.
+    Kısaca sayfa linkini vererek değiştirebilir / paylaşabilirsiniz.
 
 meta: :PLATFORM ve :THEME teması
 
@@ -53,8 +53,8 @@ notification:
 
 post:
   written_by: Yazan
-  posted: Gönderilme Tarihi
-  updated: Güncellenme Tarihi
+  posted: Gönderim
+  updated: Güncelleme
   words: sözcük
   pageview_measure: görüntülenme
   read_time:

_data/origin/basic.yml

@@ -35,14 +35,12 @@ magnific-popup:
   css: /assets/lib/magnific-popup/magnific-popup.css
   js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
 
-lazysizes:
-  js: /assets/lib/lazysizes/lazysizes.min.js
+lazy-polyfill:
+  css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css
+  js: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.umd.min.js
 
 clipboard:
   js: /assets/lib/clipboard/clipboard.min.js
 
-polyfill:
-  js: /assets/lib/polyfill-v3-es6/polyfill.min.js
-
 mathjax:
   js: /assets/lib/mathjax/tex-chtml.js

_data/origin/cors.yml

@@ -16,44 +16,42 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.3/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.3/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/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@9.4.3/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@10.6.0/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/localizedFormat.min.js
 
 magnific-popup:
   css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
   js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
 
-lazysizes:
-  js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
+lazy-polyfill:
+  css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css
+  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js
 
 clipboard:
   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.2.2/es5/tex-chtml.js

_data/share.yml

@@ -3,7 +3,7 @@
 
 platforms:
   - type: Twitter
-    icon: "fab fa-twitter"
+    icon: "fa-brands fa-square-x-twitter"
     link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
 
   - type: Facebook
@@ -23,3 +23,16 @@ platforms:
   # - type: Weibo
   #   icon: "fab fa-weibo"
   #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #
+  # - type: Mastodon
+  #   icon: "fa-brands fa-mastodon"
+  #   # See: https://github.com/justinribeiro/share-to-mastodon#properties
+  #   instances:
+  #     - label: mastodon.social
+  #       link: "https://mastodon.social/"
+  #     - label: mastodon.online
+  #       link: "https://mastodon.online/"
+  #     - label: fosstodon.org
+  #       link: "https://fosstodon.org/"
+  #     - label: photog.social
+  #       link: "https://photog.social/"

_includes/comments/disqus.html

@@ -1,5 +1,6 @@
 <!-- The Disqus lazy loading. -->
-<div id="disqus_thread" class="pt-2 pb-2">
+
+<div id="disqus_thread">
   <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
 </div>
 

_includes/comments/giscus.html

@@ -30,6 +30,7 @@
       'data-theme': initTheme,
       'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
       'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      'data-loading': 'lazy',
       crossorigin: 'anonymous',
       async: ''
     };

_includes/comments/utterances.html

@@ -1,51 +1,50 @@
 <!-- https://utteranc.es/ -->
-<script src="https://utteranc.es/client.js"
-        repo="{{ site.comments.utterances.repo }}"
-        issue-term="{{ site.comments.utterances.issue_term }}"
-        crossorigin="anonymous"
-        async>
-</script>
+<script
+  src="https://utteranc.es/client.js"
+  repo="{{ site.comments.utterances.repo }}"
+  issue-term="{{ site.comments.utterances.issue_term }}"
+  crossorigin="anonymous"
+  async
+></script>
 
 <script type="text/javascript">
-  $(function() {
-    const origin = "https://utteranc.es";
-    const iframe = "iframe.utterances-frame";
-    const lightTheme = "github-light";
-    const darkTheme = "github-dark";
+  (function () {
+    const origin = 'https://utteranc.es';
+    const iframe = 'iframe.utterances-frame';
+    const lightTheme = 'github-light';
+    const darkTheme = 'github-dark';
     let initTheme = lightTheme;
+    const html = document.documentElement;
 
-    if ($("html[data-mode=dark]").length > 0
-        || ($("html[data-mode]").length == 0
-            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    if (
+      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
       initTheme = darkTheme;
     }
 
-    addEventListener("message", (event) => {
+    addEventListener('message', (event) => {
       let theme;
 
       /* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
       if (event.origin === origin) {
         /* page initial */
         theme = initTheme;
-
-      } else if (event.source === window && event.data &&
-            event.data.direction === ModeToggle.ID) {
+      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
         /* global theme mode changed */
         const mode = event.data.message;
-        theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
-
+        theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
       } else {
         return;
       }
 
       const message = {
-        type: "set-theme",
+        type: 'set-theme',
         theme: theme
       };
 
       const utterances = document.querySelector(iframe).contentWindow;
       utterances.postMessage(message, origin);
     });
-
-  });
+  })();
 </script>

_includes/datetime.html

@@ -3,12 +3,13 @@
   See: ${JS_ROOT}/utils/locale-dateime.js
 -->
 
-{% assign wrap_elem = include.wrap | default: 'em' %}
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
 {% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
 
-<{{ wrap_elem }}
-  class="{% if include.class %}{{ include.class }}{% endif %}"
+<time
+  {% if include.class %}
+    class="{{ include.class }}"
+  {% endif %}
   data-ts="{{ include.date | date: '%s' }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
@@ -16,4 +17,4 @@
   {% endif %}
 >
   {{ include.date | date: df_strftime }}
-</{{ wrap_elem }}>
+</time>

_includes/embed/twitch.html

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

_includes/embed/youtube.html

@@ -1,6 +1,9 @@
-<iframe class="embed-video youtube lazyload"
+<iframe
+  class="embed-video youtube"
+  loading="lazy"
   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>
+  allowfullscreen
+></iframe>

_includes/footer.html

@@ -1,34 +1,36 @@
 <!-- The Footer -->
 
-<footer>
-  <div class="container px-lg-4">
-    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
-      <p>
-        {%- capture _platform -%}
-          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {%- endcapture -%}
+<footer
+  aria-label="Site Info"
+  class="
+    d-flex flex-column justify-content-center text-muted
+    flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
+  "
+>
+  <p>
+    {{ '©' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
+    <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+    {% if site.data.locales[include.lang].copyright.brief %}
+      <span
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="{{ site.data.locales[include.lang].copyright.verbose }}"
+      >
+        {{- site.data.locales[include.lang].copyright.brief -}}
+      </span>
+    {% endif %}
+  </p>
 
-        {%- capture _theme -%}
-          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-        {%- endcapture -%}
+  <p>
+    {%- capture _platform -%}
+      <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+    {%- endcapture -%}
 
-        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
-      </p>
+    {%- capture _theme -%}
+      <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+    {%- endcapture -%}
 
-      <p>
-        {{- '©' }}
-        {{ 'now' | date: '%Y' }}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.locales[include.lang].copyright.brief %}
-          <span
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            title="{{ site.data.locales[include.lang].copyright.verbose }}"
-          >
-            {{- site.data.locales[include.lang].copyright.brief -}}
-          </span>
-        {% endif %}
-      </p>
-    </div>
-  </div>
+    {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+  </p>
 </footer>

_includes/head.html

@@ -74,12 +74,16 @@
   <!-- Font Awesome -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
 
   {% if site.toc and page.toc %}
     <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
+  {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+    <link rel="stylesheet" href="{{ site.data.origin[type]['lazy-polyfill'].css | relative_url }}">
+  {% endif %}
+
   {% if page.layout == 'page' or page.layout == 'post' %}
     <!-- Manific Popup -->
     <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">

_includes/js-selector.html

@@ -12,7 +12,7 @@
 <!-- layout specified -->
 
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
-  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type]['lazy-polyfill'].js %}
 
   {% unless page.layout == 'home' %}
     <!-- image lazy-loading & popup & clipboard -->
@@ -87,7 +87,7 @@
       }
     };
   </script>
-  <script src="{{ site.data.origin[type].polyfill.js | relative_url }}"></script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 

_includes/notification.html

@@ -0,0 +1,24 @@
+<aside
+  id="notification"
+  class="toast"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-bs-animation="true"
+  data-bs-autohide="false"
+>
+  <div class="toast-header">
+    <button
+      type="button"
+      class="btn-close ms-auto"
+      data-bs-dismiss="toast"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="toast-body text-center pt-0">
+    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
+    <button type="button" class="btn btn-primary" aria-label="Update">
+      {{ site.data.locales[include.lang].notification.update }}
+    </button>
+  </div>
+</aside>

_includes/post-nav.html

@@ -1,19 +1,19 @@
 <!-- Navigation buttons at the bottom of the post. -->
 
-<div class="post-navigation d-flex justify-content-between">
+<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
+  {% assign previous = site.data.locales[include.lang].post.button.previous %}
+  {% assign next = site.data.locales[include.lang].post.button.next %}
+
   {% if page.previous.url %}
     <a
       href="{{ site.baseurl }}{{ page.previous.url }}"
       class="btn btn-outline-primary"
-      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
+      aria-label="{{ previous }}"
     >
       <p>{{ page.previous.title }}</p>
     </a>
   {% else %}
-    <div
-      class="btn btn-outline-primary disabled"
-      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
-    >
+    <div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
       <p>-</p>
     </div>
   {% endif %}
@@ -22,16 +22,13 @@
     <a
       href="{{ site.baseurl }}{{page.next.url}}"
       class="btn btn-outline-primary"
-      prompt="{{ site.data.locales[include.lang].post.button.next }}"
+      aria-label="{{ next }}"
     >
       <p>{{ page.next.title }}</p>
     </a>
   {% else %}
-    <div
-      class="btn btn-outline-primary disabled"
-      prompt="{{ site.data.locales[include.lang].post.button.next }}"
-    >
+    <div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
       <p>-</p>
     </div>
   {% endif %}
-</div>
+</nav>

_includes/post-paginator.html

@@ -1,89 +1,91 @@
 <!-- The paginator for post list on HomgPage. -->
 
-<ul class="pagination align-items-center mt-4 mb-1 ps-lg-2">
-  <!-- left arrow -->
-  {% if paginator.previous_page %}
-    {% assign prev_url = paginator.previous_page_path | relative_url %}
-  {% else %}
-    {% assign prev_url = '#' %}
-  {% endif %}
-
-  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
-    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
-      <i class="fas fa-angle-left"></i>
-    </a>
-  </li>
-
-  <!-- page numbers -->
-  {% assign left_ellipsis = false %}
-  {% assign right_ellipsis = false %}
-
-  {% for i in (1..paginator.total_pages) %}
-    {% assign pre = paginator.page | minus: 1 %}
-    {% assign next = paginator.page | plus: 1 %}
-    {% assign pre_less = pre | minus: 1 %}
-    {% assign next_more = next | plus: 1 %}
-    {% assign show = false %}
-
-    {% if paginator.page == 1 %}
-      {% if i <= 3 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% endif %}
-    {% elsif paginator.page == paginator.total_pages %}
-      {% if i == 1 or i >= pre_less %}
-        {% assign show = true %}
-      {% endif %}
+<nav aria-label="Page Navigation">
+  <ul class="pagination align-items-center mt-4 mb-0">
+    <!-- left arrow -->
+    {% if paginator.previous_page %}
+      {% assign prev_url = paginator.previous_page_path | relative_url %}
     {% else %}
-      {% if i == 1 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% elsif i >= pre and i <= next %}
-        {% assign show = true %}
-      {% endif %}
+      {% assign prev_url = '#' %}
     {% endif %}
 
-    {% if show %}
-      <!-- show number -->
-      <li class="page-item {% if i == paginator.page %} active{% endif %}">
-        <a
-          class="page-link btn-box-shadow"
-          href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
-        >
-          {{- i -}}
-        </a>
-      </li>
-    {% else %}
-      <!-- hide number -->
-      {% if i < pre and left_ellipsis == false %}
-        <li class="page-item disabled">
-          <span class="page-link btn-box-shadow">...</span>
-        </li>
-        {% assign left_ellipsis = true %}
-      {% elsif i > next and right_ellipsis == false %}
-        <li class="page-item disabled">
-          <span class="page-link btn-box-shadow">...</span>
-        </li>
-        {% assign right_ellipsis = true %}
+    <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
+        <i class="fas fa-angle-left"></i>
+      </a>
+    </li>
+
+    <!-- page numbers -->
+    {% assign left_ellipsis = false %}
+    {% assign right_ellipsis = false %}
+
+    {% for i in (1..paginator.total_pages) %}
+      {% assign pre = paginator.page | minus: 1 %}
+      {% assign next = paginator.page | plus: 1 %}
+      {% assign pre_less = pre | minus: 1 %}
+      {% assign next_more = next | plus: 1 %}
+      {% assign show = false %}
+
+      {% if paginator.page == 1 %}
+        {% if i <= 3 or i == paginator.total_pages %}
+          {% assign show = true %}
+        {% endif %}
+      {% elsif paginator.page == paginator.total_pages %}
+        {% if i == 1 or i >= pre_less %}
+          {% assign show = true %}
+        {% endif %}
+      {% else %}
+        {% if i == 1 or i == paginator.total_pages %}
+          {% assign show = true %}
+        {% elsif i >= pre and i <= next %}
+          {% assign show = true %}
+        {% endif %}
       {% endif %}
+
+      {% if show %}
+        <!-- show number -->
+        <li class="page-item {% if i == paginator.page %} active{% endif %}">
+          <a
+            class="page-link"
+            href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
+          >
+            {{- i -}}
+          </a>
+        </li>
+      {% else %}
+        <!-- hide number -->
+        {% if i < pre and left_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link">...</span>
+          </li>
+          {% assign left_ellipsis = true %}
+        {% elsif i > next and right_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link">...</span>
+          </li>
+          {% assign right_ellipsis = true %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+    <!-- mobile pagination -->
+    <li class="page-index align-middle">
+      <span>{{ paginator.page }}</span>
+      <span class="text-muted">/ {{ paginator.total_pages }}</span>
+    </li>
+
+    <!-- right arrow -->
+    {% if paginator.next_page_path %}
+      {% assign next_url = paginator.next_page_path | relative_url %}
+    {% else %}
+      {% assign next_url = '#' %}
     {% endif %}
-  {% endfor %}
 
-  <!-- mobile pagination -->
-  <li class="page-index align-middle">
-    <span>{{ paginator.page }}</span>
-    <span class="text-muted">/ {{ paginator.total_pages }}</span>
-  </li>
-
-  <!-- right arrow -->
-  {% if paginator.next_page_path %}
-    {% assign next_url = paginator.next_page_path | relative_url %}
-  {% else %}
-    {% assign next_url = '#' %}
-  {% endif %}
-
-  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
-    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
-      <i class="fas fa-angle-right"></i>
-    </a>
-  </li>
-</ul>
+    <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+      <a class="page-link" href="{{ next_url }}" aria-label="next-page">
+        <i class="fas fa-angle-right"></i>
+      </a>
+    </li>
+  </ul>
+</nav>
 <!-- .pagination -->

_includes/post-sharing.html

@@ -1,35 +1,52 @@
 <!-- Post sharing snippet -->
 
-<div class="share-wrapper">
-  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
+<div class="share-wrapper d-flex align-items-center">
+  <span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
     {% assign url = page.url | absolute_url | url_encode %}
 
-    {% for share in site.data.share.platforms %}
+    {% for share in site.data.share.platforms -%}
+      {%- capture tooltip -%}
+        data-bs-toggle="tooltip" data-bs-placement="top" title="{{ share.type }}" aria-label="{{ share.type }}"
+      {%- endcapture -%}
+
+      {% if share.type == 'Mastodon' %}
+        <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
+        <button class="btn text-start" {{ tooltip }}>
+          <share-to-mastodon
+            class="share-mastodon"
+            message="{{ title }}"
+            url="{{ url }}"
+            {%- if share.instances -%}
+              customInstanceList="{{ share.instances | jsonify | xml_escape }}"
+            {%- endif %}
+          >
+            <i class="fa-fw {{ share.icon }}"></i>
+          </share-to-mastodon>
+        </button>
+
+        {% continue %}
+      {% endif %}
+
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
-      <a
-        href="{{ link }}"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        title="{{ share.type }}"
-        target="_blank"
-        rel="noopener"
-        aria-label="{{ share.type }}"
-      >
+
+      <a href="{{ link }}" target="_blank" rel="noopener" {{ tooltip }}>
         <i class="fa-fw {{ share.icon }}"></i>
       </a>
     {% endfor %}
 
-    <i
+    <button
       id="copy-link"
-      class="fa-fw fas fa-link small"
+      aria-label="Copy link"
+      class="btn small"
       data-bs-toggle="tooltip"
       data-bs-placement="top"
       title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
       data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
     >
-    </i>
+      <i class="fa-fw fas fa-link pe-none fs-6"></i>
+    </button>
   </span>
 </div>

_includes/refactor-content.html

@@ -30,22 +30,22 @@
 {% endif %}
 
 <!-- Change the icon of checkbox -->
+
 {% if _content contains '<input type="checkbox"' %}
   {% assign _content = _content
-    | 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>'
+    | 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 %}
 
-<!-- images -->
+<!-- Handle images -->
+
 {% assign IMG_TAG = '<img ' %}
 
 {% if _content contains IMG_TAG %}
-  {% assign _img_content = nil %}
+  {% assign _img_content = null %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
   <!-- CDN URL -->
@@ -81,10 +81,9 @@
     {% 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 %}
+    {% assign _src = null %}
+    {% assign _lqip = null %}
+    {% assign _class = null %}
 
     {% for _attr in _attrs %}
       {% unless _attr contains '=' %}
@@ -96,10 +95,6 @@
       {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
 
       {% case _key %}
-        {% when 'width' %}
-          {% assign _width = _value %}
-        {% when 'height' %}
-          {% assign _height = _value %}
         {% when 'src' %}
           {% assign _src = _value %}
         {% when 'lqip' %}
@@ -115,54 +110,40 @@
       {% assign _left = _left | remove: _old_class %}
     {% endif %}
 
-    {% assign _final_src = nil %}
+    {% assign _final_src = null %}
+    {% assign _lazyload = true %}
 
     {% unless _src contains '//' %}
       {% 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 %}
+      {% assign _src_alt = 'src="' | append: _path_prefix %}
+      {% assign _left = _left | replace: 'src="', _src_alt %}
     {% endunless %}
 
     {% 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 %}
+      {% assign _lazyload = false %}
+      {% assign _class = _class | append: ' blur' %}
+
+      {% unless _lqip contains 'data:' %}
+        {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
+        {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
       {% endunless %}
-    {% endif %}
 
-    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
-    {% assign _left = _left | replace: 'src=', 'data-src=' %}
-    {% if _left contains 'class=' %}
-      {% assign _left = _left | replace: 'class="', 'class="lazyload '%}
+      <!-- add image placeholder -->
+      {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
+
     {% else %}
-      {% assign _left = _left | append: ' class="lazyload"' %}
+      {% assign _class = _class | append: ' shimmer' %}
     {% endif %}
 
-    <!-- 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 %}
+    <!-- lazy-load images -->
+    {% if _lazyload %}
+      {% assign _left = _left | append: ' loading="lazy"' %}
     {% endif %}
 
-    <!-- Bypass the HTML-proofer test -->
-    {% assign _left = _left | append: ' data-proofer-ignore' %}
-
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {%- capture _wrapper_start -%}
-        <div class="preview-img {{ _class | strip }}">
-      {%- endcapture -%}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
+
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
 
@@ -176,26 +157,30 @@
         {% capture _class %}
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
         {% endcapture %}
-        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+        {% 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 _wrapper_start = _final_src
+          | default: _src
+          | prepend: '<a href="'
+          | append: '" class="popup img-link '
+          | append: _class
+          | append: '">'
+        %}
+
         {% assign _img_content = _img_content | append: _wrapper_start %}
-        {% assign _right = _right | prepend: '></a' %}
+        {% assign _right = '></a' | append: _right %}
       {% endif %}
     {% endif %}
 
     <!-- combine -->
-    {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
-
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
   {% endfor %}
 
   {% if _img_content %}
     {% assign _content = _img_content %}
   {% endif %}
-
 {% endif %}
 
 <!-- Add header for code snippets -->
@@ -205,13 +190,11 @@
   {% assign _new_content = '' %}
 
   {% for _snippet in _code_spippets %}
-
     {% if forloop.last %}
       {% assign _new_content = _new_content | append: _snippet %}
 
     {% else %}
-
-      {% assign _left = _snippet | split: '><' | last%}
+      {% assign _left = _snippet | split: '><' | last %}
 
       {% if _left contains 'file="' %}
         {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
@@ -226,21 +209,19 @@
         <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
-      {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header">'
-          | append: _label
-          | append: '<button aria-label="copy" data-title-succeed="'
-          | append: site.data.locales[include.lang].post.button.copy_code.succeed
-          | append: '"><i class="far fa-clipboard"></i></button></div>'
-          | append: '<div class="highlight"><code>'
+      {% assign _new_content = _new_content
+        | append: _snippet
+        | append: '<div class="code-header">'
+        | append: _label
+        | append: '<button aria-label="copy" data-title-succeed="'
+        | append: site.data.locales[include.lang].post.button.copy_code.succeed
+        | append: '"><i class="far fa-clipboard"></i></button></div>'
+        | append: '<div class="highlight"><code>'
       %}
-
     {% endif %}
-
   {% endfor %}
 
   {% assign _content = _new_content %}
-
 {% endif %}
 
 <!-- Create heading anchors -->
@@ -249,11 +230,11 @@
 {% assign _heading_content = _content %}
 
 {% for level in heading_levels %}
-  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
-  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+  {% assign mark_start = '<h' | append: level | append: ' id="' %}
+  {% assign mark_end = '</h' | append: level | append: '>' %}
 
   {% if _heading_content contains mark_start %}
-    {% assign _new_content = nil %}
+    {% assign _new_content = null %}
     {% assign heading_snippets = _heading_content | split: mark_start %}
 
     {% for snippet in heading_snippets %}
@@ -263,20 +244,19 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% assign anchor = '<a href="#'
+        | append: id
+        | append: '" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>'
+      %}
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
       {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
 
-      {% assign _new_content = _new_content | append: mark_start
-          | append: left | append: anchor | append: right
-      %}
-
+      {% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
     {% endfor %}
 
     {% assign _heading_content = _new_content %}
-
   {% endif %}
 {% endfor %}
 

_includes/related-posts.html

@@ -1,7 +1,4 @@
-<!--
-  Recommend the other 3 posts according to the tags and categories of the current post,
-  if the number is not enough, use the other latest posts to supplement.
--->
+<!-- Recommend the other 3 posts according to the tags and categories of the current post. -->
 
 <!-- The total size of related posts -->
 {% assign TOTAL_SIZE = 3 %}
@@ -14,11 +11,21 @@
 
 {% assign SEPARATOR = ':' %}
 
+{% assign match_posts = '' | split: '' %}
+
+{% for category in page.categories %}
+  {% assign match_posts = match_posts | push: site.categories[category] | uniq %}
+{% endfor %}
+
+{% for tag in page.tags %}
+  {% assign match_posts = match_posts | push: site.tags[tag] | uniq %}
+{% endfor %}
+
+{% assign last_index = match_posts.size | minus: 1 %}
 {% assign score_list = '' | split: '' %}
-{% assign last_index = site.posts.size | minus: 1 %}
 
 {% for i in (0..last_index) %}
-  {% assign post = site.posts[i] %}
+  {% assign post = match_posts[i] %}
 
   {% if post.url == page.url %}
     {% continue %}
@@ -54,40 +61,26 @@
   {% endfor %}
 {% endif %}
 
-<!-- Fill with the other newlest posts -->
-{% assign less = TOTAL_SIZE | minus: index_list.size %}
+{% assign relate_posts = '' | split: '' %}
 
-{% if less > 0 %}
-  {% for i in (0..last_index) %}
-    {% assign post = site.posts[i] %}
-    {% if post.url != page.url %}
-      {% capture cur_index %}{{ i }}{% endcapture %}
-      {% unless index_list contains cur_index %}
-        {% assign index_list = index_list | push: cur_index %}
-        {% assign less = less | minus: 1 %}
-        {% if less <= 0 %}
-          {% break %}
-        {% endif %}
-      {% endunless %}
-    {% endif %}
-  {% endfor %}
-{% endif %}
+{% for index in index_list %}
+  {% assign i = index | to_integer %}
+  {% assign relate_posts = relate_posts | push: match_posts[i] %}
+{% endfor %}
 
-{% if index_list.size > 0 %}
-  <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
-      {{ site.data.locales[include.lang].post.relate_posts }}
+{% if relate_posts.size > 0 %}
+  <aside id="related-posts" aria-labelledby="related-label">
+    <h3 class="mb-4" id="related-label">
+      {{- site.data.locales[include.lang].post.relate_posts -}}
     </h3>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
-      {% for entry in index_list %}
-        {% assign index = entry | plus: 0 %}
-        {% assign post = site.posts[index] %}
-        <div class="col">
-          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
+    <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+      {% for post in relate_posts %}
+        <article class="col">
+          <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
             <div class="card-body">
-              {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
-              <div class="text-muted small">
+              {% include datetime.html date=post.date lang=include.lang %}
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
+              <div class="text-muted">
                 <p>
                   {% include no-linenos.html content=post.content %}
                   {{ content | markdownify | strip_html | truncate: 200 | escape }}
@@ -95,10 +88,9 @@
               </div>
             </div>
           </a>
-        </div>
+        </article>
       {% endfor %}
-    </div>
-    <!-- .card-deck -->
-  </div>
+    </nav>
+  </aside>
   <!-- #related-posts -->
 {% endif %}

_includes/search-loader.html

@@ -4,14 +4,16 @@
 -->
 
 {% capture result_elem %}
-<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
-  <a href="{url}">{title}</a>
-  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    {categories}
-    {tags}
-  </div>
-  <p>{snippet}</p>
-</div>
+  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
+    <header>
+      <h2><a href="{url}">{title}</a></h2>
+      <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+        {categories}
+        {tags}
+      </div>
+    </header>
+    <p>{snippet}</p>
+  </article>
 {% endcapture %}
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}

_includes/search-results.html

@@ -1,7 +1,7 @@
 <!-- The Search results -->
 
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-11 post-content">
+  <div class="col-11 content">
     <div id="search-hints">
       {% include_cached trending-tags.html %}
     </div>

_includes/sidebar.html

@@ -1,7 +1,7 @@
 <!-- The Side Bar -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper">
+<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
+  <header class="profile-wrapper">
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {% if site.avatar != empty and site.avatar %}
         {% capture avatar_url %}
@@ -17,39 +17,40 @@
       {% endif %}
     </a>
 
-    <div class="site-title">
+    <h1 class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </div>
-    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
-  </div>
+    </h1>
+    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
+  </header>
   <!-- .profile-wrapper -->
 
-  <ul class="nav flex-column flex-grow-1 w-100 ps-0">
-    <!-- home -->
-    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home"></i>
-        <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
-      </a>
-    </li>
-    <!-- the real tabs -->
-    {% for tab in site.tabs %}
-      <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-        <a href="{{ tab.url | relative_url }}" class="nav-link">
-          <i class="fa-fw {{ tab.icon }}"></i>
-          {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
-
-          <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+  <nav class="flex-column flex-grow-1 w-100 ps-0">
+    <ul class="nav">
+      <!-- home -->
+      <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
+        <a href="{{ '/' | relative_url }}" class="nav-link">
+          <i class="fa-fw fas fa-home"></i>
+          <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
         </a>
       </li>
-      <!-- .nav-item -->
-    {% endfor %}
-  </ul>
-  <!-- ul.nav.flex-column -->
+      <!-- the real tabs -->
+      {% for tab in site.tabs %}
+        <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+          <a href="{{ tab.url | relative_url }}" class="nav-link">
+            <i class="fa-fw {{ tab.icon }}"></i>
+            {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+
+            <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+          </a>
+        </li>
+        <!-- .nav-item -->
+      {% endfor %}
+    </ul>
+  </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -100,5 +101,5 @@
     {% endfor %}
   </div>
   <!-- .sidebar-bottom -->
-</div>
+</aside>
 <!-- #sidebar -->

_includes/toc.html

@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <div id="toc-wrapper" class="ps-0 pe-4 mb-5">
-    <div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
+  <section id="toc-wrapper" class="ps-0 pe-4">
+    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
-  </div>
+  </section>
 {% endif %}

_includes/topbar.html

@@ -1,11 +1,11 @@
 <!-- The Top Bar -->
 
-<div id="topbar-wrapper">
+<header id="topbar-wrapper" aria-label="Top Bar">
   <div
     id="topbar"
-    class="container d-flex align-items-center justify-content-between h-100"
+    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
   >
-    <span id="breadcrumb">
+    <nav id="breadcrumb" aria-label="Breadcrumb">
       {% assign paths = page.url | split: '/' %}
 
       {% if paths.size == 0 or page.layout == 'home' %}
@@ -37,10 +37,12 @@
           {% endif %}
         {% endfor %}
       {% endif %}
-    </span>
+    </nav>
     <!-- endof #breadcrumb -->
 
-    <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
@@ -53,8 +55,11 @@
       {% endif %}
     </div>
 
-    <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrapper" class="align-items-center">
+    <button type="button" id="search-trigger" class="btn btn-link">
+      <i class="fas fa-search fa-fw"></i>
+    </button>
+
+    <search class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"
@@ -64,7 +69,9 @@
         autocomplete="off"
         placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
       >
-    </span>
-    <span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- site.data.locales[include.lang].search.cancel -}}
+    </button>
   </div>
-</div>
+</header>

_includes/trending-tags.html

@@ -34,13 +34,13 @@
 {% endfor %}
 
 {% if trending_tags.size > 0 %}
-  <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
+  <section>
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
     <div class="d-flex flex-wrap mt-3 mb-1 me-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
         <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
     </div>
-  </div>
+  </section>
 {% endif %}

_includes/update-list.html

@@ -22,9 +22,9 @@
 {% endfor %}
 
 {% if update_list.size > 0 %}
-  <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
-    <ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
+  <section id="access-lastmod">
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
+    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}
@@ -34,6 +34,6 @@
         </li>
       {% endfor %}
     </ul>
-  </div>
+  </section>
   <!-- #access-lastmod -->
 {% endif %}

_javascript/_copyright

@@ -1,3 +1 @@
-Chirpy v<%= pkg.version %> (<%= pkg.homepage %>)
-© 2019 <%= pkg.author %>
-<%= pkg.license %> Licensed
+Chirpy v<%= pkg.version %> | © 2019 <%= pkg.author %> | <%= pkg.license %> Licensed | <%= pkg.homepage %>

_javascript/home.js

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

_javascript/modules/components/clipboard.js

@@ -99,7 +99,9 @@ export function initClipboard() {
 
   /* --- Post link sharing --- */
 
-  $('#copy-link').on('click', (e) => {
+  const btnCopyLink = $('#copy-link');
+
+  btnCopyLink.on('click', (e) => {
     let target = $(e.target);
 
     if (isLocked(target)) {
@@ -120,4 +122,9 @@ export function initClipboard() {
       }, TIMEOUT);
     });
   });
+
+  btnCopyLink.on('mouseleave', function (e) {
+    const target = $(e.target);
+    target.tooltip('hide');
+  });
 }

_javascript/modules/components/img-lazyload.js

@@ -1,27 +0,0 @@
-/**
- * Set up image lazy-load
- */
-
-function stopShimmer($node) {
-  $node.parent().removeClass('shimmer');
-}
-
-export function imgLazy() {
-  const $images = $('#core-wrapper img[data-src]');
-
-  if ($images.length <= 0) {
-    return;
-  }
-
-  /* Stop shimmer when image loaded */
-  document.addEventListener('lazyloaded', function (e) {
-    stopShimmer($(e.target));
-  });
-
-  /* Stop shimmer from cached images */
-  $images.each(function () {
-    if ($(this).hasClass('ls-is-cached')) {
-      stopShimmer($(this));
-    }
-  });
-}

_javascript/modules/components/img-loading.js

@@ -0,0 +1,61 @@
+/**
+ * Setting up image lazy loading and LQIP switching
+ */
+
+const ATTR_DATA_SRC = 'data-src';
+const ATTR_DATA_LQIP = 'data-lqip';
+
+const cover = {
+  SHIMMER: 'shimmer',
+  BLUR: 'blur'
+};
+
+function removeCover(clzss) {
+  $(this).parent().removeClass(clzss);
+}
+
+function handleImage() {
+  if (!this.complete) {
+    return;
+  }
+
+  if (this.hasAttribute(ATTR_DATA_LQIP)) {
+    removeCover.call(this, cover.BLUR);
+  } else {
+    removeCover.call(this, cover.SHIMMER);
+  }
+}
+
+/**
+ * Switches the LQIP with the real image URL.
+ */
+function switchLQIP() {
+  const $img = $(this);
+  const src = $img.attr(ATTR_DATA_SRC);
+
+  $img.attr('src', encodeURI(src));
+  $img.removeAttr(ATTR_DATA_SRC);
+}
+
+export function loadImg() {
+  const $images = $('article img');
+
+  if ($images.length) {
+    $images.on('load', handleImage);
+  }
+
+  // Images loaded from the browser cache do not trigger the 'load' event
+  $('article img[loading="lazy"]').each(function () {
+    if (this.complete) {
+      removeCover.call(this, cover.SHIMMER);
+    }
+  });
+
+  // LQIPs set by the data URI or WebP will not trigger the 'load' event,
+  // so manually convert the URI to the URL of a high-resolution image.
+  const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`);
+
+  if ($lqips.length) {
+    $lqips.each(switchLQIP);
+  }
+}

_javascript/modules/components/search-display.js

@@ -4,9 +4,9 @@
 const $btnSbTrigger = $('#sidebar-trigger');
 const $btnSearchTrigger = $('#search-trigger');
 const $btnCancel = $('#search-cancel');
-const $content = $('#main>.row');
+const $content = $('#main-wrapper>.container>.row');
 const $topbarTitle = $('#topbar-title');
-const $searchWrapper = $('#search-wrapper');
+const $search = $('search');
 const $resultWrapper = $('#search-result-wrapper');
 const $results = $('#search-results');
 const $input = $('#search-input');
@@ -39,13 +39,13 @@ class MobileSearchBar {
     $btnSbTrigger.addClass(C_UNLOADED);
     $topbarTitle.addClass(C_UNLOADED);
     $btnSearchTrigger.addClass(C_UNLOADED);
-    $searchWrapper.addClass(C_FLEX);
+    $search.addClass(C_FLEX);
     $btnCancel.addClass(C_LOADED);
   }
 
   static off() {
     $btnCancel.removeClass(C_LOADED);
-    $searchWrapper.removeClass(C_FLEX);
+    $search.removeClass(C_FLEX);
     $btnSbTrigger.removeClass(C_UNLOADED);
     $topbarTitle.removeClass(C_UNLOADED);
     $btnSearchTrigger.removeClass(C_UNLOADED);
@@ -55,7 +55,7 @@ class MobileSearchBar {
 class ResultSwitch {
   static on() {
     if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main) unloaded.
+      // the block method must be called before $(#main-wrapper>.container) unloaded.
       ScrollBlocker.on();
       $resultWrapper.removeClass(C_UNLOADED);
       $content.addClass(C_UNLOADED);
@@ -72,7 +72,7 @@ class ResultSwitch {
       $resultWrapper.addClass(C_UNLOADED);
       $content.removeClass(C_UNLOADED);
 
-      // now the release method must be called after $(#main) display
+      // now the release method must be called after $(#main-wrapper>.container) display
       ScrollBlocker.off();
 
       $input.val('');
@@ -98,11 +98,11 @@ export function displaySearch() {
   });
 
   $input.on('focus', function () {
-    $searchWrapper.addClass(C_FOCUS);
+    $search.addClass(C_FOCUS);
   });
 
   $input.on('focusout', function () {
-    $searchWrapper.removeClass(C_FOCUS);
+    $search.removeClass(C_FOCUS);
   });
 
   $input.on('input', () => {

_javascript/modules/components/toc.js

@@ -1,11 +1,11 @@
 export function toc() {
-  if (document.querySelector('#core-wrapper h2,#core-wrapper h3')) {
+  if (document.querySelector('main h2')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
       tocSelector: '#toc',
-      contentSelector: '.post-content',
+      contentSelector: '.content',
       ignoreSelector: '[data-toc-skip]',
-      headingSelector: 'h2, h3',
+      headingSelector: 'h2, h3, h4',
       orderedList: false,
       scrollSmooth: false
     });

_javascript/modules/plugins.js

@@ -1,6 +1,6 @@
 export { categoryCollapse } from './components/category-collapse';
 export { initClipboard } from './components/clipboard';
-export { imgLazy } from './components/img-lazyload';
+export { loadImg } from './components/img-loading';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
 export { toc } from './components/toc';

_javascript/page.js

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

_javascript/post.js

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

_layouts/archives.html

@@ -9,28 +9,27 @@ layout: page
 {% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
 
 <div id="archives" class="pl-xl-3">
+  {% for post in site.posts %}
+    {% assign cur_year = post.date | date: '%Y' %}
 
-{% for post in site.posts %}
-  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% if cur_year != last_year %}
+      {% unless forloop.first %}</ul>{% endunless %}
 
-  {% if cur_year != last_year %}
-    {% unless forloop.first %}</ul>{% endunless %}
-    <div class="year lead">{{ cur_year }}</div>
-    <ul class="list-unstyled">
-    {% assign last_year = cur_year %}
-  {% endif %}
+      <time class="year lead d-block">{{ cur_year }}</time>
+      {{ '<ul class="list-unstyled">' }}
 
-  <li>
-  {% assign ts = post.date | date: '%s' %}
-    <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-    <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
-      {{ post.date | date: df_strftime_m }}
-    </span>
-    <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-  </li>
+      {% assign last_year = cur_year %}
+    {% endif %}
 
-  {% if forloop.last %}</ul>{% endif %}
-
-{% endfor %}
+    <li>
+      {% assign ts = post.date | date: '%s' %}
+      <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
+      <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+        {{ post.date | date: df_strftime_m }}
+      </span>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+    </li>
 
+    {% if forloop.last %}</ul>{% endif %}
+  {% endfor %}
 </div>

_layouts/category.html

@@ -12,12 +12,12 @@ layout: page
     <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
 
-  <ul class="post-content ps-0">
+  <ul class="content ps-0">
     {% for post in page.posts %}
       <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
-        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
       </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -1,6 +1,5 @@
 ---
 layout: compress
-# Default layout
 ---
 
 <!doctype html>
@@ -9,11 +8,9 @@ layout: compress
 
 {% include lang.html %}
 
-{% capture prefer_mode %}
-  {% if site.theme_mode %}
-    data-mode="{{ site.theme_mode }}"
-  {% endif %}
-{% endcapture %}
+{% if site.theme_mode %}
+  {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
+{% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
 <html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
@@ -23,48 +20,62 @@ layout: compress
     {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container px-xxl-5">
+      <div class="container d-flex flex-column px-xxl-5">
         {% include topbar.html lang=lang %}
-        {{ content }}
+
+        <div class="row flex-grow-1">
+          <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% if layout.refactor or layout.layout == 'default' %}
+              {% include refactor-content.html content=content lang=lang %}
+            {% else %}
+              {{ content }}
+            {% endif %}
+          </main>
+
+          <!-- panel -->
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
+            <div class="access">
+              {% include_cached update-list.html lang=lang %}
+              {% include_cached trending-tags.html lang=lang %}
+            </div>
+
+            {% for _include in layout.panel_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
+          </aside>
+        </div>
+
+        <div class="row">
+          <!-- tail -->
+          <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% for _include in layout.tail_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
+
+            {% include_cached footer.html lang=lang %}
+          </div>
+        </div>
+
         {% include_cached search-results.html lang=lang %}
       </div>
-    </div>
 
-    {% include_cached footer.html lang=lang %}
+      <aside aria-label="Scroll to Top">
+        <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
+          <i class="fas fa-angle-up"></i>
+        </button>
+      </aside>
+    </div>
 
     <div id="mask"></div>
 
-    <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
-      <i class="fas fa-angle-up"></i>
-    </button>
-
     {% if site.pwa.enabled %}
-      <div
-        id="notification"
-        class="toast"
-        role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
-        data-bs-animation="true"
-        data-bs-autohide="false"
-      >
-        <div class="toast-header">
-          <button
-            type="button"
-            class="btn-close ms-auto"
-            data-bs-dismiss="toast"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="toast-body text-center pt-0">
-          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
-          <button type="button" class="btn btn-primary" aria-label="Update">
-            {{ site.data.locales[lang].notification.update }}
-          </button>
-        </div>
-      </div>
+      {% include_cached notification.html lang=lang %}
     {% endif %}
 
+    <!-- JavaScripts -->
+
     {% include js-selector.html %}
 
     {% if page.mermaid %}

_layouts/home.html

@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: default
 refactor: true
 ---
 
@@ -40,15 +40,13 @@ refactor: true
   {% endfor %}
 {% endif %}
 
-<div id="post-list">
+<div id="post-list" class="flex-grow-1 px-xl-1">
   {% for post in posts %}
-    <a href="{{ post.url | relative_url }}" class="card-wrapper">
-      <div class="card post-preview flex-md-row-reverse">
-        {% if post.image %}
-          {% if post.image.lqip %}
-            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
-          {% endif %}
+    <article class="card-wrapper card">
+      <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
+        {% assign card_body_col = '12' %}
 
+        {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
             {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
@@ -56,51 +54,61 @@ refactor: true
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
 
-          <img src="{{ src }}" w="17" h="10" alt="{{ alt }}" {{ lqip }}>
+          {% assign lqip = null %}
+
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
+
+          <div class="col-md-5">
+            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
+          </div>
+
+          {% assign card_body_col = '7' %}
         {% endif %}
 
-        <div class="card-body d-flex flex-column">
-          <h1 class="card-title my-2 mt-md-0">
-            {{ post.title }}
-          </h1>
+        <div class="col-md-{{ card_body_col }}">
+          <div class="card-body d-flex flex-column">
+            <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
-          <div class="card-text post-content mt-0 mb-2">
-            <p>
-              {% include no-linenos.html content=post.content %}
-              {{ content | markdownify | strip_html | truncate: 200 | escape }}
-            </p>
-          </div>
-
-          <div class="post-meta flex-grow-1 d-flex align-items-end">
-            <div class="me-auto">
-              <!-- posted date -->
-              <i class="far fa-calendar fa-fw me-1"></i>
-              {% include datetime.html date=post.date lang=lang %}
-
-              <!-- categories -->
-              {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw me-1"></i>
-                <span class="categories">
-                  {% for category in post.categories %}
-                    {{ category }}
-                    {%- unless forloop.last -%},{%- endunless -%}
-                  {% endfor %}
-                </span>
-              {% endif %}
+            <div class="card-text content mt-0 mb-3">
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
+              </p>
             </div>
 
-            {% if post.pin %}
-              <div class="pin ms-1">
-                <i class="fas fa-thumbtack fa-fw"></i>
-                <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+            <div class="post-meta flex-grow-1 d-flex align-items-end">
+              <div class="me-auto">
+                <!-- posted date -->
+                <i class="far fa-calendar fa-fw me-1"></i>
+                {% include datetime.html date=post.date lang=lang %}
+
+                <!-- categories -->
+                {% if post.categories.size > 0 %}
+                  <i class="far fa-folder-open fa-fw me-1"></i>
+                  <span class="categories">
+                    {% for category in post.categories %}
+                      {{ category }}
+                      {%- unless forloop.last -%},{%- endunless -%}
+                    {% endfor %}
+                  </span>
+                {% endif %}
               </div>
-            {% endif %}
+
+              {% if post.pin %}
+                <div class="pin ms-1">
+                  <i class="fas fa-thumbtack fa-fw"></i>
+                  <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+                </div>
+              {% endif %}
+            </div>
+            <!-- .post-meta -->
           </div>
-          <!-- .post-meta -->
+          <!-- .card-body -->
         </div>
-        <!-- .card-body -->
-      </div>
-    </a>
+      </a>
+    </article>
   {% endfor %}
 </div>
 <!-- #post-list -->

_layouts/page.html

@@ -3,66 +3,18 @@ layout: default
 ---
 
 {% include lang.html %}
-{% include origin-type.html %}
 
-{% if layout.tail_includes %}
-  {% assign has_tail = true %}
-{% endif %}
-
-<div class="row{% unless has_tail %} mb-5{% endunless %}">
-  <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
-    {% capture padding %}
-      {% unless page.layout == 'home' %}px-1{% endunless %}
-    {% endcapture %}
-
-    <div class="post {{ padding | strip }} px-md-2">
-      {% capture _content %}
-      {% if layout.refactor or page.layout == 'page' %}
-        {% include refactor-content.html content=content lang=lang %}
-      {% else %}
-        {{ content }}
-      {% endif %}
-    {% endcapture %}
-
-      {% if page.layout == 'page' or page.collection == 'tabs' %}
-        {% assign tab_key = page.title | downcase %}
-        {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
-        <h1 class="dynamic-title">
-          {{ title }}
-        </h1>
-        <div class="post-content">
-          {{ _content }}
-        </div>
-      {% else %}
-        {{ _content }}
-      {% endif %}
+<article class="px-1">
+  {% if page.layout == 'page' or page.collection == 'tabs' %}
+    {% assign tab_key = page.title | downcase %}
+    {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+    <h1 class="dynamic-title">
+      {{ title }}
+    </h1>
+    <div class="content">
+      {{ content }}
     </div>
-  </div>
-  <!-- #core-wrapper -->
-
-  <!-- panel -->
-  <div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
-    <div class="access">
-      {% include_cached update-list.html lang=lang %}
-      {% include_cached trending-tags.html lang=lang %}
-    </div>
-
-    {% for _include in layout.panel_includes %}
-      {% assign _include_path = _include | append: '.html' %}
-      {% include {{ _include_path }} lang=lang %}
-    {% endfor %}
-  </div>
-</div>
-
-<!-- tail -->
-{% if has_tail %}
-  <div class="row">
-    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
-      {% for _include in layout.tail_includes %}
-        {% assign _include_path = _include | append: '.html' %}
-        {% include {{ _include_path }} lang=lang %}
-      {% endfor %}
-    </div>
-  </div>
-{% endif %}
+  {% else %}
+    {{ content }}
+  {% endif %}
+</article>

_layouts/post.html

@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: default
 refactor: true
 panel_includes:
   - toc
@@ -11,123 +11,125 @@ tail_includes:
 
 {% include lang.html %}
 
-<h1 data-toc-skip>{{ page.title }}</h1>
+<article class="px-1">
+  <header>
+    <h1 data-toc-skip>{{ page.title }}</h1>
 
-<div class="post-meta text-muted">
-    <!-- published date -->
-    <span>
-      {{ site.data.locales[lang].post.posted }}
-      {% include datetime.html date=page.date tooltip=true lang=lang %}
-    </span>
+    <div class="post-meta text-muted">
+      <!-- published date -->
+      <span>
+        {{ site.data.locales[lang].post.posted }}
+        {% include datetime.html date=page.date tooltip=true lang=lang %}
+      </span>
 
-    <!-- lastmod date -->
-    {% if page.last_modified_at and page.last_modified_at != page.date %}
-    <span>
-      {{ site.data.locales[lang].post.updated }}
-      {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
-    </span>
+      <!-- lastmod date -->
+      {% if page.last_modified_at and page.last_modified_at != page.date %}
+        <span>
+          {{ site.data.locales[lang].post.updated }}
+          {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+        </span>
+      {% endif %}
+
+      {% if page.image %}
+        {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+        {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+        {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
+
+        {% if page.image.lqip %}
+          {%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
+        {% endif %}
+
+        <div class="mt-3 mb-3">
+          <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
+          {%- if page.image.alt -%}
+            <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
+          {%- endif -%}
+        </div>
+      {% endif %}
+
+      <div class="d-flex justify-content-between">
+        <!-- author(s) -->
+        <span>
+          {% if page.author %}
+            {% assign authors = page.author %}
+          {% elsif page.authors %}
+            {% assign authors = page.authors %}
+          {% endif %}
+
+          {{ site.data.locales[lang].post.written_by }}
+
+          <em>
+            {% if authors %}
+              {% 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 %}
+              <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
+            {% endif %}
+          </em>
+        </span>
+
+        <!-- read time -->
+        {% include read-time.html content=content prompt=true lang=lang %}
+      </div>
+      <!-- .d-flex -->
+    </div>
+    <!-- .post-meta -->
+  </header>
+
+  <div class="content">
+    {{ content }}
+  </div>
+
+  <div class="post-tail-wrapper text-muted">
+    <!-- categories -->
+    {% if page.categories.size > 0 %}
+      <div class="post-meta mb-3">
+        <i class="far fa-folder-open fa-fw me-1"></i>
+        {% for category in page.categories %}
+          <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
+          {%- unless forloop.last -%},{%- endunless -%}
+        {% endfor %}
+      </div>
     {% endif %}
 
-  {% if page.image %}
-    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-    {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
-
-    {% capture lqip %}
-      {% if page.image.lqip %}
-        lqip="{{ page.image.lqip }}"
-      {% endif %}
-    {% endcapture %}
-
-    <div class="mt-3 mb-3">
-      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
-      {%- if page.image.alt -%}
-        <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {%- endif -%}
-    </div>
-  {% endif %}
-
-  <div class="d-flex justify-content-between">
-    <!-- author(s) -->
-    <span>
-      {% if page.author %}
-        {% assign authors = page.author %}
-      {% elsif page.authors %}
-        {% assign authors = page.authors %}
-      {% endif %}
-
-      {{ site.data.locales[lang].post.written_by }}
-
-      <em>
-      {% if authors %}
-        {% for author in authors %}
-          <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
-          {% unless forloop.last %}</em>, <em>{% endunless %}
+    <!-- tags -->
+    {% if page.tags.size > 0 %}
+      <div class="post-tags">
+        <i class="fa fa-tags fa-fw me-1"></i>
+        {% for tag in page.tags %}
+          <a
+            href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
+            class="post-tag no-text-decoration"
+          >
+            {{- tag -}}
+          </a>
         {% endfor %}
-      {% else %}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
-      {% endif %}
-      </em>
-    </span>
+      </div>
+    {% endif %}
 
-    <div>
-      <!-- read time -->
-      {% include read-time.html content=content prompt=true lang=lang %}
-    </div>
-
-  </div> <!-- .d-flex -->
-
-</div> <!-- .post-meta -->
-
-<div class="post-content">
-  {{ content }}
-</div>
-
-<div class="post-tail-wrapper text-muted">
-
-  <!-- categories -->
-  {% if page.categories.size > 0 %}
-  <div class="post-meta mb-3">
-    <i class="far fa-folder-open fa-fw me-1"></i>
-    {% for category in page.categories %}
-      <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
-      {%- unless forloop.last -%}, {%- endunless -%}
-    {% endfor %}
-  </div>
-  {% endif %}
-
-  <!-- tags -->
-  {% if page.tags.size > 0 %}
-  <div class="post-tags">
-    <i class="fa fa-tags fa-fw me-1"></i>
-      {% for tag in page.tags %}
-      <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
-          class="post-tag no-text-decoration" >
-        {{- tag -}}
-      </a>
-      {% endfor %}
-  </div>
-  {% endif %}
-
-  <div class="post-tail-bottom
-    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 %}
-
-        {% capture _replacement %}
+    <div
+      class="
+        post-tail-bottom
+        d-flex justify-content-between align-items-center mt-5 pb-2
+      "
+    >
+      <div class="license-wrapper">
+        {% if site.data.locales[lang].copyright.license.template %}
+          {% capture _replacement %}
         <a href="{{ site.data.locales[lang].copyright.license.link }}">
           {{ site.data.locales[lang].copyright.license.name }}
         </a>
         {% endcapture %}
 
-        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+          {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+        {% endif %}
+      </div>
 
-      {% endif %}
+      {% include post-sharing.html lang=lang %}
     </div>
-
-    {% include post-sharing.html lang=lang %}
-
-  </div><!-- .post-tail-bottom -->
-
-</div><!-- div.post-tail-wrapper -->
+    <!-- .post-tail-bottom -->
+  </div>
+  <!-- div.post-tail-wrapper -->
+</article>

_layouts/tag.html

@@ -11,12 +11,12 @@ layout: page
     {{ page.title }}
     <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
-  <ul class="post-content ps-0">
+  <ul class="content ps-0">
     {% for post in page.posts %}
       <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
-        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
       </li>
     {% endfor %}
   </ul>

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

@@ -17,13 +17,17 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 ## Headings
 
-<h1 class="mt-5">H1 - heading</h1>
+# H1 - heading
+{: .mt-4 .mb-0 }
 
-<h2 data-toc-skip>H2 - heading</h2>
+## H2 - heading
+{: data-toc-skip='' .mt-4 .mb-0 }
 
-<h3 data-toc-skip>H3 - heading</h3>
+### H3 - heading
+{: data-toc-skip='' .mt-4 .mb-0 }
 
-<h4>H4 - heading</h4>
+#### H4 - heading
+{: data-toc-skip='' .mt-4 }
 
 ## Paragraph
 

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

@@ -107,9 +107,33 @@ math: true
 ---
 ```
 
+After enabling the mathematical feature, you can add math equations with the following syntax: 
+
+- **Block math** should be added with `$$ math $$` with **mandatory** blank lines before and after `$$`
+- **Inline math** (in lines) should be added with `$$ math $$` without any blank line before or after `$$`
+- **Inline math** (in lists) should be added with `\$$ math $$`
+
+```markdown
+<!-- Block math, keep all blank lines -->
+
+$$
+LaTeX_math_expression
+$$
+
+<!-- Inline math in lines, NO blank lines -->
+
+"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
+
+<!-- Inline math in lists, escape the first `$` -->
+
+1. \$$ LaTeX_math_expression $$
+2. \$$ LaTeX_math_expression $$
+3. \$$ LaTeX_math_expression $$
+```
+
 ## Mermaid
 
-[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
 
 ```yaml
 ---
@@ -123,7 +147,7 @@ Then you can use it like other markdown languages: surround the graph code with
 
 ### Caption
 
-Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
+Add italics to the next line of an image, then it will become the caption and appear at the bottom of the image:
 
 ```markdown
 ![img-description](/path/to/image)

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

@@ -64,11 +64,15 @@ Update the variables of `_config.yml`{: .filepath} as needed. Some of them are t
 - `timezone`
 - `lang`
 
+### Social Contact Options
+
+Social contact options are displayed at the bottom of the sidebar. You can turn on/off the specified contacts in file `_data/contact.yml`{: .filepath }.
+
 ### Customizing Stylesheet
 
-If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
+If you need to customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
 
-Starting with version `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.
+Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main sass file `_sass/main.scss`{: .filepath} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.
 
 ### Customing Static Assets
 
@@ -84,15 +88,6 @@ You may want to preview the site contents before publishing, so just run it by:
 $ bundle exec jekyll s
 ```
 
-Or run the site on Docker with the following command:
-
-```console
-$ docker run -it --rm \
-    --volume="$PWD:/srv/jekyll" \
-    -p 4000:4000 jekyll/jekyll \
-    jekyll serve
-```
-
 After a few seconds, the local service will be published at _<http://127.0.0.1:4000>_.
 
 ## Deployment
@@ -132,16 +127,6 @@ Go to the root of the source project, and build your site as follows:
 $ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-Or build the site on Docker:
-
-```console
-$ docker run -it --rm \
-    --env JEKYLL_ENV=production \
-    --volume="$PWD:/srv/jekyll" \
-    jekyll/jekyll \
-    jekyll build
-```
-
 Unless you specified the output path, the generated site files will be placed in folder `_site`{: .filepath} of the project's root directory. Now you should upload those files to the target server.
 
 [nodejs]: https://nodejs.org/

_sass/addon/commons.scss

@@ -73,52 +73,11 @@ img {
   height: auto;
   transition: all 0.35s ease-in-out;
 
-  &[data-src] {
-    &[data-lqip='true'] {
-      &.lazyload,
-      &.lazyloading {
-        -webkit-filter: blur(20px);
-        filter: blur(20px);
-      }
-    }
+  .blur & {
+    $blur: 20px;
 
-    &:not([data-lqip='true']) {
-      &.lazyload,
-      &.lazyloading {
-        background: var(--img-bg);
-      }
-
-      &.lazyloaded {
-        -webkit-animation: fade-in 0.35s ease-in;
-        animation: fade-in 0.35s ease-in;
-      }
-    }
-
-    &.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;
-    }
+    -webkit-filter: blur($blur);
+    filter: blur($blur);
   }
 }
 
@@ -173,19 +132,14 @@ kbd {
 }
 
 footer {
-  font-size: 0.8rem;
   background-color: var(--main-bg);
+  height: $footer-height;
+  border-top: 1px solid var(--main-border-color);
 
-  div.d-flex {
-    height: $footer-height;
-    line-height: 1.2rem;
-    padding-bottom: 1rem;
-    border-top: 1px solid var(--main-border-color);
-    flex-wrap: wrap;
-  }
+  @extend %text-xs;
 
   a {
-    @extend %text-color;
+    @extend %text-highlight;
 
     &:hover {
       @extend %link-hover;
@@ -193,7 +147,6 @@ footer {
   }
 
   p {
-    width: 100%;
     text-align: center;
     margin-bottom: 0;
   }
@@ -220,7 +173,7 @@ i {
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
@@ -229,7 +182,7 @@ i {
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
 }
@@ -237,13 +190,15 @@ i {
 #panel-wrapper {
   /* the headings */
   .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
     @include label(inherit);
   }
 
   .post-tag {
     line-height: 1.05rem;
     font-size: 0.85rem;
-    border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
@@ -275,6 +230,8 @@ i {
       margin-bottom: 0.3rem;
     }
 
+    @extend %sup-fn-target;
+
     > p {
       margin-left: 0.25em;
       margin-top: 0;
@@ -289,10 +246,13 @@ i {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    transition: background-color 1.5s ease-in-out;
   }
 }
 
+sup {
+  @extend %sup-fn-target;
+}
+
 .reversefootnote {
   @at-root a#{&} {
     font-size: 0.6rem;
@@ -346,6 +306,31 @@ i {
 
 /* --- post --- */
 
+.preview-img {
+  aspect-ratio: 40 / 21;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  @extend %rounded;
+
+  &:not(.no-bg) {
+    background: var(--img-bg);
+  }
+
+  img {
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %rounded;
+
+    @at-root #post-list & {
+      width: 100%;
+    }
+  }
+}
+
 .post-preview {
   @extend %rounded;
 
@@ -372,24 +357,33 @@ i {
   }
 }
 
-.post {
+main {
+  line-height: 1.75;
+
   h1 {
     margin-top: 2rem;
     margin-bottom: 1.5rem;
   }
 
   p {
-    > img[data-src],
     > a.popup {
       &:not(.normal):not(.left):not(.right) {
         @include align-center;
       }
     }
   }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-meta {
-  font-size: 0.85rem;
+  @extend %text-sm;
 
   a {
     &:not([class]):hover {
@@ -402,7 +396,7 @@ i {
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
@@ -484,7 +478,7 @@ i {
   ::marker {
     color: var(--text-muted-color);
   }
-} /* .post-content */
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -494,9 +488,10 @@ i {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--btn-border-color);
   padding: 0 0.4rem;
-  color: inherit;
+  color: var(--text-muted-color);
   line-height: 1.3rem;
 
   &:not(:last-child) {
@@ -524,14 +519,15 @@ i {
     background: var(--shimmer-bg);
     height: 100%;
     width: 100%;
-    -webkit-animation: shimmer 1s infinite;
-    animation: shimmer 1s infinite;
+    -webkit-animation: shimmer 1.3s infinite;
+    animation: shimmer 1.3s infinite;
   }
 
   @-webkit-keyframes shimmer {
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -541,6 +537,7 @@ i {
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -602,7 +599,7 @@ i {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
+  box-shadow: var(--card-shadow);
 }
 
 /* overwrite bootstrap muted */
@@ -679,7 +676,6 @@ mjx-container {
 /* --- sidebar layout --- */
 
 $sidebar-display: 'sidebar-display';
-$btn-gap: 0.8rem; // for the bottom icons
 $btn-border-width: 3px;
 $btn-mb: 0.5rem;
 
@@ -694,6 +690,7 @@ $btn-mb: 0.5rem;
   width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
@@ -741,23 +738,25 @@ $btn-mb: 0.5rem;
   }
 
   .site-title {
+    font-family: inherit;
     font-weight: 900;
     font-size: 1.75rem;
     line-height: 1.2;
     letter-spacing: 0.25px;
-    color: rgba(134, 133, 133, 0.99);
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
       @extend %sidebar-link-hover;
+
+      color: var(--site-title-color);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: var(--sidebar-muted-color);
+    color: var(--site-subtitle-color);
     margin-top: 0.25rem;
     word-spacing: 1px;
     -webkit-user-select: none;
@@ -817,13 +816,15 @@ $btn-mb: 0.5rem;
   }
 
   .sidebar-bottom {
-    @include pl-pr(2rem);
-
+    padding-left: 2rem;
+    padding-right: 1rem;
     margin-bottom: 1.5rem;
 
+    $btn-size: 1.75rem;
+
     %button {
-      width: 1.75rem;
-      height: 1.75rem;
+      width: $btn-size;
+      height: $btn-size;
       margin-bottom: $btn-mb; // multi line gap
       border-radius: 50%;
       color: var(--sidebar-btn-color);
@@ -832,6 +833,7 @@ $btn-mb: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
+      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
 
       &:hover {
         background-color: var(--sidebar-hover-bg);
@@ -844,12 +846,12 @@ $btn-mb: 0.5rem;
       @extend %clickable-transition;
 
       &:not(:last-child) {
-        margin-right: $btn-gap;
+        margin-right: $sb-btn-gap;
       }
     }
 
     i {
-      line-height: 1.75rem;
+      line-height: $btn-size;
     }
 
     .mode-toggle {
@@ -863,9 +865,9 @@ $btn-mb: 0.5rem;
 
     .icon-border {
       @extend %no-cursor;
-      @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
+      @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
 
-      background-color: var(--sidebar-muted-color);
+      background-color: var(--sidebar-btn-color);
       content: '';
       width: $btn-border-width;
       height: $btn-border-width;
@@ -895,7 +897,7 @@ $btn-mb: 0.5rem;
   width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
@@ -908,14 +910,13 @@ $btn-mb: 0.5rem;
 }
 
 #topbar {
-  /* icons */
-  i {
+  button i {
     color: #999999;
   }
 
   #breadcrumb {
     font-size: 1rem;
-    color: gray;
+    color: var(--text-muted-color);
     padding-left: 0.5rem;
 
     a:hover {
@@ -933,16 +934,51 @@ $btn-mb: 0.5rem;
   }
 } /* #topbar */
 
-#sidebar-trigger,
-#search-trigger {
-  display: none;
+::-webkit-input-placeholder {
+  @include placeholder;
 }
 
-#search-wrapper {
+::-moz-placeholder {
+  @include placeholder;
+}
+
+:-ms-input-placeholder {
+  @include placeholder;
+}
+
+::-ms-input-placeholder {
+  @include placeholder;
+}
+
+::placeholder {
+  @include placeholder;
+}
+
+:focus::-webkit-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-moz-placeholder {
+  @include placeholder-focus;
+}
+
+:focus:-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::placeholder {
+  @include placeholder-focus;
+}
+
+search {
   display: flex;
   width: 100%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-border-color);
+  border: 1px solid var(--search-border-color);
   background: var(--main-bg);
   padding: 0 0.5rem;
 
@@ -953,10 +989,14 @@ $btn-mb: 0.5rem;
   }
 }
 
+#sidebar-trigger,
+#search-trigger {
+  display: none;
+}
+
 /* 'Cancel' link */
 #search-cancel {
   color: var(--link-color);
-  margin-left: 0.75rem;
   display: none;
   white-space: nowrap;
 
@@ -973,24 +1013,6 @@ $btn-mb: 0.5rem;
 
   &:focus {
     box-shadow: none;
-
-    &.form-control {
-      &::-moz-placeholder {
-        @include input-placeholder;
-      }
-      &::-webkit-input-placeholder {
-        @include input-placeholder;
-      }
-      &:-ms-input-placeholder {
-        @include input-placeholder;
-      }
-      &::-ms-input-placeholder {
-        @include input-placeholder;
-      }
-      &::placeholder {
-        @include input-placeholder;
-      }
-    }
   }
 }
 
@@ -1036,7 +1058,7 @@ $btn-mb: 0.5rem;
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
@@ -1074,18 +1096,6 @@ $btn-mb: 0.5rem;
   white-space: nowrap;
 }
 
-#core-wrapper {
-  line-height: 1.75;
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
@@ -1099,38 +1109,44 @@ $btn-mb: 0.5rem;
   }
 }
 
-/* --- main wrapper --- */
+/* --- basic wrappers --- */
 
 #main-wrapper {
-  background-color: var(--main-bg);
   position: relative;
-  min-height: calc(100vh - $footer-height-mobile);
 
   @include pl-pr(0);
+
+  > .container {
+    min-height: 100vh;
+  }
 }
 
 #topbar-wrapper.row,
-#main > .row,
+#main-wrapper > .container > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
 
+#tail-wrapper {
+  > :not(script) {
+    margin-top: 3rem;
+  }
+}
+
 /* --- button back-to-top --- */
 
 #back-to-top {
-  $size: 3rem;
-
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
   right: 1rem;
-  bottom: 2rem;
+  bottom: calc($footer-height-large - $back2top-size / 2);
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
-  width: $size;
-  height: $size;
+  width: $back2top-size;
+  height: $back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: transform 0.2s ease-out;
@@ -1142,7 +1158,7 @@ $btn-mb: 0.5rem;
   }
 
   i {
-    line-height: $size;
+    line-height: $back2top-size;
     position: relative;
     bottom: 2px;
   }
@@ -1208,14 +1224,10 @@ $btn-mb: 0.5rem;
 */
 
 @media all and (max-width: 576px) {
-  #main-wrapper {
-    min-height: calc(100vh - #{$footer-height-mobile});
-  }
-
-  #core-wrapper {
-    .post-content {
+  main {
+    .content {
       > blockquote[class^='prompt-'] {
-        @include ml-mr(-1.25rem);
+        @include ml-mr(-1rem);
 
         border-radius: 0;
         max-width: none;
@@ -1238,7 +1250,7 @@ $btn-mb: 0.5rem;
     @extend %full-width;
   }
 
-  #main {
+  #main-wrapper > .container {
     @extend %full-width;
     @include pl-pr(0);
   }
@@ -1256,21 +1268,11 @@ $btn-mb: 0.5rem;
     }
   }
 
-  html,
-  body {
-    overflow-x: hidden;
-  }
-
   footer {
     @include slide;
 
-    height: $footer-height-mobile;
-
-    div.d-flex {
-      padding: 1.5rem 0;
-      line-height: 1.65;
-      flex-wrap: wrap;
-    }
+    height: $footer-height-large;
+    padding: 1.5rem 0;
   }
 
   [#{$sidebar-display}] {
@@ -1278,9 +1280,8 @@ $btn-mb: 0.5rem;
       transform: translateX(0);
     }
 
-    #main-wrapper,
-    footer {
-      transform: translateX(#{$sidebar-width});
+    #main-wrapper {
+      transform: translateX($sidebar-width);
     }
 
     #back-to-top {
@@ -1291,8 +1292,8 @@ $btn-mb: 0.5rem;
   #sidebar {
     @include slide;
 
-    transform: translateX(-#{$sidebar-width}); /* hide */
-    -webkit-transform: translateX(-#{$sidebar-width});
+    transform: translateX(-$sidebar-width); /* hide */
+    -webkit-transform: translateX(-$sidebar-width);
   }
 
   #main-wrapper {
@@ -1300,8 +1301,7 @@ $btn-mb: 0.5rem;
   }
 
   #topbar,
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: 100%;
   }
 
@@ -1310,7 +1310,7 @@ $btn-mb: 0.5rem;
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
@@ -1320,7 +1320,7 @@ $btn-mb: 0.5rem;
     left: 0;
   }
 
-  #core-wrapper,
+  main,
   #panel-wrapper {
     margin-top: 0;
   }
@@ -1331,7 +1331,7 @@ $btn-mb: 0.5rem;
     display: block;
   }
 
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
@@ -1342,19 +1342,12 @@ $btn-mb: 0.5rem;
   h1.dynamic-title {
     display: none;
 
-    ~ .post-content {
+    ~ .content {
       margin-top: 2.5rem;
     }
   }
 } /* max-width: 849px */
 
-/* Phone & Pad */
-@media all and (min-width: 577px) and (max-width: 1199px) {
-  footer .d-flex > div {
-    width: 312px;
-  }
-}
-
 /* Sidebar is visible */
 @media all and (min-width: 850px) {
   /* Solved jumping scrollbar */
@@ -1362,26 +1355,8 @@ $btn-mb: 0.5rem;
     overflow-y: scroll;
   }
 
-  #main-wrapper,
-  footer {
-    margin-left: $sidebar-width;
-  }
-
   #main-wrapper {
-    min-height: calc(100vh - $footer-height);
-  }
-
-  footer {
-    p {
-      width: auto;
-      &:last-child {
-        &::before {
-          content: '-';
-          margin: 0 0.75rem;
-          opacity: 0.8;
-        }
-      }
-    }
+    margin-left: $sidebar-width;
   }
 
   #sidebar {
@@ -1394,7 +1369,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #search-wrapper {
+  search {
     max-width: $search-max-width;
   }
 
@@ -1403,20 +1378,20 @@ $btn-mb: 0.5rem;
     justify-content: start !important;
   }
 
-  .post {
+  main {
     h1 {
       margin-top: 3rem;
     }
   }
 
-  div.post-content .table-wrapper > table {
+  div.content .table-wrapper > table {
     min-width: 70%;
   }
 
   /* button 'back-to-Top' position */
   #back-to-top {
-    bottom: 5.5rem;
     right: 5%;
+    bottom: calc($footer-height - $back2top-size / 2);
   }
 
   #topbar-title {
@@ -1426,7 +1401,7 @@ $btn-mb: 0.5rem;
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
-  #main .col-lg-11 {
+  #main-wrapper > .container .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1453,7 +1428,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #main > div.row {
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
@@ -1461,11 +1436,7 @@ $btn-mb: 0.5rem;
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #back-to-top {
-    bottom: 6.5rem;
-  }
-
-  #search-wrapper {
+  search {
     margin-right: 4rem;
   }
 
@@ -1473,8 +1444,8 @@ $btn-mb: 0.5rem;
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1490,28 +1461,21 @@ $btn-mb: 0.5rem;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
-
-  footer {
-    div.d-felx {
-      width: 85%;
-    }
-  }
 }
 
 @media all and (min-width: 1400px) {
   #back-to-top {
-    right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
+    right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
   }
 }
 
 @media all and (min-width: 1650px) {
   $icon-gap: 1rem;
 
-  #main-wrapper,
-  footer {
+  #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
@@ -1519,35 +1483,32 @@ $btn-mb: 0.5rem;
     left: $sidebar-width-large;
   }
 
-  #search-wrapper {
+  search {
     margin-right: calc(
-      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
+      $main-content-max-width / 4 - $search-max-width - 0.75rem
     );
   }
 
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: $main-content-max-width;
     padding-left: 1.75rem !important;
     padding-right: 1.75rem !important;
   }
 
-  #core-wrapper,
+  main.col-12,
   #tail-wrapper {
     padding-right: 4.5rem !important;
   }
 
   #back-to-top {
     right: calc(
-      (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem
+      (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
     );
   }
 
   #sidebar {
     width: $sidebar-width-large;
 
-    $icon-gap: 1rem; // for the bottom icons
-
     .profile-wrapper {
       margin-top: 3.5rem;
       margin-bottom: 2.5rem;
@@ -1565,11 +1526,11 @@ $btn-mb: 0.5rem;
       margin-bottom: 1.75rem;
 
       a:not(:last-child) {
-        margin-right: $icon-gap;
+        margin-right: $sb-btn-gap-lg;
       }
 
       .icon-border {
-        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
+        @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
       }
     }
   }

_sass/addon/module.scss

@@ -11,7 +11,7 @@
 }
 
 %section {
-  #core-wrapper & {
+  main & {
     margin-top: 2.5rem;
     margin-bottom: 1.25rem;
 
@@ -107,7 +107,7 @@
 }
 
 %sidebar-links {
-  color: rgba(117, 117, 117, 0.9);
+  color: var(--sidebar-muted-color);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -122,6 +122,29 @@
   -webkit-box-orient: vertical;
 }
 
+%text-highlight {
+  color: var(--text-muted-hightlight-color);
+  font-weight: 600;
+}
+
+%text-sm {
+  font-size: 0.85rem;
+}
+
+%text-xs {
+  font-size: 0.8rem;
+}
+
+%sup-fn-target {
+  &:target {
+    background-color: var(--footnote-target-bg);
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    transition: background-color 1.75s ease-in-out;
+  }
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {
@@ -144,7 +167,11 @@
   padding-right: $val;
 }
 
-@mixin input-placeholder {
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
   opacity: 0.6;
 }
 

_sass/addon/syntax.scss

@@ -2,8 +2,8 @@
 * The syntax highlight.
 */
 
-@import 'colors/light-syntax';
-@import 'colors/dark-syntax';
+@import 'colors/syntax-light';
+@import 'colors/syntax-dark';
 
 html {
   @media (prefers-color-scheme: light) {
@@ -55,8 +55,7 @@ html {
   }
 
   overflow: auto;
-  padding-top: 0.5rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
 
   pre {
     margin-bottom: 0;
@@ -66,15 +65,25 @@ html {
   }
 
   table {
-    td pre {
-      overflow: visible; /* Fixed iOS safari overflow-x */
-      word-break: normal; /* Fixed iOS safari linenos code break */
+    td {
+      &:first-child {
+        display: inline-block;
+        margin-left: 1rem;
+        margin-right: 0.75rem;
+      }
+
+      &:last-child {
+        padding-right: 2rem !important;
+      }
+
+      pre {
+        overflow: visible; /* Fixed iOS safari overflow-x */
+        word-break: normal; /* Fixed iOS safari linenos code break */
+      }
     }
   }
 
   .lineno {
-    padding-right: 0.5rem;
-    min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
     -webkit-user-select: none;
@@ -89,6 +98,7 @@ code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
+  color: var(--code-color);
 
   &.highlighter-rouge {
     font-size: $code-font-size;
@@ -139,11 +149,16 @@ div[class^='language-'] {
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
-  .post-content > & {
-    @include ml-mr(-1.25rem);
+  .content > & {
+    @include ml-mr(-1rem);
 
     border-radius: 0;
   }
+
+  .highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -152,12 +167,13 @@ div {
   &.language-plaintext,
   &.language-console,
   &.language-terminal {
-    pre.lineno {
-      display: none;
-    }
+    td:first-child {
+      padding: 0 !important;
+      margin-right: 0;
 
-    td.rouge-code {
-      padding-left: 1.5rem;
+      .lineno {
+        display: none;
+      }
     }
   }
 }
@@ -165,21 +181,21 @@ div {
 .code-header {
   @extend %no-cursor;
 
-  $code-header-height: 2.25rem;
-
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
-  margin-left: 1rem;
-  margin-right: 0.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.25rem;
 
   /* the label block */
   span {
+    line-height: $code-header-height;
+
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.5rem;
+      width: $code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -242,7 +258,7 @@ div {
 
 @media all and (min-width: 576px) {
   div[class^='language-'] {
-    .post-content > & {
+    .content > & {
       @include ml-mr(0);
 
       border-radius: $base-radius;
@@ -251,19 +267,25 @@ div {
     .code-header {
       @include ml-mr(0);
 
-      &::before {
-        $dot-size: 0.75rem;
-        $dot-margin: 0.5rem;
+      $dot-margin: 1rem;
 
+      &::before {
         content: '';
         display: inline-block;
-        margin-left: 1rem;
-        width: $dot-size;
-        height: $dot-size;
+        margin-left: $dot-margin;
+        width: $code-dot-size;
+        height: $code-dot-size;
         border-radius: 50%;
         background-color: var(--code-header-muted-color);
-        box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
-          ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
+        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          ($code-dot-size + $code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
+      }
+
+      span {
+        // center the text of label
+        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
       }
     }
   }

_sass/addon/variables.scss

@@ -6,22 +6,28 @@
 
 $sidebar-width: 260px !default; /* the basic width */
 $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
+$sb-btn-gap: 0.8rem !default;
+$sb-btn-gap-lg: 1rem !default;
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-$search-max-width: 210px !default;
+$search-max-width: 200px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default; /* screen width: < 850px */
+$footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
-$bottom-min-height: 35rem !default;
-$base-radius: 0.5rem;
+$base-radius: 0.625rem !default;
+$back2top-size: 2.75rem !default;
 
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
+$code-header-height: 2.25rem !default;
+$code-dot-size: 0.75rem !default;
+$code-dot-gap: 0.5rem !default;
+$code-icon-width: 1.75rem !default;
 
 /* fonts */
 
-$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
-$font-family-heading: Lato, 'Microsoft Yahei', sans-serif;
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;

_sass/colors/dark-syntax.scss

@@ -1,91 +0,0 @@
-/*
- * The syntax dark mode styles.
- */
-
-@mixin dark-syntax {
-  --language-border-color: rgba(84, 83, 83, 0.27);
-  --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;
-
-  /* override Bootstrap */
-  pre {
-    color: #bfbfbf;
-  }
-
-  .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 */
-  .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
-  .highlight .k { color: #66d9ef; } /* Keyword */
-  .highlight .l { color: #ae81ff; } /* Literal */
-  .highlight .n { color: #f8f8f2; } /* Name */
-  .highlight .o { color: #f92672; } /* Operator */
-  .highlight .p { color: #f8f8f2; } /* Punctuation */
-  .highlight .cm { color: #75715e; } /* Comment.Multiline */
-  .highlight .cp { color: #75715e; } /* Comment.Preproc */
-  .highlight .c1 { color: #75715e; } /* Comment.Single */
-  .highlight .cs { color: #75715e; } /* Comment.Special */
-  .highlight .ge { color: inherit; font-style: italic; } /* Generic.Emph */
-  .highlight .gs { font-weight: bold; } /* Generic.Strong */
-  .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
-  .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */
-  .highlight .kn { color: #f92672; } /* Keyword.Namespace */
-  .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
-  .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
-  .highlight .kt { color: #66d9ef; } /* Keyword.Type */
-  .highlight .ld { color: #e6db74; } /* Literal.Date */
-  .highlight .m { color: #ae81ff; } /* Literal.Number */
-  .highlight .s { color: #e6db74; } /* Literal.String */
-  .highlight .na { color: #a6e22e; } /* Name.Attribute */
-  .highlight .nb { color: #f8f8f2; } /* Name.Builtin */
-  .highlight .nc { color: #a6e22e; } /* Name.Class */
-  .highlight .no { color: #66d9ef; } /* Name.Constant */
-  .highlight .nd { color: #a6e22e; } /* Name.Decorator */
-  .highlight .ni { color: #f8f8f2; } /* Name.Entity */
-  .highlight .ne { color: #a6e22e; } /* Name.Exception */
-  .highlight .nf { color: #a6e22e; } /* Name.Function */
-  .highlight .nl { color: #f8f8f2; } /* Name.Label */
-  .highlight .nn { color: #f8f8f2; } /* Name.Namespace */
-  .highlight .nx { color: #a6e22e; } /* Name.Other */
-  .highlight .py { color: #f8f8f2; } /* Name.Property */
-  .highlight .nt { color: #f92672; } /* Name.Tag */
-  .highlight .nv { color: #f8f8f2; } /* Name.Variable */
-  .highlight .ow { color: #f92672; } /* Operator.Word */
-  .highlight .w { color: #f8f8f2; } /* Text.Whitespace */
-  .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
-  .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
-  .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
-  .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
-  .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
-  .highlight .sc { color: #e6db74; } /* Literal.String.Char */
-  .highlight .sd { color: #e6db74; } /* Literal.String.Doc */
-  .highlight .s2 { color: #e6db74; } /* Literal.String.Double */
-  .highlight .se { color: #ae81ff; } /* Literal.String.Escape */
-  .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
-  .highlight .si { color: #e6db74; } /* Literal.String.Interpol */
-  .highlight .sx { color: #e6db74; } /* Literal.String.Other */
-  .highlight .sr { color: #e6db74; } /* Literal.String.Regex */
-  .highlight .s1 { color: #e6db74; } /* Literal.String.Single */
-  .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */
-  .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
-  .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
-  .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
-  .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
-  .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 */
-}

_sass/colors/light-syntax.scss

@@ -1,83 +0,0 @@
-/*
- * The syntax light mode code snippet colors.
- */
-
-@mixin light-syntax {
-  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
-  .highlight .hll { background-color: #ffffcc; }
-  .highlight .c { color: #999988; font-style: italic; } /* Comment */
-  .highlight .err { color: #a61717; background-color: #e3d2d2; } /* Error */
-  .highlight .k { color: #000000; font-weight: bold; } /* Keyword */
-  .highlight .o { color: #000000; font-weight: bold; } /* Operator */
-  .highlight .cm { color: #999988; font-style: italic; } /* Comment.Multiline */
-  .highlight .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */
-  .highlight .c1 { color: #999988; font-style: italic; } /* Comment.Single */
-  .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */
-  .highlight .gd { color: #d01040; background-color: #ffdddd; } /* Generic.Deleted */
-  .highlight .ge { color: #000000; font-style: italic; } /* Generic.Emph */
-  .highlight .gr { color: #aa0000; } /* Generic.Error */
-  .highlight .gh { color: #999999; } /* Generic.Heading */
-  .highlight .gi { color: #008080; background-color: #ddffdd; } /* Generic.Inserted */
-  .highlight .go { color: #888888; } /* Generic.Output */
-  .highlight .gp { color: #555555; } /* Generic.Prompt */
-  .highlight .gs { font-weight: bold; } /* Generic.Strong */
-  .highlight .gu { color: #aaaaaa; } /* Generic.Subheading */
-  .highlight .gt { color: #aa0000; } /* Generic.Traceback */
-  .highlight .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */
-  .highlight .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */
-  .highlight .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */
-  .highlight .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */
-  .highlight .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */
-  .highlight .kt { color: #445588; font-weight: bold; } /* Keyword.Type */
-  .highlight .m { color: #009999; } /* Literal.Number */
-  .highlight .s { color: #d01040; } /* Literal.String */
-  .highlight .na { color: #008080; } /* Name.Attribute */
-  .highlight .nb { color: #0086b3; } /* Name.Builtin */
-  .highlight .nc { color: #445588; font-weight: bold; } /* Name.Class */
-  .highlight .no { color: #008080; } /* Name.Constant */
-  .highlight .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */
-  .highlight .ni { color: #800080; } /* Name.Entity */
-  .highlight .ne { color: #990000; font-weight: bold; } /* Name.Exception */
-  .highlight .nf { color: #990000; font-weight: bold; } /* Name.Function */
-  .highlight .nl { color: #990000; font-weight: bold; } /* Name.Label */
-  .highlight .nn { color: #555555; } /* Name.Namespace */
-  .highlight .nt { color: #000080; } /* Name.Tag */
-  .highlight .nv { color: #008080; } /* Name.Variable */
-  .highlight .ow { color: #000000; font-weight: bold; } /* Operator.Word */
-  .highlight .w { color: #bbbbbb; } /* Text.Whitespace */
-  .highlight .mf { color: #009999; } /* Literal.Number.Float */
-  .highlight .mh { color: #009999; } /* Literal.Number.Hex */
-  .highlight .mi { color: #009999; } /* Literal.Number.Integer */
-  .highlight .mo { color: #009999; } /* Literal.Number.Oct */
-  .highlight .sb { color: #d01040; } /* Literal.String.Backtick */
-  .highlight .sc { color: #d01040; } /* Literal.String.Char */
-  .highlight .sd { color: #d01040; } /* Literal.String.Doc */
-  .highlight .s2 { color: #d01040; } /* Literal.String.Double */
-  .highlight .se { color: #d01040; } /* Literal.String.Escape */
-  .highlight .sh { color: #d01040; } /* Literal.String.Heredoc */
-  .highlight .si { color: #d01040; } /* Literal.String.Interpol */
-  .highlight .sx { color: #d01040; } /* Literal.String.Other */
-  .highlight .sr { color: #009926; } /* Literal.String.Regex */
-  .highlight .s1 { color: #d01040; } /* Literal.String.Single */
-  .highlight .ss { color: #990073; } /* Literal.String.Symbol */
-  .highlight .bp { color: #999999; } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #008080; } /* Name.Variable.Class */
-  .highlight .vg { color: #008080; } /* Name.Variable.Global */
-  .highlight .vi { color: #008080; } /* Name.Variable.Instance */
-  .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */
-
-  /* --- custom light colors --- */
-  --language-border-color: rgba(172, 169, 169, 0.2);
-  --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #3f596f;
-  --highlight-lineno-color: #c2c6cc;
-  --inline-code-bg: #f6f6f7;
-  --code-header-text-color: #a3a3b1;
-  --code-header-muted-color: #ebebeb;
-  --code-header-icon-color: #d1d1d1;
-  --clipboard-checked-color: #43c743;
-
-  [class^='prompt-'] {
-    --inline-code-bg: #fbfafa;
-  }
-} /* light-syntax */

_sass/colors/syntax-dark.scss

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

_sass/colors/syntax-light.scss

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

_sass/colors/typography-dark.scss

@@ -10,19 +10,20 @@
 
   /* Common color */
   --text-color: rgb(175, 176, 177);
-  --text-muted-color: rgb(107, 116, 124);
+  --text-muted-color: #868686;
+  --text-muted-hightlight-color: #aeaeae;
   --heading-color: #cccccc;
+  --label-color: #a7a7a7;
   --blockquote-border-color: rgb(66, 66, 66);
-  --blockquote-text-color: rgb(117, 117, 117);
+  --blockquote-text-color: #868686;
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);
-  --button-bg: rgb(39, 40, 43);
-  --btn-border-color: rgb(63, 65, 68);
+  --button-bg: #1e1e1e;
+  --btn-border-color: #2e2f31;
   --btn-backtotop-color: var(--text-color);
-  --btn-backtotop-border-color: var(--btn-border-color);
+  --btn-backtotop-border-color: #212122;
   --btn-box-shadow: var(--main-bg);
-  --card-header-bg: rgb(48, 48, 48);
-  --label-color: rgb(108, 117, 125);
+  --card-header-bg: #292929;
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
   --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
@@ -34,39 +35,38 @@
   );
 
   /* Sidebar */
-  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
-  --sidebar-muted-color: #6d6c6b;
+  --site-title-color: #717070;
+  --site-subtitle-color: #868686;
+  --sidebar-bg: #1e1e1e;
+  --sidebar-border-color: #292929;
+  --sidebar-muted-color: #868686;
   --sidebar-active-color: rgb(255, 255, 255, 0.95);
-  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
-  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-hover-bg: #262626;
+  --sidebar-btn-bg: #232328;
   --sidebar-btn-color: #787878;
   --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
   --topbar-bg: rgb(27, 27, 30, 0.64);
   --topbar-text-color: var(--text-color);
-  --search-wrapper-border-color: rgb(55, 55, 55);
+  --search-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
-  --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-paginator-border-color: var(--btn-border-color);
-  --btn-text-color: var(--text-color);
+  --btn-paginator-hover-color: #2e2e2e;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
-  --tag-bg: rgb(41, 40, 40);
   --tag-hover: rgb(43, 56, 62);
-  --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */
+  --tb-odd-bg: #252526; /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
   --tb-border-color: var(--tb-odd-bg);
   --footnote-target-bg: rgb(63, 81, 181);
   --btn-share-color: #6c757d;
   --btn-share-hover-color: #bfc1ca;
-  --relate-post-date: var(--text-muted-color);
   --card-bg: #1e1e1e;
   --card-hovor-bg: #464d51;
   --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
@@ -87,8 +87,8 @@
   /* tags */
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
-  --search-tag-bg: var(--tag-bg);
   --dash-color: rgb(63, 65, 68);
+  --search-tag-bg: #292828;
 
   /* categories */
   --categories-border: rgb(64, 66, 69, 0.5);

_sass/colors/typography-light.scss

@@ -10,11 +10,13 @@
 
   /* Common color */
   --text-color: #34343c;
-  --text-muted-color: #8e8e8e;
-  --heading-color: black;
+  --text-muted-color: #757575;
+  --text-muted-hightlight-color: inherit;
+  --heading-color: #2a2a2a;
+  --label-color: #585858;
   --blockquote-border-color: #eeeeee;
-  --blockquote-text-color: #9a9a9a;
-  --link-color: #0153ab;
+  --blockquote-text-color: #757575;
+  --link-color: #0056b2;
   --link-underline-color: #dee2e6;
   --button-bg: #ffffff;
   --btn-border-color: #e9ecef;
@@ -36,8 +38,11 @@
   );
 
   /* Sidebar */
+  --site-title-color: rgb(113, 113, 113);
+  --site-subtitle-color: #717171;
   --sidebar-bg: #f6f8fa;
-  --sidebar-muted-color: #a2a19f;
+  --sidebar-border-color: #efefef;
+  --sidebar-muted-color: #545454;
   --sidebar-active-color: #1d1d1d;
   --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
   --sidebar-btn-bg: white;
@@ -47,8 +52,7 @@
   /* Topbar */
   --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --search-wrapper-border-color: rgb(240, 240, 240);
-  --search-tag-bg: #f8f9fa;
+  --search-border-color: rgb(240, 240, 240);
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: #b8b8b8;
 
@@ -56,23 +60,16 @@
   --post-list-text-color: dimgray;
   --btn-patinator-text-color: #555555;
   --btn-paginator-hover-color: var(--sidebar-bg);
-  --btn-paginator-border-color: var(--sidebar-bg);
-  --btn-text-color: #676666;
 
   /* Posts */
-  --toc-highlight: #563d7c;
-  --btn-share-hover-color: var(--link-color);
+  --toc-highlight: #0550ae;
+  --btn-share-color: gray;
+  --btn-share-hover-color: #0d6efd;
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
   --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
     rgba(211, 209, 209, 0.15) 0 0 0 1px;
-  --label-color: #616161;
-  --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
-  --tag-bg: rgba(0, 0, 0, 0.075);
-  --tag-border: #dee2e6;
-  --tag-shadow: var(--btn-border-color);
-  --tag-hover: rgb(222, 226, 230);
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
@@ -89,6 +86,12 @@
   --prompt-danger-bg: rgb(248, 215, 218, 0.56);
   --prompt-danger-icon-color: #df3c30;
 
+  /* Tags */
+  --tag-border: #dee2e6;
+  --tag-shadow: var(--btn-border-color);
+  --tag-hover: rgb(222, 226, 230);
+  --search-tag-bg: #f8f9fa;
+
   [class^='prompt-'] {
     --link-underline-color: rgb(219, 216, 216);
   }

_sass/layout/category-tag.scss

@@ -32,11 +32,6 @@
 
       font-size: 1.1rem;
     }
-
-    /* post's date */
-    > span:last-child {
-      white-space: nowrap;
-    }
   }
 }
 

_sass/layout/home.scss

@@ -5,9 +5,7 @@
 #post-list {
   margin-top: 2rem;
 
-  a.card-wrapper {
-    display: block;
-
+  .card-wrapper {
     &:hover {
       text-decoration: none;
     }
@@ -18,32 +16,29 @@
   }
 
   .card {
+    border: 0;
+    background: none;
+
     %img-radius {
       border-radius: $base-radius $base-radius 0 0;
     }
 
     .preview-img {
-      height: 10rem;
-
       @extend %img-radius;
 
       img {
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-
         @extend %img-radius;
       }
     }
 
     .card-body {
-      min-height: 10.5rem;
+      height: 100%;
       padding: 1rem;
 
       .card-title {
         @extend %text-clip;
 
+        color: var(--heading-color) !important;
         font-size: 1.25rem;
       }
 
@@ -51,7 +46,7 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text.post-content {
+      .card-text.content {
         @extend %muted;
 
         p {
@@ -89,8 +84,9 @@
 } /* #post-list */
 
 .pagination {
-  color: var(--btn-patinator-text-color);
+  color: var(--text-color);
   font-family: Lato, sans-serif;
+  justify-content: space-evenly;
 
   a:hover {
     text-decoration: none;
@@ -98,26 +94,27 @@
 
   .page-item {
     .page-link {
-      color: inherit;
-      width: 2.5rem;
-      height: 2.5rem;
-      padding: 0;
+      color: var(--btn-patinator-text-color);
+      padding: 0 0.6rem;
       display: -webkit-box;
       -webkit-box-pack: center;
       -webkit-box-align: center;
-      border-radius: 50%;
-      border: 1px solid var(--btn-paginator-border-color);
-      background-color: var(--button-bg);
-
-      &:hover {
-        background-color: var(--btn-paginator-hover-color);
-      }
+      border-radius: 0.5rem;
+      border: 0;
+      background-color: inherit;
     }
 
     &.active {
       .page-link {
         background-color: var(--btn-paginator-hover-color);
-        color: var(--btn-text-color);
+      }
+    }
+
+    &:not(.active) {
+      .page-link {
+        &:hover {
+          box-shadow: inset var(--btn-border-color) 0 0 0 1px;
+        }
       }
     }
 
@@ -126,34 +123,20 @@
 
       .page-link {
         color: rgba(108, 117, 125, 0.57);
-        border-color: var(--btn-paginator-border-color);
-        background-color: var(--button-bg);
       }
     }
-
-    &:first-child .page-link,
-    &:last-child .page-link {
-      border-radius: 50%;
-    }
   } /* .page-item */
 } /* .pagination */
 
 /* Tablet */
 @media all and (min-width: 768px) {
+  %img-radius {
+    border-radius: 0 $base-radius $base-radius 0;
+  }
+
   #post-list {
-    %img-radius {
-      border-radius: 0 $base-radius $base-radius 0;
-    }
-
     .card {
-      .preview-img {
-        width: 20rem;
-        height: 11.55rem; // can hold 2 lines each for title and content
-      }
-
       .card-body {
-        min-height: 10.75rem;
-        width: 60%;
         padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
         .card-text {
@@ -175,8 +158,6 @@
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: space-evenly;
-
     .page-item {
       &:not(:first-child):not(:last-child) {
         display: none;
@@ -193,16 +174,12 @@
 
   .pagination {
     font-size: 0.85rem;
+    justify-content: center;
 
     .page-item {
       &:not(:last-child) {
         margin-right: 0.7rem;
       }
-
-      .page-link {
-        width: 2rem;
-        height: 2rem;
-      }
     }
 
     .page-index {
@@ -210,10 +187,3 @@
     }
   } /* .pagination */
 }
-
-/* Panel is visible */
-@media all and (min-width: 1200px) {
-  #post-list {
-    padding-right: 0.5rem;
-  }
-}

_sass/layout/post.scss

@@ -2,14 +2,6 @@
   Post-specific style
 */
 
-@mixin btn-sharing-color($light-color, $important: false) {
-  @if $important {
-    color: var(--btn-share-color, $light-color) !important;
-  } @else {
-    color: var(--btn-share-color, $light-color);
-  }
-}
-
 %btn-post-nav {
   width: 50%;
   position: relative;
@@ -22,58 +14,34 @@
   padding-right: $pr;
 }
 
-%text-color {
-  color: var(--text-color);
-}
-
-.preview-img {
-  overflow: hidden;
-  aspect-ratio: 40 / 21;
-
-  @extend %rounded;
-
-  &:not(.no-bg) {
-    img.lazyloaded {
-      background: var(--img-bg);
-    }
-  }
-
-  img {
-    -o-object-fit: cover;
-    object-fit: cover;
-
-    @extend %rounded;
-  }
-}
-
 h1 + .post-meta {
-  span + span::before {
+  > span + span::before {
     @include dot;
   }
 
-  em {
-    @extend %text-color;
+  em,
+  time {
+    @extend %text-highlight;
+  }
 
+  em {
     a {
-      @extend %text-color;
+      color: inherit;
     }
   }
 }
 
 .post-tail-wrapper {
+  @extend %text-sm;
+
   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);
+      @extend %text-highlight;
 
       &:hover {
         @extend %link-hover;
@@ -81,7 +49,7 @@ h1 + .post-meta {
     }
 
     span:last-child {
-      font-size: 0.85rem;
+      @extend %text-sm;
     }
   } /* .license-wrapper */
 
@@ -96,69 +64,59 @@ h1 + .post-meta {
     -ms-user-select: none;
     user-select: none;
 
+    %icon-size {
+      font-size: 1.125rem;
+    }
+
     .share-icons {
-      font-size: 1.2rem;
+      display: flex;
 
-      > i {
-        position: relative;
-        bottom: 1px;
+      i {
+        color: var(--btn-share-color);
 
-        @extend %cursor-pointer;
-
-        &:hover {
-          @extend %btn-share-hovor;
-        }
+        @extend %icon-size;
       }
 
-      a {
-        &:not(:last-child) {
-          margin-right: 0.25rem;
-        }
+      > * {
+        @extend %icon-size;
+
+        margin-left: 0.5rem;
 
         &:hover {
-          text-decoration: none;
-
-          > i {
+          i {
             @extend %btn-share-hovor;
           }
         }
       }
 
-      .fab {
-        &.fa-twitter {
-          @include btn-sharing-color(rgba(29, 161, 242, 1));
-        }
+      button {
+        padding: 0;
+        border: none;
+        line-height: inherit;
 
-        &.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));
-        }
+        @extend %cursor-pointer;
       }
     } /* .share-icons */
-
-    .fas.fa-link {
-      @include btn-sharing-color(rgb(171, 171, 171));
-    }
   } /* .share-wrapper */
 }
 
+.share-mastodon {
+  /* See: https://github.com/justinribeiro/share-to-mastodon#properties */
+  --wc-stm-font-family: $font-family-base;
+  --wc-stm-dialog-background-color: var(--card-bg);
+  --wc-stm-form-button-border: 1px solid var(--btn-border-color);
+  --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-button-background-color-hover: #007bff;
+  --wc-stm-form-button-color-hover: white;
+
+  font-size: 1rem;
+}
+
 .post-tags {
   line-height: 2rem;
 
   .post-tag {
-    background: var(--tag-bg);
-
     &:hover {
       @extend %link-hover;
       @extend %tag-hover;
@@ -168,9 +126,6 @@ h1 + .post-meta {
 }
 
 .post-navigation {
-  padding-top: 3rem;
-  padding-bottom: 4rem;
-
   .btn {
     @extend %btn-post-nav;
 
@@ -201,7 +156,7 @@ h1 + .post-meta {
       color: var(--text-muted-color);
       font-size: 0.65rem;
       text-transform: uppercase;
-      content: attr(prompt);
+      content: attr(aria-label);
     }
 
     &:first-child {
@@ -317,9 +272,7 @@ h1 + .post-meta {
     }
 
     ul {
-      a {
-        padding-left: 2rem;
-      }
+      padding-left: 0.75rem;
     }
   }
 }
@@ -331,10 +284,11 @@ h1 + .post-meta {
     @include label(1.1rem, 600);
   }
 
-  em {
+  time {
     @extend %normal-font-style;
+    @extend %text-xs;
 
-    color: var(--relate-post-date);
+    color: var(--text-muted-color);
   }
 
   p {
@@ -349,23 +303,18 @@ h1 + .post-meta {
 
   .card {
     h4 {
-      @extend %text-color;
       @extend %text-clip;
     }
   }
 }
 
-#tail-wrapper {
-  min-height: 2rem;
+/* stylelint-disable-next-line selector-id-pattern */
+#disqus_thread {
+  min-height: 8.5rem;
+}
 
-  > div:last-of-type {
-    margin-bottom: 2rem;
-  }
-
-  /* stylelint-disable-next-line selector-id-pattern */
-  #disqus_thread {
-    min-height: 8.5rem;
-  }
+.utterances {
+  max-width: 100%;
 }
 
 %btn-share-hovor {
@@ -381,10 +330,6 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 576px) {
-  .preview-img[data-src] {
-    margin-top: 2.2rem;
-  }
-
   .post-tail-bottom {
     flex-wrap: wrap-reverse !important;
 
@@ -396,7 +341,7 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 768px) {
-  .post-content > p > img {
+  .content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
@@ -409,9 +354,4 @@ h1 + .post-meta {
     margin-left: -0.5rem;
     margin-right: -0.5rem;
   }
-
-  .preview-img[data-src] {
-    max-width: 100vw;
-    border-radius: 0;
-  }
 }

_sass/main.scss

@@ -1,11 +1,5 @@
-/*!
- * Chirpy v6.1.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
- * © 2019 Cotes Chung
- * MIT Licensed
- */
-
-@import 'colors/light-typography';
-@import 'colors/dark-typography';
+@import 'colors/typography-light';
+@import 'colors/typography-dark';
 @import 'addon/variables';
 @import 'variables-hook';
 @import 'addon/module';

assets/404.html

@@ -11,6 +11,4 @@ redirect_from:
 
 {% include lang.html %}
 
-<div class="lead">
-  <p>{{ site.data.locales[lang].not_found.statment }}</p>
-</div>
+<p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>

assets/css/jekyll-theme-chirpy.scss

@@ -1,6 +1,6 @@
 ---
 ---
 
-@import '{{ site.theme }}';
+@import 'main';
 
 /* append your custom style below */

assets/js/data/swcache.js

@@ -1,49 +1,48 @@
 ---
 layout: compress
-
 # The list to be cached by PWA
 ---
 
 const resource = [
-    /* --- CSS --- */
-    '{{ "/assets/css/style.css" | relative_url }}',
+  /* --- CSS --- */
+  '{{ "/assets/css/:THEME.css" | replace: ':THEME', site.theme | relative_url }}',
 
-    /* --- PWA --- */
-    '{{ "/app.js" | relative_url }}',
-    '{{ "/sw.js" | relative_url }}',
+  /* --- PWA --- */
+  '{{ "/app.js" | relative_url }}',
+  '{{ "/sw.js" | relative_url }}',
 
-    /* --- HTML --- */
-    '{{ "/index.html" | relative_url }}',
-    '{{ "/404.html" | relative_url }}',
+  /* --- HTML --- */
+  '{{ "/index.html" | relative_url }}',
+  '{{ "/404.html" | relative_url }}',
 
-    {% for tab in site.tabs %}
-        '{{ tab.url | relative_url }}',
-    {% endfor %}
+  {% for tab in site.tabs %}
+    '{{ tab.url | relative_url }}',
+  {% endfor %}
 
-    /* --- Favicons & compressed JS --- */
-    {% assign cache_list = site.static_files | where: 'swcache', true  %}
-    {% for file in cache_list %}
-        '{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
-    {% endfor %}
+  /* --- Favicons & compressed JS --- */
+  {% assign cache_list = site.static_files | where: 'swcache', true  %}
+  {% for file in cache_list %}
+    '{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
+  {% endfor %}
 ];
 
 /* The request url with below domain will be cached */
 const allowedDomains = [
-    {% if site.google_analytics.id != empty and site.google_analytics.id %}
-        'www.googletagmanager.com',
-        'www.google-analytics.com',
-    {% endif %}
+  {% if site.google_analytics.id != empty and site.google_analytics.id %}
+    'www.googletagmanager.com',
+    'www.google-analytics.com',
+  {% endif %}
 
-    '{{ site.url | split: "//" | last }}',
+  '{{ site.url | split: "//" | last }}',
 
-    {% if site.img_cdn contains '//' and site.img_cdn %}
-        '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
-    {% endif %}
+  {% if site.img_cdn contains '//' and site.img_cdn %}
+    '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
+  {% endif %}
 
-    'fonts.gstatic.com',
-    'fonts.googleapis.com',
-    'cdn.jsdelivr.net',
-    'polyfill.io'
+  'fonts.gstatic.com',
+  'fonts.googleapis.com',
+  'cdn.jsdelivr.net',
+  'polyfill.io'
 ];
 
 /* Requests that include the following path will be banned */

assets/js/pwa/sw.js

@@ -6,85 +6,84 @@ permalink: '/sw.js'
 
 self.importScripts('{{ "/assets/js/data/swcache.js" | relative_url }}');
 
-const cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M%S" }}';
+const cacheName = 'chirpy-{{ "now" | date: "%s" }}';
 
 function verifyDomain(url) {
-    for (const domain of allowedDomains) {
-        const regex = RegExp(`^http(s)?:\/\/${domain}\/`);
-        if (regex.test(url)) {
-            return true;
-        }
+  for (const domain of allowedDomains) {
+    const regex = RegExp(`^http(s)?:\/\/${domain}\/`);
+    if (regex.test(url)) {
+      return true;
     }
+  }
 
-    return false;
+  return false;
 }
 
 function isExcluded(url) {
-    for (const item of denyUrls) {
-        if (url === item) {
-            return true;
-        }
+  for (const item of denyUrls) {
+    if (url === item) {
+      return true;
     }
-    return false;
+  }
+  return false;
 }
 
-self.addEventListener('install', event => {
-    event.waitUntil(
-        caches.open(cacheName).then(cache => {
-            return cache.addAll(resource);
-        })
-    );
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(cacheName).then((cache) => {
+      return cache.addAll(resource);
+    })
+  );
 });
 
-self.addEventListener('activate', event => {
-    event.waitUntil(
-        caches.keys().then(keyList => {
-            return Promise.all(
-                keyList.map(key => {
-                    if (key !== cacheName) {
-                        return caches.delete(key);
-                    }
-                })
-            );
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (key !== cacheName) {
+            return caches.delete(key);
+          }
         })
-    );
+      );
+    })
+  );
 });
 
 self.addEventListener('message', (event) => {
-    if (event.data === 'SKIP_WAITING') {
-        self.skipWaiting();
-    }
+  if (event.data === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
 });
 
-self.addEventListener('fetch', event => {
-    event.respondWith(
-        caches.match(event.request).then(response => {
-            if (response) {
-                return response;
-            }
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
 
-            return fetch(event.request).then(response => {
-                const url = event.request.url;
+      return fetch(event.request).then((response) => {
+        const url = event.request.url;
 
-                if (event.request.method !== 'GET' ||
-                    !verifyDomain(url) ||
-                    isExcluded(url)) {
-                    return response;
-                }
+        if (
+          event.request.method !== 'GET' ||
+          !verifyDomain(url) ||
+          isExcluded(url)
+        ) {
+          return response;
+        }
 
-                /*
-                  see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
-                */
-                let responseToCache = response.clone();
+        /* see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests> */
+        let responseToCache = response.clone();
 
-                caches.open(cacheName).then(cache => {
-                    /* console.log('[sw] Caching new resource: ' + event.request.url); */
-                    cache.put(event.request, responseToCache);
-                });
+        caches.open(cacheName).then((cache) => {
+          /* console.log('[sw] Caching new resource: ' + event.request.url); */
+          cache.put(event.request, responseToCache);
+        });
 
-                return response;
-            });
-        })
-    );
+        return response;
+      });
+    })
+  );
 });
-

docs/CHANGELOG.md

@@ -2,6 +2,70 @@
 
 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.
 
+## [6.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.3.0...v6.3.1) (2023-11-12)
+
+### Bug Fixes
+
+* **home:** responsive gap at the bottom of preview image ([1a977a8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1a977a87a0da1cff35d0896cf9265c31034841a6))
+
+## [6.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.3...v6.3.0) (2023-11-10)
+
+### Features
+
+* add Mastodon sharing link ([#1344](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1344)) ([2bf87e0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bf87e0de7928f325811e1bb96cfcaefdf6cf66a)), closes [#1324](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1324)
+
+### Bug Fixes
+
+* **home:** crop the preview image that doesn't match 1.91:1 ([#1325](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1325)) ([5810bcd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5810bcd1d7b83e111017831fa82c368a6b15c7cd))
+* resume lazy loading for Twitch videos ([#1326](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1326)) ([9f174d9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9f174d9088e5c83a5e0c4630336cea65e199c553)), closes [#1267](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1267)
+
+## [6.2.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.2...v6.2.3) (2023-10-10)
+
+### Bug Fixes
+
+* avoid `utterances` initialization failure  ([#1234](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1234)) ([b34661e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b34661efd72e8697fd5b30ba7e55c86c7dd10338))
+* **home:** avoid LQIP dirty data passing to the next post ([#1278](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1278)) ([109725d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/109725d2dc56e329c60a876e9ce4094513fd36a5))
+* **posts:** code snippet clipboard tooltip missing title ([#1246](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1246)) ([726085c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/726085c6478e7a9dc2cc57189b2dcbc85d90f048))
+* **posts:** resume target highlighting for superscripts and footnotes ([#1253](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1253)) ([0465a98](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0465a985dc5262fa2043540f4eddafa251f917a3))
+
+### Improvements
+
+* **comments:** lazy load `giscus` ([#1254](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1254)) ([e9c9206](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e9c920641b9c97594fa078ea89747d77eb7e7493))
+* **core:** replace `lazysizes` with browser-level lazy loading ([#1267](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1267)) ([bf3a34d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bf3a34d0544b49fcf40f57080c4d6b4ff44750c4))
+* **layout:** improve margins for tail block ([#1243](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1243)) ([13a3c3c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/13a3c3c906bb6c5a38314ea27b6cf3767df94b27))
+* **layout:** optimize the main block height calculation ([#1249](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1249)) ([73e171b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/73e171b0fbce4a542e2141d7e2b1144450571ce1))
+* **pwa:** enhance cache privacy protection ([#1275](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1275)) ([2d56597](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2d56597571aaafa92251d192861ea69cce3e83d2))
+* **ui:** standardize metadata text styles ([#1295](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1295)) ([2574118](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2574118f40a956184705f87dea4d88e7c246a055))
+* **ux:** render background color before loading preview image ([#1298](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1298)) ([42bf39e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/42bf39e21c9a497aecc3e9b4549e2fc3ba4a1e4a))
+
+## [6.2.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.1...v6.2.2) (2023-09-10)
+
+### Bug Fixes
+
+* **sidebar:** contact icons not stacking ([#1224](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1224)) ([273b389](https://github.com/cotes2020/jekyll-theme-chirpy/commit/273b389c512f13693ed6cdf57d256ac21deae97c))
+
+## [6.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.0...v6.2.1) (2023-09-10)
+
+### Bug Fixes
+
+* **pwa:** installation failure caused by outdated cache entries ([4da7406](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4da7406dfea112a4a2b1db5615ecf2672be6694f))
+
+## [6.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.1.0...v6.2.0) (2023-09-10)
+
+### Features
+
+* **layout:** center the footer ([41b8f9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41b8f9f519e5f5f69e9a123b38b06bade2271a82))
+* **posts:** render heading 4 in TOC ([#1023](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1023)) ([229c2a2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/229c2a2e2b109fc2eca85be548f1dd97234e44c4))
+* **ui:** redesign the pagination button on home page ([62bcd60](https://github.com/cotes2020/jekyll-theme-chirpy/commit/62bcd601fcadc602c81672b1d4b937231396c3c0))
+* **ui:** update the twitter icon ([#1221](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1221)) ([aff7566](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aff75667749769644f990d3dc9b0720c7d96d14d))
+
+### Improvements
+
+* **core:** speed up the Jekyll build times ([#1163](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1163)) ([0d4103d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0d4103d47bc9cff93918bb09a2957737cc3c9fe0))
+* refactor using semantic HTML ([#1207](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1207)) ([505e314](https://github.com/cotes2020/jekyll-theme-chirpy/commit/505e314a3142c332e39365fbe2dac23df1bf0abe)), closes [#1196](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1196)
+* **ui:** improve code snippet design ([4f86b04](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4f86b04a8487ebbf4a6d0d70b0c3ece79e9269f3))
+* **ui:** improve web accessibility ([#447](https://github.com/cotes2020/jekyll-theme-chirpy/issues/447)) ([37c9764](https://github.com/cotes2020/jekyll-theme-chirpy/commit/37c976499ead51c1d88e8e8213366240a72adebc))
+
 ## [6.1.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.1.0) (2023-07-02)
 
 ### Features

docs/CONTRIBUTING.md

@@ -0,0 +1,109 @@
+# Contributing Guidelines
+
+_First of all, thank you for considering contributing to this project_ ! :tada:
+
+There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug
+reports and feature requests, or writing code that can be incorporated into the project. In order to make a good
+experience for both contributors and maintainers, please start with the "[General Rules](#general-rules)"
+before taking further action.
+
+## Table of Contents
+
+- [General Rules](#general-rules)
+- [Questions and Requests for Help](#questions-and-requests-for-help)
+- [Reporting a Bug](#reporting-a-bug)
+- [Suggesting a New Feature](#suggesting-a-new-feature)
+- [Contributing Code/Documentation](#contributing-codedocumentation)
+- [Helpful Resources](#helpful-resources)
+
+## General Rules
+
+All types of contributions (_pull requests_, _issues_, and _discussions_) should follow these rules:
+
+- You should read through the [Wiki][wiki] to understand the project features and how to use it properly. This is to
+respect the time of the project's developers and
+maintainers and to save their energy for other problems that really need to be resolved.
+
+- Use the [latest release version][latest-ver]. If your contribution involves code/documentation changes, update to the
+latest version of the default (`master`) branch.
+
+- Avoid making duplicate contributions by searching for existing [issues][issues] / [discussions][discus] /
+[pull requests][pr], but don't leave any unhelpful comments such as "I have the same problem". Prefer using
+[reactions][gh-reactions] if you simply want to "+1" an existing issue.
+
+- DO NOT email or tweet the
+project developers and maintainers directly, everything about the project should be left on GitHub.
+
+**Tip**: If you are new to the open-source community, then please read through
+"[How To Ask Questions The Smart Way][ext-reading]" before contributing.
+
+## Questions and Requests for Help
+
+We expect every reasonable question you ask to be answered appropriately. If you want a quick and timely response,
+please ask questions at [Jekyll Talk][jekyll-talk] and [StackOverflow][stack-overflow], where there are tons of
+enthusiastic geeks who will positively answer your challenging questions.
+
+If you can't get an answer in any of the above ways, then create a new [discussion][discus]. As long as it is not a
+duplicate and [RTFM][rtfm] / [STFW][stfw] issue, we will respond as soon as possible.
+
+## Reporting a Bug
+
+A great way to contribute to the project is to send a detailed issue when you encounter a problem. We always appreciate
+a well-written, thorough bug report.
+
+1. Please figure out why the bug occurred, or locate the module in the project that caused this bug. Otherwise, there is
+a high probability that you are using/setting it incorrectly.
+
+2. If the issue is caused by you modifying the project code or some configuration of Jekyll, then please DO NOT
+report such "bugs".
+Chirpy is an open-source project, but that doesn't mean we will maintain other specific forks (such as yours).
+You can learn about Jekyll and modern Web development to solve problems caused by custom modifications.
+
+3. Make good use of your browser's incognito mode to troubleshoot if the problem is caused by caching.
+
+4. As a last option, you can create a new [Bug Report][bug-report] following the template to describe the details.
+If possible, providing a demo that reproduces the error will help us troubleshoot faster.
+
+## Suggesting a New Feature
+
+Feature requests are welcome! While we will consider all requests, we cannot guarantee your request will be accepted.  
+We want to avoid chaos in the UI design and therefore do not accept requests for changes like color schemes,
+fontfamilies, typography, and so on. We want to avoid [feature creep][feat-creep] and focus only on the core features.
+If accepted, we cannot make any commitments regarding the timeline for implementation and release. However, you are
+welcome to submit a pull request to help!
+
+## Contributing Code/Documentation
+
+If your request is about an enhancement, it is recommended to first submit a
+[Feature Request][feat-request] to discuss whether your idea fits the project.
+See also: "[Suggesting a New Feature](#suggesting-a-new-feature)". Other than that, you can start the PR process.
+
+1. Fork this project on GitHub and clone your repository locally.
+2. Setting up the [development & test environments][dev-env].
+3. Creating a new branch from the default branch and give it a descriptive name (e.g. `add-a-new-feat` or `fix-a-bug`).
+When development is complete, create a [Conventional Commit][cc] with Git.
+4. Submitting a [Pull Request][gh-pr].
+
+## Helpful Resources
+
+- [Code of conduct](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CODE_OF_CONDUCT.md)
+- [Security policy](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/SECURITY.md)
+- [How To Ask Questions The Smart Way][ext-reading]
+
+[latest-ver]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/latest
+[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
+[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
+[pr]: https://github.com/cotes2020/jekyll-theme-chirpy/pulls
+[discus]: https://github.com/cotes2020/jekyll-theme-chirpy/discussions
+[ext-reading]: http://www.catb.org/~esr/faqs/smart-questions.html
+[jekyll-talk]: https://talk.jekyllrb.com/
+[stack-overflow]: https://stackoverflow.com/questions/tagged/jekyll
+[rtfm]: https://en.wikipedia.org/wiki/RTFM
+[stfw]: https://www.webster-dictionary.org/definition/STFW
+[gh-reactions]: https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/
+[bug-report]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?assignees=&labels=&projects=&template=bug_report.yml
+[feat-request]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml
+[feat-creep]: https://en.wikipedia.org/wiki/Feature_creep
+[dev-env]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Development-&-Test-Environments
+[cc]: https://www.conventionalcommits.org/
+[gh-pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests

docs/SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version   | Supported |
+|:----------|:---------:|
+| `6.x`     |     ✓     |
+| < `6.0.0` |     ✗     |
+
+## Reporting a Vulnerability
+
+If you find a vulnerability, please report it to `cotes.chung@gmail.com`.
+We will try our best to respond within a week. Thank you for your time!