🔖 Chore(release): 0.3.19

fixed found no layout file for "html" kind "section" and "term"

.babelrc

@@ -1,11 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": "> 0.25%, not dead"
-      }
-    ],
-    "minify"
-  ]
-}

.circleci/config.yml

@@ -1,17 +0,0 @@
-version: 2.1
-jobs:
-  build-check:
-    docker:
-      - image: cibuilds/hugo:0.62
-    working_directory: ~/LoveIt
-    steps:
-      - checkout
-      - run: git submodule sync
-      - run: git submodule update --init
-      - run: hugo --source=exampleSite -v --gc
-      - run: htmlproofer exampleSite/public --check-html --allow-hash-href --empty-alt-ignore --disable-external
-
-workflows:
-  build-check-exampleSite:
-    jobs:
-      - build-check

.gitattributes

@@ -0,0 +1,3 @@
+assets/lib/**/* linguist-vendored
+*.toml linguist-detectable
+*.md linguist-detectable

.github/FUNDING.yml

@@ -1 +0,0 @@
-custom: https://paypal.me/dillonzq

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,41 +0,0 @@
----
-name: Bug Report 错误报告
-about: Create a bug report 创建一个错误报告
-title: "[BUG] Some problem..."
-labels: bug
-
----
-
-### Describe the bug 描述你遇到的错误
-
-A clear and concise description of what the bug is.
-一段简短的对于你遇到的错误的描述.
-
-### Expected behavior 期待的行为
-
-A clear and concise description of what you expected to happen.
-一段简短的对于你期待的行为的描述.
-
-### Screenshots 屏幕截图
-
-If applicable, add screenshots to help explain your problem.
-如果可以的话, 提供屏幕截图对解决问题很有帮助.
-
-### Build Environment 构建环境
-
-- OS: [e.g. Windows 10, macOS, Ubuntu]
-- Theme version/commit [e.g. 0.2.0, 2ccba79]
-- Hugo version [e.g. 0.69.0]
-
-Please try to use Hugo **extended** version before opening the issue.
-请在创建 issue 之前尝试使用 Hugo **extended** 版本.
-
-### Preview Environment 预览环境
-
-- OS: [e.g. Windows 10, macOS, Ubuntu, iOS, Android]
-- Browser [e.g. Chrome, Safari, Firefox]
-
-### Additional Information 补充信息
-
-Configuration files or front matter code...
-配置文件或者前置参数的代码...

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,51 @@
+name: "Bug Report 错误报告"
+description: "Create a bug report 创建一个错误报告"
+title: "[BUG] Some problem ..."
+labels: ["bug"]
+body:
+  - type: textarea
+    id: describe
+    attributes:
+      label: Describe the bug 描述你遇到的错误
+      description: |
+        A clear and concise description of what the bug is.
+        一段简短的对于你遇到的错误的描述。
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior 期待的行为
+      description: |
+        A clear and concise description of what you expected to happen.
+        一段简短的对于你期待的行为的描述。
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots 屏幕截图
+      description: |
+       If applicable, add screenshots to help explain your problem.
+       如果可以的话，提供屏幕截图对解决问题很有帮助。
+  - type: textarea
+    id: environment
+    attributes:
+      label: Build Environment 构建环境
+      description: |
+        Please try to use Hugo **extended** version before opening the issue.
+        请在创建 issue 之前尝试使用 Hugo **extended** 版本。
+      placeholder: |
+        - OS: [e.g. Windows 10, macOS, Ubuntu]
+        - Theme version/commit [e.g. 0.2.0, 2ccba79]
+        - Hugo version [e.g. 0.69.0]
+  - type: textarea
+    id: preview
+    attributes:
+      label: Preview Environment 预览环境
+      placeholder: |
+        - OS: [e.g. Windows 10, macOS, Ubuntu, iOS, Android]
+        - Browser [e.g. Chrome, Safari, Firefox]
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Information 补充信息
+      description: |
+        Configuration files or front matter code ...
+        配置文件或者前置参数的代码……

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,9 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
+  - name: Questions 问题讨论
+    url: https://github.com/hugo-fixit/FixIt/discussions/new
+    about: Please ask questions in Discussion. 请在讨论中提问。
+
   - name: Theme Documentation 主题文档
-    url: https://hugoloveit.com/categories/documentation/
-    about: Please read the documentation carefully. 请先仔细阅读主题文档.
+    url: https://fixit.lruihao.cn/documentation/
+    about: Please read the documentation carefully. 请先仔细阅读主题文档。

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,22 +0,0 @@
----
-name: Feature request 功能请求
-about: Suggest an idea for this project 为这个项目提供一个建议
-title: "[FEATURE] Some feature"
-labels: enhancement
-
----
-
-### Describe the feature you want 描述你的功能需求
-
-- Feature 1 功能需求 1
-  I want this feature to solve ...
-  我希望这个功能解决 ...
-- Feature 2 功能需求 2
-  I want this feature to solve ...
-  我希望这个功能解决 ...
-- ...
-
-### Useful reference 有价值的参考
-
-If available, provide useful links to fulfill the feature.
-如果可以的话, 提供实现这个功能的相关参考链接.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,22 @@
+name: "Feature request 功能请求"
+description: "Suggest an idea for this project 为这个项目提供一个建议"
+title: "[FEATURE] Some feature"
+labels: ["enhancement"]
+body:
+    - type: textarea
+      id: describe
+      attributes:
+        label: Describe the feature you want 描述你的功能需求
+        description: |
+            Please submit new issues for different features.
+            请针对不同的功能建议提交新的 issue。
+        placeholder: |
+          I recommend adding this feature ...
+          我希望添加这样的一个功能……
+    - type: textarea
+      id: reference
+      attributes:
+        label: Useful reference 有价值的参考
+        description: |
+          If available, provide useful links to fulfill the feature. 
+          如果可以的话，提供实现这个功能的相关参考链接。

.github/configs/codeql.yml

@@ -0,0 +1,5 @@
+name: "CodeQL config"
+
+paths-ignore:
+  - assets/lib/**
+  - docs/**

.github/dependabot.yml

@@ -0,0 +1,34 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 1000
+    assignees:
+      - "Lruihao"
+    labels:
+      - "dependencies"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 1000
+    assignees:
+      - "Lruihao"
+    labels:
+      - "dependencies"
+  - package-ecosystem: "gitsubmodule"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 1000
+    assignees:
+      - "Lruihao"
+    labels:
+      - "dependencies"

.github/workflows/build.yml

@@ -0,0 +1,21 @@
+name: Hugo build check
+on:
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+jobs:
+  Actions-Hugo-Check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: ${{ vars.HUGO_VERSION || 'latest' }}
+          extended: true
+      - name: Build Hugo static files
+        run: hugo --source=demo --gc --minify --logLevel info

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,72 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  schedule:
+    - cron: "30 18 * * 5"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ "javascript" ]
+        # CodeQL supports [ "cpp", "csharp", "go", "java", "javascript", "python" ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Check out repository code
+      uses: actions/checkout@v4
+      with:
+        submodules: true  # Fetch Hugo themes (true OR recursive)
+        fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        config-file: ./.github/configs/codeql.yml
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v3
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3

.github/workflows/fixit-component-list.yml

@@ -0,0 +1,28 @@
+name: Generate hugo-fixit component list
+on:
+  schedule: # Run workflow automatically
+    - cron: '0 0 * * *' # Runs every day at 00:00 UTC
+  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
+permissions:
+  contents: write # To write the generated contents to the readme
+
+jobs:
+  generate-component-list:
+    name: Update this repo's README with the list of hugo-fixit theme components
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Generate hugo-fixit component list
+        uses: hugo-fixit/action-component-list@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          comment_tag_name: HUGO_FIXIT_COMPONENTS
+          readme_path: 'README.md,README.zh-cn.md'
+          template: "- [{$repo.name}]({$repo.html_url})\\\n  {$repo.description}"
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: ':memo: Docs: update hugo-fixit component list'
+          commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'

.github/workflows/release.yml

@@ -0,0 +1,46 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Release for new tag
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    tags:
+      - 'v*.*.*'
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0    # Fetch all history for generating release notes
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      
+      - name: Install dependencies and generate release notes
+        run: |
+          npm install
+          npm run release -- --starting-version ${{ github.ref_name }}
+          sed -i '1,4d' CHANGELOG.md
+
+      - name: GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          # Creates a draft release. Defaults to false
+          draft: true
+          body_path: CHANGELOG.md

.gitignore

@@ -1,19 +1,30 @@
 # Hugo default output directory
 public/
-/exampleSite/resources/
+resources/
 
+# Hugo
+.hugo_build.lock
+jsconfig.json
+
+# NPM
 node_modules/
-build/
 
-## OS Files
-# Windows
+# VSCode
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+
+# OS Files
+## Windows
 Thumbs.db
 ehthumbs.db
 Desktop.ini
 $RECYCLE.BIN/
 
-# OSX
+## OSX
 .DS_Store
 
-# Linux
+## Linux
 .directory
+
+CHANGELOG.md

.husky/pre-commit

@@ -0,0 +1 @@
+npx fixit-releaser version --dev

.npmrc

@@ -0,0 +1,2 @@
+tag-version-prefix="v"
+message=":bookmark: Chore(release): %s"

.nvmrc

@@ -0,0 +1 @@
+v18

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "budparr.language-hugo-vscode",
+    "kaellarkin.hugo-shortcode-syntax",
+    "eliostruyf.vscode-hugo-themer"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "todo-tree.tree.scanMode": "workspace only",
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  }
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+1024@lruihao.cn.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,90 @@
+# CONTRIBUTING
+
+Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
+
+## How to contribute to this project
+
+First, fork this repository by clicking the fork button.
+
+Next, clone your forked repo.
+
+```bash
+git clone https://github.com/hugo-fixit/FixIt.git && cd FixIt
+```
+
+Then, install the dev dependencies.
+
+```bash
+pnpm install
+```
+
+And now you are ready to go!
+
+Here are some useful commands.
+
+```bash
+# run a local debugging server with watch
+pnpm server
+# run a local debugging server with watch in production environment
+pnpm server:production
+```
+
+If you want to do docs-related theme changes, the simplest way is to have both `FixIt` and `fixit-docs` cloned as sibling directories, and then run:
+
+```bash
+pnpm server:docs
+```
+
+Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls> to submit your contribution 🎉
+
+## Git standard for developers
+
+### Branches
+
+| Branch         | Description                                            |
+| :------------- | :----------------------------------------------------- |
+| main           | _The development branch, may contain unstable updates_ |
+| single feature | _The branch to enhancements or fixes_                  |
+
+### Merge events
+
+| event          | merge                                 |
+| :------------- | :------------------------------------ |
+| PR             | **others:main => main:** `--rebase`   |
+| single feature | **feature branch => main:** `--merge` |
+
+### Commit message
+
+#### Format
+
+`[{emoji} ]{type}[({scope})]: {subject within 50 words}[ (#{issue/pull request})]`
+
+example:
+
+- :tada: Feat: add shortcode fixit-encryptor shortcode (#123)
+- :arrow_up: Chore(libs): update Artalk from 2.2.12 to 2.3.4 (#150)
+
+#### Emoji
+
+- <https://gitmoji.dev>
+- [vscode plugin](https://github.com/maixiaojie/git-emoji-zh.git)
+- utools plugin `GitEmoji`
+
+#### Message
+
+| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                                                                                               |
+| :-------------------------------------------- | :------- | :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| :tada:<br>:sparkles:                          | Feat     | Feat: add {feature}                                          | new feature                                                                                                                              |
+| :truck:                                       |          | Feat: adjust/migrate {feature name}, {change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after)                      |
+| :fire:                                        |          | Feat: delete {feature name}, {deletion reason}               | If the feature is deleted, the reason for deletion must be explained                                                                     |
+| :bug: <br>:construction: <br>:rotating_light: | Fix      | Fix: fix {bug description}                                   | Fix known bugs                                                                                                                           |
+| :art: <br>:lipstick: <br>:pencil2:            | Style    | Style: Typesetting/CSS style {optimizing content}            | Changes that do not affect code operation, such as code layout and style change                                                          |
+| :recycle:                                     | Refactor | Refactor: override {feature name}                            | It is neither a new function nor a code change to fix a bug. Simply rewriting the code of a function does not affect the function result |
+| :zap:                                         | Perf     | Perf: improve performance {function name}, {improve content} | Optimize code performance                                                                                                                |
+| :rewind:                                      | Revert   | Revert: restore version {commit message of restore version}  | Restore the version of one commit                                                                                                        |
+| :pencil:<br>:pencil2:                         | Docs     | Docs: revise comments/update documents                       | Adjustment of documents and notes                                                                                                        |
+| :wrench:                                      | Chore    | Chore: update plugin version                                 | Changes in the construction process or auxiliary tools                                                                                   |
+
+> [!note]
+> The change log is automatically generated based on the commit message.\
+> Use `Chore` type or add `(ignore)` scope to ignore including in.

LICENSE

@@ -1,7 +1,8 @@
 The MIT License (MIT)
 
 Copyright (c) 2018 LIUZHICHAO.COM
-Copyright (c) 2019 DILLONZQ.COM
+Copyright (c) 2019-2020 DILLONZQ.COM
+Copyright (c) 2021-2025 Lruihao (https://lruihao.cn)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,196 +1,325 @@
-# LoveIt Theme | Hugo [![Netlify Status](https://api.netlify.com/api/v1/badges/e60303f2-862c-4342-bf59-7c9adb10812e/deploy-status)](https://app.netlify.com/sites/hugo-loveit/deploys)
+<!-- markdownlint-disable-file MD033 MD041 -->
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.png)
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
-[![CircleCI](https://img.shields.io/circleci/build/github/dillonzq/LoveIt/develop?label=CI&style=flat-square&logo=circleci)](https://app.circleci.com/pipelines/github/dillonzq/LoveIt)
+<div align="center" class="ignore">
+  <p>
+    FixIt is a clean, elegant but advanced blog theme for <a href="https://gohugo.io/">Hugo</a>.<br>
+    <em><sub>Don't forget to leave a ⭐️ if you like this theme, thanks!</sub></em>
+  </p>
+  English |
+  <a href="/README.zh-cn.md">简体中文</a> |
+  <a href="https://fixit.lruihao.cn/zh-cn/ecosystem/hugo-fixit/fixit/?lang=chinese_traditional">繁體中文</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=french">Français</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=german">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
+</div>
 
-English README | [简体中文说明](https://github.com/dillonzq/LoveIt/blob/master/README.zh-cn.md)
+<a title="FixIt website" href="https://fixit.lruihao.cn"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>
 
-> **LoveIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).
+# FixIt
 
-It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).
+> It is based on the original [LoveIt](https://github.com/dillonzq/LoveIt) Theme, [KeepIt](https://github.com/Fastbyte01/KeepIt) Theme and [LeaveIt](https://github.com/liuzc/LeaveIt) Theme.
 
-Since the three themes have a similar look, if you have questions about their differences,
-read [Why choose LoveIt](#why-choose-loveit) so that you can choose the one that works best for you.
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.146.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
 
-![Hugo Theme LoveIt](https://github.com/dillonzq/LoveIt/raw/master/images/Apple-Devices-Preview.png)
+## Live Preview
 
-## [Demo Site](https://hugoloveit.com/)
+<p align="center">
+  💟 <a href="https://fixit.lruihao.cn">Production</a> | ❇️ <a href="https://pre.fixit.lruihao.cn">Preview</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+<br>
+<br>
+  More FixIt examples <a href="https://fixit.lruihao.cn/showcase/">here</a>.
+</p>
 
-To see this theme in action, here is a live [demo site](https://hugoloveit.com/) which is rendered with **LoveIt** theme.
+## Why choose FixIt
 
-## Why choose LoveIt
+I don't know why 🤷.
 
-Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme has the following modifications.
+<!-- Too lazy to write... -->
 
-* Custom **Header**
-* Custom **CSS Style**
-* A new **home page**, compatible with the latest version of Hugo
-* A lot of **style detail adjustments,** including color, font size, margins, code preview style
-* More readable **dark mode**
-* Some beautiful **CSS animations**
-* Easy-to-use and self-expanding **table of contents**
-* More **social links**, **share sites** and **comment system**
-* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
-* **Copy code** to clipboard with one click
-* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* Extended Markdown syntax for **ruby annotation**
-* Extended Markdown syntax for **fraction**
-* **Mathematical formula** supported by [KaTeX](https://katex.org/)
-* **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili** player supported
-* Kinds of **admonitions** shortcode supported
-* Custom style shortcodes supported
-* **CDN** for all third-party libraries supported
-* ...
+## Usage
 
-In short,
-if you prefer the design language and freedom of the LoveIt theme,
-if you want to use the extended Font Awesome icons conveniently,
-if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts,
-the LoveIt theme may be more suitable for you.
+### Documentation
 
-I hope you will LoveIt ❤️!
+Head to the [Quick Start](https://fixit.lruihao.cn/documentation/getting-started/quick-start/) page for a step-by-step guide on how to create a new website with FixIt.
+
+Outline: [Installation](https://fixit.lruihao.cn/documentation/installation/) ➜ [Getting Started](https://fixit.lruihao.cn/documentation/getting-started/) ➜ [Content Management](https://fixit.lruihao.cn/documentation/content-management/) ➜ [Advanced Usage](https://fixit.lruihao.cn/documentation/advanced/)
+
+### Starter Wizard
+
+We provided a CLI tool to help you create a new project with FixIt by a single command.
+
+```bash
+pnpx fixit-cli create my-blog
+```
+
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)
+
+### Templates
+
+Click the following links to generate a new repository with template:
+
+| Template                                      | repository                        | Generate link                  |
+| :-------------------------------------------- | :-------------------------------- | :----------------------------: |
+| A quick-start template base on Hugo Modules.  | [hugo-fixit-starter][starter]     | [Click][starter:generate]      |
+| A quick-start template base on Git submodule. | [hugo-fixit-starter1][starter1]   | [Click][starter1:generate]     |
+| Build multilingual sites using Fixit theme.   | [docs][docs]                      | [Click][docs:generate]         |
+| Customize with FixIt theme.                   | [Lruihao/hugo-blog][lruihao-blog] | [Click][lruihao-blog:generate] |
+
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate
 
 ## Features
 
+<details>
+<summary>Click to view.</summary>
+
 ### Performance and SEO
 
-* Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
-* Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* **[Google Analytics](https://analytics.google.com/analytics)** supported
-* **[Fathom Analytics](https://usefathom.com/)** supported
-* Search engine **verification** supported (Google, Bind, Yandex and Baidu)
-* **CDN** for third-party libraries supported
-* Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
+- Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+- Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
+- **[Google Analytics](https://analytics.google.com/analytics)** supported
+- **[Fathom Analytics](https://usefathom.com/)** supported
+- **[Baidu Analytics](https://tongji.baidu.com/)** supported
+- **[Umami Analytics](https://umami.is/)** supported
+- **[Plausible Analytics](https://plausible.io/)** supported
+- **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)** supported
+- **[Splitbee Analytics](https://splitbee.io)** supported
+- Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
+- **CDN** for third-party libraries supported
 
 ### Appearance and Layout
 
-* **Responsive** layout
-* **Light/Dark** mode
-* Globally consistent **design language**
-* **Pagination** supported
-* Easy-to-use and self-expanding **table of contents**
-* **Multilanguage** supported and i18n ready
-* Beautiful **CSS animation**
+- **Responsive** layout
+- **Light/Dark** mode
+- Globally consistent **design language**
+- **Pagination** supported
+- Easy-to-use and self-expanding **table of contents**
+- **Multilanguage** supported and i18n ready
+- Beautiful **CSS animation**
 
 ### Social and Comment Systems
 
-* **Gravatar** supported by [Gravatar](https://gravatar.com)
-* Local **Avatar** supported
-* Up to **64** social links supported
-* Up to **28** share sites supported
-* **Disqus** comment system supported by [Disqus](https://disqus.com)
-* **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
-* **Valine** comment system supported by [Valine](https://valine.js.org/)
-* **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
-* **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
-* **Commento** comment system supported by [Commento](https://commento.io/)
-* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+- **Gravatar** supported by [Gravatar](https://gravatar.com)
+- Local **Avatar** supported
+- Up to **87** social links supported
+- Up to **28** share sites supported
+- **Disqus** comment system supported by [Disqus](https://disqus.com)
+- **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
+- **Valine** comment system supported by [Valine](https://valine.js.org/)
+- **Waline** comment system supported by [Waline](https://waline.js.org/)
+- **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+- **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
+- **Commento** comment system supported by [Commento](https://commento.io/)
+- **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+- **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
+- **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
+- **giscus** comment system supported by [giscus](https://giscus.app/)
 
 ### Extended Features
 
-* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
-* **Twemoji** supported
-* Automatically **highlighting** code
-* **Copy code** to clipboard with one click
-* **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* Extended Markdown syntax for **ruby annotation**
-* Extended Markdown syntax for **fraction**
-* **Mathematical formula** supported by [KaTeX](https://katex.org/)
-* **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili player** shortcode
-* Kinds of **admonitions** shortcode
-* **Custom style** shortcode
-* **Custom script** shortcode
-* **Animated typing** supported by [TypeIt](https://typeitjs.com/)
-* **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
-* **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
-* ...
+- **AI Summary**, **AI Search** and **AI Chatbot** supported by [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z)
+- **PWA (Progressive Web App)** supported
+- **Sub Menu** supported
+- **Content Encryption** supported (Pages, Partial)
+- **Friends** page embedded template
+- **Search** supported by [algolia](https://www.algolia.com/), [Fuse.js](https://fusejs.io/), CSE or [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z)
+- **Custom Search Engine (CSE)** supported by [Google](https://programmablesearchengine.google.com/)
+- **Twemoji** supported
+- Automatically **highlighting** code
+- **Copy code** to clipboard with one click
+- **Images gallery** supported by [lightgallery](https://github.com/sachinchoolur/lightgallery)
+- Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
+- Extended Markdown syntax for **ruby annotation**
+- Extended Markdown syntax for **fraction**
+- **Mathematical formula** supported by [KaTeX](https://katex.org/)
+- **Diagrams** code fences extended and shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+- **Interactive data visualization** shortcode and code fences extended supported by [ECharts](https://echarts.apache.org/)
+- **Timeline** code fences extended and shortcode supported
+- **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+- **Bilibili player** and **Douyin player** shortcode
+- Kinds of **admonitions** shortcode
+- **Custom style** shortcode
+- **Custom script** shortcode
+- Open more **custom blocks**
+- **Animated typing** supported by [TypeIt](https://typeitjs.com/)
+- **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
+- **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
+- **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
+- Options to **cache remote image** locally
+- ...
 
-## [Documentation](https://hugoloveit.com/categories/documentation/)
-
-Build Documentation Locally:
-
-```bash
-hugo server --source=exampleSite
-```
+</details>
 
 ## Multilingual and i18n
 
-LoveIt supports the following languages:
+FixIt supports multilingual and i18n. For more information, see the [Content Management](https://fixit.lruihao.cn/documentation/content-management/introduction#multilingual) documentation. You are welcome to [contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls).
 
-* English
-* Simplified Chinese
-* French
-* Polish
-* Brazilian Portuguese
-* Italian
-* Spanish
-* German
-* Serbian
-* Russian
-* Romanian
-* Vietnamese
-* [Contribute with a new language](https://github.com/dillonzq/LoveIt/pulls)
+<details>
+<summary>FixIt supports the following languages.</summary>
 
-[Languages Compatibility](https://hugoloveit.com/theme-documentation-basics/#language-compatibility)
+- English
+- Simplified Chinese
+- Traditional Chinese
+- French
+- Polish
+- Brazilian Portuguese
+- Italian
+- Spanish
+- German
+- Serbian
+- Russian
+- Romanian
+- Vietnamese
+- Hindi
 
-## [Roadmap](https://github.com/dillonzq/LoveIt/projects/1)
+</details>
 
-## Questions, ideas, bugs, pull requests
+## Theme Components
 
-All feedback is welcome! Head over to the [issue tracker](https://github.com/dillonzq/LoveIt/issues).
+The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/ecosystem/#-components) for customization.
+
+<details>
+<summary>Click to view.</summary>
+
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 一个 canvas 实现的小鱼游动动画效果。
+- [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
+  Mobile devtools component powered by vConsole and eruda.
+- [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
+  🌐 A component for site automatic translation.
+- [component-projects](https://github.com/hugo-fixit/component-projects)\
+  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
+- [hugo-atom-feed](https://github.com/hugo-fixit/hugo-atom-feed)\
+  Hugo theme component for ATOM feed custom Output Format.
+- [hugo-json-feed](https://github.com/hugo-fixit/hugo-json-feed)\
+  Hugo theme component for JSON feed custom Output Format.
+- [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
+  A Hugo theme component with asciinema-embed shortcode.
+- [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
+  一个含有 caniuse shortcode 的 Hugo 主题组件。
+- [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
+  🔖 Embed bookmark of FixIt Docs.
+- [shortcode-mmt-netease](https://github.com/hugo-fixit/shortcode-mmt-netease)\
+  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
+- [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
+  A Hugo theme component with reward-log or sponsor-log shortcode.
+<!-- HUGO_FIXIT_COMPONENTS:END -->
+
+</details>
+
+## Community
+
+All feedback is welcome! Head over to the [discussions][discussions], [Pull requests][pulls] and [issues][issues] tracker.
+
+| Official Community          | Description                     |
+| :-------------------------- | :------------------------------ |
+| [Discussions][discussions]  | GitHub discussion forum         |
+| [FixIt WeChat group][wx-mp] | Follow and reply "FixIt" to get |
+| [FixIt QQ group][qq-group]  | QQ group: `814031017`           |
+| [Hugo FixIt Planet][zsxq]   | Paid knowledge Planet           |
+
+[discussions]: https://github.com/hugo-fixit/FixIt/discussions
+[pulls]: https://github.com/hugo-fixit/FixIt/pulls
+[issues]: https://github.com/hugo-fixit/FixIt/issues
+[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+[zsxq]: https://t.zsxq.com/GgKEW
+[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp
+
+## Contributing
+
+We welcome you to join the development of FixIt. Please see [contributing document](/CONTRIBUTING.md). 🤗
+
+Also, we welcome Issue or PR to our [official-components](https://github.com/hugo-fixit).
+
+> [!note]
+> When contributing, please first discuss the change you wish to make via a discussion on this repository before making the actual change.
+
+## Acknowledgements
+
+Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/contributors) for their support!
+
+<details>
+<summary>Thanks to the authors of following resources included in the theme:</summary>
+
+- [normalize.css](https://github.com/necolas/normalize.css)
+- [Font Awesome](https://fontawesome.com/)
+- [Simple Icons](https://github.com/simple-icons/simple-icons)
+- [Animate.css](https://daneden.github.io/animate.css/)
+- [autocomplete-js](https://github.com/algolia/autocomplete)
+- [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
+- [Fuse.js](https://fusejs.io/)
+- [object-fit-images](https://github.com/fregante/object-fit-images)
+- [Twemoji](https://github.com/twitter/twemoji)
+- [emoji-data](https://github.com/iamcal/emoji-data)
+- [lightgallery](https://github.com/sachinchoolur/lightgallery)
+- [Sharer.js](https://github.com/ellisonleao/sharer.js)
+- [TypeIt](https://typeitjs.com/)
+- [KaTeX](https://katex.org/)
+- [mermaid](https://github.com/mermaid-js/mermaid)
+- [ECharts](https://echarts.apache.org/)
+- [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- [APlayer](https://github.com/MoePlayer/APlayer)
+- [MetingJS](https://github.com/metowolf/MetingJS)
+- [Gitalk](https://github.com/gitalk/gitalk)
+- [Valine](https://valine.js.org/)
+- [cookieconsent](https://github.com/osano/cookieconsent)
+- [cell-watermark](https://github.com/Lruihao/watermark)
+- [不蒜子](http://busuanzi.ibruce.info/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
+- [pangu.js](https://github.com/vinta/pangu.js)
+- [Artalk](https://artalk.js.org/)
+- [Waline](https://waline.js.org/)
+- [Twikoo](https://twikoo.js.org/)
+- [github-corners](https://github.com/tholman/github-corners)
+- [giscus](https://giscus.app/)
+- [crypto-js](https://github.com/brix/crypto-js)
+- [pace](https://github.com/CodeByZach/pace)
+- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
+
+</details>
+
+<details>
+<summary>The FixIt also draws on some features of the following projects, and thanks to their authors as well:</summary>
+
+- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
+- [NexT](https://github.com/next-theme/hexo-theme-next)
+
+</details>
 
 ## License
 
-LoveIt is licensed under the **MIT** license. Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) for details.
-
-Thanks to the authors of following resources included in the theme:
-
-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
-* [autocomplete.js](https://github.com/algolia/autocomplete.js)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/knsv/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-
-## Author
-
-[Dillon](https://dillonzq.com)
+FixIt is licensed under the **MIT** license. Check the [LICENSE file](/LICENSE) for details.
 
 ## Sponsor
 
-If you enjoy the theme, please consider buying me a coffee ☕️.
+If you enjoy the theme, please consider buying me a coffee ☕️. Thanks!
 
-* [PayPal](https://paypal.me/dillonzq)
-* [Alipay](https://github.com/dillonzq/LoveIt/raw/master/images/Alipay.jpg)
-* [Wechat](https://github.com/dillonzq/LoveIt/raw/master/images/Wechat.jpg)
+- [Wechat](/images/wechatpay.jpg)
+- [Alipay](/images/alipay.jpg)
+- [PayPal](https://paypal.me/Lruihao)
 
-Thanks! ❤️
+Thanks to the following sponsors for their support:
+
+- [translate.js](https://github.com/xnx3/translate) Sponsoring [Enterprise Translation Channel](https://translate.zvo.cn/4087.html).
+
+## Author
+
+[Lruihao](https://github.com/Lruihao "Follow me on GitHub")

README.zh-cn.md

@@ -1,191 +1,329 @@
-# LoveIt 主题 | Hugo [![Netlify Status](https://api.netlify.com/api/v1/badges/e60303f2-862c-4342-bf59-7c9adb10812e/deploy-status)](https://app.netlify.com/sites/hugo-loveit/deploys)
+<!-- markdownlint-disable-file MD033 MD041 -->
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.png)
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
-[![CircleCI](https://img.shields.io/circleci/build/github/dillonzq/LoveIt/develop?label=CI&style=flat-square&logo=circleci)](https://app.circleci.com/pipelines/github/dillonzq/LoveIt)
+<div align="center" class="ignore">
+  <p>
+    FixIt 是一个简洁、优雅且高效的 <a href="https://gohugo.io/">Hugo</a> 博客主题。<br>
+    <em><sub>如果你喜欢这个主题，别忘了留下一颗 ⭐️ 哦，谢谢！</sub></em>
+  </p>
+  <a href="/README.md">English</a> |
+  简体中文 |
+  <a href="https://fixit.lruihao.cn/zh-cn/ecosystem/hugo-fixit/fixit/?lang=chinese_traditional">繁體中文</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=french">Français</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=german">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
+</div>
 
-[English README](https://github.com/dillonzq/LoveIt/blob/master/README.md) | 简体中文说明
+<a title="FixIt 官网" href="https://fixit.lruihao.cn/zh-cn/"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>
 
-> [LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+# FixIt
 
-它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt)。
+> 它的原型基于 [LoveIt](https://github.com/dillonzq/LoveIt) 主题，[KeepIt](https://github.com/Fastbyte01/KeepIt) 主题和 [LeaveIt](https://github.com/liuzc/LeaveIt) 主题。
 
-由于三个主题外观的相似性，如果你对于它们的不同之处有疑问，请阅读 [为什么选择 LoveIt](#为什么选择-LoveIt)，以便你能选择最适合你的一个。
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.146.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
 
-![Hugo 主题 LoveIt](https://github.com/dillonzq/LoveIt/raw/master/images/Apple-Devices-Preview.png)
+## 即时预览
 
-## 主题[预览](https://hugoloveit.com/zh-cn/)
+<p align="center">
+  💟 <a href="https://fixit.lruihao.cn/zh-cn/">Production</a> | ❇️ <a href="https://pre.fixit.lruihao.cn/zh-cn/">Preview</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+<br>
+<br>
+  更多 FixIt 的例子参见 <a href="https://fixit.lruihao.cn/zh-cn/showcase/">这里</a>。
+</p>
 
-为了直观地浏览主题特性，这里有一个基于 **LoveIt** 主题渲染的 [预览网站](https://hugoloveit.com/zh-cn/)。
+## 为什么选择 FixIt
 
-## 为什么选择 LoveIt
+我也不知道为什么 🤷。
 
-相较于 LeaveIt 主题 和 KeepIt 主题，LoveIt 主题主要有以下修改
+<!-- 懒的写…… -->
 
-* 自定义**标题栏**
-* 自定义**CSS 样式**
-* 焕然一新的**主页**，已经兼容最新版 Hugo
-* 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式
-* 可读性更强的**深色模式**
-* 一些美观的 **CSS 动画**
-* 易用和自动展开的**文章目录**
-* 支持更多的**社交链接**、**网站分享**和**评论系统**
-* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
-* 一键**复制代码**到剪贴板
-* 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-* 支持**上标注释**的扩展 Markdown 语法
-* 支持**分数**的扩展 Markdown 语法
-* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能
-* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能
-* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** 地图显示功能
-* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器**
-* 支持内嵌 **Bilibili** 视频
-* 支持多种**注释**的 shortcode
-* 支持自定义样式的 shortcode
-* 支持所有第三方库的 **CDN**
-* ...
+## 使用指南
 
-所以，如果你更偏好 LoveIt 主题的设计语言和自由度，如果你想便捷地使用扩展的 Font Awesome 图标，如果你想在文章内嵌数学公式、流程图、音乐或是 Bilibili 视频，
-那么，LoveIt 主题可能是更适合你。
-希望你会 LoveIt ❤️!
+### 主题文档
 
-## 特性
+前往 [快速上手](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/quick-start/) 页面，了解如何使用 FixIt 主题创建一个新网站的详细步骤。
+
+大纲：[安装篇](https://fixit.lruihao.cn/zh-cn/documentation/installation/) ➜ [入门篇](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/) ➜ [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/) ➜ [进阶篇](https://fixit.lruihao.cn/zh-cn/documentation/advanced/)
+
+### 快速开始
+
+我们提供了一个 CLI 工具，可以通过一个命令来创建一个新的 FixIt 项目。
+
+```bash
+pnpx fixit-cli create my-blog
+```
+
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)
+
+### 模板
+
+点击以下链接使用模板生成一个新的仓库：
+
+| 模板                                | 仓库                              | 生成链接                          |
+| :---------------------------------- | :-------------------------------- | :-------------------------------: |
+| 基于 Hugo Modules 的快速入门模板。  | [hugo-fixit-starter][starter]     | [点击生成][starter:generate]      |
+| 基于 Git submodule 的快速入门模板。 | [hugo-fixit-starter1][starter1]   | [点击生成][starter1:generate]     |
+| 使用 Fixit 主题构建多语言网站。     | [docs][docs]                      | [点击生成][docs:generate]         |
+| 基于 FixIt 主题进行自定义设置。     | [Lruihao/hugo-blog][lruihao-blog] | [点击生成][lruihao-blog:generate] |
+
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate
+
+### 镜像
+
+Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
+
+## 特色
+
+<details>
+<summary>点击展开</summary>
 
 ### 性能和 SEO
 
-* **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分
-* 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
-* 支持 **[Google Analytics](https://analytics.google.com/analytics)**
-* 支持 **[Fathom Analytics](https://usefathom.com/)**
-* 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu)
-* 支持所有第三方库的 **CDN**
-* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**
+- **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中，99/100 的移动设备得分和 100/100 的桌面设备得分
+- 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
+- 支持 **[Google Analytics](https://analytics.google.com/analytics)**
+- 支持 **[Fathom Analytics](https://usefathom.com/)**
+- 支持 **[百度统计](https://tongji.baidu.com/)**
+- 支持 **[Umami Analytics](https://umami.is/)**
+- 支持 **[Plausible Analytics](https://plausible.io/)**
+- 支持 **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)**
+- 支持 **[Splitbee Analytics](https://splitbee.io)**
+- 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
+- 支持所有第三方库的 **CDN**
 
 ### 外观和布局
 
-* **响应式**布局
-* **浅色/深色** 主题模式
-* 全局一致的**设计语言**
-* 支持**分页**
-* 易用和自动展开的**文章目录**
-* 支持**多语言**和国际化
-* 美观的 **CSS 动画**
+- **响应式**布局
+- **浅色/深色** 主题模式
+- 全局一致的**设计语言**
+- 支持**分页**
+- 易用和自动展开的**文章目录**
+- 支持**多语言**和国际化
+- 美观的 **CSS 动画**
 
 ### 社交和评论系统
 
-* 支持 **[Gravatar](https://gravatar.com)** 头像
-* 支持本地**头像**
-* 支持多达 **64** 种社交链接
-* 支持多达 **28** 种网站分享
-* 支持 **[Disqus](https://disqus.com)** 评论系统
-* 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
-* 支持 **[Valine](https://valine.js.org/)** 评论系统
-* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
-* 支持 **[Telegram comments](https://comments.app/) 评论**系统
-* 支持 **[Commento](https://commento.io/)** 评论系统
-* 支持 **[Utterances](https://utteranc.es/)** 评论系统
+- 支持 **[Gravatar](https://gravatar.com)** 头像
+- 支持本地**头像**
+- 支持多达 **87** 种社交链接
+- 支持多达 **28** 种网站分享
+- 支持 **[Disqus](https://disqus.com)** 评论系统
+- 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
+- 支持 **[Valine](https://valine.js.org/)** 评论系统
+- 支持 **[Waline](https://waline.js.org/)** 评论系统
+- 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+- 支持 **[Telegram comments](https://comments.app/) 评论**系统
+- 支持 **[Commento](https://commento.io/)** 评论系统
+- 支持 **[Utterances](https://utteranc.es/)** 评论系统
+- 支持 **[Artalk](https://artalk.js.org/)** 评论系统
+- 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
+- 支持 **[giscus](https://giscus.app/zh-CN/)** 评论系统
 
 ### 扩展功能
 
-* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
-* 支持 **Twemoji**
-* 支持**代码高亮**
-* 一键**复制代码**到剪贴板
-* 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
-* 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-* 支持**上标注释**的扩展 Markdown 语法
-* 支持**分数**的扩展 Markdown 语法
-* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
-* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
-* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
-* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
-* 支持 **Bilibili 视频** shortcode
-* 支持多种**注释**的 shortcode
-* 支持**自定义样式**的 shortcode
-* 支持**自定义脚本**的 shortcode
-* 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
-* 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画**
-* 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
-* ...
+- 支持基于 [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
+- 支持**渐进式网页应用**
+- 支持**二级菜单**
+- 支持**内容加密**（页面、局部）
+- 支持**友情链接**的页面模板
+- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z) 的**搜索**
+- 支持基于 [Google](https://programmablesearchengine.google.com/) 的**自定义搜索引擎 (CSE)**
+- 支持 **Twemoji**
+- 支持**代码高亮**
+- 一键**复制代码**到剪贴板
+- 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的**图片画廊**
+- 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
+- 支持**上标注释**的扩展 Markdown 语法
+- 支持**分数**的扩展 Markdown 语法
+- 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
+- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
+- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
+- 支持 **Timeline** 的代码块扩展语法和 shortcode
+- 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
+- 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
+- 支持 **Bilibili 视频** 和 **抖音视频** shortcode
+- 支持多种**注释**的 shortcode
+- 支持**自定义样式**的 shortcode
+- 支持**自定义脚本**的 shortcode
+- 支持**自定义模板块**
+- 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
+- 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
+- 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+- 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
+- 支持本地**缓存远程图床图片**
+- ……
 
-## [文档](https://hugoloveit.com/zh-cn/categories/documentation/)
-
-在本地构建文档:
-
-```bash
-hugo server --source=exampleSite
-```
+</details>
 
 ## 多语言和国际化
 
-LoveIt 支持下列语言:
+FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/introduction#multilingual) 文档，欢迎 [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)。
 
-* 英语
-* 简体中文
-* 法语
-* 波兰语
-* 巴西葡萄牙语
-* 意大利语
-* 西班牙语
-* 德语
-* 塞尔维亚语
-* 俄语
-* 罗马尼亚语
-* 越南语
-* [贡献一种新的语言](https://github.com/dillonzq/LoveIt/pulls)
+<details>
+<summary>FixIt 支持下列语言。</summary>
 
-[语言兼容性](https://hugoloveit.com/zh-cn/theme-documentation-basics/#language-compatibility)
+- 英语
+- 简体中文
+- 繁体中文
+- 法语
+- 波兰语
+- 巴西葡萄牙语
+- 意大利语
+- 西班牙语
+- 德语
+- 塞尔维亚语
+- 俄语
+- 罗马尼亚语
+- 越南语
+- 印地语
 
-## [路线图](https://github.com/dillonzq/LoveIt/projects/1)
+</details>
 
-## 问题、想法、 bugs 和 PRs
+## 主题组件
 
-所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/dillonzq/LoveIt/issues)。
+FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此，我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/ecosystem/#-组件) 供用户选择。
+
+<details>
+<summary>点击展开</summary>
+
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 一个 canvas 实现的小鱼游动动画效果。
+- [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
+  Mobile devtools component powered by vConsole and eruda.
+- [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
+  🌐 A component for site automatic translation.
+- [component-projects](https://github.com/hugo-fixit/component-projects)\
+  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
+- [hugo-atom-feed](https://github.com/hugo-fixit/hugo-atom-feed)\
+  Hugo theme component for ATOM feed custom Output Format.
+- [hugo-json-feed](https://github.com/hugo-fixit/hugo-json-feed)\
+  Hugo theme component for JSON feed custom Output Format.
+- [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
+  A Hugo theme component with asciinema-embed shortcode.
+- [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
+  一个含有 caniuse shortcode 的 Hugo 主题组件。
+- [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
+  🔖 Embed bookmark of FixIt Docs.
+- [shortcode-mmt-netease](https://github.com/hugo-fixit/shortcode-mmt-netease)\
+  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
+- [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
+  A Hugo theme component with reward-log or sponsor-log shortcode.
+<!-- HUGO_FIXIT_COMPONENTS:END -->
+
+</details>
+
+## 社区支持
+
+所有的反馈都是欢迎的！详见 [Discussions][discussions]、[Pull requests][pulls] 和 [Issues][issues]。
+
+| 官方社区                           | 说明                            |
+| :--------------------------------- | :------------------------------ |
+| [Discussions][discussions]         | GitHub 讨论区                   |
+| [FixIt 主题交流群（微信）][wx-mp]  | 关注「菠菜眾長」回复“FixIt”获取 |
+| [FixIt 主题交流群（QQ）][qq-group] | QQ 群：`814031017`              |
+| [Hugo FixIt 星球][zsxq]            | 付费知识星球                    |
+
+[discussions]: https://github.com/hugo-fixit/FixIt/discussions
+[pulls]: https://github.com/hugo-fixit/FixIt/pulls
+[issues]: https://github.com/hugo-fixit/FixIt/issues
+[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+[zsxq]: https://t.zsxq.com/GgKEW
+[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp
+
+## 参与贡献
+
+我们欢迎你加入 FixIt 的开发，贡献出你的一份力量。请看开源 [贡献指南](/CONTRIBUTING.md)。 🤗
+
+你也可以随时向我们的 [官方插件](https://github.com/hugo-fixit) 提交 Issue 或 Pull Request。
+
+> [!note]
+> 在贡献时，请先通过此存储库上的讨论来讨论你希望进行的更改，然后再进行实际更改。
+
+## 致谢
+
+感谢 [所有贡献者](https://github.com/hugo-fixit/FixIt/graphs/contributors) 的支持！
+
+<details>
+<summary>FixIt 主题中用到了以下项目，感谢它们的作者：</summary>
+
+- [normalize.css](https://github.com/necolas/normalize.css)
+- [Font Awesome](https://fontawesome.com/)
+- [Simple Icons](https://github.com/simple-icons/simple-icons)
+- [Animate.css](https://daneden.github.io/animate.css/)
+- [autocomplete-js](https://github.com/algolia/autocomplete)
+- [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
+- [Fuse.js](https://fusejs.io/)
+- [object-fit-images](https://github.com/fregante/object-fit-images)
+- [Twemoji](https://github.com/twitter/twemoji)
+- [emoji-data](https://github.com/iamcal/emoji-data)
+- [lightgallery](https://github.com/sachinchoolur/lightgallery)
+- [Sharer.js](https://github.com/ellisonleao/sharer.js)
+- [TypeIt](https://typeitjs.com/)
+- [KaTeX](https://katex.org/)
+- [mermaid](https://github.com/mermaid-js/mermaid)
+- [ECharts](https://echarts.apache.org/)
+- [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- [APlayer](https://github.com/MoePlayer/APlayer)
+- [MetingJS](https://github.com/metowolf/MetingJS)
+- [Gitalk](https://github.com/gitalk/gitalk)
+- [Valine](https://valine.js.org/)
+- [cookieconsent](https://github.com/osano/cookieconsent)
+- [cell-watermark](https://github.com/Lruihao/watermark)
+- [不蒜子](http://busuanzi.ibruce.info/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
+- [pangu.js](https://github.com/vinta/pangu.js)
+- [Artalk](https://artalk.js.org/)
+- [Waline](https://waline.js.org/)
+- [Twikoo](https://twikoo.js.org/)
+- [github-corners](https://github.com/tholman/github-corners)
+- [giscus](https://giscus.app/zh-CN)
+- [crypto-js](https://github.com/brix/crypto-js)
+- [pace](https://github.com/CodeByZach/pace)
+- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
+
+</details>
+
+<details>
+<summary>FixIt 主题还借鉴了以下项目的部分功能，同样感谢它们的作者：</summary>
+
+- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
+- [NexT](https://github.com/next-theme/hexo-theme-next)
+
+</details>
 
 ## 许可协议
 
-LoveIt 根据 **MIT** 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。
-
-LoveIt 主题中用到了以下项目，感谢它们的作者：
-
-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
-* [autocomplete.js](https://github.com/algolia/autocomplete.js)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/knsv/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-
-## 作者
-
-[Dillon](https://dillonzq.com)
+FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件](/LICENSE)。
 
 ## 赞助支持
 
-如果你喜爱这个主题, 请考虑给我买杯咖啡 ☕️.
+如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️，谢谢！
 
-* [PayPal](https://paypal.me/dillonzq)
-* [支付宝](https://github.com/dillonzq/LoveIt/raw/master/images/Alipay.jpg)
-* [微信支付](https://github.com/dillonzq/LoveIt/raw/master/images/Wechat.jpg)
+- [微信支付](/images/wechatpay.jpg)
+- [支付宝](/images/alipay.jpg)
+- [PayPal](https://paypal.me/Lruihao)
 
-谢谢! ❤️
+感谢以下赞助商提供大力支持：
+
+- [translate.js](https://github.com/xnx3/translate) 赞助[企业级翻译通道](https://translate.zvo.cn/4087.html)。
+
+## 作者
+
+[Lruihao](https://github.com/Lruihao "在 GitHub 上关注我")

SECURITY.md

@@ -0,0 +1,18 @@
+# Security Policy
+
+## Supported Versions
+
+| Version       | Supported          |
+| :-----------: | :----------------: |
+| 0.3.x         | :white_check_mark: |
+
+legacy and transitional versions:
+
+| Version       | Supported          | LoveIt Compatibility |
+| :-----------: | :----------------: | :------------------: |
+| 0.1.x         | :x:                | :white_check_mark:   |
+| 0.2.x         | :x:                | :white_check_mark:   |
+
+## Reporting a Vulnerability
+
+If you want to report a vulnerability, create a new issue at https://github.com/hugo-fixit/FixIt/issues. Any vulnerabilities will be fixed as soon as possible.

archetypes/default.md

@@ -1,28 +1,9 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
 date: {{ .Date }}
-lastmod: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
+description:
+keywords:
 draft: true
-author: ""
-authorLink: ""
-description: ""
-
-tags: []
-categories: []
-
-hiddenFromHomePage: false
-hiddenFromSearch: false
-
-featuredImage: ""
-featuredImagePreview: ""
-
-toc:
-  enable: true
-math:
-  enable: false
-lightgallery: false
-license: ""
 ---
-
-<!--more-->

archetypes/friends.md

@@ -0,0 +1,46 @@
+---
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
+layout: friends
+date: {{ .Date }}
+description: "{{ .Site.Params.author.name }}'s friends"
+keywords:
+  - 'Hugo FixIt'
+  - 'friends template'
+  - 友情链接
+comment: false
+---
+
+<!-- The `friends.yml` file placed in the `yourProject/data/` directory will be loaded automatically here. -->
+
+---
+
+<!-- You can define additional content below for this page. -->
+
+## Base info
+
+- nickname: Lruihao
+- avatar: https://lruihao.cn/images/avatar.jpg
+- url: https://lruihao.cn
+- description: Lruihao's Note
+
+## Friendly Reminder
+
+Comment like this:
+
+````markdown
+```yaml
+- nickname: <your nickname>
+  avatar: <your avatar>
+  url: <your site link>
+  description: <description of your site>
+```
+````
+
+{{< admonition info "Notice" true >}}
+
+1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
+2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
+3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+
+{{< /admonition >}}

archetypes/post-bundle/index.md

@@ -0,0 +1,45 @@
+---
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
+date: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
+draft: true
+author:
+  name:
+  link:
+  email:
+  avatar:
+description:
+keywords:
+license:
+comment: false
+weight: 0
+tags:
+  - draft
+categories:
+  - draft
+hiddenFromHomePage: false
+hiddenFromSearch: false
+hiddenFromRelated: false
+hiddenFromFeed: false
+summary:
+resources:
+  - name: featured-image
+    src: featured-image.jpg
+  - name: featured-image-preview
+    src: featured-image-preview.jpg
+toc: true
+math: false
+lightgallery: false
+password:
+message:
+repost:
+  enable: true
+  url:
+
+# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
+---
+
+<!--more-->
+
+<!-- Place resource files in the current article directory and reference them using relative paths, like this: `![alt](images/screenshot.jpg)`. -->

archetypes/posts.md

@@ -0,0 +1,43 @@
+---
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
+date: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
+draft: true
+author:
+  name:
+  link:
+  email:
+  avatar:
+description:
+keywords:
+license:
+comment: false
+weight: 0
+tags:
+  - draft
+categories:
+  - draft
+hiddenFromHomePage: false
+hiddenFromSearch: false
+hiddenFromRelated: false
+hiddenFromFeed: false
+summary:
+resources:
+  - name: featured-image
+    src: featured-image.jpg
+  - name: featured-image-preview
+    src: featured-image-preview.jpg
+toc: true
+math: false
+lightgallery: false
+password:
+message:
+repost:
+  enable: true
+  url:
+
+# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
+---
+
+<!--more-->

archetypes/search.md

@@ -0,0 +1,5 @@
+---
+title: {{ T "assets.search" }}
+layout: search
+date: {{ .Date }}
+---

assets/css/_core/_base.scss

@@ -1,30 +1,26 @@
+@import "../../lib/normalize/normalize";
+
 html {
   font-family: $global-font-family;
   font-weight: $global-font-weight;
   font-display: swap;
   font-size: $global-font-size;
   line-height: $global-line-height;
-  width:100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  overflow: overlay;
 }
 
-/* scrollbar, only support webkit */
-::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $scrollbar-color;
-
-  &:hover {
-    background-color: $scrollbar-hover-color;
+@media screen and (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
   }
 }
 
 ::selection {
   background-color: $selection-color;
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     background-color: $selection-color-dark;
   }
 }
@@ -33,23 +29,45 @@ body {
   background-color: $global-background-color;
   color: $global-font-color;
   @include overflow-wrap(break-word);
-  scrollbar-color: auto;
 
-  &[theme=dark] {
+  [data-theme='dark'] & {
     color: $global-font-color-dark;
     background-color: $global-background-color-dark;
   }
 }
 
-@include ms;
-@include link(true, true);
+iframe {
+  border: 0;
+  @include border-radius($global-border-radius);
+}
 
-@import "../_partial/mask";
-@import "../_partial/icon";
-@import "../_partial/details";
-@import "../_partial/fixed-button";
-@import "../_partial/cookieconsent";
+[role='button'] {
+  cursor: pointer;
+}
+
+summary {
+  cursor: pointer;
+}
+
+abbr[title] {
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
 
 img {
-  @include object-fit(contain);
+  object-fit: cover;
 }
+
+img,video {
+  max-width: 100%;
+  height: auto;
+}
+
+@include link(true, true);
+
+@import '../_partials/scrollbar';
+@import '../_partials/mask';
+@import '../_partials/img';
+@import '../_partials/icon';
+@import '../_partials/details';
+@import '../_partials/widgets';

assets/css/_core/_breadcrumb.scss

@@ -0,0 +1,49 @@
+.breadcrumb-container {
+  padding-inline: 1rem;
+  font-size: 0.75rem;
+  background-color: $global-background-color;
+  @include z-index(1);
+  @extend .print-d-none;
+
+  [data-theme='dark'] & {
+    background-color: $global-background-color-dark;
+  }
+
+  &.sticky {
+    position: sticky;
+    top: $header-height;
+  }
+
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5rem 0;
+    margin: 0 auto;
+    list-style: none;
+    border-bottom: 1px inset $global-border-color;
+    @extend %page-style;
+
+    [data-theme='dark'] & {
+      border-bottom-color: $global-border-color-dark;
+    }
+
+    .breadcrumb-item {
+      display: flex;
+
+      + .breadcrumb-item::before {
+        content: attr(data-separator);
+        display: inline-block;
+        padding-inline: 0.5rem;
+        color: $global-font-secondary-color;
+
+        [data-theme='dark'] & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+
+      &.active {
+        color: var(--#{$prefix}secondary);
+      }
+    }
+  }
+}

assets/css/_core/_common.scss

@@ -0,0 +1,56 @@
+// ==============================
+// Common Styles
+// 常用样式
+// ==============================
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-start {
+  text-align: left !important;
+}
+.text-end {
+  text-align: right !important;
+}
+.text-center {
+  text-align: center !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.ms-1,
+.mx-1 {
+  margin-left: 0.25em !important;
+}
+.me-1,
+.mx-1 {
+  margin-right: 0.25em !important;
+}
+.ps-1,
+.px-1 {
+  padding-left: 0.25em !important;
+}
+.pe-1,
+.px-1 {
+  padding-right: 0.25em !important;
+}
+
+@each $color, $value in $theme-colors {
+  .text-#{$color} {
+    color: var(--#{$prefix}#{$color}) !important;
+  }
+}
+
+@each $key, $value in $orders {
+  .order-#{$key} {
+    order: #{$value} !important;
+  }
+}
+
+.variant-numeric {
+  font-variant-numeric: tabular-nums lining-nums;
+}

assets/css/_core/_footer.scss

@@ -0,0 +1,59 @@
+footer {
+  height: auto;
+  width: 100%;
+  text-align: center;
+  line-height: 1.25rem;
+  padding: 1rem 0;
+  @extend .print-d-none;
+
+  .footer-container {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.875rem;
+
+    .footer-line {
+      width: 100%;
+
+      .footer-divider:not(:first-child)::before {
+        content: '|';
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+      }
+
+      .animate-icon {
+        color: #dc143c;
+        animation: icon-animate 1.33s ease-in-out infinite;
+      }
+
+      .run-times {
+        font-variant-numeric: tabular-nums lining-nums;
+      }
+    }
+  }
+
+  @include blur;
+}
+
+@keyframes icon-animate {
+  0%,
+  100% {
+    @include transform(scale(1));
+  }
+
+  10%,
+  30% {
+    @include transform(scale(0.9));
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    @include transform(scale(1.1));
+  }
+
+  50%,
+  70% {
+    @include transform(scale(1.1));
+  }
+}

assets/css/_core/_header.scss

@@ -0,0 +1,665 @@
+header {
+  width: 100%;
+  background-color: $header-background-color;
+  @include z-index(2);
+  @include transition(box-shadow 0.3s ease);
+  @extend .print-d-none;
+
+  [data-theme='dark'] & {
+    background-color: $header-background-color-dark;
+  }
+
+  &:hover {
+    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
+
+    [data-theme='dark'] & {
+      @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
+    }
+  }
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.header-title {
+  font-family: $header-title-font-family;
+  font-weight: bold;
+  margin-right: 0.5rem;
+  min-width: 10%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  @include flex(10);
+
+  .logo {
+    min-height: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  .header-title-text {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .header-subtitle {
+    margin-left: 0.25rem;
+    font-size: 0.6em;
+  }
+}
+
+.menu {
+  margin: 0;
+  padding: 0;
+
+  .menu-item-divider {
+    list-style: none;
+    margin: 0.25rem 0.5rem;
+    height: 1px;
+    background-color: $menu-border-color;
+
+    [data-theme='dark'] & {
+      background-color: $menu-border-color-dark;
+    }
+  }
+
+  .menu-item {
+    list-style: none;
+
+    & .dropdown-icon {
+      margin-left: 0.25rem;
+      font-size: .875em;
+      color: $global-font-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-color-dark;
+      }
+
+      &.open::before {
+        content: "\f078";
+      }
+    }
+
+    &.active {
+      >.menu-link,
+      >.nested-item>.menu-link {
+        font-weight: bold;
+        color: $menu-active-color;
+
+        [data-theme='dark'] & {
+          color: $menu-active-color-dark;
+        }
+      }
+    }
+
+    .menu-link[href="javascript:void(0);"] {
+      color: inherit;
+    }
+
+    .menu-link i {
+      @include transform(perspective(1rem));
+      @include transition(transform 0.4s ease);
+    }
+
+    .menu-link:hover i {
+      @include transform(perspective(1rem) translateZ(0.2rem));
+    }
+
+    &.language-switch,
+    &.theme-switch {
+      cursor: pointer;
+    }
+  }
+}
+
+.menu .search {
+  position: relative;
+
+  input {
+    color: transparent;
+    box-sizing: border-box;
+    height: 2.5rem;
+    width: 1.25rem;
+    @include border-radius(0.5rem);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    vertical-align: baseline !important;
+    @include transition(width 0.3s ease);
+  }
+
+  @include placeholder(transparent);
+
+  .search-button {
+    margin: 0;
+    position: absolute;
+    left: auto;
+    right: 1rem;
+  }
+
+  .search-toggle {
+    left: 0.5rem;
+    right: auto;
+
+    #header-desktop.open & {
+      left: 1rem;
+    }
+  }
+
+  .search-loading {
+    display: none;
+  }
+
+  .search-clear {
+    display: none;
+  }
+
+  .open &,
+  &.mobile {
+    input {
+      color: $global-font-color;
+      background-color: $search-background-color;
+      padding: 0 2rem 0 2rem;
+    }
+
+    [data-theme='dark'] & {
+      input {
+        color: $global-font-color-dark;
+        background-color: $search-background-color-dark;
+      }
+
+      @include placeholder($global-font-secondary-color-dark);
+    }
+
+    @include placeholder($global-font-secondary-color);
+
+    .search-button {
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+
+    .search-clear:hover {
+      color: #ff6b6b;
+    }
+
+    .search-toggle:hover {
+      cursor: default;
+    }
+  }
+}
+
+.theme-switch {
+  i {
+    @include transform(rotate(225deg));
+    @include transition(transform 0.4s ease);
+  }
+
+  &:hover i {
+    @include transform(rotate(45deg));
+  }
+}
+
+#header-desktop {
+  display: block;
+  position: sticky;
+  top: 0;
+  height: $header-height;
+  line-height: $header-height;
+  box-sizing: border-box;
+
+  [data-header-desktop='normal'] & {
+    position: static;
+  }
+
+  nav {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .header-wrapper {
+    // use css native function to calculate max value
+    padding: 0 2rem 0 MAX(10vh, $header-height);
+    height: 100%;
+
+    &[data-github-corner='right'] {
+      padding-right: $header-height;
+    }
+
+    .header-title {
+      font-size: $header-title-font-size;
+      height: 100%;
+    }
+
+    .menu {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      float: right;
+
+      >.menu-item {
+        &:hover .sub-menu {
+          display: block;
+          @include transform(translateX(-0.5rem));
+        }
+        &.language-switch:hover .sub-menu {
+          @include transform(translateX(calc(1.75rem - 100%)));
+        }
+      }
+
+      .menu-item {
+        padding: 0 0.5rem;
+
+        &.delimiter {
+          width: 0;
+          margin: 0.125rem 0.25rem;
+          padding: 0;
+          border-left: 1px dashed lighten($global-font-secondary-color, 15%);
+
+          [data-theme='dark'] & {
+            border-left-color: darken($global-font-secondary-color-dark, 15%);
+          }
+        }
+      }
+
+      .sub-menu {
+        position: absolute;
+        margin: 0;
+        padding: 0.25rem 0;
+        display: none;
+        top: calc(#{$header-height} - 0.75rem);
+        border-radius: $global-border-radius;
+        border: 1px solid $menu-border-color;
+        background-color: $header-background-color;
+        max-height: 60vh;
+        overflow-y: auto;
+        @include transition(box-shadow 0.3s ease);
+        @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
+
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
+          border-color: $menu-border-color-dark;
+          @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
+        }
+
+        .menu-item {
+          height: $submenu-height;
+          line-height: $submenu-height;
+          max-width: 15rem;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+        }
+      }
+    }
+  }
+
+  &.open .header-wrapper .menu .menu-item.search {
+    input {
+      width: 24rem;
+    }
+  }
+}
+
+#header-mobile {
+  display: none;
+  position: sticky;
+  top: 0;
+  min-height: $header-height;
+  line-height: $header-height;
+
+  [data-header-mobile='normal'] & {
+    position: static;
+  }
+
+  .header-container {
+    padding: 0;
+    margin: 0;
+
+    .header-wrapper {
+      padding: 0 1rem;
+      font-size: 1.125rem;
+      @include transition(margin-top 0.3s ease);
+
+      .header-title {
+        font-size: $header-title-font-size;
+        max-width: 80%;
+      }
+
+      .menu-toggle {
+        line-height: 4rem;
+        cursor: pointer;
+        @include transition(width 0.3s ease);
+
+        span {
+          display: block;
+          background: $global-font-color;
+          width: 1.5rem;
+          height: 2px;
+          @include border-radius(3px);
+          @include transition(all 0.3s ease-in-out);
+
+          [data-theme='dark'] & {
+            background: $global-font-color-dark;
+          }
+        }
+
+        span:nth-child(1) {
+          margin-bottom: 0.5rem;
+        }
+
+        span:nth-child(3) {
+          margin-top: 0.5rem;
+        }
+
+        &.active {
+          span:nth-child(1) {
+            @include transform(rotate(45deg) translate(0.4rem, 0.5rem));
+          }
+
+          span:nth-child(2) {
+            opacity: 0;
+          }
+
+          span:nth-child(3) {
+            @include transform(rotate(-45deg) translate(0.4rem, -0.5rem));
+          }
+        }
+      }
+    }
+
+    .menu {
+      background: $header-background-color;
+      border-top: 2px solid $global-border-color;
+      display: none;
+      overflow-y: overlay;
+      max-height: 70vh;
+      @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+      @include scrollbar-width(none, 0);
+
+      [data-theme='dark'] & {
+        background: $header-background-color-dark;
+        border-top-color: $global-border-color-dark;
+        @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
+      }
+
+      .search-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        padding: ($header-height - 2.5rem) / 2 1rem;
+        line-height: 2.5rem;
+        position: sticky;
+        top: 0;
+        background-color: $header-background-color;
+        @include z-index(0, 50);
+ 
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
+        }
+      }
+
+      .search {
+        flex-grow: 10;
+
+        .algolia-autocomplete,
+        input {
+          width: 100%;
+        }
+      }
+
+      .search-loading,
+      .search-clear {
+        right:  0.5rem;
+      }
+
+      .search-button {
+        top: 0;
+      }
+
+      .search-cancel {
+        display: none;
+        margin-left: 0.75rem;
+      }
+
+      .menu-item {
+        display: block;
+        position: relative;
+        line-height: 2.5rem;
+        padding: 0 1rem;
+
+        &:not(.menu-system):hover {
+          background-color: lighten($global-font-secondary-color, 24%);
+
+          [data-theme='dark'] & {
+            background-color: darken($global-font-secondary-color-dark, 24%);
+          }
+        }
+
+        .menu-link {
+          display: block;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+          @include flex(4);
+        }
+
+        & .nested-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .menu-link {
+            max-width: 80%;
+          }
+        }
+      }
+
+      .menu-system {
+        display: flex;
+        justify-content: center;
+        gap: 0.25rem;
+        position: sticky;
+        bottom: 0;
+        line-height: 2.5rem;
+        padding: 0 1rem;
+        background-color: $header-background-color;
+ 
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
+        }
+
+        .menu-system-item {
+          padding-inline: 0.5rem;
+        }
+
+        .language-switch {
+          position: relative;
+
+          .language-select {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .sub-menu {
+        padding-left: 0;
+        display: none;
+
+        &.open {
+          display: block;
+        }
+
+        .menu-item:hover {
+          background-color: lighten($global-font-secondary-color, 20%);
+
+          [data-theme='dark'] & {
+            background-color: darken($global-font-secondary-color-dark, 20%);
+          }
+        }
+      }
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  &.open {
+    .header-wrapper {
+      margin-top: -$header-height;
+    }
+
+    .menu {
+      padding-top: 0;
+      border-top: none;
+
+      .menu-item {
+        display: none;
+      }
+
+      .search-cancel {
+        display: inline;
+      }
+    }
+  }
+}
+
+.search-dropdown {
+  position: fixed;
+  top: $header-height;
+  @include z-index(2);
+  @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+
+  [data-theme='dark'] & {
+    @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
+  }
+
+  &.desktop {
+    right: 2rem;
+    width: 30rem;
+  }
+
+  &.mobile {
+    right: 0;
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    right: 0 !important;
+    background-color: $global-background-color;
+
+    [data-theme='dark'] & {
+      background-color: $global-background-color-dark;
+    }
+
+    .suggestions {
+      overflow-y: auto;
+      max-height: calc(100vh - #{$header-height});
+
+      .suggestion {
+        padding: 0.75rem 1rem;
+
+        .suggestion-title {
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 1rem;
+          font-weight: bold;
+          max-width: 75%;
+        }
+
+        .suggestion-date {
+          font-size: 0.875rem;
+          float: right;
+          text-align: right;
+          color: $global-font-secondary-color;
+
+          [data-theme='dark'] & {
+            color: $global-font-secondary-color-dark;
+          }
+        }
+
+        .suggestion-context {
+          line-height: 1.25rem;
+          @include box(vertical);
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          @include overflow-wrap(break-word);
+          color: $global-font-secondary-color;
+
+          [data-theme='dark'] & {
+            color: $global-font-secondary-color-dark;
+          }
+        }
+
+        em {
+          font-style: normal;
+          background-color: $selection-color;
+
+          [data-theme='dark'] & {
+            background-color: $selection-color-dark;
+          }
+        }
+
+        &.cursor {
+          background: darken($code-background-color, 5%);
+
+          [data-theme='dark'] & {
+            background: lighten($code-background-color-dark, 5%);
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .search-empty {
+      padding: 1rem;
+      text-align: center;
+
+      .search-query {
+        font-weight: bold;
+
+        [data-theme='dark'] & {
+          color: #ddd;
+        }
+      }
+    }
+
+    .search-footer {
+      padding: 0.5rem 1rem;
+      float: right;
+      font-size: 0.8rem;
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] {
+        color: $global-font-secondary-color-dark;
+      }
+
+      @include link(false, false);
+
+      a {
+        font-size: 1rem;
+      }
+    }
+  }
+}

assets/css/_core/_layout.scss

@@ -8,8 +8,34 @@
   main {
     flex: 1 0 auto;
 
-    .container {
-      padding: 0 1rem;
+    aside {
+      flex: 1;
+      padding: 0.5rem;
+
+      &:not(:has(~ aside)) {
+        display: none;
+      }
+    }
+
+    &.container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-inline: 1rem;
+      gap: 0.5rem;
+
+      &.container-reverse {
+        flex-direction: row-reverse;
+      }
+
+      &:has(.home:not(.posts)) {
+        align-items: center;
+      }
     }
   }
 }
+
+@import "_header";
+@import "_breadcrumb";
+@import "_footer";
+@import "_pagination";

assets/css/_core/_media.scss

@@ -1,12 +1,34 @@
+@media only screen and (min-width: 1441px) {
+  %page-style {
+    width: ROUND(60%, 2px);
+
+    [data-page-style='wide'] & {
+      width: ROUND(64%, 2px);
+    }
+
+    [data-page-style='narrow'] & {
+      max-width: 800px;
+    }
+  }
+}
+
 @media only screen and (max-width: 1440px) {
-  .page {
-    width: 56%;
+  %page-style {
+    width: ROUND(56%, 2px);
+
+    [data-page-style='wide'] & {
+      width: ROUND(60%, 2px);
+    }
   }
 }
 
 @media only screen and (max-width: 1200px) {
-  .page {
-    width: 52%;
+  %page-style {
+    width: ROUND(52%, 2px);
+
+    [data-page-style='wide'] & {
+      width: ROUND(56%, 2px);
+    }
   }
 
   #header-desktop .header-wrapper {
@@ -19,23 +41,42 @@
 }
 
 @media only screen and (max-width: 960px) {
-  #toc-auto {
-    display: none;
+  %page-style {
+    width: ROUND(80%, 2px) !important;
+  }
+  
+  aside {
+    display: none !important;
   }
 
   #toc-static {
     display: block;
   }
 
-  .page {
-    width: 80%;
-  }
-
   #header-desktop .header-wrapper {
     padding-left: 1rem;
   }
 }
 
+@media only screen and (min-width: 681px) {
+  .d-none-desktop {
+    display: none;
+  }
+  .breadcrumb-container.sticky {
+    body:not([data-header-desktop='sticky']) & {
+      top: 0;
+    }
+    // adjust the scroll margin top of the content anchors on the page
+    body:not([data-header-desktop='auto']) &+.container .content [id] {
+      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
+    }
+  }
+
+  [data-header-desktop='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+}
+
 @media only screen and (max-width: 680px) {
   #header-desktop {
     display: none;
@@ -45,36 +86,77 @@
     display: block;
   }
 
-  body.blur {
-    overflow: hidden;
+  .d-none-mobile {
+    display: none !important;
+  }
+
+  .breadcrumb-container.sticky {
+    body:not([data-header-mobile='sticky']) & {
+      top: 0;
+    }
+    // adjust the scroll margin top of the content anchors on the page
+    body:not([data-header-mobile='auto']) &+.container .content [id] {
+      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
+    }
+  }
+
+  [data-header-mobile='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+  
+  %page-style {
+    width: 100% !important;
   }
 
   .page {
-    width: 100%;
-
-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
-    }
-
-    .categories-card {
+    .categories-card,
+    .collections-card {
       .card-item {
         width: 100%;
       }
     }
   }
 
-  .copyright {
-    .copyright-line {
-      .icp-splitter {
-        display: none;
-      }
-      .icp-br {
-        display: block;
-      }
+  footer {
+    .footer-container {
+      font-size: 0.618rem;
     }
   }
+
+  .pagination .page-item {
+    margin: 0 5px;
+  }
+}
+
+@media only print {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+  }
+
+  .page {
+    width: 100% !important;
+    padding-top: 0 !important;
+
+    &.single {
+      .single-title,
+      .single-subtitle,
+      .post-meta {
+        text-align: center;
+      }
+    }
+
+    h1:not(.single-title),
+    .page-break-before {
+      page-break-before: always;
+    }
+
+    .page-break-after {
+      page-break-after: always;
+    }
+  }
+
+  .print-d-none {
+    display: none !important;
+  }
 }

assets/css/_core/_pagination.scss

@@ -2,24 +2,29 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  flex-wrap: wrap;
   list-style: none;
   white-space: nowrap;
   width: 100%;
-  padding: 1rem 0 0;
+  padding: 1rem 0;
 
   a {
-    font-size: .8rem;
-    color: #bfbfbf;
-    letter-spacing: .1rem;
+    font-size: 0.8rem;
+    color: $pagination-link-color;
+    letter-spacing: 0.1rem;
     font-weight: 700;
     padding: 5px 5px;
     text-decoration: none;
     @include transition(0.3s);
+
+    [data-theme='dark'] & {
+      color: $pagination-link-color-dark;
+    }
   }
 
   li {
-    padding-bottom: 3px;
-    margin: 0 20px;
+    padding: 5px;
+    margin: 0 10px;
     box-sizing: border-box;
     position: relative;
     display: inline;
@@ -32,14 +37,14 @@
       color: $pagination-link-hover-color;
     }
 
-    [theme=dark] &:hover a {
+    [data-theme='dark'] &:hover a {
       color: $pagination-link-hover-color-dark;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
-      content: "";
+      content: '';
       width: 0;
       height: 3px;
       background: $pagination-link-hover-color;
@@ -47,28 +52,22 @@
       bottom: 0px;
     }
 
-    [theme=dark] &:before,
-    [theme=dark] &:after {
+    [data-theme='dark'] &::before,
+    [data-theme='dark'] &::after {
       background: $pagination-link-hover-color-dark;
     }
 
-    &:before .active,
-    &:after .active {
-      width: 100%;
-    }
-
-    &:before {
+    &::before {
       left: 50%;
     }
 
-    &:after {
+    &::after {
       right: 50%;
     }
 
     &:hover {
-
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         width: 50%;
       }
     }
@@ -78,13 +77,13 @@
         color: $pagination-link-hover-color;
       }
 
-      [theme=dark] & a {
+      [data-theme='dark'] & a {
         color: $pagination-link-hover-color-dark;
       }
 
-      &:before,
-      &:after {
-        width: 60%;
+      &::before,
+      &::after {
+        width: 50%;
       }
     }
   }

assets/css/_core/_patch.scss

@@ -0,0 +1,68 @@
+/* Resolve style conflicts between third-party plugins */
+
+@keyframes #{$prefix}pulse {
+  from {
+    @include transform(scale3d(1, 1, 1));
+  }
+
+  50% {
+    @include transform(scale3d(1.05, 1.05, 1.05));
+  }
+
+  to {
+    @include transform(scale3d(1, 1, 1));
+  }
+}
+
+.animate__pulse {
+  -webkit-animation-name: #{$prefix}pulse !important;
+  animation-name: #{$prefix}pulse !important;
+}
+
+/**
+ * After the CSS round() function exceeds 90% browser support in the future, this code can be removed
+ * See https://caniuse.com/mdn-css_types_round
+ */
+@supports not (width: ROUND(60%, 2px)) {
+  @media only screen and (min-width: 1441px) {
+    %page-style {
+      width: 60%;
+  
+      [data-page-style='wide'] & {
+        width: 64%;
+      }
+  
+      [data-page-style='narrow'] & {
+        max-width: 800px;
+      }
+    }
+  }
+  @media only screen and (max-width: 1440px) {
+    %page-style {
+      width: 56%;
+  
+      [data-page-style='wide'] & {
+        width: 60%;
+      }
+    }
+  }
+  @media only screen and (max-width: 1200px) {
+    %page-style {
+      width: 52%;
+  
+      [data-page-style='wide'] & {
+        width: 56%;
+      }
+    }
+  }
+  @media only screen and (max-width: 960px) {
+    %page-style {
+      width: 80% !important;
+    }
+  }
+  @media only screen and (max-width: 680px) {
+    %page-style {
+      width: 100% !important;
+    }
+  }
+}

assets/css/_core/_root.scss

@@ -0,0 +1,42 @@
+:root {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+  // TODO migrate SCSS variables to CSS variables
+
+  --#{$prefix}global-font-color: #{$global-font-color};
+  --#{$prefix}global-border-color: #{$global-border-color};
+
+  // Theme colors variables
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  // Scroll margin top and Stack sticky top related
+  --#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
+
+  // Set breadcrumb height to 0px if breadcrumb is disabled
+  --#{$prefix}breadcrumb-height: 0px;
+
+  // hr style
+  --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
+  --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
+
+  // Scrollbar related variables
+  --#{$prefix}scrollbar-thumb-color: #{$scrollbar-color};
+  --#{$prefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
+  --#{$prefix}scrollbar-track-color: transparent;
+  --#{$prefix}scrollbar-width: thin;
+  --#{$prefix}scrollbar-width-legacy: 12px;
+}
+
+// Dark theme
+[data-theme=dark] {
+  --#{$prefix}global-font-color: #{$global-font-color-dark};
+  --#{$prefix}global-border-color: #{$global-border-color-dark};
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{darken($value, 5%)};
+  }
+
+  --#{$prefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
+  --#{$prefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
+}

assets/css/_mixin/_compatibility.scss

@@ -18,7 +18,6 @@
 
 @mixin transform($value) {
   -webkit-transform: $value;
-  -moz-transform: $value;
   -ms-transform: $value;
   -o-transform: $value;
   transform: $value;
@@ -26,8 +25,6 @@
 
 @mixin filter($value) {
   -webkit-filter: $value;
-  -moz-filter: $value;
-  -ms-filter: $value;
   filter: $value;
 }
 
@@ -47,19 +44,19 @@
 }
 
 @mixin placeholder($color) {
-  input::-webkit-input-placeholder{
+  input::-webkit-input-placeholder {
     color: $color;
   }
 
-  input:-moz-placeholder{
+  input:-moz-placeholder {
     color: $color;
   }
 
-  input::-moz-placeholder{
+  input::-moz-placeholder {
     color: $color;
   }
 
-  input:-ms-input-placeholder{
+  input:-ms-input-placeholder {
     color: $color;
   }
 
@@ -97,14 +94,14 @@
   line-break: $value;
 }
 
-@mixin ms {
-  input::-ms-clear {
-    display: none;
-  }
-}
-
 @mixin object-fit($value) {
   -o-object-fit: $value;
   object-fit: $value;
   font-family: 'object-fit: #{$value};';
 }
+
+@mixin user-select($value) {
+  -webkit-user-select: $value !important;
+  -moz-user-select: $value !important;
+  user-select: $value !important;
+}

assets/css/_mixin/_details.scss

@@ -1,7 +1,15 @@
 @mixin details-transition-open {
-  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+  @include transition(max-height 0.2s cubic-bezier(0, 1, 0, 1) -0.1s);
 }
 
 @mixin details-transition-close {
-  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
+}
+
+details {
+  &.center {
+    summary {
+      text-align: center;
+    }
+  }
 }

assets/css/_mixin/_index.scss

@@ -1,4 +1,6 @@
-@import "_compatibility";
-@import "_link";
-@import "_blur";
-@import "_details";
+@import '_compatibility';
+@import '_link';
+@import '_blur';
+@import '_details';
+@import '_scrollbar-width';
+@import '_z-index';

assets/css/_mixin/_link.scss

@@ -1,20 +1,52 @@
-@mixin link($light, $dark) {
-  a, a::before, a::after {
-    text-decoration: none;
+/**
+ * Link mixin
+ * @param {Boolean} $light use global link color
+ * @param {Boolean} $dark use global link color dark
+ * @param {String} $decoration text-decoration, default none
+ */
+@mixin link($light, $dark, $decoration: none) {
+  a,
+  a::before,
+  a::after {
+    text-decoration: $decoration;
 
-    color: if($light, $global-link-color, $single-link-color);
+    @if $light {
+      color: $global-link-color;
+    }
 
-    [theme=dark] & {
-      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+    @else {
+      color: $single-link-color;
+    }
+
+    [data-theme='dark'] & {
+      @if $dark {
+        color: $global-link-color-dark;
+      }
+
+      @else {
+        color: $single-link-color-dark;
+      }
     }
   }
 
   a:active,
   a:hover {
-    color: if($light, $global-link-hover-color, $single-link-hover-color);
+    @if $light {
+      color: $global-link-hover-color;
+    }
 
-    [theme=dark] & {
-      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
+    @else {
+      color: $single-link-hover-color;
+    }
+
+    [data-theme='dark'] & {
+      @if $dark {
+        color: $global-link-hover-color-dark;
+      }
+
+      @else {
+        color: $single-link-hover-color-dark;
+      }
     }
   }
 }

assets/css/_mixin/_scrollbar-width.scss

@@ -0,0 +1,4 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  --#{$prefix}scrollbar-width: #{$width};
+  --#{$prefix}scrollbar-width-legacy: #{$widthLegacy};
+}

assets/css/_mixin/_z-index.scss

@@ -0,0 +1,3 @@
+@mixin z-index($level, $diff: 0) {
+  z-index: ($level * 100) + $diff;
+}

assets/css/_page/_archive.scss

@@ -1,13 +1,27 @@
 .archive {
   .single-title {
+    padding: 1rem 0 0.5rem;
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: bold;
+    line-height: 140%;
+    text-align: right;
+  }
+
+  .single-subtitle {
+    margin: 0.5rem 0;
+    font-size: 1.2rem;
+    font-weight: normal;
+    line-height: 100%;
     text-align: right;
   }
 
   .group-title {
+    font-size: 1.2rem;
     margin-top: 1.5rem;
     margin-bottom: 1rem;
   }
 
-  @import "../_partial/_archive/terms";
-  @import "../_partial/_archive/tags";
+  @import '../_partials/_archive/terms';
+  @import '../_partials/_archive/tags';
 }

assets/css/_page/_home.scss

@@ -1,11 +1,9 @@
 .home {
   .home-profile {
-    @include transform(translateY( 16vh));
-    padding: 0 0 .5rem;
     text-align: center;
 
     .home-avatar {
-      padding: .5rem;
+      padding: 0.5rem;
 
       img {
         display: inline-block;
@@ -13,12 +11,16 @@
         height: auto;
         margin: 0 auto;
         @include border-radius(100%);
-        @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
         @include transition(all 0.4s ease);
 
+        [data-theme='dark'] & {
+          @include box-shadow(0 0 0 0.3618em rgba(255, 255, 255, 0.05));
+        }
+
         &:hover {
           position: relative;
-          @include transform(translateY(-.75rem));
+          @include transform(translateY(-0.75rem));
         }
       }
     }
@@ -27,18 +29,21 @@
       font-size: 1.25rem;
       font-weight: bold;
       margin: 0;
-      padding: .5rem;
+
+      &:not(:empty) {
+        padding: 0.5rem;
+      }
     }
 
     .home-subtitle {
       font-size: 1rem;
       font-weight: normal;
       margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
     }
 
     .links {
-      padding: .5rem;
+      padding: 0.5rem;
       font-size: 1.5rem;
 
       a * {
@@ -47,7 +52,7 @@
 
       img {
         height: 1.5rem;
-        padding: 0 .25rem;
+        padding: 0 0.25rem;
       }
     }
 
@@ -56,20 +61,19 @@
       line-height: 1.5rem;
       font-weight: normal;
       margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
       color: $global-font-secondary-color;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         color: $global-font-secondary-color-dark;
       }
     }
   }
 }
 
-.home[posts] {
+.home.posts {
   .home-profile {
-    @include transform(translateY(0));
-    padding-top: 2rem;
+    padding: 2rem 0;
   }
 
   .home-avatar img {
@@ -77,19 +81,32 @@
   }
 
   .summary {
-    padding-top: 1rem;
-    padding-bottom: .8rem;
-    color: $global-font-color;
-    border-bottom: 1px dashed $global-border-color;
+    padding-block: 1rem;
+    color: var(--#{$prefix}global-font-color);
 
-    [theme=dark] & {
-      color: $global-font-color-dark;
-      border-bottom: 1px dashed $global-border-color-dark;
+    &:not(:last-of-type)::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      padding: 2px;
+      transform: translateY(18px);
+      background: repeating-linear-gradient(
+        135deg,
+        var(--#{$prefix}hr-background-color) 0px,
+        var(--#{$prefix}hr-background-color) 4px,
+        transparent 4px,
+        transparent 8px
+      );
+    }
+
+    &:first-of-type {
+      padding-top: 0;
     }
 
     .featured-image-preview {
       width: 100%;
-      padding: 30% 0 0;
+      // use the same proportions as the cover image of https://dev.to/
+      aspect-ratio: auto 1000 / 420;
       position: relative;
       margin: 0.6rem auto;
       @include transition(transform 0.4s ease);
@@ -100,10 +117,6 @@
         height: 100%;
         left: 0;
         top: 0;
-        @include object-fit(none);
-      }
-
-      img.lazyloaded {
         @include object-fit(cover);
       }
 
@@ -119,56 +132,31 @@
     }
 
     .content {
-      @include box(vertical);
-      -webkit-line-clamp: 3;
-      margin-top: .3rem;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      @include overflow-wrap(break-word);
+      margin-top: 0.3rem;
       color: $global-font-secondary-color;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         color: $global-font-secondary-color-dark;
       }
 
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        font-size: 1rem;
-        line-height: 1.5;
-        display: inline;
-
-        &::after {
-          content: "\A";
-          white-space: pre;
-        }
-      }
-
-      h2 {
-        font-size: 1.125rem;
-      }
-
       @include link(false, true);
 
-      b, strong {
+      b,
+      strong {
         color: $global-font-secondary-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           color: $global-font-secondary-color-dark;
         }
       }
     }
 
     .post-footer {
-      margin-top: .4rem;
+      margin-block: 0.4rem 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      font-size: .875rem;
+      font-size: 0.875rem;
 
       @include link(false, false);
 
@@ -176,6 +164,11 @@
         padding: 0;
 
         @include link(true, true);
+
+        .post-tag:not(:last-child)::after {
+          content: ',';
+          margin-right: 0.25rem;
+        }
       }
     }
   }

assets/css/_page/_index.scss

@@ -1,22 +1,19 @@
 .page {
   position: relative;
-  max-width: 800px;
-  width: 60%;
-  margin: 0 auto;
+  @extend %page-style;
 
-  [header-desktop] & {
-    padding-top: $header-height;
-  }
-
-  [header-desktop=normal] & {
-    padding-top: 0;
+  .content {
+    [id] {
+      scroll-margin-top: var(--#{$prefix}scroll-mt);
+    }
   }
 
   @include blur;
 }
 
-@import "_single";
-@import "_special";
-@import "_archive";
-@import "_home";
-@import "_404";
+@import '_single';
+@import '_special';
+@import '_archive';
+@import '_home';
+@import '_404';
+@import '_offline';

assets/css/_page/_offline.scss

@@ -0,0 +1,19 @@
+#content-offline {
+  @include transform(translateY(30vh));
+  text-align: center;
+
+  .offline-title {
+    font-size: 3.6rem;
+  }
+  .offline-subtitle {
+    margin: 0.4rem 0;
+    font-size: 1rem;
+    font-weight: normal;
+    font-style: italic;
+    line-height: 100%;
+    color: #57606a;
+  }
+  .error-text {
+    font-size: 1.2rem;
+  }
+}

assets/css/_page/_single.scss

@@ -1,30 +1,52 @@
-@import "../_partial/_single/toc";
+@import '../_partials/_single/toc';
+@import '../_partials/_single/fixit-decryptor';
+@import '../_partials/_single/collections';
 
 .single {
   .single-title {
-    margin: 1rem 0 .5rem;
+    padding: 1rem 0 0.5rem;
+    margin: 0;
     font-size: 1.6rem;
     font-weight: bold;
     line-height: 140%;
+
+    .icon-pin {
+      display: inline-block;
+      width: max-content;
+      transform: rotate(30deg);
+      margin-right: 0.25em;
+      color: var(--#{$prefix}danger);
+    }
+
+    .icon-repost {
+      display: inline-block;
+      width: max-content;
+      margin-right: 0.25em;
+      color: var(--#{$prefix}success);
+    }
   }
 
   .single-subtitle {
-    margin: .4rem 0;
+    margin-block: 0 0.5rem;
     font-size: 1.2rem;
     font-weight: normal;
-    font-style: italic;
-    line-height: 100%;
+    line-height: 1.15;
   }
 
   .post-meta {
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $global-font-secondary-color;
 
+    .comment-visitors,
+    .comment-count {
+      @extend .print-d-none;
+    }
+
     span {
       display: inline-block;
     }
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       color: $global-font-secondary-color-dark;
     }
 
@@ -32,99 +54,152 @@
 
     .author {
       font-size: 1.05rem;
+
+      img.avatar {
+        width: 1.3rem;
+        height: 1.3rem;
+        border-radius: 50%;
+        vertical-align: text-bottom;
+        border: 0.25px solid $global-border-color;
+        box-sizing: border-box;
+        object-position: center;
+        @include object-fit(cover);
+
+        [data-theme='dark'] & {
+          border-color: $global-border-color-dark;
+        }
+      }
     }
   }
 
   .featured-image {
-    margin: .5rem 0 1rem 0;
+    margin: 1rem 0;
 
     img {
       display: block;
+      width: 100%;
       max-width: 100%;
       height: auto;
       margin: 0 auto;
       overflow: hidden;
     }
+  }
 
-    img.lazyloaded {
-      width: 100%;
+  #content[data-end-flag]:not([data-password])::after {
+    content: attr(data-end-flag);
+    display: block;
+    text-align: center;
+    color: $global-font-secondary-color;
+    font-size: 15px;
+    padding: 5px;
+  }
+
+  hr {
+    position: relative;
+    height: 1em;
+    margin-block: 1em;
+    background: linear-gradient(to right, var(--#{$prefix}hr-background-color) 50%, transparent 50%);
+    background-size: 10px 2px;
+    background-position: center;
+    background-repeat: repeat-x;
+    border: none;
+
+    &.awesome-hr {
+      &::before {
+        display: inline-block;
+        font-weight: 600;
+        font-family: 'Font Awesome 6 Free';
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        position: absolute;
+        left: 5%;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        color: var(--#{$prefix}hr-before-color);
+        content: '\f0c4';
+        font-size: 20px;
+        line-height: 1;
+        transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
+      }
+    
+      &:hover::before {
+        left: calc(95% - 20px);
+      }
     }
   }
 
   .content {
+    margin-block: 1rem;
+    > h1,
     > h2 {
-      font-size: 1.5rem;
-
-      & code {
-        font-size: 1.25rem;
-      }
+      font-size: 1.5em;
+      padding-bottom: 0.3em;
+      border-bottom: 1px solid $global-border-color;
     }
 
     > h3 {
-      font-size: 1.375rem;
-
-      & code {
-        font-size: 1.125rem;
-      }
+      font-size: 1.25em;
     }
 
     > h4 {
-      font-size: 1.25rem;
-
-      & code {
-        font-size: 1rem;
-      }
+      font-size: 1em;
     }
 
     > h5 {
-      font-size: 1.125rem;
+      font-size: 0.875em;
     }
 
     > h6 {
-      font-size: 1rem;
+      font-size: 0.85em;
     }
 
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
+    > .heading-element {
+      display: flex;
       font-weight: bold;
-      margin: 1.2rem 0;
+      line-height: 1.25;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         font-weight: bolder;
       }
-    }
 
-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      > .header-mark::before {
-        content: "|";
-        margin-right: .3125rem;
-        color: $single-link-color;
+      code {
+        padding: 0 .2em;
+        font-size: inherit;
+      }
 
-        [theme=dark] & {
-          color: $single-link-color-dark;
+      &:hover,
+      &:target {
+        > .heading-mark {
+          opacity: 1;
+        }
+      }
+
+      > .heading-mark {
+        display: inline-flex;
+        align-items: center;
+        opacity: 0;
+        padding-inline: 0.5rem;
+        transition: all 0.2s ease-in-out;
+        @include link(false, false);
+
+        svg {
+          fill: currentColor;
         }
       }
     }
 
-    > h2 > .header-mark::before {
-      content: "#";
-    }
-
     p {
-      margin: .5rem 0;
+      margin: 0.5rem 0;
     }
 
-    b, strong {
+    b,
+    strong {
       font-weight: bold;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         color: #ddd;
       }
     }
@@ -132,24 +207,72 @@
     @include link(false, false);
 
     a {
+      white-space: normal;
       @include overflow-wrap(break-word);
 
-      [theme=dark] & b, [theme=dark] & strong {
+      [data-theme='dark'] & b,
+      [data-theme='dark'] & strong {
         color: $single-link-color-dark;
       }
     }
 
-    [theme=dark] a:hover b, [theme=dark] a:hover strong {
+    [data-theme='dark'] a:hover b,
+    [data-theme='dark'] a:hover strong {
       color: $single-link-hover-color-dark;
     }
 
-    ul, ol {
-      margin: .5rem 0;
-      padding-left: 2.5rem;
+    ul,
+    ol,
+    dl {
+      margin-block: 0.5em;
     }
 
     ul {
       list-style-type: disc;
+
+      // Task lists
+      li[data-task] {
+        list-style: none;
+        margin-left: -1.5rem;
+      }
+    }
+
+    // Task lists
+    li[data-task] {
+      color: var(--#{$prefix}task-color);
+      .checkbox-icon {
+        margin-right: 0.25em;
+        color: var(--#{$prefix}checkbox-color);
+      }
+    }
+    li[data-task='x'],
+    li[data-task='-'] {
+      --#{$prefix}task-color: var(--#{$prefix}secondary);
+      text-decoration: line-through rgba(145, 145, 145, 0.6);
+    }
+    li[data-task='x'] {
+      --#{$prefix}checkbox-color: var(--#{$prefix}primary);
+    }
+    li[data-task='-'] {
+      opacity: 0.6;
+    }
+    li[data-task='/'] {
+      --#{$prefix}task-color: var(--#{$prefix}success);
+    }
+    li[data-task='!'] {
+      --#{$prefix}checkbox-color: var(--#{$prefix}danger);
+    }
+    li[data-task='?'] {
+      --#{$prefix}checkbox-color: var(--#{$prefix}warning);
+    }
+
+    dl {
+      dt {
+        font-weight: bold;
+      }
+      dd {
+        margin: 0.25em 0 1em;
+      }
     }
 
     ruby {
@@ -159,7 +282,7 @@
         color: $global-font-secondary-color;
       }
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         background: $code-background-color-dark;
 
         rt {
@@ -168,42 +291,73 @@
       }
     }
 
-    .table-wrapper {
-      overflow-x: auto;
+    mark {
+      padding: 0.14em 0.28em;
+      background-color: var(--#{$prefix}mark-background-color, mark);
+      color: var(--#{$prefix}mark-color, marktext);
+      @include border-radius($global-border-radius);
 
-      &::-webkit-scrollbar {
-        background-color: $table-background-color;
-
-        [theme=dark] & {
-          background-color: $table-background-color-dark;
+      @each $color, $value in $theme-colors {
+        &.mark-#{$color} {
+          --#{$prefix}mark-color: #fff;
+          --#{$prefix}mark-background-color: var(--#{$prefix}#{$color});
         }
       }
+    }
+
+    .table-wrapper {
+      position: relative;
+      overflow-x: auto;
+      --#{$prefix}scrollbar-thumb-color: #{$table-background-color};
+
+      [data-theme='dark'] & {
+        --#{$prefix}scrollbar-thumb-color: #{$table-background-color-dark};
+      }
 
       > table {
         width: 100%;
         max-width: 100%;
-        margin: .625rem 0;
+        margin: 0.625rem 0;
         border-spacing: 0;
         background: $table-background-color;
         border-collapse: collapse;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           background: $table-background-color-dark;
         }
 
         thead {
           background: $table-thead-color;
 
-          [theme=dark] & {
+          [data-theme='dark'] & {
             background-color: $table-thead-color-dark;
           }
         }
 
-        th, td {
-          padding: .3rem 1rem;
+        &:not([class]) tbody {
+          & tr:nth-child(odd) {
+            background: darken($table-background-color, 2.25%);
+
+            [data-theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 2.75%);
+            }
+          }
+
+          & tr:hover {
+            background: darken($table-background-color, 4.5%);
+
+            [data-theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 5.5%);
+            }
+          }
+        }
+
+        th,
+        td {
+          padding: 0.3rem 1rem;
           border: 1px solid darken($table-thead-color, 2%);
 
-          [theme=dark] & {
+          [data-theme='dark'] & {
             border-color: darken($table-thead-color-dark, 2%);
           }
         }
@@ -213,117 +367,147 @@
     img {
       max-width: 100%;
       min-height: 1em;
+
+      &.version {
+        height: 1.25em;
+        vertical-align: text-bottom;
+      }
+    }
+    svg {
+      max-width: 100%;
     }
 
     figure {
-      margin: .5rem;
+      margin: 0.5rem;
       text-align: center;
 
       .image-caption:not(:empty) {
         min-width: 20%;
         max-width: 80%;
         display: inline-block;
-        padding: .5rem;
+        padding: 0.5rem;
         margin: 0 auto;
-        font-size: .875rem;
+        font-size: 0.875rem;
         color: #969696;
       }
 
       img {
         display: block;
-        height: auto;
         margin: 0 auto;
+        height: auto;
         overflow: hidden;
       }
     }
 
-    .lazyloading {
-      @include object-fit(none);
-    }
-
     blockquote {
       display: block;
-      border-left: .5rem solid $blockquote-color;
-      background-color: rgba($blockquote-color, .2);
-      padding: .25rem .75rem;
+      border-left: 0.25em solid $global-border-color;
+      color: $blockquote-color;
+      padding: 0 1em;
       margin: 1rem 0;
 
-      [theme=dark] & {
-        border-left-color: $blockquote-color-dark;
-        background-color: rgba($blockquote-color-dark, .2);
+      ul,
+      ol {
+        padding-left: 1.5em;
       }
+
+      dl dd {
+        margin-inline-start: 0.25em;
+      }
+
+      [data-theme='dark'] & {
+        color: $blockquote-color-dark;
+        border-left-color: $global-border-color-dark;
+      }
+
+      @include link(false, true);
+    }
+
+    sup[id^='fnref']:has(.footnote-ref) {
+      padding: 2px 4px;
+      background-color: rgba(238, 238, 238, 0.7);
+      color: #555555;
+      border-radius: 4px;
+      cursor: pointer;
+
+      [data-theme='dark'] & {
+        background-color: rgba(56, 139, 253, 0.1);
+        color: #58a6ff;
+      }
+
+      @include link(true, false);
     }
 
     .footnotes {
-      color: $global-font-secondary-color;
+      font-size: 0.75rem;
+      white-space: normal;
+      color: darken($global-font-secondary-color, 5%);
 
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
+      ol {
+        margin-block: 1em;
+        padding-left: 1rem;
+      }
+      
+      hr {
+        background-color: var(--#{$prefix}hr-background-color);
+        height: 1px;
+        margin-block: 1em;
+      }
+
+      code {
+        font-size: 0.75rem;
+      }
+
+      a:not(.footnote-backref) {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      @include link(false, true);
+
+      [data-theme='dark'] & {
+        color: lighten($global-font-secondary-color-dark, 5%);
       }
 
       p {
-        margin: .25rem 0;
-      }
-    }
-
-    @import "../_partial/_single/code";
-    @import "../_partial/_single/instagram";
-    @import "../_partial/_single/admonition";
-    @import "../_partial/_single/echarts";
-    @import "../_partial/_single/mapbox";
-    @import "../_partial/_single/music";
-    @import "../_partial/_single/bilibili";
-
-    hr {
-      margin: 1rem 0;
-      position: relative;
-      border-top: 1px dashed $global-border-color;
-      border-bottom: none;
-
-      [theme=dark] & {
-        border-top: 1px dashed $global-border-color-dark;
+        margin: 0.25rem 0;
       }
     }
 
     kbd {
       display: inline-block;
-      padding: .25rem;
+      padding: 0 0.25rem;
       background-color: $global-background-color;
       border: 1px solid $global-border-color;
-      border-bottom-color: $global-border-color;
-      @include border-radius(3px);
-      @include box-shadow(inset 0 -1px 0 $global-border-color);
-      font-size: .8rem;
+      font-size: 0.8rem;
       font-family: $code-font-family;
       color: $code-color;
+      @include border-radius($global-border-radius);
+      @include box-shadow(inset 0 -1px 0 $global-border-color);
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         background-color: $global-background-color-dark;
         border: 1px solid $global-border-color-dark;
-        border-bottom-color: $global-border-color-dark;
-        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
         color: $code-color-dark;
+        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
       }
     }
 
-    .typeit {
-      .code {
-        padding: .375rem;
-        font-size: .875rem;
-        font-family: $code-font-family;
-        font-weight: bold;
-        word-break: break-all;
-      }
+    // Katex styles
+    .katex-display {
+      max-width: 100%;
+      overflow-x: auto;
+      padding-block: 2px;
     }
 
-    .version {
-      height: 1.25em;
-      vertical-align: text-bottom;
-    }
+    @import '../_partials/_single/alert';
+    @import '../_partials/_single/code';
+    @import '../_shortcodes';
   }
 
-  @import "../_partial/_single/footer";
-  @import "../_partial/_single/comment";
+  @import '../_partials/_single/reward';
+  @import '../_partials/_single/footer';
+  @import '../_partials/_single/comment';
 }
 
 .lg-toolbar .lg-icon::after {

assets/css/_page/_special.scss

@@ -1,5 +0,0 @@
-.special {
-  .single-title, .single-subtitle {
-    text-align: right;
-  }
-}

assets/css/_page/_special/_friends.scss

@@ -0,0 +1,63 @@
+/**
+ * Style of layout named 'friends'.
+ * @Author: Lruihao <https://lruihao.cn>
+ * @Updated:  2022/3/11 21:36
+ */
+
+.friend-links {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+@media (max-width: 576px) {
+  .friend-links {
+    justify-content: space-around;
+  }
+}
+.friend-link {
+  width: 150px;
+  height: 200px;
+  font-size: 1rem;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.3);
+  box-sizing: border-box;
+  box-shadow: 3px 3px 5px #aaa;
+  @include border-radius($global-border-radius);
+  border: none;
+  transition-duration: 0.3s;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.friend-link:hover {
+  background: #fff;
+  @include transform(scale(1.03));
+  box-shadow: 0 0 3px #aaa;
+}
+.friend-avatar {
+  object-fit: cover;
+  object-position: center;
+  width: 100% !important;
+  height: 150px !important;
+  @include border-radius($global-border-radius);
+  margin: 0;
+  padding: 0;
+}
+.friend-nickname {
+  display: block;
+  position: relative;
+  color: #2bbc8a;
+  font-weight: bold;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 18px;
+  margin-bottom: 1rem;
+}
+.friend-nickname:hover {
+  color: #d480aa;
+}

assets/css/_page/_special/_index.scss

@@ -0,0 +1,14 @@
+.special {
+  .single-title,
+  .single-subtitle {
+    text-align: right;
+  }
+
+  &.friends {
+    @import '_friends';
+  }
+
+  &.search {
+    @import '_search';
+  }
+}

assets/css/_page/_special/_search.scss

@@ -0,0 +1,10 @@
+// Style of layout named 'search'
+// TODO Adapting to dark mode, maybe use css variables
+
+// Google CSE
+.gcse-searchbox:empty,
+.gcse-searchresults:empty {
+  display: none;
+}
+
+// Bing CSE (Unsupported)

assets/css/_partial/_archive/_tags.scss

@@ -1,27 +0,0 @@
-.tag-cloud-tags {
-  margin: 10px 0;
-
-  @include link(true, true);
-
-  a {
-    display: inline-block;
-    position: relative;
-    margin: 5px 10px;
-    @include overflow-wrap(break-word);
-    @include transition(all ease-out 0.3s);
-
-    &:active,
-    &:focus,
-    &:hover {
-      @include transform(scale(1.2));
-    }
-
-    sup {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-  }
-}

assets/css/_partial/_details.scss

@@ -1,33 +0,0 @@
-.details {
-  .details-summary {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  i.details-icon {
-    color: $global-font-secondary-color;
-    @include transition(transform 0.2s ease);
-
-    [theme=dark] & {
-      color: $global-font-secondary-color-dark;
-    }
-  }
-
-  .details-content {
-    max-height: 0;
-    overflow-y: hidden;
-    @include details-transition-open;
-  }
-
-  &.open {
-    i.details-icon {
-      @include transform(rotate(90deg));
-    }
-
-    .details-content {
-      max-height: $MAX_LENGTH;
-      @include details-transition-close;
-    }
-  }
-}

assets/css/_partial/_footer.scss

@@ -1,21 +0,0 @@
-footer {
-  height: 2rem;
-  width: 100%;
-  text-align: center;
-  line-height: 1.25rem;
-  padding: 1rem 0;
-
-  .footer-container {
-    font-size: .875rem;
-
-    .footer-line {
-      width: 100%;
-
-      .icp-br {
-        display: none;
-      }
-    }
-  }
-
-  @include blur;
-}

assets/css/_partial/_header.scss

@@ -1,468 +0,0 @@
-header {
-  width: 100%;
-  z-index: 150;
-  background-color: $header-background-color;
-  @include transition(box-shadow 0.3s ease);
-
-  [theme=dark] & {
-    background-color: $header-background-color-dark;
-  }
-
-  .logo {
-    min-height: 1.5em;
-    height: 1.5em;
-    vertical-align: text-bottom;
-  }
-
-  .logo, .header-title-pre {
-    padding-right: .25rem;
-  }
-
-  .header-title-post {
-    padding-left: .25rem;
-  }
-
-  &:hover {
-    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, .1));
-  }
-}
-
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.header-title {
-  font-family: $header-title-font-family;
-  font-weight: bold;
-  margin-right: .5rem;
-  min-width: 10%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  @include flex(10);
-}
-
-.menu .menu-item {
-  position: relative;
-}
-
-.language-select {
-  position: absolute;
-  opacity: 0;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.search {
-  position: relative;
-
-  input {
-    color: transparent;
-    box-sizing: border-box;
-    height: 2.5rem;
-    width: 2.5rem;
-    @include border-radius(.5rem);
-    border: none;
-    outline: none;
-    background-color: $header-background-color;
-    vertical-align: baseline !important;
-    @include transition(width 0.3s ease);
-
-    [theme=dark] & {
-      background-color: $header-background-color-dark;
-    }
-  }
-
-  @include placeholder(transparent);
-
-  .search-button {
-    margin: 0;
-    position: absolute;
-    left: auto;
-    right: 1rem;
-  }
-
-  .search-toggle {
-    left: .5rem;
-    right: auto;
-  }
-
-  .search-loading {
-    display: none;
-  }
-
-  .search-clear {
-    display: none;
-  }
-
-  .open &, &.mobile {
-    input {
-      color: $global-font-color;
-      background-color: $search-background-color;
-      padding: 0 2rem 0 2rem;
-    }
-
-    [theme=dark] & {
-      input {
-        color: $global-font-color-dark;
-        background-color: $search-background-color-dark;
-      }
-
-      @include placeholder($global-font-secondary-color-dark);
-    }
-
-    @include placeholder($global-font-secondary-color);
-
-    .search-button {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-
-    .search-clear:hover {
-      color: #ff6b6b;
-    }
-
-    .search-toggle:hover {
-      cursor: default;
-    }
-  }
-}
-
-.theme-switch i {
-  @include transform(rotate(225deg));
-}
-
-#header-desktop {
-  display: block;
-  position: fixed;
-  height: $header-height;
-  line-height: $header-height;
-
-  [header-desktop=normal] & {
-    position: static;
-  }
-
-  .header-wrapper {
-    padding: 0 2rem 0 10vh;
-
-    .header-title {
-      font-size: $header-title-font-size;
-    }
-
-    .menu {
-      overflow: hidden;
-      white-space: nowrap;
-
-      .menu-inner {
-        float: right;
-      }
-
-      .menu-item {
-        margin: 0 .5rem;
-
-        &.delimiter {
-          border-left: 1.5px solid $global-font-color;
-
-          [theme=dark] & {
-            border-left-color: $global-border-color-dark;
-          }
-        }
-
-        &.language {
-          margin-right: 0;
-        }
-
-        &.search {
-          margin: 0 -.5rem 0 0;
-        }
-      }
-
-      a.active {
-        font-weight: 900;
-        color: $header-hover-color;
-
-        [theme=dark] & {
-          color: $header-hover-color-dark;
-        }
-      }
-    }
-  }
-
-  &.open .header-wrapper .menu .menu-item.search {
-    margin: 0 .25rem 0 .5rem;
-
-    input {
-      width: 24rem;
-    }
-  }
-}
-
-#header-mobile {
-  display: none;
-  position: fixed;
-  height: $header-height;
-  line-height: $header-height;
-
-  [header-mobile=normal] & {
-    position: static;
-  }
-
-  .header-container {
-    padding: 0;
-    margin: 0;
-
-    .header-wrapper {
-      padding: 0 1rem;
-      font-size: 1.125rem;
-      @include transition(margin-top 0.3s ease);
-
-      .header-title {
-        font-size: $header-title-font-size;
-        max-width: 80%;
-      }
-
-      .menu-toggle {
-        line-height: 4rem;
-        cursor: pointer;
-        @include transition(width 0.3s ease);
-
-        span {
-          display: block;
-          background: $global-font-color;
-          width: 1.5rem;
-          height: 2px;
-          @include border-radius(3px);
-          @include transition(all 0.3s ease-in-out);
-
-          [theme=dark] & {
-            background: $global-font-color-dark;
-          }
-        }
-
-        span:nth-child(1) {
-          margin-bottom: .5rem;
-        }
-
-        span:nth-child(3) {
-          margin-top: .5rem;
-        }
-
-        &.active {
-          span:nth-child(1) {
-            @include transform(rotate(45deg) translate(.4rem, .5rem));
-          }
-
-          span:nth-child(2) {
-            opacity: 0
-          }
-
-          span:nth-child(3) {
-            @include transform(rotate(-45deg) translate(.4rem, -.5rem));
-          }
-        }
-      }
-    }
-
-    .menu {
-      text-align: center;
-      background: $header-background-color;
-      border-top: 2px solid $global-border-color;
-      display: none;
-      padding-top: .5rem;
-      @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
-
-      .search-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-sizing: border-box;
-        padding: ($header-height - 2.5rem) / 2 1rem;
-        line-height: 2.5rem;
-      }
-
-      .search {
-        flex-grow: 10;
-
-        .algolia-autocomplete, input {
-          width: 100%;
-        }
-      }
-
-      .search-button {
-        top: 0;
-      }
-
-      .search-cancel {
-        display: none;
-        margin-left: .75rem;
-      }
-
-      .menu-item {
-        display: block;
-        line-height: 2.5rem;
-      }
-
-      &.active {
-        display: block;
-      }
-
-      [theme=dark] & {
-        background: $header-background-color-dark;
-        border-top-color: $global-border-color-dark;
-      }
-    }
-  }
-
-  &.open {
-    .header-wrapper {
-      margin-top: -$header-height;
-    }
-
-    .menu {
-      padding-top: 0;
-      border-top: none;
-
-      .menu-item {
-        display: none;
-      }
-
-      .search-cancel {
-        display: inline;
-      }
-    }
-  }
-}
-
-.search-dropdown {
-  position: fixed;
-  z-index: 200;
-  top: $header-height;
-  @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
-
-  &.desktop {
-    right: 2rem;
-    width: 30rem;
-  }
-
-  &.mobile {
-    right: 0;
-    width: 100%;
-  }
-
-  .dropdown-menu {
-    right: 0 !important;
-    background-color: $global-background-color;
-
-    [theme=dark] & {
-      background-color: $global-background-color-dark;
-    }
-
-    .suggestions {
-      overflow-y: auto;
-      max-height: calc(100vh - #{$header-height});
-
-      .suggestion {
-        padding: .75rem 1rem;
-
-        .suggestion-title {
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: 1rem;
-          font-weight: bold;
-          max-width: 75%;
-        }
-
-        .suggestion-date {
-          font-size: .875rem;
-          float: right;
-          text-align: right;
-          color: $global-font-secondary-color;
-
-          [theme=dark] & {
-            color: $global-font-secondary-color-dark;
-          }
-        }
-
-        .suggestion-context {
-          line-height: 1.25rem;
-          @include box(vertical);
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          @include overflow-wrap(break-word);
-          color: $global-font-secondary-color;
-
-          [theme=dark] & {
-            color: $global-font-secondary-color-dark;
-          }
-        }
-
-        em {
-          font-style: normal;
-          background-color: $selection-color;
-
-          [theme=dark] & {
-            background-color: $selection-color-dark;
-          }
-        }
-
-        &.cursor {
-          background: darken($code-background-color, 5%);
-
-          [theme=dark] & {
-            background: lighten($code-background-color-dark, 5%);
-          }
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-
-    .search-empty {
-      padding: 1rem;
-      text-align: center;
-
-      .search-query {
-        font-weight: bold;
-
-        [theme=dark] & {
-          color: #ddd;
-        }
-      }
-    }
-
-    .search-footer {
-      padding: .5rem 1rem;
-      float: right;
-      font-size: .8rem;
-      color: $global-font-secondary-color;
-
-      [theme=dark] {
-        color: $global-font-secondary-color-dark;
-      }
-
-      @include link(false, false);
-
-      a {
-        font-size: 1rem;
-      }
-    }
-  }
-}

assets/css/_partial/_icon.scss

@@ -1,17 +0,0 @@
-svg.icon {
-  display: inline-block;
-  width: 1.25em;
-  height: 1em;
-  text-align: center;
-
-  path {
-    fill: currentColor;
-  }
-}
-
-img.emoji {
-  height: 1em;
-  width: 1em;
-  margin: 0 .05em 0 .1em;
-  vertical-align: -.1em;
-}

assets/css/_partial/_single/_admonition.scss

@@ -1,67 +0,0 @@
-.admonition {
-  position: relative;
-  margin: 1rem 0;
-  padding: 0 .75rem;
-  background-color: map-get($admonition-background-color-map, 'note');
-  border-left: .25rem solid map-get($admonition-color-map, 'note');
-  overflow: auto;
-
-  .admonition-title {
-    font-weight: bold;
-    margin: 0 -0.75rem;
-    padding: .25rem 1.8rem;
-    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
-    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
-  }
-
-  &.open .admonition-title {
-    background-color: map-get($admonition-background-color-map, 'note');
-  }
-
-  .admonition-content {
-    padding: .5rem 0;
-  }
-
-  i.icon {
-    font-size: 0.85rem;
-    color: map-get($admonition-color-map, 'note');
-    position: absolute;
-    top: .6rem;
-    left: .4rem;
-  }
-
-  i.details-icon {
-    position: absolute;
-    top: .6rem;
-    right: .3rem;
-  }
-
-  @each $type, $color in $admonition-color-map {
-    &.#{$type} {
-      border-left-color: $color;
-
-      i.icon {
-        color: $color;
-      }
-    }
-  }
-
-  @each $type, $color in $admonition-background-color-map {
-    &.#{$type} {
-      background-color: $color;
-
-      .admonition-title {
-        border-bottom-color: $color;
-        background-color: opacify($color, 0.15);
-      }
-
-      &.open .admonition-title {
-        background-color: $color;
-      }
-    }
-  }
-
-  &:last-child {
-    margin-bottom: .75rem;
-  }
-}

assets/css/_partial/_single/_code.scss

@@ -1,385 +0,0 @@
-code {
-  display:inline-block;
-  max-width: 100%;
-  padding: 0 .4rem;
-  @include overflow-wrap(break-word);
-  @include line-break(anywhere);
-  font-size: $code-font-size;
-  font-family: $code-font-family;
-  color: $code-color;
-
-  [theme=dark] & {
-    color: $code-color-dark;
-  }
-}
-
-pre {
-  margin: 0;
-  padding: .25rem 0 .25rem .5rem;
-  @include tab-size(4);
-
-  code {
-    padding: 0;
-  }
-
-  img {
-    min-height: 1em;
-    max-height: 1.2em;
-    vertical-align: text-bottom;
-  }
-}
-
-code, pre, .highlight table, .highlight tr, .highlight td {
-  background: $code-background-color;
-
-  [theme=dark] & {
-    background: $code-background-color-dark;
-  }
-}
-
-.highlight, .gist {
-  font-family: $code-font-family;
-  font-size: $code-font-size;
-
-  .table-wrapper {
-    > table,
-    > table thead,
-    > table tr,
-    > table td {
-      margin: 0;
-      padding: 0;
-      border: none !important;
-      white-space: nowrap;
-    }
-  }
-}
-
-.highlight {
-  line-height: 1.4em;
-  margin: .5rem 0;
-
-  > .chroma {
-    position: relative;
-
-    .code-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-      width: 100%;
-      font-family: $global-font-family;
-      font-weight: bold;
-      color: $code-info-color;
-      background: darken($code-background-color, 8%);
-
-      [theme=dark] & {
-        color: $code-info-color-dark;
-        background: darken($code-background-color-dark, 6%);
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      .code-title {
-        width: 100%;
-        padding: .4rem;
-      }
-
-      .code-title::after {
-        padding-left: .2rem;
-        content: 'Code';
-      }
-
-      @each $type, $text in $code-type-map {
-        &.#{$type} .code-title::after {
-          content: $text;
-        }
-      }
-    }
-
-    .lntd:first-child {
-      min-width: 1.6rem;
-      text-align: right;
-    }
-
-    .lntd:last-child {
-      width: 100%;
-
-      pre {
-        @include max-content(min-width);
-      }
-    }
-
-    .ln {
-      padding-right: .75rem;
-    }
-
-    .hl {
-      display: block;
-      background-color: darken($code-background-color, 10%);
-
-      [theme=dark] & {
-        background-color: darken($code-background-color-dark, 5%);
-      }
-    }
-
-    .ln, .lnt {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-
-    .arrow {
-      padding: 0 .2rem;
-      @include transition(transform 0.2s ease);
-    }
-
-    .ellipses {
-      padding: .4rem;
-    }
-
-    .copy {
-      display: none;
-      padding: .4rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $global-link-hover-color;
-
-        [theme=dark] & {
-          color: $global-link-hover-color-dark;
-        }
-      }
-    }
-
-    .table-wrapper {
-      max-height: 0;
-      overflow-y: hidden;
-      @include details-transition-open;
-    }
-
-    &.open {
-      .code-header {
-        background: darken($code-background-color, 3%);
-
-        [theme=dark] & {
-          background: darken($code-background-color-dark, 3%);
-        }
-      }
-
-      .table-wrapper {
-        max-height: $MAX_LENGTH;
-        @include details-transition-close;
-      }
-
-      .arrow {
-        @include transform(rotate(90deg));
-      }
-
-      .ellipses {
-        display: none;
-      }
-
-      .copy {
-        display: inline;
-      }
-    }
-  }
-
-  /* Comment */  .c,
-  /* CommentHashbang */  .ch,
-  /* CommentMultiline */  .cm,
-  /* CommentSingle */  .c1,
-  /* CommentSpecial */  .cs,
-  /* CommentPreproc */  .cp,
-  /* CommentPreprocFile */  .cpf { font-style: italic }
-  /* GenericUnderline */  .gl { text-decoration: underline }
-
-  @each $class, $color in $code-highlight-color-map {
-    .#{$class} { color: $color; }
-  }
-
-  [theme=dark] & {
-    @each $class, $color in $code-highlight-color-map-dark {
-      .#{$class} { color: $color; }
-    }
-  }
-}
-
-.gist {
-  .gist-file, .gist-data, .gist-meta {
-    border: none;
-  }
-
-  .gist-meta {
-    padding: .4rem .8rem;
-    background-color: darken($code-background-color, 5%);
-
-    @include link(false, false);
-
-    [theme=dark] & {
-      background-color: darken($code-background-color-dark, 5%);
-    }
-  }
-
-  [theme=dark] & {
-    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
-    .highlight {
-      background: #141414;
-    }
-    .blob-num,
-    .blob-code-inner,
-    .highlight,
-    .pl-enm,
-    .pl-ko,
-    .pl-mo,
-    .pl-mp1 .pl-sf,
-    .pl-ms,
-    .pl-pdc1,
-    .pl-scp,
-    .pl-smc,
-    .pl-som,
-    .pl-va,
-    .pl-vpf,
-    .pl-vpu,
-    .pl-mdr {
-        color: #aab1bf;
-    }
-    .pl-mb,
-    .pl-pdb {
-        font-weight: 700;
-    }
-    .pl-c,
-    .pl-c span,
-    .pl-pdc {
-        color: #5b6270;
-        font-style: italic;
-    }
-    .pl-sr .pl-cce {
-        color: #56b5c2;
-        font-weight: 400;
-    }
-    .pl-ef,
-    .pl-en,
-    .pl-enf,
-    .pl-eoai,
-    .pl-kos,
-    .pl-mh .pl-pdh,
-    .pl-mr {
-        color: #61afef;
-    }
-    .pl-ens,
-    .pl-vi {
-        color: #be5046;
-    }
-    .pl-enti,
-    .pl-mai .pl-sf,
-    .pl-ml,
-    .pl-sf,
-    .pl-sr,
-    .pl-sr .pl-sra,
-    .pl-src,
-    .pl-st,
-    .pl-vo {
-        color: #56b5c2;
-    }
-    .pl-eoi,
-    .pl-mri,
-    .pl-pds,
-    .pl-pse .pl-s1,
-    .pl-s,
-    .pl-s1 {
-        color: #97c279;
-    }
-    .pl-k,
-    .pl-kolp,
-    .pl-mc,
-    .pl-pde {
-        color: #c578dd;
-    }
-    .pl-mi,
-    .pl-pdi {
-        color: #c578dd;
-        font-style: italic;
-    }
-    .pl-mp,
-    .pl-stp {
-        color: #818896;
-    }
-    .pl-mdh,
-    .pl-mdi,
-    .pl-mdr {
-        font-weight: 400;
-    }
-    .pl-mdht,
-    .pl-mi1 {
-        color: #97c279;
-        background: #020;
-    }
-    .pl-md,
-    .pl-mdhf {
-        color: #df6b75;
-        background: #200;
-    }
-    .pl-corl {
-        color: #df6b75;
-        text-decoration: underline;
-    }
-    .pl-ib {
-        background: #df6b75;
-    }
-    .pl-ii {
-        background: #e0c184;
-        color: #fff;
-    }
-    .pl-iu {
-        background: #e05151;
-    }
-    .pl-ms1 {
-        color: #aab1bf;
-        background: #373b41;
-    }
-    .pl-c1,
-    .pl-cn,
-    .pl-e,
-    .pl-eoa,
-    .pl-eoac,
-    .pl-eoac .pl-pde,
-    .pl-kou,
-    .pl-mm,
-    .pl-mp .pl-s3,
-    .pl-mq,
-    .pl-s3,
-    .pl-sok,
-    .pl-sv,
-    .pl-mb {
-        color: #d19965;
-    }
-    .pl-enc,
-    .pl-entc,
-    .pl-pse .pl-s2,
-    .pl-s2,
-    .pl-sc,
-    .pl-smp,
-    .pl-sr .pl-sre,
-    .pl-stj,
-    .pl-v,
-    .pl-pdb {
-        color: #e4bf7a;
-    }
-    .pl-ent,
-    .pl-entl,
-    .pl-entm,
-    .pl-mh,
-    .pl-pdv,
-    .pl-smi,
-    .pl-sol,
-    .pl-mdh,
-    .pl-mdi {
-        color: #df6b75;
-    }
-  }
-}

assets/css/_partial/_single/_comment.scss

@@ -1,3 +0,0 @@
-#comments {
-  padding: 8rem 0 2rem;
-}

assets/css/_partial/_single/_mapbox.scss

@@ -1,4 +0,0 @@
-.mapbox {
-  margin: .5rem 0;
-  padding: .5rem 0;
-}

assets/css/_partial/_single/_music.scss

@@ -1,3 +0,0 @@
-meting-js {
-  margin: .5rem 0;
-}

assets/css/_partial/_single/_toc.scss

@@ -1,157 +0,0 @@
-.toc {
-  .toc-title {
-    font-size: $toc-title-font-size;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  .toc-content {
-    font-size: $toc-content-font-size;
-
-    ul {
-      text-indent: -0.85rem;
-      padding-left: .8rem;
-      list-style: none;
-
-      a:first-child::before {
-        content: "|";
-        font-weight: bolder;
-        margin-right: .5rem;
-        color: $single-link-color;
-
-        [theme=dark] & {
-          color: $single-link-color-dark;
-        }
-      }
-
-      ul {
-        padding-left: 1.5rem;
-      }
-    }
-  }
-
-  ruby {
-    background: $code-background-color;
-
-    rt {
-      color: $global-font-secondary-color;
-    }
-
-    [theme=dark] & {
-      background: $code-background-color-dark;
-
-      rt {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-  }
-}
-
-#toc-auto {
-  display: block;
-  position: absolute;
-  width: $MAX_LENGTH;
-  max-width: 0;
-  padding: 0 .8rem;
-  border-left: 4px solid $global-border-color;
-  @include overflow-wrap(break-word);
-  box-sizing: border-box;
-  top: 10rem;
-  left: 0;
-  visibility: hidden;
-
-  [header-desktop=normal] & {
-    top: 5rem;
-  }
-
-  @include blur;
-
-  [theme=dark] & {
-    border-left-color: $global-border-color-dark;
-  }
-
-  .toc-title {
-    margin: .8rem 0;
-  }
-
-  .toc-content {
-    &.always-active ul {
-      display: block;
-    }
-
-    > nav > ul {
-      margin: .625rem 0;
-    }
-
-    ul {
-      ul {
-        display: none;
-      }
-
-      .has-active > ul {
-        display: block;
-      }
-    }
-
-    a.active {
-      font-weight: bold;
-      color: $single-link-color;
-
-      [theme=dark] & {
-        color: $single-link-color-dark;
-      }
-
-      &::before {
-        color: $single-link-hover-color;
-
-        [theme=dark] & {
-          color: $single-link-hover-color-dark;
-        }
-      }
-    }
-  }
-}
-
-#toc-static {
-  display: none;
-  margin: .8rem 0;
-
-  &[kept=true] {
-    display: block;
-  }
-
-  .toc-title {
-    display: flex;
-    justify-content: space-between;
-    line-height: 2em;
-    padding: 0 .75rem;
-    background: darken($code-background-color, 6%);
-
-    [theme=dark] & {
-      background: darken($code-background-color-dark, 6%);
-    }
-  }
-
-  .toc-content {
-    background-color: $code-background-color;
-
-    > nav > ul {
-      margin: 0;
-      padding: .4rem 1rem .4rem 1.8rem;
-    }
-
-    [theme=dark] & {
-      background-color: $code-background-color-dark;
-    }
-  }
-
-  &.open {
-    .toc-title {
-      background: darken($code-background-color, 3%);
-
-      [theme=dark] & {
-        background: darken($code-background-color-dark, 3%);
-      }
-    }
-  }
-}

assets/css/_partials/_archive/_tags.scss

@@ -0,0 +1,69 @@
+.tag-cloud-tags {
+  margin: 10px 0;
+
+  @include link(true, true);
+
+  a {
+    display: inline-block;
+    position: relative;
+    margin: 5px 10px;
+    @include overflow-wrap(break-word);
+    @include transition(all ease-out 0.3s);
+
+    &:active,
+    &:focus,
+    &:hover {
+      @include transform(scale(1.2));
+
+      sup {
+        color: $global-font-color;
+        @include transition(all ease-out 0.3s);
+
+        [data-theme='dark'] & {
+          color: $global-font-color-dark;
+        }
+      }
+    }
+
+    sup {
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+@for $grade from 0 through 10 {
+  $tag-cloud-color: mix($tag-cloud-end, $tag-cloud-start, $grade * 10);
+  $tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10);
+
+  .tag-cloud-#{$grade} {
+    color: $tag-cloud-color!important;
+    font-size: var(--tag-font);
+    margin: 10px!important;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: $global-link-hover-color!important;
+
+      [data-theme='dark'] & {
+        color: $global-link-hover-color-dark;
+      }
+
+      sup {
+        opacity: 1;
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $tag-cloud-color-dark!important;
+    }
+
+    sup {
+      opacity: 0;
+    }
+  }
+}

assets/css/_partials/_archive/_terms.scss

@@ -1,24 +1,27 @@
-.categories-card {
+.categories-card,
+.collections-card {
   margin: 0 auto;
-  margin-top: 3rem;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
   line-height: 1.6rem;
 
   .card-item {
-    font-size: .875rem;
+    font-size: 0.875rem;
     text-align: left;
     width: 45%;
     display: flex;
     align-items: flex-start;
-    margin-top: 2rem;
     min-height: 10rem;
     padding: 0 2%;
     position: relative;
 
+    &:nth-child(n+3){
+      margin-top: 2rem;
+    }
+
     .card-item-wrapper {
       width: 100%;
       overflow: hidden;
@@ -28,7 +31,7 @@
         font-weight: bold;
         display: inline-block;
         margin-top: 1rem;
-        margin-bottom: .75rem;
+        margin-bottom: 0.75rem;
       }
 
       span {
@@ -44,7 +47,7 @@
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
-  margin: .25rem 0 .25rem 1.5rem;
+  margin: 0.25rem 0 0.25rem 1.5rem;
 }
 
 .archive-item-link {
@@ -58,7 +61,7 @@
     background-color: transparent;
   }
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     color: $global-link-color-dark;
 
     &:hover {
@@ -68,11 +71,12 @@
 }
 
 .archive-item-date {
-  width: 4em;
   text-align: right;
   color: $global-font-secondary-color;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums lining-nums;
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     color: $global-font-secondary-color-dark;
   }
 }

assets/css/_partials/_details.scss

@@ -0,0 +1,46 @@
+.details {
+  > .details-summary {
+    @include border-radius($global-border-radius);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    i.details-icon {
+      color: $global-font-secondary-color;
+      @include transition(transform 0.2s ease);
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+
+  > .details-content {
+    max-height: 0;
+    overflow-y: hidden;
+    @include details-transition-open;
+  }
+
+  &.open {
+    > .details-summary {
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+
+      i.details-icon {
+        @include transform(rotate(90deg));
+      }
+    }
+
+    > .details-content {
+      max-height: 100%;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
+      @include details-transition-close;
+    }
+  }
+
+  &.disabled {
+    > .details-summary {
+      cursor: default;
+    }
+  }
+}

assets/css/_partials/_icon.scss

@@ -0,0 +1,28 @@
+svg.icon {
+  display: inline-block;
+  width: 1.25em;
+  height: 1em;
+  text-align: center;
+
+  path {
+    fill: currentColor;
+  }
+}
+
+img.emoji {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}
+
+.hugo-icon,
+.fixit-icon {
+  display: inline-block;
+  height: 1.2em;
+  width: 1.2em;
+  line-height: 1.2em;
+  position: relative;
+  vertical-align: text-bottom;
+}

assets/css/_partials/_img.scss

@@ -0,0 +1,3 @@
+img {
+  @include border-radius($global-border-radius/2);
+}

assets/css/_partials/_maps/_admonition.scss

@@ -0,0 +1,55 @@
+// Color map of admonitions
+$admonition-color-map: (
+  note: (
+    color: #448aff,
+    bg-color: rgba(68, 138, 255, 0.1),
+  ),
+  abstract: (
+    color: #00b0ff,
+    bg-color: rgba(0, 176, 255, 0.1),
+  ),
+  info: (
+    color: #00b8d4,
+    bg-color: rgba(0, 184, 212, 0.1),
+  ),
+  todo: (
+    color: #5e9aff,
+    bg-color: rgba(94, 154, 255, 0.1),
+  ),
+  tip: (
+    color: #00bfa5,
+    bg-color: rgba(0, 191, 165, 0.1),
+  ),
+  success: (
+    color: #00c853,
+    bg-color: rgba(0, 200, 83, 0.1),
+  ),
+  question: (
+    color: #ffbd67,
+    bg-color: rgba(255, 190, 0, 0.1),
+  ),
+  warning: (
+    color: #ff9100,
+    bg-color: rgba(255, 145, 0, 0.1),
+  ),
+  failure: (
+    color: #ff5252,
+    bg-color: rgba(255, 82, 82, 0.1),
+  ),
+  danger: (
+    color: #ff1744,
+    bg-color: rgba(255, 23, 68, 0.1),
+  ),
+  bug: (
+    color: #f50057,
+    bg-color: rgba(245, 0, 87, 0.1),
+  ),
+  example: (
+    color: #651fff,
+    bg-color: rgba(101, 31, 255, 0.1),
+  ),
+  quote: (
+    color: #9e9e9e,
+    bg-color: rgba(159, 159, 159, 0.1),
+  ),
+) !default;

assets/css/_partials/_maps/_alert.scss

@@ -0,0 +1,46 @@
+// Color map of basic alerts
+$alert-color-map: (
+  note: (
+    border-color: #0969da,
+    color: #0969da,
+  ),
+  tip: (
+    border-color: #1a7f37,
+    color: #1a7f37,
+  ),
+  important: (
+    border-color: #8250df,
+    color: #8250df,
+  ),
+  warning: (
+    border-color: #bf8700,
+    color: #9a6700,
+  ),
+  caution: (
+    border-color: #cf222e,
+    color: #d1242f,
+  ),
+) !default;
+
+$alert-color-map-dark: (
+  note: (
+    border-color: #316dca,
+    color: #478be6,
+  ),
+  tip: (
+    border-color: #347d39,
+    color: #57ab5a,
+  ),
+  important: (
+    border-color: #8256d0,
+    color: #986ee2,
+  ),
+  warning: (
+    border-color: #966600,
+    color: #c69026,
+  ),
+  caution: (
+    border-color: #c93c37,
+    color: #e5534b,
+  ),
+) !default;

assets/css/_partials/_maps/_code-highlight.scss

@@ -0,0 +1,157 @@
+// Color map of the code highlight
+$code-highlight-color-map: (
+  /* Error */ 'err': $code-error-color,
+  /* Keyword */ 'k': #cf222e,
+  /* KeywordConstant */ 'kc': #0550ae,
+  /* KeywordDeclaration */ 'kd': #cf222e,
+  /* KeywordNamespace */ 'kn': #cf222e,
+  /* KeywordPseudo */ 'kp': #cf222e,
+  /* KeywordReserved */ 'kr': #cf222e,
+  /* KeywordType */ 'kt': #cf222e,
+  /* Name */ 'n': $code-color,
+  /* NameAttribute */ 'na': #0550ae,
+  /* NameBuiltin */ 'nb': #0550ae,
+  /* NameBuiltinPseudo */ 'bp': $code-color,
+  /* NameClass */ 'nc': #8250df,
+  /* NameConstant */ 'no': #cf222e,
+  /* NameDecorator */ 'nd': #8250df,
+  /* NameEntity */ 'ni': #0550ae,
+  /* NameException */ 'ne': #0550ae,
+  /* NameFunction */ 'nf': #0550ae,
+  /* NameFunctionMagic */ 'fm': #0550ae,
+  /* NameLabel */ 'nl': #0550ae,
+  /* NameNamespace */ 'nn': #8250df,
+  /* NameOther */ 'nx': #0550ae,
+  /* NameProperty */ 'py': #0550ae,
+  /* NameTag */ 'nt': #116329,
+  /* NameVariable */ 'nv': #953800,
+  /* NameVariableClass */ 'vc': #0550ae,
+  /* NameVariableGlobal */ 'vg': #0550ae,
+  /* NameVariableInstance */ 'vi': #0550ae,
+  /* NameVariableMagic */ 'vm': #0550ae,
+  /* Literal */ 'l': #0550ae,
+  /* LiteralDate */ 'ld': #0a3069,
+  /* LiteralString */ 's': #0a3069,
+  /* LiteralStringAffix */ 'sa': #0a3069,
+  /* LiteralStringBacktick */ 'sb': #0a3069,
+  /* LiteralStringChar */ 'sc': #0a3069,
+  /* LiteralStringDelimiter */ 'dl': #0a3069,
+  /* LiteralStringDoc */ 'sd': #0a3069,
+  /* LiteralStringDouble */ 's2': #0a3069,
+  /* LiteralStringEscape */ 'se': #0a3069,
+  /* LiteralStringHeredoc */ 'sh': #0a3069,
+  /* LiteralStringInterpol */ 'si': #0a3069,
+  /* LiteralStringOther */ 'sx': #0a3069,
+  /* LiteralStringRegex */ 'sr': #0a3069,
+  /* LiteralStringSingle */ 's1': #0a3069,
+  /* LiteralStringSymbol */ 'ss': #0a3069,
+  /* LiteralNumber */ 'm': #0550ae,
+  /* LiteralNumberBin */ 'mb': #0550ae,
+  /* LiteralNumberFloat */ 'mf': #0550ae,
+  /* LiteralNumberHex */ 'mh': #0550ae,
+  /* LiteralNumberInteger */ 'mi': #0550ae,
+  /* LiteralNumberIntegerLong */ 'il': #0550ae,
+  /* LiteralNumberOct */ 'mo': #0550ae,
+  /* Operator */ 'o': #cf222e,
+  /* OperatorWord */ 'ow': #cf222e,
+  /* Punctuation */ 'p': $code-color,
+  /* Comment */ 'c': #6e7781,
+  /* CommentHashbang */ 'ch': #6e7781,
+  /* CommentMultiline */ 'cm': #6e7781,
+  /* CommentSingle */ 'c1': #6e7781,
+  /* CommentSpecial */ 'cs': #6e7781,
+  /* CommentPreproc */ 'cp': #0550ae,
+  /* CommentPreprocFile */ 'cpf': #6e7781,
+  /* Generic */ 'g': $code-color,
+  /* GenericDeleted */ 'gd': #82071e,
+  /* GenericEmph */ 'ge': $code-color,
+  /* GenericError */ 'gr': $code-error-color,
+  /* GenericHeading */ 'gh': $code-color,
+  /* GenericInserted */ 'gi': #116329,
+  /* GenericOutput */ 'go': $code-color,
+  /* GenericPrompt */ 'gp': $code-color,
+  /* GenericStrong */ 'gs': $code-color,
+  /* GenericSubheading */ 'gu': $code-color,
+  /* GenericTraceback */ 'gt': $code-error-color,
+  /* GenericUnderline */ 'gl': $code-color,
+  /* TextWhitespace */ 'w': $code-color,
+  /* Other */ 'x': $code-color
+) !default;
+$code-highlight-color-map-dark: (
+  /* Error */ 'err': $code-error-color,
+  /* Keyword */ 'k': #f47067,
+  /* KeywordConstant */ 'kc': #6cb6ff,
+  /* KeywordDeclaration */ 'kd': #f47067,
+  /* KeywordNamespace */ 'kn': #f47067,
+  /* KeywordPseudo */ 'kp': #f47067,
+  /* KeywordReserved */ 'kr': #f47067,
+  /* KeywordType */ 'kt': #f47067,
+  /* Name */ 'n': $code-color-dark,
+  /* NameAttribute */ 'na': #6cb6ff,
+  /* NameBuiltin */ 'nb': #dcbdfb,
+  /* NameBuiltinPseudo */ 'bp': $code-color-dark,
+  /* NameClass */ 'nc': #dcbdfb,
+  /* NameConstant */ 'no': #6cb6ff,
+  /* NameDecorator */ 'nd': #dcbdfb,
+  /* NameEntity */ 'ni': #6cb6ff,
+  /* NameException */ 'ne': #6cb6ff,
+  /* NameFunction */ 'nf': #dcbdfb,
+  /* NameFunctionMagic */ 'fm': #6cb6ff,
+  /* NameLabel */ 'nl': #6cb6ff,
+  /* NameNamespace */ 'nn': #f47067,
+  /* NameOther */ 'nx': #dcbdfb,
+  /* NameProperty */ 'py': #6cb6ff,
+  /* NameTag */ 'nt': #8ddb8c,
+  /* NameVariable */ 'nv': #f69d50,
+  /* NameVariableClass */ 'vc': #6cb6ff,
+  /* NameVariableGlobal */ 'vg': #6cb6ff,
+  /* NameVariableInstance */ 'vi': #6cb6ff,
+  /* NameVariableMagic */ 'vm': #6cb6ff,
+  /* Literal */ 'l': #6cb6ff,
+  /* LiteralDate */ 'ld': #96d0ff,
+  /* LiteralString */ 's': #96d0ff,
+  /* LiteralStringAffix */ 'sa': #96d0ff,
+  /* LiteralStringBacktick */ 'sb': #96d0ff,
+  /* LiteralStringChar */ 'sc': #96d0ff,
+  /* LiteralStringDelimiter */ 'dl': #96d0ff,
+  /* LiteralStringDoc */ 'sd': #96d0ff,
+  /* LiteralStringDouble */ 's2': #96d0ff,
+  /* LiteralStringEscape */ 'se': #96d0ff,
+  /* LiteralStringHeredoc */ 'sh': #96d0ff,
+  /* LiteralStringInterpol */ 'si': #96d0ff,
+  /* LiteralStringOther */ 'sx': #96d0ff,
+  /* LiteralStringRegex */ 'sr': #96d0ff,
+  /* LiteralStringSingle */ 's1': #96d0ff,
+  /* LiteralStringSymbol */ 'ss': #96d0ff,
+  /* LiteralNumber */ 'm': #6cb6ff,
+  /* LiteralNumberBin */ 'mb': #6cb6ff,
+  /* LiteralNumberFloat */ 'mf': #6cb6ff,
+  /* LiteralNumberHex */ 'mh': #6cb6ff,
+  /* LiteralNumberInteger */ 'mi': #6cb6ff,
+  /* LiteralNumberIntegerLong */ 'il': #6cb6ff,
+  /* LiteralNumberOct */ 'mo': #6cb6ff,
+  /* Operator */ 'o': #f47067,
+  /* OperatorWord */ 'ow': #f47067,
+  /* Punctuation */ 'p': $code-color-dark,
+  /* Comment */ 'c': #768390,
+  /* CommentHashbang */ 'ch': #768390,
+  /* CommentMultiline */ 'cm': #768390,
+  /* CommentSingle */ 'c1': #768390,
+  /* CommentSpecial */ 'cs': #768390,
+  /* CommentPreproc */ 'cp': #6cb6ff,
+  /* CommentPreprocFile */ 'cpf': #768390,
+  /* Generic */ 'g': $code-color-dark,
+  /* GenericDeleted */ 'gd': #ffd8d3,
+  /* GenericEmph */ 'ge': $code-color-dark,
+  /* GenericError */ 'gr': $code-error-color,
+  /* GenericHeading */ 'gh': $code-color-dark,
+  /* GenericInserted */ 'gi': #b4f1b4,
+  /* GenericOutput */ 'go': $code-color-dark,
+  /* GenericPrompt */ 'gp': $code-color-dark,
+  /* GenericStrong */ 'gs': $code-color-dark,
+  /* GenericSubheading */ 'gu': $code-color-dark,
+  /* GenericTraceback */ 'gt': $code-error-color,
+  /* GenericUnderline */ 'gl': $code-color-dark,
+  /* TextWhitespace */ 'w': $code-color-dark,
+  /* Other */ 'x': $code-color-dark
+) !default;

assets/css/_partials/_maps/_code-type.scss

@@ -0,0 +1,373 @@
+// Code type map
+$code-type-map: (
+  // Chroma supported languages
+  // @generator https://github.com/hugo-fixit/.tools/blob/main/tampermonkey/code-type-map-fetcher.user.js
+  "abap": "ABAP",
+  "abnf": "ABNF",
+  "as": "ActionScript",
+  "actionscript": "ActionScript",
+  "as3": "ActionScript 3",
+  "actionscript3": "ActionScript 3",
+  "ada": "Ada",
+  "ada95": "Ada",
+  "ada2005": "Ada",
+  "al": "AL",
+  "ng2": "Angular2",
+  "antlr": "ANTLR",
+  "apacheconf": "ApacheConf",
+  "aconf": "ApacheConf",
+  "apache": "ApacheConf",
+  "apl": "APL",
+  "applescript": "AppleScript",
+  "arduino": "Arduino",
+  "armasm": "ArmAsm",
+  "awk": "Awk",
+  "gawk": "Awk",
+  "mawk": "Awk",
+  "nawk": "Awk",
+  "ballerina": "Ballerina",
+  "make": "Base Makefile",
+  "makefile": "Base Makefile",
+  "mf": "Base Makefile",
+  "bsdmake": "Base Makefile",
+  "bash": "Bash",
+  "sh": "Bash",
+  "ksh": "Bash",
+  "zsh": "Bash",
+  "shell": "Bash",
+  "bash-session": "BashSession",
+  "console": "BashSession",
+  "shell-session": "BashSession",
+  "bat": "Batchfile",
+  "batch": "Batchfile",
+  "dosbatch": "Batchfile",
+  "winbatch": "Batchfile",
+  "bib": "BibTeX",
+  "bibtex": "BibTeX",
+  "bicep": "Bicep",
+  "blitzbasic": "BlitzBasic",
+  "b3d": "BlitzBasic",
+  "bplus": "BlitzBasic",
+  "bnf": "BNF",
+  "brainfuck": "Brainfuck",
+  "bf": "Brainfuck",
+  "c": "C",
+  "csharp": "C#",
+  "c\\#": "C#",
+  "cpp": "C++",
+  "c\\+\\+": "C++",
+  "caddyfile": "Caddyfile",
+  "caddy": "Caddyfile",
+  "caddyfile-directives": "Caddyfile Directives",
+  "caddyfile-d": "Caddyfile Directives",
+  "caddy-d": "Caddyfile Directives",
+  "capnp": "Cap'n Proto",
+  "cassandra": "Cassandra CQL",
+  "cql": "Cassandra CQL",
+  "ceylon": "Ceylon",
+  "cfengine3": "CFEngine3",
+  "cf3": "CFEngine3",
+  "cfs": "cfstatement",
+  "chai": "ChaiScript",
+  "chaiscript": "ChaiScript",
+  "cheetah": "Cheetah",
+  "spitfire": "Cheetah",
+  "clojure": "Clojure",
+  "clj": "Clojure",
+  "cmake": "CMake",
+  "cobol": "COBOL",
+  "coffee-script": "CoffeeScript",
+  "coffeescript": "CoffeeScript",
+  "coffee": "CoffeeScript",
+  "common-lisp": "Common Lisp",
+  "cl": "Common Lisp",
+  "lisp": "Common Lisp",
+  "coq": "Coq",
+  "cr": "Crystal",
+  "crystal": "Crystal",
+  "css": "CSS",
+  "cython": "Cython",
+  "pyx": "Cython",
+  "pyrex": "Cython",
+  "d": "D",
+  "dart": "Dart",
+  "diff": "Diff",
+  "udiff": "Diff",
+  "django": "Django/Jinja",
+  "jinja": "Django/Jinja",
+  "docker": "Docker",
+  "dockerfile": "Docker",
+  "dtd": "DTD",
+  "dylan": "Dylan",
+  "ebnf": "EBNF",
+  "elixir": "Elixir",
+  "ex": "Elixir",
+  "exs": "Elixir",
+  "elm": "Elm",
+  "emacs": "EmacsLisp",
+  "elisp": "EmacsLisp",
+  "emacs-lisp": "EmacsLisp",
+  "erlang": "Erlang",
+  "factor": "Factor",
+  "fennel": "Fennel",
+  "fnl": "Fennel",
+  "fish": "Fish",
+  "fishshell": "Fish",
+  "forth": "Forth",
+  "fortran": "Fortran",
+  "fortranfixed": "FortranFixed",
+  "fsharp": "FSharp",
+  "gas": "GAS",
+  "asm": "GAS",
+  "gdscript": "GDScript",
+  "gd": "GDScript",
+  "genshi": "Genshi",
+  "kid": "Genshi",
+  "xml\\+genshi": "Genshi",
+  "xml\\+kid": "Genshi",
+  "html\\+genshi": "Genshi HTML",
+  "html\\+kid": "Genshi HTML",
+  "genshitext": "Genshi Text",
+  "cucumber": "Gherkin",
+  "Cucumber": "Gherkin",
+  "gherkin": "Gherkin",
+  "Gherkin": "Gherkin",
+  "glsl": "GLSL",
+  "gnuplot": "Gnuplot",
+  "go": "Go",
+  "golang": "Go",
+  "go-html-template": "Go HTML Template",
+  "go-text-template": "Go Text Template",
+  "graphql": "GraphQL",
+  "graphqls": "GraphQL",
+  "gql": "GraphQL",
+  "groff": "Groff",
+  "nroff": "Groff",
+  "man": "Groff",
+  "groovy": "Groovy",
+  "handlebars": "Handlebars",
+  "hbs": "Handlebars",
+  "haskell": "Haskell",
+  "hs": "Haskell",
+  "hx": "Haxe",
+  "haxe": "Haxe",
+  "hxsl": "Haxe",
+  "hcl": "HCL",
+  "hexdump": "Hexdump",
+  "hlb": "HLB",
+  "html": "HTML",
+  "http": "HTTP",
+  "hylang": "Hy",
+  "idris": "Idris",
+  "idr": "Idris",
+  "igor": "Igor",
+  "igorpro": "Igor",
+  "ini": "INI",
+  "cfg": "INI",
+  "dosini": "INI",
+  "io": "Io",
+  "j": "J",
+  "java": "Java",
+  "js": "JavaScript",
+  "javascript": "JavaScript",
+  "json": "JSON",
+  "julia": "Julia",
+  "jl": "Julia",
+  "jungle": "Jungle",
+  "kotlin": "Kotlin",
+  "lighty": "Lighttpd configuration file",
+  "lighttpd": "Lighttpd configuration file",
+  "llvm": "LLVM",
+  "lua": "Lua",
+  "mako": "Mako",
+  "md": "Markdown",
+  "mkd": "Markdown",
+  "mason": "Mason",
+  "mathematica": "Mathematica",
+  "mma": "Mathematica",
+  "nb": "Mathematica",
+  "matlab": "Matlab",
+  "mcfunction": "mcfunction",
+  "meson": "Meson",
+  "meson\\.build": "Meson",
+  "metal": "Metal",
+  "minizinc": "MiniZinc",
+  "MZN": "MiniZinc",
+  "mzn": "MiniZinc",
+  "mlir": "MLIR",
+  "modula2": "Modula-2",
+  "m2": "Modula-2",
+  "monkeyc": "MonkeyC",
+  "morrowind": "MorrowindScript",
+  "mwscript": "MorrowindScript",
+  "myghty": "Myghty",
+  "mysql": "MySQL",
+  "mariadb": "MySQL",
+  "nasm": "NASM",
+  "newspeak": "Newspeak",
+  "nginx": "Nginx configuration file",
+  "nim": "Nim",
+  "nimrod": "Nim",
+  "nixos": "Nix",
+  "nix": "Nix",
+  "objective-c": "Objective-C",
+  "objectivec": "Objective-C",
+  "obj-c": "Objective-C",
+  "objc": "Objective-C",
+  "ocaml": "OCaml",
+  "octave": "Octave",
+  "ones": "OnesEnterprise",
+  "onesenterprise": "OnesEnterprise",
+  "1S": "OnesEnterprise",
+  "1S:Enterprise": "OnesEnterprise",
+  "openedge": "OpenEdge ABL",
+  "abl": "OpenEdge ABL",
+  "progress": "OpenEdge ABL",
+  "openedgeabl": "OpenEdge ABL",
+  "openscad": "OpenSCAD",
+  "org": "Org Mode",
+  "orgmode": "Org Mode",
+  "pacmanconf": "PacmanConf",
+  "perl": "Perl",
+  "pl": "Perl",
+  "php": "PHP",
+  "php3": "PHP",
+  "php4": "PHP",
+  "php5": "PHP",
+  "phtml": "PHTML",
+  "pig": "Pig",
+  "pkgconfig": "PkgConfig",
+  "plpgsql": "PL/pgSQL",
+  "text": "plaintext",
+  "plain": "plaintext",
+  "no-highlight": "plaintext",
+  "plutus-core": "Plutus Core",
+  "plc": "Plutus Core",
+  "pony": "Pony",
+  "postgresql": "PostgreSQL SQL dialect",
+  "postgres": "PostgreSQL SQL dialect",
+  "postscript": "PostScript",
+  "postscr": "PostScript",
+  "pov": "POVRay",
+  "powerquery": "PowerQuery",
+  "pq": "PowerQuery",
+  "powershell": "PowerShell",
+  "posh": "PowerShell",
+  "ps1": "PowerShell",
+  "psm1": "PowerShell",
+  "psd1": "PowerShell",
+  "prolog": "Prolog",
+  "promql": "PromQL",
+  "protobuf": "Protocol Buffer",
+  "proto": "Protocol Buffer",
+  "puppet": "Puppet",
+  "python": "Python",
+  "py": "Python",
+  "sage": "Python",
+  "python3": "Python",
+  "py3": "Python",
+  "python2": "Python 2",
+  "py2": "Python 2",
+  "qbasic": "QBasic",
+  "basic": "QBasic",
+  "qml": "QML",
+  "qbs": "QML",
+  "splus": "R",
+  "s": "R",
+  "r": "R",
+  "racket": "Racket",
+  "rkt": "Racket",
+  "ragel": "Ragel",
+  "perl6": "Raku",
+  "pl6": "Raku",
+  "raku": "Raku",
+  "jsx": "react",
+  "react": "react",
+  "reason": "ReasonML",
+  "reasonml": "ReasonML",
+  "registry": "reg",
+  "rst": "reStructuredText",
+  "rest": "reStructuredText",
+  "restructuredtext": "reStructuredText",
+  "rexx": "Rexx",
+  "arexx": "Rexx",
+  "rb": "Ruby",
+  "ruby": "Ruby",
+  "duby": "Ruby",
+  "rust": "Rust",
+  "rs": "Rust",
+  "sas": "SAS",
+  "sass": "Sass",
+  "scala": "Scala",
+  "scheme": "Scheme",
+  "scm": "Scheme",
+  "scilab": "Scilab",
+  "scss": "SCSS",
+  "sieve": "Sieve",
+  "smalltalk": "Smalltalk",
+  "squeak": "Smalltalk",
+  "st": "Smalltalk",
+  "smarty": "Smarty",
+  "snobol": "Snobol",
+  "sol": "Solidity",
+  "solidity": "Solidity",
+  "sparql": "SPARQL",
+  "sql": "SQL",
+  "squidconf": "SquidConf",
+  "squid\\.conf": "SquidConf",
+  "squid": "SquidConf",
+  "sml": "Standard ML",
+  "stylus": "Stylus",
+  "svelte": "Svelte",
+  "swift": "Swift",
+  "systemd": "SYSTEMD",
+  "systemverilog": "systemverilog",
+  "sv": "systemverilog",
+  "tablegen": "TableGen",
+  "tasm": "TASM",
+  "tcl": "Tcl",
+  "tcsh": "Tcsh",
+  "csh": "Tcsh",
+  "termcap": "Termcap",
+  "terminfo": "Terminfo",
+  "terraform": "Terraform",
+  "tf": "Terraform",
+  "tex": "TeX",
+  "latex": "TeX",
+  "thrift": "Thrift",
+  "toml": "TOML",
+  "tradingview": "TradingView",
+  "tv": "TradingView",
+  "tsql": "Transact-SQL",
+  "t-sql": "Transact-SQL",
+  "turing": "Turing",
+  "turtle": "Turtle",
+  "twig": "Twig",
+  "ts": "TypeScript",
+  "tsx": "TypeScript",
+  "typescript": "TypeScript",
+  "typoscript": "TypoScript",
+  "typoscriptcssdata": "TypoScriptCssData",
+  "typoscripthtmldata": "TypoScriptHtmlData",
+  "v": "verilog",
+  "vlang": "V",
+  "vsh": "V shell",
+  "vshell": "V shell",
+  "vb\\.net": "VB.net",
+  "vbnet": "VB.net",
+  "verilog": "verilog",
+  "vhdl": "VHDL",
+  "vim": "VimL",
+  "vue": "vue",
+  "vuejs": "vue",
+  "whiley": "Whiley",
+  "xml": "XML",
+  "xorg\\.conf": "Xorg",
+  "yaml": "YAML",
+  "yang": "YANG",
+  "zed": "Zed",
+  "zig": "Zig",
+  // Custom code type
+  "markdown": "Markdown",
+  "yml": "YAML"
+) !default;

assets/css/_partials/_maps/_colors.scss

@@ -0,0 +1,17 @@
+// Theme colors
+$primary: #1772ee !default;
+$secondary: #919191 !default;
+$success: #13ce66 !default;
+$info: #0dcaf0 !default;
+$warning: #ffba00 !default;
+$danger: #ff4949 !default;
+
+// Theme colors map
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger
+) !default;

assets/css/_partials/_maps/_utilities.scss

@@ -0,0 +1,13 @@
+// Utilities
+
+// property order
+$orders: (
+  first: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  last: 6,
+) !default;

assets/css/_partials/_mask.scss

@@ -6,11 +6,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
   background-color: rgba(0, 0, 0, 0);
+  @include z-index(0, -1);
 
   .blur & {
-    z-index: 100;
-    background-color: rgba(0, 0, 0, .25);
+    @include z-index(1);
+    background-color: rgba(0, 0, 0, 0.25);
   }
 }

assets/css/_partials/_scrollbar.scss

@@ -0,0 +1,36 @@
+/* Modern browsers with `scrollbar-*` support (high priority) */
+@supports (scrollbar-width: auto) {
+  * {
+    scrollbar-color: var(--#{$prefix}scrollbar-thumb-color) var(--#{$prefix}scrollbar-track-color);;
+    scrollbar-width: var(--#{$prefix}scrollbar-width);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+::-webkit-scrollbar {
+  height: var(--#{$prefix}scrollbar-width-legacy);
+  width: var(--#{$prefix}scrollbar-width-legacy);
+  overflow: visible;
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-corner {
+  background-color: var(--#{$prefix}scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--#{$prefix}scrollbar-thumb-color);
+  &:hover {
+    background-color: var(--#{$prefix}scrollbar-thumb-hover-color);
+  }
+}
+::-webkit-scrollbar-track {
+  background-color: var(--#{$prefix}scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 100px;
+}

assets/css/_partials/_single/_alert.scss

@@ -0,0 +1,44 @@
+.alert {
+  padding: 0.5rem 1rem;
+  margin-block: 1rem;
+  color: inherit;
+  border-left: 0.25em solid var(--#{$prefix}alert-border-color);
+
+  > :first-child {
+    margin-top: 0;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  .alert-title {
+    display: flex;
+    font-weight: 500;
+    align-items: center;
+    line-height: 1;
+    margin-bottom: 1rem;
+    color: var(--#{$prefix}alert-color);
+
+    > svg.icon {
+      width: initial;
+      height: initial;
+      margin-right: 0.5rem;
+    }
+  }
+
+  @each $type, $item in $alert-color-map {
+    &.alert-#{$type} {
+      --#{$prefix}alert-border-color: #{map-get($item, border-color)};
+      --#{$prefix}alert-color: #{map-get($item, color)};
+    }
+  }
+
+  [data-theme='dark'] & {
+    @each $type, $item in $alert-color-map-dark {
+      &.alert-#{$type} {
+        --#{$prefix}alert-border-color: #{map-get($item, border-color)};
+        --#{$prefix}alert-color: #{map-get($item, color)};
+      }
+    }
+  }
+}

assets/css/_partials/_single/_code.scss

@@ -0,0 +1,377 @@
+// inline code
+code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  color: $code-color;
+  background-color: rgba(175, 184, 193, 0.2);
+  text-decoration: inherit;
+  @include border-radius($global-border-radius);
+  @include overflow-wrap(break-word);
+  @include line-break(auto);
+
+  [data-theme='dark'] & {
+    color: $code-color-dark;
+    background-color: rgba(99, 110, 123, 0.4);
+  }
+}
+
+// indented code
+pre:not(.mermaid[data-processed='true']) {
+  margin: 0;
+  line-height: 1.45em;
+  padding: 0.5rem;
+  overflow: auto;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  @include border-radius($global-border-radius);
+  @include tab-size(4);
+
+  background-color: $code-background-color;
+
+  [data-theme='dark'] & {
+    background-color: $code-background-color-dark;
+  }
+
+  code {
+    padding: 0;
+    background-color: transparent;
+    @include border-radius(0);
+    @include max-content(min-width);
+
+    [data-theme='dark'] & {
+      background-color: transparent;
+    }
+  }
+
+  img {
+    min-height: 1em;
+    max-height: 1.2em;
+    vertical-align: text-bottom;
+  }
+}
+
+.highlight,
+.gist {
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+
+  .table-wrapper {
+    --#{$prefix}scrollbar-thumb-color: initial;
+    > table,
+    > table thead,
+    > table tr,
+    > table td {
+      margin: 0;
+      padding: 0;
+      border: none !important;
+      white-space: nowrap;
+    }
+  }
+}
+
+// block fenced code
+.highlight {
+  margin: 0.5rem 0;
+
+  > .chroma {
+    position: relative;
+
+    .code-header {
+      --#{$prefix}bg-code-header: #{darken($code-background-color, 3%)};
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: $global-font-family;
+      font-weight: bold;
+      line-height: 1.4em;
+      color: $code-info-color;
+      background-color: var(--#{$prefix}bg-code-header);
+      @include border-radius($global-border-radius);
+      @include transition(border-radius 0.2s ease);
+
+      // delayed loading table-wrapper
+      & + .table-wrapper {
+        max-height: 0;
+        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include details-transition-open;
+      }
+
+      [data-theme='dark'] & {
+        color: $code-info-color-dark;
+        --#{$prefix}bg-code-header: #{darken($code-background-color-dark, 3%)};
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .ellipses,
+      .edit,
+      .copy {
+        @extend .print-d-none;
+      }
+
+      .code-title {
+        width: 100%;
+        padding: 0.4rem;
+
+        .arrow {
+          padding: 0 0.2rem;
+          @include transition(transform 0.2s ease);
+        }
+
+        .title-inner {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: var(--#{$prefix}bg-code-header);
+          padding-inline: 1em;
+          max-width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          @include z-index(0, 1);
+        }
+      }
+
+      .code-title::after {
+        padding-left: 0.2rem;
+        content: 'Code';
+      }
+
+      .ellipses {
+        padding: 0.4rem;
+      }
+
+      .edit,
+      .copy {
+        display: none;
+        padding: 0.4rem;
+
+        &:hover {
+          cursor: pointer;
+          color: $global-link-hover-color;
+
+          [data-theme='dark'] & {
+            color: $global-link-hover-color-dark;
+          }
+        }
+      }
+
+      @each $type, $text in $code-type-map {
+        &.language-#{$type} .code-title::after {
+          content: $text;
+        }
+      }
+    }
+
+    // delayed loading table-wrapper
+    .table-wrapper {
+      overflow: hidden;
+      @include border-radius($global-border-radius);
+    }
+
+    table {
+      border-spacing: 0;
+      width: auto;
+      overflow: auto;
+      display: block;
+      background-color: $code-background-color;
+
+      [data-theme='dark'] & {
+        background-color: $code-background-color-dark;
+      }
+
+      td {
+        vertical-align: top;
+        padding: 0;
+      }
+
+      pre {
+        padding: 0.25rem;
+        outline-offset: -1px;
+        @include border-radius(0);
+      }
+
+      /* lineNumbersInTable=false */
+      .ln {
+        min-width: 1.25rem;
+      }
+
+      // ========== lineNumbersInTable ========== //
+      // line numbers
+      .lntd:first-child {
+        min-width: 1.6rem;
+        text-align: right;
+        position: sticky;
+        left: 0;
+
+        pre {
+          @include user-select(none);
+        }
+      }
+      // code content
+      .lntd:last-child {
+        width: 100%;
+
+        pre {
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
+        }
+        code {
+          width: 100%;
+        }
+      }
+      // ========== lineNumbersInTable ========== //
+    }
+
+    &.open {
+      .code-header {
+        --#{$prefix}bg-code-header: #{darken($code-background-color, 6%)};
+        @include border-radius($global-border-radius $global-border-radius 0 0);
+
+        [data-theme='dark'] & {
+          --#{$prefix}bg-code-header: #{darken($code-background-color-dark, 6%)};
+        }
+      }
+
+      .table-wrapper {
+        max-height: 100%;
+        @include details-transition-close;
+      }
+
+      .arrow {
+        @include transform(rotate(90deg));
+      }
+
+      .ellipses {
+        display: none;
+      }
+
+      .edit,
+      .copy {
+        display: inline;
+      }
+    }
+  }
+
+  /* LineHighlight */
+  .hl {
+    display: block;
+    background-color: $code-hightlight-color;
+    box-shadow: -0.5rem 0 0 $code-hightlight-color, 0.5rem 0 0 $code-hightlight-color;
+
+    [data-theme='dark'] & {
+      background-color: $code-hightlight-color-dark;
+      box-shadow: -0.5rem 0 0 $code-hightlight-color-dark, 0.5rem 0 0 $code-hightlight-color-dark;
+    }
+  }
+  /* GenericUnderline */
+  .gl {
+    text-decoration: underline;
+  }
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+  /* lineNumbersInTable=false */
+  .ln {
+    padding-right: 0.5rem;
+    display: inline-block;
+    min-width: 1.1rem;
+    text-align: right;
+  }
+  /* LineNumbers */
+  .lnt,
+  .ln {
+    color: $global-font-secondary-color;
+
+    [data-theme='dark'] & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+
+  // ========== Higtlight Color ========== //
+
+  /* Error */
+  .err {
+    font-style: italic;
+    border-bottom: 1px dotted $code-error-color;
+  }
+  /* GenericDeleted */
+  .gd {
+    background-color: #ffebe9;
+
+    [data-theme='dark'] & {
+      background-color: #78191b;
+    }
+  }
+  /* GenericInserted */
+  .gi {
+    background-color: #dafbe1;
+
+    [data-theme='dark'] & {
+      background-color: #1b4721;
+    }
+  }
+
+  @each $class, $color in $code-highlight-color-map {
+    .#{$class} {
+      color: $color;
+    }
+  }
+
+  [data-theme='dark'] & {
+    @each $class, $color in $code-highlight-color-map-dark {
+      .#{$class} {
+        color: $color;
+      }
+    }
+  }
+  // ========== Higtlight Color ========== //
+}
+
+// gist shortcode
+.gist {
+  .gist-file,
+  .gist-data,
+  .gist-meta {
+    border: none;
+  }
+
+  .gist-data {
+    background-color: transparent;
+  }
+
+  .gist-meta {
+    padding: 0.4rem 0.8rem;
+    @include link(false, false);
+    background-color: darken($code-background-color, 5%);
+
+    [data-theme='dark'] & {
+      background-color: darken($code-background-color-dark, 5%);
+    }
+  }
+
+  .table-wrapper {
+    .highlight {
+      background-color: $code-background-color;
+
+      [data-theme='dark'] & {
+        background-color: $code-background-color-dark;
+      }
+    }
+  }
+
+  [data-theme='dark'] & {
+    @import './github-dark-dimmed';
+  }
+}

assets/css/_partials/_single/_collections.scss

@@ -0,0 +1,230 @@
+// Collection Navigation
+.collection-card {
+  font-size: 0.875rem;
+  background-color: darken($global-background-color, 3%);
+  margin-block: 1rem;
+  padding: 1rem 1.25rem;
+  position: relative;
+  @include border-radius($global-border-radius * 1.5);
+  @include user-select(none);
+  @extend .print-d-none;
+
+  [data-theme='dark'] & {
+    background-color: lighten($global-background-color-dark, 3%);
+  }
+
+  &:has(.collection-nav-item:nth-child(2))::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0.75rem;
+    width: 1px;
+    height: 2rem;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);
+
+    [data-theme='dark'] & {
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.03),
+        rgba(255, 255, 255, 0.05) 50%,
+        rgba(255, 255, 255, 0.03) 100%
+      );
+    }
+  }
+
+  .collection-title {
+    @include link(false, false);
+  }
+
+  .collection-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+
+    &:not(:empty) {
+      margin-top: 0.5rem;
+    }
+
+    .collection-nav-item {
+      flex-grow: 1;
+      max-width: calc(50% - 0.5rem);
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      @include transition(all 0.3s ease-out);
+
+      &:only-child {
+        max-width: 100%;
+      }
+
+      i {
+        flex-shrink: 0;
+      }
+
+      span {
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &[rel='next'] {
+        text-align: right;
+      }
+
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
+
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
+    }
+  }
+}
+
+// Collection aside container
+.aside-collection {
+  position: sticky;
+  top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height));
+  box-sizing: border-box;
+  @include overflow-wrap(break-word);
+  @include blur;
+  @extend .print-d-none;
+}
+
+// Collection List
+.collection-details {
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+
+  &.open {
+    .collection-summary {
+      background-color: darken($global-background-color, 4%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 4%);
+      }
+    }
+  }
+
+  .collection-summary {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+    padding: 0.2em 0.5em;
+    background-color: darken($global-background-color, 3%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 3%);
+    }
+    
+    > i.fa-layer-group {
+      flex-shrink: 0;
+    }
+
+    .collection-name {
+      flex-grow: 1;
+      font-weight: bold;
+      font-size: $collection-title-font-size;
+
+      &::before {
+        content: attr(title) '・';
+      }
+    }
+
+    .collection-count {
+      flex-shrink: 0;
+      color: var(--#{$prefix}secondary);
+    }
+
+    .details-icon {
+      flex-shrink: 0;
+    }
+
+    @include user-select(none);
+  }
+
+  .collection-content {
+    font-size: $collection-list-font-size;
+    background-color: darken($global-background-color, 2%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 2%);
+    }
+
+    .collection-list {
+      margin: 0;
+      padding-inline: 1.6em 0.8em;
+      padding-block: 0.4em;
+      text-indent: -0.8em;
+      list-style: none;
+      overflow-y: scroll;
+      max-height: 60vh;
+      @include scrollbar-width(none, 0);
+
+      .collection-item > a::before,
+      .collection-item > span::before {
+        content: '|';
+        font-weight: 600;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      .collection-item > .active {
+        font-weight: bold;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+
+        &::before {
+          color: $single-link-hover-color;
+  
+          [data-theme='dark'] & {
+            color: $single-link-hover-color-dark;
+          }
+        }
+      }
+    }
+
+    .collection-nav-simple {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5em;
+      background-color: darken($global-background-color, 3%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 3%);
+      }
+
+      a.collection-nav-item {
+        padding-inline: 2px;
+        border-radius: 50%;
+        @include transition(background-color 0.3s ease-out);
+
+        &:hover {
+          background-color: darken($global-background-color, 10%);
+
+          [data-theme='dark'] & {
+            background-color: lighten($global-background-color-dark, 10%);
+          }
+        }
+      }
+
+      > i.collection-nav-item {
+        padding: 4px 2px;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

assets/css/_partials/_single/_comment.scss

@@ -0,0 +1,8 @@
+>#comments {
+  padding: 2rem 0;
+  @extend .print-d-none;
+
+  iframe {
+    width: 100%;
+  }
+}

assets/css/_partials/_single/_fixit-decryptor.scss

@@ -0,0 +1,120 @@
+.fixit-decryptor-container {
+  font-family: $global-font-family;
+  text-align: center;
+  margin-block: var(--fixit-decryptor-margin-block);
+
+  .fixit-decryptor-loading {
+    vertical-align: middle;
+  }
+
+  .fixit-decryptor-input,
+  .fixit-decryptor-btn,
+  .fixit-encryptor-btn {
+    display: none;
+    box-sizing: border-box;
+    outline: none;
+    color: $global-font-color;
+    border: 1px solid darken($global-border-color, 15%);
+    border-radius: $global-border-radius;
+    @include transition(all 0.1s ease-out);
+    box-shadow: 0px 0px 5px 0px darken($global-border-color, 15%);
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: darken($global-link-hover-color, 6%);
+      border-color: $global-link-hover-color;
+      box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
+
+      [data-theme='dark'] & {
+        color: lighten($global-link-hover-color-dark, 6%);
+        border-color: $global-link-hover-color-dark;
+        box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $global-font-color-dark;
+      border-color: lighten($global-border-color-dark, 15%);
+      box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
+    }
+  }
+
+  .fixit-decryptor-input {
+    width: calc(clamp(50%, 450px, 100%) - 100px);
+    height: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    background-color: $global-background-color;
+
+    [data-theme='dark'] & {
+      background-color: $global-background-color-dark;
+    }
+  }
+
+  .fixit-decryptor-btn,
+  .fixit-encryptor-btn {
+    cursor: pointer;
+    @include transition(all 0.1s ease-out);
+    padding: 0.8rem 1rem;
+
+    background-color: $header-background-color;
+
+    [data-theme='dark'] & {
+      background-color: $header-background-color-dark;
+    }
+  }
+
+  .fixit-encryptor-btn {
+    display: none;
+  }
+}
+
+fixit-encryptor {
+  &.initialized > .fixit-decryptor-container {
+    .fixit-decryptor-input,
+    .fixit-decryptor-btn {
+      display: inline-block;
+    }
+
+    .fixit-decryptor-loading {
+      display: none;
+    }
+  }
+
+  cipher-text {
+    display: none !important;
+  }
+}
+
+// fixit-encryptor for for the encrypted pages
+article fixit-encryptor {
+  .fixit-decryptor-container {
+    --fixit-decryptor-margin-block: 2rem;
+  }
+  &.decrypted > .fixit-decryptor-container {
+    .fixit-decryptor-loading,
+    .fixit-decryptor-input,
+    .fixit-decryptor-btn {
+      display: none;
+    }
+
+    .fixit-encryptor-btn {
+      display: inline-block;
+    }
+  }
+}
+
+// fixit-encryptor shortcodes
+#content fixit-encryptor {
+  .fixit-decryptor-container {
+    --fixit-decryptor-margin-block: 1rem;
+  }
+  &.decrypted > .fixit-decryptor-container {
+    display: none;
+  }
+}
+
+.encrypted-hidden {
+  display: none !important;
+}

assets/css/_partials/_single/_footer.scss

@@ -1,11 +1,15 @@
 .post-footer {
-  margin-top: 3rem;
+  margin: 2rem 0;
+
+  &~.post-reward {
+    margin-block: -2rem 0;
+  }
 
   .post-info {
     border-bottom: 1px solid $global-border-color;
-    padding: 1rem 0 0.3rem;
+    padding: 0.3rem 0;
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       border-bottom: 1px solid $global-border-color-dark;
     }
 
@@ -17,7 +21,7 @@
         font-size: 0.8em;
         color: $global-font-secondary-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           color: $global-font-secondary-color-dark;
         }
 
@@ -28,7 +32,7 @@
         font-size: 0.8em;
         color: $global-font-secondary-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           color: $global-font-secondary-color-dark;
         }
 
@@ -37,12 +41,19 @@
 
       .post-info-md {
         font-size: 0.8rem;
-        width: 8rem;
+        width: fit-content;
 
         @include link(false, false);
+
+        >span:not(:first-child)::before {
+          content: '|';
+          margin-left: 0.25rem;
+          margin-right: 0.25rem;
+        }
       }
 
       .post-info-share {
+        @extend .print-d-none;
         a * {
           vertical-align: text-bottom;
         }
@@ -51,10 +62,14 @@
   }
 
   .post-info-more {
-    padding: 0.3rem 0 1rem;
+    padding: 0.3rem 0;
     display: flex;
     justify-content: space-between;
     font-size: 0.9rem;
+
+    section:last-child {
+      @extend .print-d-none;
+    }
   }
 
   .post-tags {
@@ -63,36 +78,39 @@
     * {
       display: inline;
     }
+
+    @include link(true, true);
+
+    .post-tag:not(:last-child)::after {
+      content: ',';
+      margin-right: 0.25rem;
+    }
   }
 
   .post-nav {
-    &::before,
-    &::after {
-      content: ' ';
-      display: table;
-    }
+    display: flex;
+    justify-content: space-between;
+    gap: 1.5rem;
+    padding-block: 0.5rem;
+    @extend .print-d-none;
 
-    & a.prev,
-    & a.next {
+    .post-nav-item {
+      flex: 1;
       font-size: 1rem;
       font-weight: 600;
       @include transition(all 0.3s ease-out);
-    }
 
-    & a.prev {
-      float: left;
-    }
+      &[rel='next'] {
+        text-align: right;
+      }
 
-    & a.prev:hover {
-      @include transform(translateX(-4px));
-    }
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
 
-    & a.next {
-      float: right;
-    }
-
-    & a.next:hover {
-      @include transform(translateX(4px));
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
     }
   }
 }

assets/css/_partials/_single/_github-dark-dimmed.scss

@@ -0,0 +1,175 @@
+/**
+ * GitHub Dark Dimmed
+ * Copyright (c) 2012 - current GitHub, Inc.
+ * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+ * Maintained by @Lruihao for FixIt theme
+ * Created on 2022-03-01
+ * Updated on 2024-07-14
+ */
+& {
+  // Blob colors
+  --#{$prefix}color-blob-num: #778491;
+  --#{$prefix}color-blob-code-inner: #c5d1de;
+  // Syntax colors
+  --#{$prefix}color-prettylights-syntax-comment: #768390;
+  --#{$prefix}color-prettylights-syntax-constant: #6cb6ff;
+  --#{$prefix}color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+  --#{$prefix}color-prettylights-syntax-entity: #dcbdfb;
+  --#{$prefix}color-prettylights-syntax-storage-modifier-import: #adbac7;
+  --#{$prefix}color-prettylights-syntax-entity-tag: #8ddb8c;
+  --#{$prefix}color-prettylights-syntax-keyword: #f47067;
+  --#{$prefix}color-prettylights-syntax-string: #96d0ff;
+  --#{$prefix}color-prettylights-syntax-variable: #f69d50;
+  --#{$prefix}color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  --#{$prefix}color-prettylights-syntax-brackethighlighter-angle: #768390;
+  --#{$prefix}color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  --#{$prefix}color-prettylights-syntax-invalid-illegal-bg: #922323;
+  --#{$prefix}color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  --#{$prefix}color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  --#{$prefix}color-prettylights-syntax-string-regexp: #8ddb8c;
+  --#{$prefix}color-prettylights-syntax-markup-list: #eac55f;
+  --#{$prefix}color-prettylights-syntax-markup-heading: #316dca;
+  --#{$prefix}color-prettylights-syntax-markup-italic: #adbac7;
+  --#{$prefix}color-prettylights-syntax-markup-bold: #adbac7;
+  --#{$prefix}color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  --#{$prefix}color-prettylights-syntax-markup-deleted-bg: #78191b;
+  --#{$prefix}color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  --#{$prefix}color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  --#{$prefix}color-prettylights-syntax-markup-changed-text: #ffddb0;
+  --#{$prefix}color-prettylights-syntax-markup-changed-bg: #682d0f;
+  --#{$prefix}color-prettylights-syntax-markup-ignored-text: #adbac7;
+  --#{$prefix}color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  --#{$prefix}color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  --#{$prefix}color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+
+  .blob-num {
+    color: var(--#{$prefix}color-blob-num);
+  }
+  .blob-code-inner {
+    color: var(--#{$prefix}color-blob-code-inner);
+  }
+
+  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: var(--#{$prefix}color-prettylights-syntax-comment);
+  }
+
+  .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
+  .pl-s .pl-v /* string variable */ {
+    color: var(--#{$prefix}color-prettylights-syntax-constant);
+  }
+
+  .pl-e /* entity */,
+  .pl-en /* entity.name */ {
+    color: var(--#{$prefix}color-prettylights-syntax-entity);
+  }
+
+  .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+  .pl-s .pl-s1 /* string source */ {
+    color: var(--#{$prefix}color-prettylights-syntax-storage-modifier-import);
+  }
+
+  .pl-ent /* entity.name.tag, markup.quote */ {
+    color: var(--#{$prefix}color-prettylights-syntax-entity-tag);
+  }
+
+  .pl-k /* keyword, storage, storage.type */ {
+    color: var(--#{$prefix}color-prettylights-syntax-keyword);
+  }
+
+  .pl-s /* string */,
+  .pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+  .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+  .pl-sr /* string.regexp */,
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */,
+  .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+  .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+    color: var(--#{$prefix}color-prettylights-syntax-string);
+  }
+
+  .pl-v /* variable */,
+  .pl-smw /* sublimelinter.mark.warning */ {
+    color: var(--#{$prefix}color-prettylights-syntax-variable);
+  }
+
+  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: var(--#{$prefix}color-prettylights-syntax-brackethighlighter-unmatched);
+  }
+
+  .pl-ii /* invalid.illegal */ {
+    color: var(--#{$prefix}color-prettylights-syntax-invalid-illegal-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-invalid-illegal-bg);
+  }
+
+  .pl-c2 /* carriage-return */ {
+    color: var(--#{$prefix}color-prettylights-syntax-carriage-return-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-carriage-return-bg);
+  }
+
+  .pl-c2::before /* carriage-return */ {
+    content: '^M';
+  }
+
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+    font-weight: bold;
+    color: var(--#{$prefix}color-prettylights-syntax-string-regexp);
+  }
+
+  .pl-ml /* markup.list */ {
+    color: var(--#{$prefix}color-prettylights-syntax-markup-list);
+  }
+
+  .pl-mh /* markup.heading */,
+  .pl-mh .pl-en /* markup.heading entity.name */,
+  .pl-ms /* meta.separator */ {
+    font-weight: bold;
+    color: var(--#{$prefix}color-prettylights-syntax-markup-heading);
+  }
+
+  .pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: var(--#{$prefix}color-prettylights-syntax-markup-italic);
+  }
+
+  .pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: var(--#{$prefix}color-prettylights-syntax-markup-bold);
+  }
+
+  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: var(--#{$prefix}color-prettylights-syntax-markup-deleted-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: var(--#{$prefix}color-prettylights-syntax-markup-inserted-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-markup-inserted-bg);
+  }
+
+  .pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: var(--#{$prefix}color-prettylights-syntax-markup-changed-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-markup-changed-bg);
+  }
+
+  .pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: var(--#{$prefix}color-prettylights-syntax-markup-ignored-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-markup-ignored-bg);
+  }
+
+  .pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: var(--#{$prefix}color-prettylights-syntax-meta-diff-range);
+  }
+
+  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: var(--#{$prefix}color-prettylights-syntax-brackethighlighter-angle);
+  }
+
+  .pl-sg /* sublimelinter.gutter-mark */ {
+    color: var(--#{$prefix}color-prettylights-syntax-sublimelinter-gutter-mark);
+  }
+
+  .pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: var(--#{$prefix}color-prettylights-syntax-constant-other-reference-link);
+  }
+}

assets/css/_partials/_single/_reward.scss

@@ -0,0 +1,97 @@
+.post-reward {
+  padding: 1rem;
+  text-align: center;
+  @extend .print-d-none;
+
+  &:has(.reward-ways:empty) {
+    display: none;
+  }
+
+  .comment {
+    margin: 0.5rem 0;
+    font-weight: 500;
+  }
+
+  .reward-ways {
+    display: none;
+  }
+
+  .reward-input:checked~.reward-ways {
+    display: block;
+    padding-top: 20px;
+
+    div {
+      display: inline-block;
+      @include user-select(none);
+  
+      span {
+        display: block;
+      }
+  
+      &:hover span[data-animation] {
+        animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
+        // The animation may affect :hover of img in dark mode
+        pointer-events: none;
+      }
+  
+      img {
+        display: inline-block;
+        margin: 0.8em 2em 0;
+        max-width: 100%;
+        width: $reward-img-width;
+      }
+    }
+
+    // `fixed` mode only supports desktop
+    &[data-mode='fixed'] {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 1rem;
+      background-color: $global-background-color;
+      @include z-index(2);
+      @include border-radius($global-border-radius);
+      @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2));
+
+      [data-theme='dark'] & {
+        background-color: $global-background-color-dark;
+        @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
+      }
+    }
+  }
+
+  .reward-button {
+    display: inline-block;
+    box-sizing: border-box;
+    cursor: pointer;
+    outline: none;
+    color: lighten($reward-color, 5%);
+    border: 2px solid lighten($reward-color, 10%);
+    border-radius: $global-border-radius;
+    padding: 0.6rem 1rem;
+    background-color: $global-background-color;
+    vertical-align: text-top;
+    line-height: 1rem;
+    @include transition(all 0.3s ease-out);
+
+    &:active,
+    &:hover {
+      color: #ffffff;
+      border-color: $reward-color;
+      background-color: $reward-color;
+
+      [data-theme='dark'] & {
+        color: #ffffff;
+        border-color: $reward-color-dark;
+        background-color: $reward-color-dark;
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $reward-color;
+      border-color: lighten($reward-color, 5%);
+      background-color: $global-background-color-dark;
+    }
+  }
+}

assets/css/_partials/_single/_toc.scss

@@ -0,0 +1,249 @@
+.toc {
+  .toc-title {
+    font-size: $toc-title-font-size;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .toc-content {
+    font-size: $toc-content-font-size;
+
+    ul {
+      text-indent: -0.8em;
+      padding-left: 0.8em;
+      list-style: none;
+
+      a:first-child::before {
+        content: '|';
+        font-weight: bolder;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      ul {
+        padding-left: 1em;
+      }
+    }
+
+    ol {
+      margin: 0;
+      padding-left: 2.25em;
+
+      ol {
+        padding-left: 1.25em;
+      }
+
+      li:has(> a:hover)::marker {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+  }
+
+  ruby {
+    background: $code-background-color;
+
+    rt {
+      color: $global-font-secondary-color;
+    }
+
+    [data-theme='dark'] & {
+      background: $code-background-color-dark;
+
+      rt {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+#toc-auto {
+  display: block;
+  position: sticky;
+  top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height));
+  box-sizing: border-box;
+  visibility: hidden;
+  @include overflow-wrap(break-word);
+  @include blur;
+  @extend .print-d-none;
+
+  [data-header-desktop='normal'] & {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+
+  .toc-title {
+    margin-block: 0 0.5em;
+    cursor: pointer;
+    @include user-select(none);
+
+    &::before {
+      content: '|';
+      font-weight: bolder;
+      margin-right: 0.5em;
+      position: relative;
+      bottom: 2px;
+      color: $global-border-color;
+
+      [data-theme='dark'] & {
+        color: $global-border-color-dark;
+      }
+    }
+
+    i.toc-icon {
+      @include transition(transform 0.2s ease);
+    }
+  }
+
+  &.toc-hidden i.toc-icon {
+    @include transform(rotate(-90deg));
+    @include transition(transform 0.2s ease);
+  }
+
+  .toc-content {
+    overflow-y: scroll;
+    max-height: calc(100vh - #{2*$header-height});
+    @include scrollbar-width(none, 0);
+
+    &.always-active ul,
+    &.always-active ol {
+      display: block;
+    }
+
+    > nav > ul {
+      margin: 0;
+    }
+
+    li.has-active {
+      &::marker {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      &:has(> .active)::marker {
+        font-weight: bold;
+      }
+
+      > a {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+
+    // for unordered list automatically collapsed
+    ul {
+      ul {
+        display: none;
+      }
+
+      .has-active > ul {
+        display: block;
+      }
+
+      a.active::before {
+        color: $single-link-hover-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-hover-color-dark;
+        }
+      }
+    }
+
+    // for ordered list automatically collapsed
+    ol {
+      ol {
+        display: none;
+      }
+
+      .has-active > ol {
+        display: block;
+      }
+    }
+
+    a.active {
+      font-weight: bold;
+    }
+  }
+}
+
+#toc-static {
+  display: none;
+  margin: 0.8em 0;
+
+  &[data-kept='true'] {
+    display: block;
+  }
+
+  .toc-title {
+    display: flex;
+    justify-content: space-between;
+    line-height: 2em;
+    padding: 0 0.75em;
+    background: darken($code-background-color, 3%);
+
+    [data-theme='dark'] & {
+      background: darken($code-background-color-dark, 6%);
+    }
+  }
+
+  .toc-content {
+    background-color: $code-background-color;
+
+    > nav {
+      > ul {
+        margin: 0;
+        padding: 0.4em 1em 0.4em 1.8em;
+
+        a:hover {
+          font-weight: bold;
+
+          &::before {
+            color: $single-link-hover-color;
+  
+            [data-theme='dark'] & {
+              color: $single-link-hover-color-dark;
+            }
+          }
+        }
+      }
+      
+      > ol {
+        margin: 0;
+        padding: 0.4em 1em 0.4em 2.25em;
+
+        li:has(> a:hover)::marker,
+        a:hover {
+          font-weight: bold;
+        }
+      }
+    }
+
+    [data-theme='dark'] & {
+      background-color: $code-background-color-dark;
+    }
+  }
+
+  &.open {
+    .toc-title {
+      background: darken($code-background-color, 6%);
+
+      [data-theme='dark'] & {
+        background: darken($code-background-color-dark, 3%);
+      }
+    }
+  }
+}

assets/css/_partials/_widgets.scss

@@ -0,0 +1,6 @@
+@import '_widgets/cookieconsent';
+@import '_widgets/fixed-button';
+@import '_widgets/github-corner';
+@import '_widgets/noscript-warning';
+@import '_widgets/reading-progress';
+@import '_widgets/typeit';

assets/css/_partials/_widgets/_cookieconsent.scss

@@ -2,14 +2,16 @@
   .cc-btn {
     color: $global-font-color;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: #ccc;
     }
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       color: $global-font-color;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: #fff;
       }
     }

assets/css/_partials/_widgets/_fixed-button.scss

@@ -1,46 +1,44 @@
-#fixed-buttons {
-  display: none;
-}
-
 .fixed-button {
-  display: none;
-  z-index: 100;
   position: fixed;
   right: 1.5rem;
   font-size: 1rem;
-  line-height: 1.3rem;
-  padding: .6rem .6rem;
+  line-height: 1.5rem;
+  padding: 0.5rem 0.625rem;
   color: $global-font-secondary-color;
-  background: $header-background-color;
-  @include border-radius(2rem);
+  background-color: $header-background-color;
+  @include z-index(1);
+  @include border-radius(1.25rem);
   @include transition(color 0.4s ease);
-
   @include blur;
+  @extend .print-d-none;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     color: $global-font-color;
     cursor: pointer;
   }
 
-  &:active, &:focus, &:hover {
+  &:active,
+  &:focus,
+  &:hover {
     outline: none;
   }
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     color: $global-font-secondary-color-dark;
-    background: $header-background-color-dark;
+    background-color: $header-background-color-dark;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: $global-font-color-dark;
     }
   }
 }
 
-#back-to-top {
-  display: block;
+.back-to-top {
   bottom: 1.5rem;
 }
 
-#view-comments {
+.view-comments {
   bottom: 4.5rem;
 }

assets/css/_partials/_widgets/_github-corner.scss

@@ -0,0 +1,47 @@
+@keyframes octocat-wave {
+  0%,
+  100% {
+    @include transform(rotate(0));
+  }
+  20%,
+  60% {
+    @include transform(rotate(-25deg));
+  }
+  40%,
+  80% {
+    @include transform(rotate(10deg));
+  }
+}
+
+.github-corner {
+  position: fixed;
+  top: 0;
+  @include z-index(2);
+  @extend .print-d-none;
+
+  :hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+  svg {
+    width: $header-height;
+    height: $header-height;
+    border: 0;
+    color: $github-corner-color;
+    fill: $github-corner-fill;
+
+    [data-theme='dark'] & {
+      color: $github-corner-color-dark;
+      fill: $github-corner-fill-dark;
+    }
+  }
+  &.left {
+    left: 0;
+
+    svg {
+      @include transform(scale(-1, 1));
+    }
+  }
+  &.right {
+    right: 0;
+  }
+}

assets/css/_partials/_widgets/_noscript-warning.scss

@@ -0,0 +1,16 @@
+.noscript-warning {
+  background-color: var(--#{$prefix}danger);
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  position: fixed;
+  text-align: center;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  @include z-index(2);
+
+  [data-theme='dark'] & {
+    background-color: var(--#{$prefix}danger-dark);
+  }
+}

assets/css/_partials/_widgets/_reading-progress.scss

@@ -0,0 +1,13 @@
+.reading-progress-bar {
+  --progress: 0;
+  height: var(--progress-h, 2px);
+  width: var(--progress);
+  background-color: var(--bg-progress, var(--#{$prefix}info));
+  position: fixed;
+  @include z-index(2);
+  @extend .print-d-none;
+  
+  [data-theme="dark"] & {
+    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
+  }
+}

assets/css/_partials/_widgets/_typeit.scss

@@ -0,0 +1,13 @@
+.typeit {
+  .highlight {
+    padding: 0.375rem;
+    font-size: 0.875rem;
+    font-family: $code-font-family;
+    font-weight: bold;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+
+  --ti-cursor-font-family: #{$global-font-family};
+  --ti-cursor-transform: translateX(0);
+}

assets/css/_shortcodes/_admonition.scss

@@ -0,0 +1,78 @@
+.admonition {
+  position: relative;
+  margin: 1rem 0;
+  padding: 0 0.75rem;
+  border-left: .25rem solid;
+  overflow: hidden;
+  @include border-radius($global-border-radius);
+
+  .admonition-title {
+    font-weight: bold;
+    margin: 0 -0.75rem;
+    padding: 0.25rem 1.8rem;
+    border-bottom: 1px solid;
+    @include border-radius(0);
+  }
+
+  .admonition-content {
+    padding: 0.5rem 0;
+    
+    // for extended alert syntax
+    > p {
+      margin: 0;
+    }
+    // title-only alert
+    &:empty {
+      display: none;
+    }
+  }
+
+  i.icon {
+    font-size: 0.85rem;
+    position: absolute;
+    top: 0.6rem;
+    left: 0.4rem;
+  }
+
+  i.details-icon {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.3rem;
+  }
+  
+  background-color: var(--#{$prefix}admonition-bg-color);
+  border-left-color: var(--#{$prefix}admonition-color);
+
+  > .admonition-title {
+    border-bottom-color: var(--#{$prefix}admonition-bg-color);
+    background-color: var(--#{$prefix}admonition-bg-color-collapsed);
+
+    i.icon {
+      color: var(--#{$prefix}admonition-color);
+    }
+  }
+
+  &.open > .admonition-title {
+    background-color: var(--#{$prefix}admonition-bg-color);
+  }
+
+  // default admonition type is note
+  --#{$prefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)};
+  --#{$prefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)};
+  --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)};
+
+  // set color for each admonition type
+  @each $type, $item in $admonition-color-map {
+    @if $type != 'note' {
+      &.#{$type} {
+        --#{$prefix}admonition-color: #{map-get($item, color)};
+        --#{$prefix}admonition-bg-color: #{map-get($item, bg-color)};
+        --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)};
+      }
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0.75rem;
+  }
+}

assets/css/_shortcodes/_bilibili.scss

@@ -1,9 +1,9 @@
 .bilibili {
   position: relative;
   width: 100%;
-  height: 0;
-  padding-bottom: 75%;
-  margin: 3% auto;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  margin: 1rem auto;
   text-align: center;
 
   iframe {

assets/css/_shortcodes/_cardlink.scss

@@ -0,0 +1,116 @@
+/**
+ * Card link style
+ * @author  @Lruihao https://lruihao.cn
+ */
+
+.card-link {
+  position: relative;
+  display: block;
+  margin: 0.5rem auto;
+  box-sizing: border-box;
+  width: clamp(50%, 400px, 100%);
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: none;
+  border: none;
+  @include border-radius(0.75rem);
+}
+
+.cl- {
+  &backdrop {
+    position: absolute;
+    top: 0.75rem;
+    bottom: 0.75rem;
+    left: 0;
+    right: 0;
+    background-image: var(--cl-bg-url);
+    background-repeat: no-repeat;
+    filter: blur(0.5rem);
+    opacity: 0.5;
+    background-size: contain;
+    background-position: center;
+  }
+
+  &content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background-color: rgba(245, 245, 245, 0.88);
+  }
+
+  &text {
+    overflow: hidden;
+  }
+
+  &title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    max-height: calc(1rem * 1.25 * 2);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.25;
+    color: $global-font-color;
+  }
+
+  &meta {
+    display: flex;
+    align-items: center;
+    margin-top: 0.25rem;
+    font-size: 0.825rem;
+    color: $global-font-secondary-color;
+  }
+
+  &icon-link {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    margin-right: 0.25rem;
+  }
+
+  &url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &shortcut-icon {
+    width: 4rem;
+    height: 4rem;
+    flex-shrink: 0;
+    margin-left: 0.25rem;
+
+    &:is(i) {
+      text-align: center;
+      font-size: 3rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &shortcut-image {
+    width: 4rem;
+    height: 4rem !important;
+    flex-shrink: 0;
+    margin-left: 0.25rem;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  [data-theme='dark'] & {
+    &content {
+      background-color: rgba(61, 62, 65, 0.88);
+    }
+
+    &title {
+      color: $global-font-color-dark;
+    }
+
+    &meta {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+}