chore(release): 0.4.3

feat(code): add fullscreen functionality for code blocks (#707 )
feat(code): add download button for code blocks and related functionality (#706 )
2026-08-28 17:22:41 +00:00 · 2026-03-03 16:17:30 +08:00 · 2026-03-03 16:15:01 +08:00 · 2026-03-02 17:34:57 +08:00 · 2026-03-02 14:56:09 +08:00 · 2026-03-02 11:42:17 +08:00
202 changed files with 4000 additions and 2559 deletions
@@ -6,7 +6,7 @@

 FixIt 是一个面向 Hugo 静态网站生成器的现代化、响应式主题。项目基于以下技术栈：

- **Hugo**: 静态网站生成器（≥ 0.147.7）
+- **Hugo**: 静态网站生成器（≥ 0.156.0）
 - **SCSS**: CSS 预处理器，用于样式开发
 - **JavaScript**: ES6+ 标准，用于前端交互功能
 - **Go Templates**: Hugo 模板引擎
@@ -90,7 +90,7 @@ FixIt/
 2. **Mixin 使用**: 提高代码复用性

   ```scss
-   @include border-radius($global-border-radius);
+   @include border-radius;
   @include transition(all 0.2s ease);
   @include blur;
   ```
@@ -184,7 +184,7 @@ class FixIt {
 4. **循环遍历**: 合理使用 range

   ```go-html-template
-   {{- range $index, $value := .Site.Languages -}}
+   {{- range $index, $value := .Pages -}}
     <!-- 处理逻辑 -->
   {{- end -}}
   ```
@@ -211,7 +211,7 @@ class FixIt {

 1. **前置要求**:
   - Node.js (≥ 20.0.0)
-   - Hugo Extended (≥ 0.147.7)
+   - Hugo Extended (≥ 0.156.0)
   - pnpm (包管理器)

 2. **开发命令**:
@@ -22,11 +22,16 @@ jobs:
          node-version-file: .nvmrc
          cache: pnpm

+      - name: Install fixit-cli
+        run: pnpm install -g fixit-cli
      - name: Split theme configuration
        run: |
-          pnpx fixit-cli split hugo.toml
-          tar -zcvf config.tar.gz config
-          tree config
+          fixit split
+          tar -zcvf config_toml.tar.gz config
+          rm -rf config
+          fixit split -y
+          tar -zcvf config_yaml.tar.gz config
+          rm -rf config

      - name: Generate release notes
        run: |
@@ -40,4 +45,5 @@ jobs:
          draft: true
          body_path: CHANGELOG.md
          files: |
-            config.tar.gz
+            config_toml.tar.gz
+            config_yaml.tar.gz
@@ -29,3 +29,4 @@ $RECYCLE.BIN/
 .directory

 CHANGELOG.md
+.stash/
@@ -2,6 +2,7 @@
  "recommendations": [
    "budparr.language-hugo-vscode",
    "kaellarkin.hugo-shortcode-syntax",
-    "eliostruyf.vscode-hugo-themer"
+    "lruihao.hugo-partials-refs",
+    "tamasfe.even-better-toml"
  ]
 }
@@ -7,7 +7,7 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
 Before you start contributing, make sure you have the following tools installed:

 - **Node.js** (>= 20.0.0) - Required for package management and build tools
- **Hugo Extended** (>= 0.147.7) - The static site generator
+- **Hugo Extended** (>= 0.156.0) - The static site generator
 - **pnpm** - Package manager (recommended)

 You can check your installed versions:
@@ -26,7 +26,7 @@

 [![Build](https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Build&logo=vercel)](https://demo.fixit.lruihao.cn/)
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat&label=Release&logo=github&include_prereleases)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.147.7-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.156.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat&label=License)](/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/hugo-fixit/FixIt?style=social)](https://github.com/hugo-fixit/FixIt)
 [![Gitee star of FixIt](https://gitee.com/lruihao/FixIt/badge/star.svg)](https://gitee.com/lruihao/FixIt/stargazers)
@@ -147,6 +147,7 @@ Click the following links to generate a new repository with template:
 - **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
+- **File tree** 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
@@ -26,7 +26,7 @@

 [![Build](https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Build&logo=vercel)](https://demo.fixit.lruihao.cn/)
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat&label=Release&logo=github&include_prereleases)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.147.7-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.156.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat&label=License)](/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/hugo-fixit/FixIt?style=social)](https://github.com/hugo-fixit/FixIt)
 [![Gitee star of FixIt](https://gitee.com/lruihao/FixIt/badge/star.svg)](https://gitee.com/lruihao/FixIt/stargazers)
@@ -147,6 +147,7 @@ pnpx fixit-cli create my-blog
 - 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
 - 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
 - 支持 **Timeline** 的代码块扩展语法和 shortcode
+- 支持 **文件树** 的代码块扩展语法和 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
@@ -2,21 +2,14 @@

 ## Supported Versions

-We actively maintain and provide security updates for the following versions:
+Only the latest version receives active maintenance and security updates:

-### Current Versions
-
-| Version | Hugo Version      | Supported          | Status         |
-| :-----: | :---------------: | :----------------: | :------------: |
-| 0.4.x   | >= 0.147.7        | :white_check_mark: | Latest (Alpha) |
-| 0.3.x   | 0.112.0 ~ 0.146.0 | :white_check_mark: | Stable         |
-
-### Legacy and Transitional Versions
-
-| Version | Hugo Version     | LoveIt Compatibility | Supported |
-| :-----: | :--------------: | :------------------: | :-------: |
-| 0.1.x   | Unknown          | :white_check_mark:   | :x:       |
-| 0.2.x   | 0.62.0 ~ 0.110.0 | :white_check_mark:   | :x:       |
+| Version | Hugo Version      | LoveIt Compat      | Supported          |
+| :-----: | :---------------: | :----------------: | :----------------: |
+| 0.4.x   | 0.147.7 ~ latest  | N/A                | :white_check_mark: |
+| 0.3.x   | 0.112.0 ~ 0.146.0 | N/A                | :x:                |
+| 0.2.x   | 0.62.0 ~ 0.110.0  | :white_check_mark: | :x:                |
+| 0.1.x   | Unknown           | :white_check_mark: | :x:                |

 ## Security Considerations

@@ -0,0 +1,72 @@
+[
+  {
+    "name": "src-json",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "components",
+        "type": "dir",
+        "children": [
+          {
+            "name": "Header.tsx",
+            "type": "file"
+          },
+          {
+            "name": "Footer.tsx",
+            "type": "file"
+          }
+        ]
+      },
+      {
+        "name": "utils",
+        "type": "dir",
+        "children": [
+          {
+            "name": "helper.ts",
+            "type": "file"
+          },
+          {
+            "name": "validator.ts",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "public",
+    "type": "dir",
+    "children": [
+      {
+        "name": "favicon.ico",
+        "type": "file"
+      },
+      {
+        "name": "images",
+        "type": "dir",
+        "children": [
+          {
+            "name": "logo.png",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "package.json",
+    "type": "file"
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": "tsconfig.json",
+    "type": "file"
+  }
+]
@@ -39,7 +39,7 @@ This article comprehensively tests the **Alerts** Markdown syntax extension and
 > [!NOTE] FixIt
 > A clean, elegant but advanced Hugo theme.

-> [!TIP] This is a title-only alert
+> [!TIP] This is a title-only alert.

 ### Foldable Alerts

@@ -59,6 +59,11 @@ Alerts can be nested in multiple levels:
 > > [!todo] Yes! They can be nested.
 > > > [!example] You can even use multiple layers of nesting.

+### Content-only Alerts
+
+> [!TIP]~
+> This is a content-only alert without a title.
+
 ### Supported types

 > [!note]+
@@ -150,7 +150,7 @@ function add(a, b) {

 ## Code block inside other blocks

-> [!NOTE]-
+> [!NOTE]+
 >
 > ```js {mode="classic"}
 > function add(a, b) {
@@ -158,6 +158,14 @@ function add(a, b) {
 > }
 > ```

+{{< typeit code=java >}}
+public class HelloWorld {
+    public static void main(String []args) {
+        System.out.println("Hello World");
+    }
+}
+{{< /typeit >}}
+
 {{< details "Code Block inside Details" >}}

 ```js {mode="classic"}
@@ -1,5 +1,5 @@
 ---
-title: Exact Color Match Test
+title: Color Preview Test
 date: 2025-08-17T17:20:00+08:00
 collections:
  - Tests
@@ -9,6 +9,10 @@ tags:
  - Color Preview
 ---

+This post is a test post to preview the color syntax in Markdown.
+
+<!--more-->
+
 ## 📝 Syntax

 | Color | Syntax             | Example                    | Output               |
@@ -32,6 +36,17 @@ Pure color values (no leading/trailing characters):
 - `hsl(240, 100%, 50%)`
 - `hsl(120, 100%, 50%)`

+Theme colors:
+
+| Type      | Light     | Dark      |
+| :-------: | :-------: | :-------: |
+| Primary   | `#1677ff` | `#0069fc` |
+| Secondary | `#8b949e` | `#7d8792` |
+| Success   | `#52c41a` | `#49ad17` |
+| Info      | `#13c2c2` | `#11abab` |
+| Warning   | `#faad14` | `#efa105` |
+| Danger    | `#ff4d4f` | `#ff3436` |
+
 ## ❌ Regular Code

 With leading or trailing characters:
@@ -0,0 +1,59 @@
+[[filetree]]
+name = "src-toml"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "components"
+type = "dir"
+
+[[filetree.children.children]]
+name = "Header.tsx"
+type = "file"
+
+[[filetree.children.children]]
+name = "Footer.tsx"
+type = "file"
+
+[[filetree.children]]
+name = "utils"
+type = "dir"
+
+[[filetree.children.children]]
+name = "helper.ts"
+type = "file"
+
+[[filetree.children.children]]
+name = "validator.ts"
+type = "file"
+
+[[filetree]]
+name = "public"
+type = "dir"
+
+[[filetree.children]]
+name = "favicon.ico"
+type = "file"
+
+[[filetree.children]]
+name = "images"
+type = "dir"
+
+[[filetree.children.children]]
+name = "logo.png"
+type = "file"
+
+[[filetree]]
+name = "package.json"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+
+[[filetree]]
+name = "tsconfig.json"
+type = "file"
@@ -0,0 +1,273 @@
+---
+title: File Tree Test
+date: 2026-01-10T03:00:48+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - file-tree
+---
+
+This article tests the **File Tree** shortcode functionality in the FixIt theme.
+
+<!--more-->
+<!-- markdownlint-disable-file MD007 MD024 MD032 -->
+
+## Content Modes
+
+### Shortcode body
+
+#### JSON format
+
+{{< file-tree >}}
+[
+  {
+    "name": "src",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "app.ts",
+        "type": "file"
+      }
+    ]
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": ".gitignore",
+    "type": "file"
+  }
+]
+{{< /file-tree >}}
+
+#### YAML format
+
+{{< file-tree folderSlash=true >}}
+- name: project-root
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: config.ts
+          type: file
+    - name: tests
+      type: dir
+      children:
+        - name: unit.test.ts
+          type: file
+    - name: package.json
+      type: file
+    - name: tsconfig.json
+      type: file
+{{< /file-tree >}}
+
+#### TOML format
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "app.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+### File data
+
+#### TOML format
+
+{{< file-tree file="data/example.toml" />}}
+
+TOML with folder slash and level 3:
+
+{{< file-tree file="data/example.toml" level=3 folderSlash=true />}}
+
+#### JSON format
+
+{{< file-tree file="filetree/example.json" />}}
+
+JSON with folder slash and level 2:
+
+{{< file-tree file="filetree/example.json" level=2 folderSlash=true />}}
+
+#### YAML format
+
+Trying the file not found case (should fallback to next mode):
+
+{{< file-tree file="data/nonexistent.yaml" data="example" />}}
+
+### Hugo data
+
+#### Basic usage
+
+{{< file-tree data="example" />}}
+
+#### Fully expanded
+
+{{< file-tree data="example" level=-1 />}}
+
+#### Limited expansion
+
+{{< file-tree data="example" level=1 />}}
+
+#### With folder slash
+
+{{< file-tree data="example" folderSlash=true />}}
+
+#### With level and folder slash
+
+{{< file-tree data="example" level=2 folderSlash=true />}}
+
+#### Collapsed with ignore
+
+{{< file-tree data="example" level=0 ignoreList="README.md" />}}
+
+## Filesystem Mode
+
+### Basic paths
+
+{{< file-tree />}}
+
+{{< file-tree "." />}}
+
+{{< file-tree "content" />}}
+
+{{< file-tree name="{path}" />}}
+
+{{< file-tree name="FixIt/apps/test" />}}
+
+{{< file-tree path="posts" name="{path}" />}}
+
+### Named parameters
+
+{{< file-tree path="data" level=2 />}}
+
+### Expansion levels
+
+{{< file-tree "assets" 0 />}}
+
+{{< file-tree path="assets" level=2 folderSlash=true />}}
+
+{{< file-tree "assets" -1 />}}
+
+### With ignore lists
+
+{{< file-tree ignoreList=".hugo_build.lock, public, resources, node_modules" level=2 folderSlash=true />}}
+
+### root not exist
+
+path="nonexistent/path"
+
+{{< file-tree "nonexistent/path" />}}
+
+## Code Block Rendering
+
+### Basic code block
+
+YAML format:
+
+```file-tree
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: main.js
+          type: file
+        - name: utils.js
+          type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+```
+
+### TOML format
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+### With parameters
+
+```file-tree {level=2 folderSlash=true ignoreList="config.local.js"}
+- name: project
+  type: dir
+  children:
+    - name: config
+      type: dir
+      children:
+        - name: config.js
+          type: file
+        - name: config.local.js
+          type: file
+    - name: src
+      type: dir
+      children:
+        - name: index.js
+          type: file
+    - name: .gitignore
+      type: file
+```
+
+### Fully expanded
+
+```file-tree {level=-1 folderSlash=true}
+- name: backend
+  type: dir
+  children:
+    - name: api
+      type: dir
+      children:
+        - name: routes
+          type: dir
+          children:
+            - name: users.js
+              type: file
+            - name: posts.js
+              type: file
+        - name: controllers
+          type: dir
+          children:
+            - name: userController.js
+              type: file
+    - name: database
+      type: dir
+      children:
+        - name: models
+          type: dir
+        - name: migrations
+          type: dir
+    - name: app.js
+      type: file
+```
@@ -18,6 +18,7 @@ Test for rendering Font Awesome icons.
 :(fa-solid fa-camera fa-xs):
 :(fa-solid fa-camera fa-sm):
 :(fa-solid fa-camera fa-lg):
+:(fa-solid fa-camera fa-1x):
 :(fa-solid fa-camera fa-2x):
 :(fa-solid fa-camera fa-3x):
 :(fa-solid fa-camera fa-5x):
@@ -26,9 +27,9 @@ Test for rendering Font Awesome icons.

 ## Fixed width

-:(fa-solid fa-skating fa-fw fa-2x): Skating\
-:(fa-solid fa-skiing fa-fw fa-2x): Skiing\
-:(fa-solid fa-skiing-nordic fa-fw fa-2x): Nordic Skiing
+:(fa-solid fa-skating fa-2x): Skating\
+:(fa-solid fa-skiing fa-2x): Skiing\
+:(fa-solid fa-skiing-nordic fa-2x): Nordic Skiing

 ## List icon

@@ -75,4 +76,4 @@ hey guys!

 ## Border

-:(fa-brands fa-apple fa-border fa-fw fa-10x):
+:(fa-brands fa-apple fa-border fa-10x):
@@ -2,7 +2,6 @@
 title: Tabs Comprehensive Test Cases
 date: 2025-09-09T10:00:00+08:00
 collections:
-
 - Tests
 categories:
 - Shortcodes
@@ -178,3 +177,42 @@ gantt

 {{% /tab %}}
 {{< /tabs >}}
+
+### File Tree inside Tabs
+
+{{< tabs >}}
+{{% tab title="File Tree Shortcode" %}}
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+{{% /tab %}}
+{{% tab title="File Tree Code Block" %}}
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+{{% /tab %}}
+{{< /tabs >}}
@@ -0,0 +1,50 @@
+---
+title: Task List Rendering Test
+date: 2026-02-28T08:54:02+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Task List
+---
+
+This post tests the rendering of task lists in Markdown.
+
+<!--more-->
+
+## Basic Task Lists
+
+- [ ] Unchecked Task
+- [x] Checked Task
+- Regular list item
+
+## Nested Task Lists (Bug Fix Verification)
+
+- [ ] Parent Task 1
+  - [ ] Child Task 1.1
+  - [x] Child Task 1.2
+  - Regular list item
+- [x] Parent Task 2
+  - [ ] Child Task 2.1
+    - [ ] Grandchild Task 2.1.1
+    - [x] Grandchild Task 2.1.2
+
+## Extended Task Lists (Custom Icons)
+
+- [-] Cancelled Task
+- [/] In Progress Task
+- [<] Scheduled Task
+- [>] Rescheduled Task
+- [!] Important Task
+- [?] Question Task
+- Regular list item
+
+## Mixed Content in List Items
+
+- [ ] Task with **bold** and _italic_ text
+- [x] Task with `inline code`
+- [ ] Task with [some link](https://github.com/hugo-fixit/FixIt)
+- [ ] Multi-line task
+  that spans across multiple lines
+  and still renders correctly as a single list item.
@@ -0,0 +1,38 @@
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: components
+          type: dir
+          children:
+            - name: Header.tsx
+              type: file
+            - name: Footer.tsx
+              type: file
+        - name: utils
+          type: dir
+          children:
+            - name: helper.ts
+              type: file
+            - name: validator.ts
+              type: file
+    - name: public
+      type: dir
+      children:
+        - name: favicon.ico
+          type: file
+        - name: images
+          type: dir
+          children:
+            - name: logo.png
+              type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+    - name: tsconfig.json
+      type: file
@@ -5,6 +5,7 @@

 title = "Hugo FixIt TEST"
 baseURL = "https://demo.fixit.lruihao.cn/test/"
+ignoreLogs = [ "warning-file-tree" ]

 [permalinks]

@@ -1,14 +1,14 @@
@import "../../lib/normalize/normalize";

 html {
-  font-family: $global-font-family;
-  font-weight: $global-font-weight;
+  font-family: fixit-var(global-font-family);
+  font-weight: fixit-var(global-font-weight);
  font-display: swap;
-  font-size: $global-font-size;
-  line-height: $global-line-height;
+  font-size: fixit-var(global-font-size);
+  line-height: fixit-var(global-line-height);
  width: 100%;
  scroll-behavior: smooth;
-  overflow: overlay;
+  overflow: auto;
 }

@media screen and (prefers-reduced-motion: reduce) {
@@ -18,22 +18,18 @@ html {
 }

 ::selection {
-  background-color: $selection-color;
-
-  [data-theme='dark'] & {
-    background-color: $selection-color-dark;
-  }
+  background-color: fixit-var(selection-color);
 }

 body {
-  background-color: var(#{$rootPrefix}global-background-color);
-  color: var(#{$rootPrefix}global-font-color);
+  background-color: fixit-var(global-background-color);
+  color: fixit-var(global-font-color);
  @include overflow-wrap(break-word);
 }

 iframe {
  border: 0;
-  @include border-radius($global-border-radius);
+  @include border-radius;
 }

 [role='button'] {
@@ -53,9 +49,11 @@ img {
  object-fit: cover;
 }

-img,video {
+img,
+video {
  max-width: 100%;
  height: auto;
+  @include border-radius;
 }

 dialog {
@@ -73,26 +71,14 @@ details {
 %code {
  padding: 0.2em 0.4em;
  margin: 0;
-  font-size: $code-font-size;
-  line-height: $code-font-size;
-  font-family: $code-font-family;
-  color: $code-color;
-  background-color: var(#{$rootPrefix}code-inline-background-color);
+  font-size: fixit-var(code-font-size);
+  line-height: fixit-var(code-font-size);
+  font-family: fixit-var(code-font-family);
+  color: fixit-var(code-color);
+  background-color: fixit-var(code-inline-background-color);
  text-decoration: inherit;
-  @include border-radius($global-border-radius);
+  @include border-radius;
  @include overflow-wrap(break-word);
-  @include line-break(auto);
-
-  [data-theme='dark'] & {
-    color: $code-color-dark;
-  }
 }

@include link(true, true);
-
-@import '../_partials/scrollbar';
-@import '../_partials/mask';
-@import '../_partials/img';
-@import '../_partials/icon';
-@import '../_partials/details';
-@import '../_partials/widgets';
@@ -41,7 +41,7 @@

@each $color, $value in $theme-colors {
  .text-#{$color} {
-    color: var(#{$rootPrefix}#{$color}) !important;
+    color: fixit-var(#{$color}) !important;
  }
 }

@@ -54,3 +54,7 @@
 .variant-numeric {
  font-variant-numeric: tabular-nums lining-nums;
 }
+
+.rounded-full {
+  @include border-radius(full);
+}
@@ -0,0 +1,6 @@
+@import "_mixin";
+@import "_base";
+@import "_common";
+@import "_root";
+@import "_layout";
+@import '_widgets';
@@ -1,10 +1,10 @@
 .breadcrumb-container {
  padding-inline: 1rem;
  font-size: 0.75rem;
-  background-color: var(#{$rootPrefix}global-background-color);
+  background-color: fixit-var(global-background-color);
  display: flex;
  gap: 0.5rem;
-  @include z-index(1);
+  @include z-index(sticky);
  @extend .print-d-none;

  &:has(~ main[data-reverse]) {
@@ -20,7 +20,7 @@

  &.sticky {
    position: sticky;
-    top: $header-height;
+    top: fixit-var(header-height);
  }

  .breadcrumb {
@@ -29,13 +29,9 @@
    padding: 0.5rem 0;
    margin: 0 auto;
    list-style: none;
-    border-bottom: 1px inset $global-border-color;
+    border-bottom: 1px inset fixit-var(global-border-color);
    @extend %page-style;

-    [data-theme='dark'] & {
-      border-bottom-color: $global-border-color-dark;
-    }
-
    .breadcrumb-item {
      display: flex;

@@ -43,11 +39,11 @@
        content: attr(data-separator);
        display: inline-block;
        padding-inline: 0.5rem;
-        color: var(#{$rootPrefix}global-font-secondary-color);
+        color: fixit-var(global-placeholder-color);
      }

      &.active {
-        color: var(#{$rootPrefix}secondary);
+        color: fixit-var(secondary);
      }
    }
  }
@@ -24,10 +24,6 @@ footer {
        color: #dc143c;
        animation: icon-animate 1.33s ease-in-out infinite;
      }
-
-      .run-times {
-        font-variant-numeric: tabular-nums lining-nums;
-      }
    }
  }

@@ -37,23 +33,23 @@ footer {
@keyframes icon-animate {
  0%,
  100% {
-    @include transform(scale(1));
+    transform: scale(1);
  }

  10%,
  30% {
-    @include transform(scale(0.9));
+    transform: scale(0.9);
  }

  20%,
  40%,
  60%,
  80% {
-    @include transform(scale(1.1));
+    transform: scale(1.1);
  }

  50%,
  70% {
-    @include transform(scale(1.1));
+    transform: scale(1.1);
  }
 }
@@ -1,19 +1,15 @@
 header {
  width: 100%;
-  background-color: $header-background-color;
-  @include z-index(2);
-  @include transition(box-shadow 0.3s ease);
+  background-color: fixit-var(header-background-color);
+  @include z-index(fixed);
+  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));
+    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));
+    [data-theme=dark] & {
+      box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
    }
  }
 }
@@ -27,22 +23,22 @@ header {
 }

 .header-title {
-  font-size: $header-title-font-size;
-  font-family: $header-title-font-family;
+  font-size: fixit-var(header-title-font-size);
+  font-family: fixit-var(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);
+  flex: 10;

  .logo {
    min-height: 1.5em;
    height: 1.5em;
    width: auto;
    vertical-align: top;
-    transform: translateY(calc(#{$header-height} / 2 - 50%));
+    transform: translateY(calc(#{fixit-var(header-height)} / 2 - 50%));
  }

  .header-title-text {
@@ -64,11 +60,7 @@ header {
    list-style: none;
    margin: 0.25rem 0.5rem;
    height: 1px;
-    background-color: $menu-border-color;
-
-    [data-theme='dark'] & {
-      background-color: $menu-border-color-dark;
-    }
+    background-color: fixit-var(menu-border-color);
  }

  .menu-item {
@@ -77,7 +69,7 @@ header {
    .dropdown-icon {
      margin-left: 0.25rem;
      font-size: .875em;
-      color: var(#{$rootPrefix}global-font-color);
+      color: fixit-var(global-font-color);

      &.open::before {
        content: "\f078";
@@ -88,11 +80,7 @@ header {
      >.menu-link,
      >.nested-item>.menu-link {
        font-weight: bold;
-        color: $menu-active-color;
-
-        [data-theme='dark'] & {
-          color: $menu-active-color-dark;
-        }
+        color: fixit-var(menu-active-color);
      }
    }

@@ -101,12 +89,12 @@ header {
    }

    .menu-link i {
-      @include transform(perspective(1rem));
-      @include transition(transform 0.4s ease);
+      transform: perspective(1rem);
+      transition: transform 0.4s ease;
    }

    .menu-link:hover i {
-      @include transform(perspective(1rem) translateZ(0.2rem));
+      transform: perspective(1rem) translateZ(0.2rem);
    }
  }
 }
@@ -119,12 +107,12 @@ header {
    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);
+    transition: width 0.3s ease;
+    @include border-radius(0.5rem);
  }

  @include placeholder(transparent);
@@ -156,23 +144,15 @@ header {
  .open &,
  &.mobile {
    input {
-      color: var(#{$rootPrefix}global-font-color);
-      background-color: $search-background-color;
+      color: fixit-var(global-font-color);
+      background-color: fixit-var(search-background-color);
      padding: 0 2rem 0 2rem;
    }

-    [data-theme='dark'] & {
-      input {
-        background-color: $search-background-color-dark;
-      }
-
-      @include placeholder($global-font-secondary-color-dark);
-    }
-
-    @include placeholder($global-font-secondary-color);
+    @include placeholder;

    .search-button {
-      color: var(#{$rootPrefix}global-font-secondary-color);
+      color: fixit-var(global-placeholder-color);
    }

    .search-clear:hover {
@@ -187,8 +167,8 @@ header {

 .theme-switch {
  i {
-    @include transform(rotate(225deg));
-    @include transition(all 0.4s ease);
+    transform: rotate(225deg);
+    transition: all 0.4s ease;
  }
 }

@@ -196,8 +176,8 @@ header {
  display: block;
  position: sticky;
  top: 0;
-  height: $header-height;
-  line-height: $header-height;
+  height: fixit-var(header-height);
+  line-height: fixit-var(header-height);
  box-sizing: border-box;

  [data-header-desktop='normal'] & {
@@ -211,11 +191,11 @@ header {

  .header-wrapper {
    // use css native function to calculate max value
-    padding: 0 2rem 0 MAX(10vh, $header-height);
+    padding: 0 2rem 0 MAX(10vh, fixit-var(header-height));
    height: 100%;

    &[data-github-corner='right'] {
-      padding-right: $header-height;
+      padding-right: fixit-var(header-height);
    }

    .header-title {
@@ -231,15 +211,15 @@ header {
      > .menu-item {
        &:hover .sub-menu {
          display: block;
-          @include transform(translateX(-0.5rem));
+          transform: translateX(-0.5rem);
        }
        &.theme-switch {
          &:hover i {
-            @include transform(rotate(45deg));
+            transform: rotate(45deg);
          }
        }
        &.language-switch:hover .sub-menu {
-          @include transform(translateX(calc(1.75rem - 100%)));
+          transform: translateX(calc(1.75rem - 100%));
        }
      }

@@ -250,11 +230,7 @@ header {
          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%);
-          }
+          border-left: 1px dashed fixit-var(global-border-color-weight);
        }
      }

@@ -263,24 +239,22 @@ header {
        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;
+        top: calc(#{fixit-var(header-height)} - 0.75rem);
+        border: 1px solid fixit-var(menu-border-color);
+        background-color: fixit-var(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));
+        @include border-radius;
+        transition: box-shadow 0.3s ease;
+        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));
+        [data-theme=dark] & {
+          box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
        }

        .menu-item {
-          height: $submenu-height;
-          line-height: $submenu-height;
+          height: fixit-var(submenu-height);
+          line-height: fixit-var(submenu-height);
          max-width: 15rem;
          white-space: nowrap;
          text-overflow: ellipsis;
@@ -301,8 +275,8 @@ header {
  display: none;
  position: sticky;
  top: 0;
-  min-height: $header-height;
-  line-height: $header-height;
+  min-height: fixit-var(header-height);
+  line-height: fixit-var(header-height);

  [data-header-mobile='normal'] & {
    position: static;
@@ -315,7 +289,7 @@ header {
    .header-wrapper {
      padding: 0 1rem;
      font-size: 1.125rem;
-      @include transition(margin-top 0.3s ease);
+      transition: margin-top 0.3s ease;

      .header-title {
        max-width: 80%;
@@ -328,15 +302,11 @@ header {
      .menu-toggle {
        span {
          display: block;
-          background: $global-font-color;
+          background-color: fixit-var(global-font-color);
          width: 20px;
          height: 2px;
-          @include border-radius(3px);
-          @include transition(all 0.3s ease-in-out);
-
-          [data-theme='dark'] & {
-            background: $global-font-color-dark;
-          }
+          @include border-radius(full);
+          transition: all 0.3s ease-in-out;
        }

        span:not(:last-child) {
@@ -345,7 +315,7 @@ header {

        &.active {
          span:nth-child(1) {
-            @include transform(translateY(8px) rotate(45deg));
+            transform: translateY(8px) rotate(45deg);
          }

          span:nth-child(2) {
@@ -353,25 +323,23 @@ header {
          }

          span:nth-child(3) {
-            @include transform(translateY(-8px) rotate(-45deg));
+            transform: translateY(-8px) rotate(-45deg);
          }
        }
      }
    }

    .menu {
-      background: $header-background-color;
-      border-top: 2px solid $global-border-color;
+      background-color: fixit-var(header-background-color);
+      border-top: 2px solid fixit-var(global-border-color-light);
      display: none;
-      overflow-y: overlay;
+      overflow-y: auto;
      max-height: 70vh;
-      @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+      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));
+      [data-theme=dark] & {
+        box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
      }

      .search-wrapper {
@@ -379,16 +347,12 @@ header {
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
-        padding: ($header-height - 2.5rem) / 2 1rem;
+        padding: 0.5rem 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;
-        }
+        background-color: fixit-var(header-background-color);
+        @include z-index(sticky);
      }

      .search {
@@ -421,10 +385,10 @@ header {
        padding: 0 1rem;

        &:not(.menu-system):hover {
-          background-color: lighten($global-font-secondary-color, 24%);
+          background-color: #f2f2f3;

-          [data-theme='dark'] & {
-            background-color: darken($global-font-secondary-color-dark, 24%);
+          [data-theme=dark] & {
+            background-color: #535355;
          }
        }

@@ -433,7 +397,7 @@ header {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow-x: hidden;
-          @include flex(4);
+          flex: 4;
        }

        & .nested-item {
@@ -455,11 +419,7 @@ header {
        bottom: 0;
        line-height: 2.5rem;
        padding: 0 1rem;
-        background-color: $header-background-color;
- 
-        [data-theme='dark'] & {
-          background-color: $header-background-color-dark;
-        }
+        background-color: fixit-var(header-background-color);

        .menu-system-item {
          padding-inline: 0.5rem;
@@ -488,10 +448,10 @@ header {
        }

        .menu-item:hover {
-          background-color: lighten($global-font-secondary-color, 20%);
+          background-color: #e7e7ea;

-          [data-theme='dark'] & {
-            background-color: darken($global-font-secondary-color-dark, 20%);
+          [data-theme=dark] & {
+            background-color: #5d5d5f;
          }
        }
      }
@@ -504,7 +464,7 @@ header {

  &.open {
    .header-wrapper {
-      margin-top: -$header-height;
+      margin-top: calc(#{fixit-var(header-height)} * -1);
    }

    .menu {
@@ -524,12 +484,12 @@ header {

 .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));
+  top: fixit-var(header-height);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+  @include z-index(fixed);

-  [data-theme='dark'] & {
-    @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
+  [data-theme=dark] & {
+    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
  }

  &.desktop {
@@ -544,11 +504,12 @@ header {

  .dropdown-menu {
    right: 0 !important;
-    background-color: var(#{$rootPrefix}global-background-color);
+    background-color: fixit-var(global-background-color);

    .suggestions {
      overflow-y: auto;
-      max-height: calc(100vh - #{$header-height});
+      // 41px is the height of the search-footer
+      max-height: calc(100dvh - #{fixit-var(header-height)} - 41px);

      .suggestion {
        padding: 0.75rem 1rem;
@@ -567,33 +528,30 @@ header {
          font-size: 0.875rem;
          float: right;
          text-align: right;
-          color: var(#{$rootPrefix}global-font-secondary-color);
+          color: fixit-var(secondary);
        }

        .suggestion-context {
+          display: -webkit-box;
          line-height: 1.25rem;
-          @include box(vertical);
+          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
+          color: fixit-var(global-placeholder-color);
          @include overflow-wrap(break-word);
-          color: var(#{$rootPrefix}global-font-secondary-color);
        }

        em {
          font-style: normal;
-          background-color: $selection-color;
-
-          [data-theme='dark'] & {
-            background-color: $selection-color-dark;
-          }
+          background-color: fixit-var(selection-color);
        }

        &.cursor {
          background: darken($code-background-color, 5%);

-          [data-theme='dark'] & {
+          [data-theme=dark] & {
            background: lighten($code-background-color-dark, 5%);
          }
        }
@@ -611,7 +569,7 @@ header {
      .search-query {
        font-weight: bold;

-        [data-theme='dark'] & {
+        [data-theme=dark] & {
          color: #ddd;
        }
      }
@@ -621,8 +579,7 @@ header {
      padding: 0.5rem 1rem;
      float: right;
      font-size: 0.8rem;
-      color: var(#{$rootPrefix}global-font-secondary-color);
-
+      color: fixit-var(secondary);
      @include link(false, false);

      a {
@@ -36,7 +36,7 @@
  }
 }

-@import "_header";
-@import "_breadcrumb";
-@import "_footer";
-@import "_pagination";
+@import "header";
+@import "breadcrumb";
+@import "footer";
+@import "pagination";
@@ -10,16 +10,12 @@

  a {
    font-size: 0.8rem;
-    color: $pagination-link-color;
+    color: fixit-var(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;
-    }
+    transition: 0.3s;
  }

  li {
@@ -34,11 +30,7 @@
    }

    &:hover a {
-      color: $pagination-link-hover-color;
-    }
-
-    [data-theme='dark'] &:hover a {
-      color: $pagination-link-hover-color-dark;
+      color: fixit-var(pagination-link-hover-color);
    }

    &::before,
@@ -47,14 +39,9 @@
      content: '';
      width: 0;
      height: 3px;
-      background: $pagination-link-hover-color;
-      @include transition(0.3s);
+      background: fixit-var(pagination-link-hover-color);
      bottom: 0px;
-    }
-
-    [data-theme='dark'] &::before,
-    [data-theme='dark'] &::after {
-      background: $pagination-link-hover-color-dark;
+      transition: 0.3s;
    }

    &::before {
@@ -74,11 +61,7 @@

    &.active {
      a {
-        color: $pagination-link-hover-color;
-      }
-
-      [data-theme='dark'] & a {
-        color: $pagination-link-hover-color-dark;
+        color: fixit-var(pagination-link-hover-color);
      }

      &::before,
@@ -0,0 +1,6 @@
+@mixin blur {
+  // TODO refactor blur with backdrop-filter
+  .blur & {
+    filter: blur(1.5px);
+  }
+}
@@ -0,0 +1,26 @@
+/// Mixin to set border-radius
+/// @param {String|Number|List} $value - The value of the border-radius, position (top, bottom, left, right) or keyword (full)
+/// @param {Number} $radius - The radius of the border (only for position)
+/// @example
+///   @include border-radius;
+///   @include border-radius(full);
+///   @include border-radius(top);
+///   @include border-radius(top, 10px);
+///   @include border-radius(10px 20px 10px 20px);
+@mixin border-radius($value: fixit-var(global-border-radius), $radius: null) {
+  $r: if($radius, $radius, fixit-var(global-border-radius));
+
+  @if $value == full {
+    border-radius: calc(infinity * 1px);
+  } @else if $value == top {
+    border-radius: $r $r 0 0;
+  } @else if $value == bottom {
+    border-radius: 0 0 $r $r;
+  } @else if $value == left {
+    border-radius: $r 0 0 $r;
+  } @else if $value == right {
+    border-radius: 0 $r $r 0;
+  } @else {
+    border-radius: $value;
+  }
+}
@@ -0,0 +1,33 @@
+@mixin placeholder($color: fixit-var(global-placeholder-color)) {
+  input::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  input:-moz-placeholder {
+    color: $color;
+  }
+
+  input::-moz-placeholder {
+    color: $color;
+  }
+
+  input:-ms-input-placeholder {
+    color: $color;
+  }
+
+  input::placeholder {
+    color: $color;
+  }
+}
+
+// TODO Superseded by text-wrap: wrap; in modern browsers
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
+
+@mixin user-select($value) {
+  -webkit-user-select: $value !important;
+  -moz-user-select: $value !important;
+  user-select: $value !important;
+}
@@ -0,0 +1,8 @@
+@import 'theme-vars';
+@import 'blur';
+@import 'border-radius';
+@import 'compatibility';
+@import 'link';
+@import 'loading';
+@import 'scrollbar-width';
+@import 'z-index';
@@ -1,10 +1,7 @@
-/**
- * Link mixin
- * @param {Boolean} $light use global link color
- * @param {Boolean} $dark use global link color dark
- * @param {String} $decoration text-decoration, default none
- * TODO refactor to use CSS variables
- */
+/// 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,
@@ -19,7 +16,7 @@
      color: $single-link-color;
    }

-    [data-theme='dark'] & {
+    [data-theme=dark] & {
      @if $dark {
        color: $global-link-color-dark;
      }
@@ -40,7 +37,7 @@
      color: $single-link-hover-color;
    }

-    [data-theme='dark'] & {
+    [data-theme=dark] & {
      @if $dark {
        color: $global-link-hover-color-dark;
      }
@@ -9,7 +9,7 @@
  backdrop-filter: blur(1rem);
  background-position: center;
  background-repeat: no-repeat;
-  background-image: var(#{$rootPrefix}loading-img);
+  background-image: fixit-var(loading-img);
  background-size: 60px;
-  @include z-index(0, 10);
+  @include z-index(loading);
 }
@@ -0,0 +1,6 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  @include set-fixit-vars((
+    scrollbar-width: $width,
+    scrollbar-width-legacy: $widthLegacy,
+  ));
+}
@@ -0,0 +1,80 @@
+// ========================================
+// Theme Variable Mixins and Functions
+// ========================================
+
+/// Get CSS variable with prefix
+/// @param {String} $name - CSS variable name (without prefix)
+/// @param {*} $fallback - Optional fallback value
+/// @return {String} - Complete CSS variable reference
+/// @example
+///   color: fixit-var(global-font-color);
+///   background: fixit-var(custom-bg, #fff);
+@function fixit-var($name, $fallback: null) {
+  @if $fallback {
+    @return var(#{$rootPrefix}#{$name}, #{$fallback});
+  } @else {
+    @return var(#{$rootPrefix}#{$name});
+  }
+}
+
+/// Set a single CSS variable
+/// @param {String} $name - CSS variable name (without prefix)
+/// @param {*} $value - Variable value
+/// @example
+///   @include set-fixit-var(custom-color, #ff0000);
+@mixin set-fixit-var($name, $value) {
+  #{$rootPrefix}#{$name}: #{$value};
+}
+
+/// Batch set CSS variables
+/// @param {Map} $vars - Variable map, key is CSS variable name (without prefix), value is variable value
+/// @example
+///   @include set-fixit-vars((
+///     custom-color: #ff0000,
+///     custom-bg: #00ff00,
+///   ));
+@mixin set-fixit-vars($vars) {
+  @each $name, $value in $vars {
+    #{$rootPrefix}#{$name}: #{$value};
+  }
+}
+
+/// Batch set theme color variables using global $theme-colors
+/// Generates light theme (in :root) and dark theme ([data-theme=dark]) variables
+@mixin set-theme-colors() {
+  // Light theme (in :root)
+  @at-root :root {
+    @each $name, $value in $theme-colors {
+      #{$rootPrefix}#{$name}: #{$value};
+    }
+  }
+
+  // Dark theme
+  @at-root [data-theme=dark] {
+    @each $name, $value in $theme-colors {
+      #{$rootPrefix}#{$name}: #{darken($value, 5%)};
+    }
+  }
+}
+
+/// Define dual-theme variables (generate definitions for both light and dark simultaneously)
+/// @param {Map} $vars - Variable map, key is CSS variable name, value is Map(light: $light-val, dark: $dark-val)
+/// @example
+///   @include define-theme-vars((
+///     global-background-color: (light: $global-background-color, dark: $global-background-color-dark)
+///   ));
+@mixin define-theme-vars($vars) {
+  // Light theme (in :root)
+  @at-root :root {
+    @each $name, $values in $vars {
+      #{$rootPrefix}#{$name}: #{map-get($values, light)};
+    }
+  }
+
+  // Dark theme
+  @at-root [data-theme=dark] {
+    @each $name, $values in $vars {
+      #{$rootPrefix}#{$name}: #{map-get($values, dark)};
+    }
+  }
+}
@@ -0,0 +1,25 @@
+$z-indexes: (
+  "hide": -1,
+  "auto": auto,
+  "base": 1,
+  "loading": 10,
+  "sticky": 100,
+  "fixed": 200
+) !default;
+
+/// Mixin to set z-index
+/// @param {String|Number} $key - The key of the z-index map or a raw number
+/// @param {Number} $diff - The difference to add to the z-index
+/// @example
+///   @include z-index(base);
+///   @include z-index(base, 1);
+@mixin z-index($key, $diff: 0) {
+  $z-index: map-get($z-indexes, $key);
+
+  @if $z-index {
+    z-index: $z-index + $diff;
+  } @else {
+    @warn "Unknown z-index key: `#{$key}`.";
+    z-index: $key + $diff;
+  }
+}
@@ -1,69 +1,136 @@
-:root {
-  // Note: Custom variable values only support SassScript inside `#{}`.
-  // TODO migrate SCSS variables to CSS variables
+// ================================================================================
+// CSS Custom Properties (CSS Variables)
+// ================================================================================
+// This file defines all CSS custom properties for the FixIt theme.
+// Variables are organized into two main categories:
+// 1. Theme-independent variables: fixed values (fonts, sizes, etc.)
+// 2. Theme-dependent variables: color values that support light/dark themes
+//
+// Theme-dependent variables are further categorized into:
+// - Core: Global layout and navigation colors
+// - Page Content: Article and post content colors
+// - Third-party: Extension and plugin colors
+//
+// These CSS variables enable runtime theme switching and customization.
+// ================================================================================

+:root {
  interpolate-size: allow-keywords;

-  // Global colors variables
-  #{$rootPrefix}global-background-color: #{$global-background-color};
-  #{$rootPrefix}global-font-color: #{$global-font-color};
-  #{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color};
-  #{$rootPrefix}global-border-color: #{$global-border-color};
-  #{$rootPrefix}global-link-color: #{$global-link-color};
-  #{$rootPrefix}global-link-hover-color: #{$global-link-hover-color};
+  // ----------------------------------------
+  // Theme-Independent Variables
+  // ----------------------------------------
+  @include set-fixit-vars((
+    // Global Typography
+    global-font-family: $global-font-family,
+    global-font-size: $global-font-size,
+    global-font-weight: $global-font-weight,
+    global-line-height: $global-line-height,
+    global-scroll-margin-top: $global-scroll-margin-top,
+    global-border-radius: $global-border-radius,

-  // Scroll margin top and Stack sticky top related
-  #{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
+    // Header
+    header-height: $header-height,
+    header-title-font-family: $header-title-font-family,
+    header-title-font-size: $header-title-font-size,
+    submenu-height: $submenu-height,

-  // Set breadcrumb height to 0px if breadcrumb is disabled
-  #{$rootPrefix}breadcrumb-height: 0px;
+    // Single Content
+    toc-title-font-size: $toc-title-font-size,
+    toc-content-font-size: $toc-content-font-size,
+    collection-title-font-size: $collection-title-font-size,
+    collection-list-font-size: $collection-list-font-size,
+    related-title-font-size: $related-title-font-size,
+    related-list-font-size: $related-list-font-size,
+    reward-img-width: $reward-img-width,

-  // hr / divider style
-  #{$rootPrefix}hr-background-color: #{darken($global-border-color, 5%)};
-  #{$rootPrefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
-  #{$rootPrefix}divider-edge-weak: linear-gradient(to right, transparent, var(#{$rootPrefix}divider-bg, #d0d0d5), transparent);
+    // Code
+    code-font-size: $code-font-size,
+    code-block-font-size: $code-block-font-size,
+    code-font-family: $code-font-family,
+    code-error-color: $code-error-color,

-  // Scrollbar related variables
-  #{$rootPrefix}scrollbar-thumb-color: #{$scrollbar-color};
-  #{$rootPrefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
-  #{$rootPrefix}scrollbar-track-color: transparent;
-  #{$rootPrefix}scrollbar-width: thin;
-  #{$rootPrefix}scrollbar-width-legacy: 12px;
+    // Scrollbar
+    scrollbar-track-color: transparent,
+    scrollbar-width: thin,
+    scrollbar-width-legacy: 12px,

-  // Code related variables
-  #{$rootPrefix}code-inline-background-color: rgba(175, 184, 193, 0.2);
-  #{$rootPrefix}code-block-background-color: #{$code-background-color};
-  #{$rootPrefix}code-header-color: #{$code-header-color};
-  #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 5%)};
-  #{$rootPrefix}code-highlight-color: #{$code-highlight-color};
-  #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color, 5%)};
-
-  // Theme colors variables
-  @each $color, $value in $theme-colors {
-    #{$rootPrefix}#{$color}: #{$value};
-  }
+    // Other utilities
+    breadcrumb-height: 0px,
+    divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),
+    scroll-mt: calc(#{fixit-var(header-height)} + #{fixit-var(global-scroll-margin-top)}),
+  ));
 }

-// Dark theme
-[data-theme=dark] {
-  #{$rootPrefix}global-background-color: #{$global-background-color-dark};
-  #{$rootPrefix}global-font-color: #{$global-font-color-dark};
-  #{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color-dark};
-  #{$rootPrefix}global-border-color: #{$global-border-color-dark};
-  #{$rootPrefix}global-link-color: #{$global-link-color-dark};
-  #{$rootPrefix}global-link-hover-color: #{$global-link-hover-color-dark};
+// ----------------------------------------
+// Theme-Dependent Color Variables
+// ----------------------------------------

-  #{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
-  #{$rootPrefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
+// Theme colors variables
+@include set-theme-colors;

-  #{$rootPrefix}code-inline-background-color: rgba(99, 110, 123, 0.4);
-  #{$rootPrefix}code-block-background-color: #{$code-background-color-dark};
-  #{$rootPrefix}code-header-color: #{$code-header-color-dark};
-  #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 5%)};
-  #{$rootPrefix}code-highlight-color: #{$code-highlight-color-dark};
-  #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color-dark, 5%)};
+// Core theme colors (global layout)
+@include define-theme-vars((
+  // Global
+  global-background-color: (light: $global-background-color, dark: $global-background-color-dark),
+  global-font-color: (light: $global-font-color, dark: $global-font-color-dark),
+  global-placeholder-color: (light: $global-placeholder-color, dark: $global-placeholder-color-dark),
+  global-link-color: (light: $global-link-color, dark: $global-link-color-dark),
+  global-link-hover-color: (light: $global-link-hover-color, dark: $global-link-hover-color-dark),
+  global-border-color: (light: $global-border-color, dark: $global-border-color-dark),
+  global-border-color-light: (light: lighten($global-border-color, 5%), dark: darken($global-border-color-dark, 5%)),
+  global-border-color-weight: (light: darken($global-border-color, 5%), dark: lighten($global-border-color-dark, 5%)),

-  @each $color, $value in $theme-colors {
-    #{$rootPrefix}#{$color}: #{darken($value, 5%)};
-  }
-}
+  // Header
+  header-background-color: (light: $header-background-color, dark: $header-background-color-dark),
+  menu-active-color: (light: $menu-active-color, dark: $menu-active-color-dark),
+  menu-border-color: (light: $menu-border-color, dark: $menu-border-color-dark),
+  search-background-color: (light: $search-background-color, dark: $search-background-color-dark),
+
+  // Selection
+  selection-color: (light: $selection-color, dark: $selection-color-dark),
+
+  // Scrollbar
+  scrollbar-color: (light: $scrollbar-color, dark: $scrollbar-color),
+  scrollbar-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
+  scrollbar-thumb-color: (light: $scrollbar-color, dark: $scrollbar-color),
+  scrollbar-thumb-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
+
+  // Tag Cloud
+  tag-cloud-start: (light: $tag-cloud-start, dark: $tag-cloud-start-dark),
+  tag-cloud-end: (light: $tag-cloud-end, dark: $tag-cloud-end-dark),
+
+  // Pagination
+  pagination-link-color: (light: $pagination-link-color, dark: $pagination-link-color-dark),
+  pagination-link-hover-color: (light: $pagination-link-hover-color, dark: $pagination-link-hover-color-dark),
+));
+
+// Page content theme colors
+@include define-theme-vars((
+  // Single Content
+  single-link-color: (light: $single-link-color, dark: $single-link-color-dark),
+  single-link-hover-color: (light: $single-link-hover-color, dark: $single-link-hover-color-dark),
+  table-background-color: (light: $table-background-color, dark: $table-background-color-dark),
+  table-thead-color: (light: $table-thead-color, dark: $table-thead-color-dark),
+  blockquote-color: (light: $blockquote-color, dark: $blockquote-color-dark),
+  reward-color: (light: $reward-color, dark: $reward-color-dark),
+
+  // Divider
+  hr-active-color: (light: lighten($single-link-hover-color, 4%), dark: darken($global-link-hover-color-dark, 4%)),
+
+  // Code
+  code-color: (light: $code-color, dark: $code-color-dark),
+  code-inline-background-color: (light: rgba(175, 184, 193, 0.2), dark: rgba(99, 110, 123, 0.4)),
+  code-block-background-color: (light: $code-background-color, dark: $code-background-color-dark),
+  code-header-color: (light: $code-header-color, dark: $code-header-color-dark),
+  code-header-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
+  code-highlight-color: (light: $code-highlight-color, dark: $code-highlight-color-dark),
+  gist-meta-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
+));
+
+// Third-party component theme colors (extensions and plugins)
+@include define-theme-vars((
+  // GitHub Corners
+  github-corner-color: (light: $github-corner-color, dark: $github-corner-color-dark),
+  github-corner-fill: (light: $github-corner-fill, dark: $github-corner-fill-dark),
+));
@@ -1,13 +1,13 @@
 .cc-window.cc-banner {
  .cc-btn {
-    color: var(#{$rootPrefix}global-font-color);
-    background-color: var(#{$rootPrefix}global-background-color);
+    color: fixit-var(global-font-color);
+    background-color: fixit-var(global-background-color);

    &:hover,
    &:focus {
      background-color: #ccc;

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        background-color: #444;
      }
    }
@@ -0,0 +1,47 @@
+.details {
+  > .details-summary {
+    transition: border-radius 0.2s ease 0.2s;
+    @include border-radius;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    i.details-icon {
+      color: fixit-var(secondary);
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: fixit-var(global-font-color);
+      }
+    }
+  }
+
+  > .details-content {
+    height: 0;
+    overflow-y: hidden;
+    transition: height 0.5s ease-out;
+  }
+
+  &.open {
+    > .details-summary {
+      transition: border-radius 0s;
+      @include border-radius(top);
+
+      i.details-icon {
+        transform: rotate(90deg);
+      }
+    }
+
+    > .details-content {
+      height: auto;
+      @include border-radius(bottom);
+    }
+  }
+
+  &.disabled {
+    > .details-summary {
+      cursor: default;
+    }
+  }
+}
@@ -0,0 +1,83 @@
+.fixed-buttons {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  @include z-index(fixed, -10);
+}
+
+.fixed-button {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: 0.5rem 0.625rem;
+  color: fixit-var(secondary);
+  background-color: darken($header-background-color, 3%);
+  transition: color 0.4s ease;
+  @include border-radius(full);
+  @include blur;
+  @extend .print-d-none;
+
+  [data-theme=dark] & {
+    background-color: darken($header-background-color-dark, 3%);
+  }
+
+  &:hover,
+  &:active {
+    color: fixit-var(global-font-color);
+    cursor: pointer;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+}
+
+.back-to-top {
+  overflow: hidden;
+  position: relative;
+  @include set-fixit-vars((
+    // Ring stroke width
+    b2t-stroke: 0.5rem,
+    // Progress color
+    b2t-prog: fixit-var(success),
+    // dasharray = circumference = 2πr
+    // dashoffset = circumference * (1 - scrollPercent / 100)
+    b2t-dasharray: 314.15
+  ));
+
+  [data-theme=dark] & {
+     @include set-fixit-var(b2t-prog, fixit-var(global-font-color));
+  }
+
+  // SVG circular progress ring
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // Rotate to start from top
+    transform: rotate(-90deg);
+  }
+
+  .bg {
+    fill: none;
+    stroke: fixit-var(global-border-color-light);
+    stroke-width: fixit-var(b2t-stroke);
+  }
+
+  // Progress ring
+  .progress {
+    fill: none;
+    stroke: fixit-var(b2t-prog);
+    stroke-width: fixit-var(b2t-stroke);
+    stroke-linecap: round;
+    stroke-dasharray: fixit-var(b2t-dasharray);
+    stroke-dashoffset: calc(#{fixit-var(b2t-dasharray)} * (1 - #{fixit-var(b2t-progress, 0)} / 100));
+    transition: stroke-dashoffset .1s linear;
+  }
+}
@@ -0,0 +1,42 @@
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+.github-corner {
+  position: fixed;
+  top: 0;
+  @include z-index(fixed);
+  @extend .print-d-none;
+
+  :hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+  svg {
+    width: fixit-var(header-height);
+    height: fixit-var(header-height);
+    border: 0;
+    color: fixit-var(github-corner-color);
+    fill: fixit-var(github-corner-fill);
+  }
+  &.left {
+    left: 0;
+
+    svg {
+      transform: scale(-1, 1);
+    }
+  }
+  &.right {
+    right: 0;
+  }
+}
@@ -0,0 +1,11 @@
+@import 'cookieconsent';
+@import 'details';
+@import 'fixed-button';
+@import 'github-corner';
+@import 'icon';
+@import 'mask';
+@import 'noscript-warning';
+@import 'post-chat';
+@import 'reading-progress';
+@import 'scrollbar';
+@import 'typeit';
@@ -7,10 +7,10 @@
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
-  @include z-index(0, -1);
+  @include z-index(hide);

  .blur & {
-    @include z-index(1);
+    @include z-index(fixed, -1);
    background-color: rgba(0, 0, 0, 0.25);
  }
 }
@@ -1,5 +1,5 @@
 .noscript-warning {
-  background-color: var(#{$rootPrefix}danger);
+  background-color: fixit-var(danger);
  color: white;
  font-size: 1rem;
  font-weight: bold;
@@ -8,9 +8,5 @@
  left: 0;
  bottom: 0;
  width: 100%;
-  @include z-index(2);
-
-  [data-theme='dark'] & {
-    background-color: var(#{$rootPrefix}danger-dark);
-  }
+  @include z-index(fixed);
 }
@@ -0,0 +1,12 @@
+.reading-progress-bar {
+  height: fixit-var(progress-h, 2px);
+  width: fixit-var(progress, 0);
+  background-color: fixit-var(bg-progress, fixit-var(success));
+  position: fixed;
+  @include z-index(fixed);
+  @extend .print-d-none;
+  
+  [data-theme=dark] & {
+    background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color));
+  }
+}
@@ -0,0 +1,36 @@
+/* Modern browsers with `scrollbar-*` support (high priority) */
+@supports (scrollbar-width: auto) {
+  * {
+    scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);;
+    scrollbar-width: fixit-var(scrollbar-width);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+::-webkit-scrollbar {
+  height: fixit-var(scrollbar-width-legacy);
+  width: fixit-var(scrollbar-width-legacy);
+  overflow: visible;
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-corner {
+  background-color: fixit-var(scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb {
+  background-color: fixit-var(scrollbar-thumb-color);
+  &:hover {
+    background-color: fixit-var(scrollbar-thumb-hover-color);
+  }
+}
+::-webkit-scrollbar-track {
+  background-color: fixit-var(scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  @include border-radius(full);
+}
@@ -2,12 +2,12 @@
  .highlight {
    padding: 0.375rem;
    font-size: 0.875rem;
-    font-family: $code-font-family;
+    font-family: fixit-var(code-font-family);
    font-weight: bold;
    word-break: break-all;
    white-space: pre-wrap;
  }

-  --ti-cursor-font-family: #{$global-font-family};
+  --ti-cursor-font-family: fixit-var(global-font-family);
  --ti-cursor-transform: translateX(0);
 }
@@ -0,0 +1,9 @@
+// Theme colors map
+$theme-colors: (
+  'primary': #1677ff,
+  'secondary': #8b949e,
+  'success': #52c41a,
+  'info': #13c2c2,
+  'warning': #faad14,
+  'danger': #ff4d4f
+) !default;
@@ -0,0 +1,5 @@
+@import 'admonition';
+@import 'alert';
+@import 'code-type';
+@import 'colors';
+@import 'utilities';
@@ -1,5 +0,0 @@
-@mixin blur {
-  .blur & {
-    @include filter(blur(1.5px));
-  }
-}
@@ -1,108 +0,0 @@
-@mixin border-radius($value) {
-  -webkit-border-radius: $value;
-  -moz-border-radius: $value;
-  border-radius: $value;
-}
-
-@mixin box-shadow($values...) {
-  -webkit-box-shadow: $values;
-  box-shadow: $values;
-}
-
-@mixin transition($values...) {
-  -webkit-transition: $values;
-  -moz-transition: $values;
-  -o-transition: $values;
-  transition: $values;
-}
-
-@mixin transform($value) {
-  -webkit-transform: $value;
-  -ms-transform: $value;
-  -o-transform: $value;
-  transform: $value;
-}
-
-@mixin filter($value) {
-  -webkit-filter: $value;
-  filter: $value;
-}
-
-@mixin flex($value) {
-  -webkit-flex: $value;
-  flex: $value;
-}
-
-@mixin box($orient) {
-  display: -moz-box;
-  display: -webkit-box;
-  display: box;
-
-  -webkit-box-orient: $orient;
-  -moz-box-orient: $orient;
-  box-orient: $orient;
-}
-
-@mixin placeholder($color) {
-  input::-webkit-input-placeholder {
-    color: $color;
-  }
-
-  input:-moz-placeholder {
-    color: $color;
-  }
-
-  input::-moz-placeholder {
-    color: $color;
-  }
-
-  input:-ms-input-placeholder {
-    color: $color;
-  }
-
-  input::placeholder {
-    color: $color;
-  }
-}
-
-@mixin max-content($property) {
-  #{$property}: -webkit-max-content;
-  #{$property}: -moz-max-content;
-  #{$property}: intrinsic;
-  #{$property}: max-content;
-}
-
-@mixin tab-size($value) {
-  -moz-tab-size: $value;
-  -o-tab-size: $value;
-  tab-size: $value;
-}
-
-@mixin appearance($value) {
-  -moz-appearance: $value;
-  -webkit-appearance: $value;
-}
-
-// TODO Superseded by text-wrap: wrap; in modern browsers
-@mixin overflow-wrap($value) {
-  word-wrap: $value;
-  overflow-wrap: $value;
-}
-
-@mixin line-break($value) {
-  -webkit-line-break: $value;
-  -ms-line-break: $value;
-  line-break: $value;
-}
-
-@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;
-}
@@ -1,6 +0,0 @@
-@import '_blur';
-@import '_compatibility';
-@import '_link';
-@import '_loading';
-@import '_scrollbar-width';
-@import '_z-index';
@@ -1,4 +0,0 @@
-@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
-  #{$rootPrefix}scrollbar-width: #{$width};
-  #{$rootPrefix}scrollbar-width-legacy: #{$widthLegacy};
-}
@@ -1,3 +0,0 @@
-@mixin z-index($level, $diff: 0) {
-  z-index: ($level * 100) + $diff;
-}
@@ -1,6 +1,6 @@
 #content-404 {
  font-size: 1.8rem;
  line-height: 3rem;
-  @include transform(translateY(30vh));
  text-align: center;
+  transform: translateY(30vh);
 }
@@ -22,6 +22,6 @@
    margin-bottom: 1rem;
  }

-  @import '../_partials/_archive/terms';
-  @import '../_partials/_archive/tags';
+  @import 'terms';
+  @import 'tags';
 }
@@ -0,0 +1,60 @@
+.tags {
+  margin: 10px 0;
+
+  .tag-item {
+    display: inline-block;
+    position: relative;
+    margin: 5px 10px;
+    transition: all ease-out 0.3s;
+    @include overflow-wrap(break-word);
+
+    &:active,
+    &:focus,
+    &:hover {
+      transform: scale(1.2);
+
+      sup {
+        color: fixit-var(global-font-color);
+        transition: all ease-out 0.3s;
+      }
+    }
+
+    sup {
+      color: fixit-var(secondary);
+    }
+  }
+}
+
+.tag-cloud-tags {
+  text-align: center;
+
+  .tag-item {
+    color: fixit-var(tag-cloud-color);
+    font-size: fixit-var(tag-cloud-font);
+    margin: 10px;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: fixit-var(global-link-hover-color);
+
+      sup {
+        opacity: 1;
+      }
+    }
+
+    sup {
+      opacity: 0;
+    }
+
+    @for $grade from 0 through 10 {
+      &[data-grade="#{$grade}"] {
+        @include set-fixit-var(tag-cloud-color, mix($tag-cloud-end, $tag-cloud-start, $grade * 10));
+
+        [data-theme=dark] & {
+          @include set-fixit-var(tag-cloud-color, mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10));
+        }
+      }
+    }
+  }
+}
@@ -33,8 +33,8 @@
        margin-bottom: 0.75rem;
      }

-      span {
-        float: right;
+      .more-post {
+        text-align: right;
        padding-right: 1rem;
      }
    }
@@ -59,11 +59,7 @@

 .archive-item-date {
  text-align: right;
-  color: var(#{$rootPrefix}global-font-secondary-color);
+  color: fixit-var(secondary);
  white-space: nowrap;
-  font-variant-numeric: tabular-nums lining-nums;
-}
-
-.more-post {
-  text-align: right;
+  @extend .variant-numeric;
 }
@@ -10,17 +10,17 @@
        width: 8rem;
        height: auto;
        margin: 0 auto;
-        @include border-radius(100%);
-        @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
-        @include transition(all 0.4s ease);
+        box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
+        transition: all 0.4s ease;
+        @include border-radius(full);

-        [data-theme='dark'] & {
-          @include box-shadow(0 0 0 0.3618em rgba(255, 255, 255, 0.05));
+        [data-theme=dark] & {
+          box-shadow: 0 0 0 0.3618em rgba(255, 255, 255, 0.05);
        }

        &:hover {
          position: relative;
-          @include transform(translateY(-0.75rem));
+          transform: translateY(-0.75rem);
        }
      }
    }
@@ -62,7 +62,7 @@
      font-weight: normal;
      margin: 0;
      padding: 0.5rem;
-      color: var(#{$rootPrefix}global-font-secondary-color);
+      color: fixit-var(secondary);
    }
  }
 }
@@ -78,18 +78,18 @@

  .summary {
    padding-block: 1rem;
-    color: var(#{$rootPrefix}global-font-color);
+    color: fixit-var(global-font-color);

    &:not(:last-of-type)::after {
      content: '';
      position: absolute;
      width: 100%;
-      padding: 2px;
+      padding: 1.5px;
      transform: translateY(18px);
      background: repeating-linear-gradient(
        135deg,
-        var(#{$rootPrefix}hr-background-color) 0px,
-        var(#{$rootPrefix}hr-background-color) 4px,
+        fixit-var(global-border-color) 0px,
+        fixit-var(global-border-color) 4px,
        transparent 4px,
        transparent 8px
      );
@@ -105,7 +105,7 @@
      aspect-ratio: auto 1000 / 420;
      position: relative;
      margin: 0.6rem auto;
-      @include transition(transform 0.4s ease);
+      transition: transform 0.4s ease;

      img {
        position: absolute;
@@ -113,11 +113,11 @@
        height: 100%;
        left: 0;
        top: 0;
-        @include object-fit(cover);
+        object-fit: cover;
      }

      &:hover {
-        @include transform(scale(1.01));
+        transform: scale(1.01);
      }
    }

@@ -129,12 +129,12 @@

    .content {
      margin-top: 0.3rem;
-      color: var(#{$rootPrefix}global-font-secondary-color);
+      color: fixit-var(global-placeholder-color);  
      @include link(false, true);

      b,
      strong {
-        color: var(#{$rootPrefix}global-font-secondary-color);
+        color: fixit-var(global-placeholder-color);
      }
    }

@@ -4,7 +4,7 @@

  .content {
    [id] {
-      scroll-margin-top: var(#{$rootPrefix}scroll-mt);
+      scroll-margin-top: fixit-var(scroll-mt);
    }
  }

@@ -14,6 +14,8 @@
@import '_single';
@import '_special';
@import '_archive';
-@import '_home';
-@import '_404';
-@import '_offline';
+@import 'home';
+@import '404';
+@import 'offline';
+@import "media";
+@import "patch";
@@ -140,12 +140,12 @@
    }
    // adjust the scroll margin top of the content anchors on the page
    body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
-      scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
+      scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
    }
  }

  [data-header-desktop='normal'] .page .content [id] {
-    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
+    @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
  }
  [data-header-desktop='normal'] {
    #toc-auto,
@@ -155,7 +155,7 @@
  }
  [data-header-desktop='sticky'] {
    .page .content .highlight.code-block .code-header {
-      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+      top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
    }
  }
 }
@@ -179,12 +179,12 @@
    }
    // adjust the scroll margin top of the content anchors on the page
    body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
-      scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
+      scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
    }
  }

  [data-header-mobile='normal'] .page .content [id] {
-    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
+    @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
  }
  [data-header-mobile='normal'] {
    #toc-auto,
@@ -194,7 +194,7 @@
  }
  [data-header-mobile='sticky'] {
    .page .content .highlight.code-block .code-header {
-      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+      top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
    }
  }
  
@@ -225,7 +225,7 @@

  // 确保打印时没有 scrollbar
  :root {
-    #{$rootPrefix}scrollbar-width: none !important;
+    @include set-fixit-var(scrollbar-width, none !important);
  }

  *::-webkit-scrollbar {
@@ -1,10 +1,11 @@
 #content-offline {
-  @include transform(translateY(30vh));
  text-align: center;
+  transform: translateY(30vh);

  .offline-title {
    font-size: 3.6rem;
  }
+
  .offline-subtitle {
    margin: 0.4rem 0;
    font-size: 1rem;
@@ -13,6 +14,7 @@
    line-height: 100%;
    color: #57606a;
  }
+
  .error-text {
    font-size: 1.2rem;
  }
@@ -2,15 +2,15 @@

@keyframes #{$prefix}pulse {
  from {
-    @include transform(scale3d(1, 1, 1));
+    transform: scale3d(1, 1, 1);
  }

  50% {
-    @include transform(scale3d(1.05, 1.05, 1.05));
+    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
-    @include transform(scale3d(1, 1, 1));
+    transform: scale3d(1, 1, 1);
  }
 }

@@ -2,7 +2,7 @@
  padding: 0.5rem 1rem;
  margin-block: 1rem;
  color: inherit;
-  border-left: 0.25em solid var(#{$rootPrefix}alert-border-color);
+  border-left: 0.25em solid fixit-var(alert-border-color);

  > :first-child {
    margin-top: 0;
@@ -17,7 +17,7 @@
    align-items: center;
    line-height: 1;
    margin-bottom: 1rem;
-    color: var(#{$rootPrefix}alert-color);
+    color: fixit-var(alert-color);

    > svg.icon {
      width: initial;
@@ -28,16 +28,20 @@

  @each $type, $item in $alert-color-map {
    &.alert-#{$type} {
-      #{$rootPrefix}alert-border-color: #{map-get($item, border-color)};
-      #{$rootPrefix}alert-color: #{map-get($item, color)};
+      @include set-fixit-vars((
+        alert-border-color: map-get($item, border-color),
+        alert-color: map-get($item, color)
+      ));
    }
  }

-  [data-theme='dark'] & {
+  [data-theme=dark] & {
    @each $type, $item in $alert-color-map-dark {
      &.alert-#{$type} {
-        #{$rootPrefix}alert-border-color: #{map-get($item, border-color)};
-        #{$rootPrefix}alert-color: #{map-get($item, color)};
+        @include set-fixit-vars((
+          alert-border-color: map-get($item, border-color),
+          alert-color: map-get($item, color)
+        ));
      }
    }
  }
@@ -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 2026-02-03
+& {
+  @include set-fixit-vars((
+    // Blob colors
+    color-blob-num: #778491,
+    color-blob-code-inner: #c5d1de,
+    // Syntax colors
+    color-prettylights-syntax-comment: #768390,
+    color-prettylights-syntax-constant: #6cb6ff,
+    color-prettylights-syntax-constant-other-reference-link: #96d0ff,
+    color-prettylights-syntax-entity: #dcbdfb,
+    color-prettylights-syntax-storage-modifier-import: #adbac7,
+    color-prettylights-syntax-entity-tag: #8ddb8c,
+    color-prettylights-syntax-keyword: #f47067,
+    color-prettylights-syntax-string: #96d0ff,
+    color-prettylights-syntax-variable: #f69d50,
+    color-prettylights-syntax-brackethighlighter-unmatched: #e5534b,
+    color-prettylights-syntax-brackethighlighter-angle: #768390,
+    color-prettylights-syntax-invalid-illegal-text: #cdd9e5,
+    color-prettylights-syntax-invalid-illegal-bg: #922323,
+    color-prettylights-syntax-carriage-return-text: #cdd9e5,
+    color-prettylights-syntax-carriage-return-bg: #ad2e2c,
+    color-prettylights-syntax-string-regexp: #8ddb8c,
+    color-prettylights-syntax-markup-list: #eac55f,
+    color-prettylights-syntax-markup-heading: #316dca,
+    color-prettylights-syntax-markup-italic: #adbac7,
+    color-prettylights-syntax-markup-bold: #adbac7,
+    color-prettylights-syntax-markup-deleted-text: #ffd8d3,
+    color-prettylights-syntax-markup-deleted-bg: #78191b,
+    color-prettylights-syntax-markup-inserted-text: #b4f1b4,
+    color-prettylights-syntax-markup-inserted-bg: #1b4721,
+    color-prettylights-syntax-markup-changed-text: #ffddb0,
+    color-prettylights-syntax-markup-changed-bg: #682d0f,
+    color-prettylights-syntax-markup-ignored-text: #adbac7,
+    color-prettylights-syntax-markup-ignored-bg: #255ab2,
+    color-prettylights-syntax-meta-diff-range: #dcbdfb,
+    color-prettylights-syntax-sublimelinter-gutter-mark: #545d68,
+  ));
+
+  .blob-num {
+    color: fixit-var(color-blob-num);
+  }
+  .blob-code-inner {
+    color: fixit-var(color-blob-code-inner);
+  }
+
+  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: fixit-var(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: fixit-var(color-prettylights-syntax-constant);
+  }
+
+  .pl-e /* entity */,
+  .pl-en /* entity.name */ {
+    color: fixit-var(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: fixit-var(color-prettylights-syntax-storage-modifier-import);
+  }
+
+  .pl-ent /* entity.name.tag, markup.quote */ {
+    color: fixit-var(color-prettylights-syntax-entity-tag);
+  }
+
+  .pl-k /* keyword, storage, storage.type */ {
+    color: fixit-var(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: fixit-var(color-prettylights-syntax-string);
+  }
+
+  .pl-v /* variable */,
+  .pl-smw /* sublimelinter.mark.warning */ {
+    color: fixit-var(color-prettylights-syntax-variable);
+  }
+
+  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: fixit-var(color-prettylights-syntax-brackethighlighter-unmatched);
+  }
+
+  .pl-ii /* invalid.illegal */ {
+    color: fixit-var(color-prettylights-syntax-invalid-illegal-text);
+    background-color: fixit-var(color-prettylights-syntax-invalid-illegal-bg);
+  }
+
+  .pl-c2 /* carriage-return */ {
+    color: fixit-var(color-prettylights-syntax-carriage-return-text);
+    background-color: fixit-var(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: fixit-var(color-prettylights-syntax-string-regexp);
+  }
+
+  .pl-ml /* markup.list */ {
+    color: fixit-var(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: fixit-var(color-prettylights-syntax-markup-heading);
+  }
+
+  .pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: fixit-var(color-prettylights-syntax-markup-italic);
+  }
+
+  .pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: fixit-var(color-prettylights-syntax-markup-bold);
+  }
+
+  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: fixit-var(color-prettylights-syntax-markup-deleted-text);
+    background-color: fixit-var(color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: fixit-var(color-prettylights-syntax-markup-inserted-text);
+    background-color: fixit-var(color-prettylights-syntax-markup-inserted-bg);
+  }
+
+  .pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: fixit-var(color-prettylights-syntax-markup-changed-text);
+    background-color: fixit-var(color-prettylights-syntax-markup-changed-bg);
+  }
+
+  .pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: fixit-var(color-prettylights-syntax-markup-ignored-text);
+    background-color: fixit-var(color-prettylights-syntax-markup-ignored-bg);
+  }
+
+  .pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: fixit-var(color-prettylights-syntax-meta-diff-range);
+  }
+
+  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: fixit-var(color-prettylights-syntax-brackethighlighter-angle);
+  }
+
+  .pl-sg /* sublimelinter.gutter-mark */ {
+    color: fixit-var(color-prettylights-syntax-sublimelinter-gutter-mark);
+  }
+
+  .pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: fixit-var(color-prettylights-syntax-constant-other-reference-link);
+  }
+}
@@ -17,13 +17,13 @@
  /* LineHighlight */
  .hl {
    display: block;
-    background-color: var(#{$rootPrefix}code-highlight-color);
-    box-shadow: -0.75rem 0 0 var(#{$rootPrefix}code-highlight-color), 0.75rem 0 0 var(#{$rootPrefix}code-highlight-color);
+    background-color: fixit-var(code-highlight-color);
+    box-shadow: -0.75rem 0 0 fixit-var(code-highlight-color), 0.75rem 0 0 fixit-var(code-highlight-color);
  }

-  @import '../_code-syntax/light';
+  @import 'light';

-  [data-theme='dark'] & {
-    @import '../_code-syntax/dark';
+  [data-theme=dark] & {
+    @import 'dark';
  }
 }
@@ -9,11 +9,11 @@ pre {
  line-height: 1.45em;
  padding: 0.5rem 0.75rem;
  overflow: auto;
-  font-size: $code-block-font-size;
-  font-family: $code-font-family;
-  background-color: var(#{$rootPrefix}code-block-background-color);
-  @include border-radius($global-border-radius);
-  @include tab-size(4);
+  font-size: fixit-var(code-block-font-size);
+  font-family: fixit-var(code-font-family);
+  background-color: fixit-var(code-block-background-color);
+  tab-size: 4;
+  @include border-radius;

  + pre {
    margin-top: 0.5rem;
@@ -24,10 +24,10 @@ pre {
    background-color: transparent;
    font-size: inherit;
    line-height: inherit;
+    min-width: max-content;
    @include border-radius(0);
-    @include max-content(min-width);

-    [data-theme='dark'] & {
+    [data-theme=dark] & {
      background-color: transparent;
    }
  }
@@ -41,9 +41,9 @@ pre {

 .highlight,
 .gist {
-  font-size: $code-block-font-size;
-  font-family: $code-font-family;
-  #{$rootPrefix}scrollbar-thumb-color: inherit;
+  font-size: fixit-var(code-block-font-size);
+  font-family: fixit-var(code-font-family);
+  @include set-fixit-var(scrollbar-thumb-color, inherit);

  table {
    width: 100%;
@@ -66,13 +66,13 @@ pre {
 .highlight {
  margin: 0.5rem 0;
  position: relative;
-  @include border-radius($global-border-radius);
+  @include border-radius;

  // lineNumbersInTable=true
-  > .chroma {
+  > div.chroma {
    position: relative;
-    background-color: var(#{$rootPrefix}code-block-background-color);
-    @include border-radius($global-border-radius);
+    background-color: fixit-var(code-block-background-color);
+    @include border-radius;

    &:is(pre):has(.ln) {
      padding: 0.5rem;
@@ -81,8 +81,8 @@ pre {
    .lntable {
      overflow: auto;
      display: block;
-      background-color: var(#{$rootPrefix}code-block-background-color);
-      @include border-radius($global-border-radius);
+      background-color: fixit-var(code-block-background-color);
+      @include border-radius;

      td {
        vertical-align: top;
@@ -120,7 +120,7 @@ pre {
  // Line numbers
  .lnt,
  .ln {
-    color: var(#{$rootPrefix}global-font-secondary-color);
+    color: fixit-var(secondary);
    @include user-select(none);
  }

@@ -132,28 +132,34 @@ pre {

  // code fences blocks wrapped
  &.code-block {
+    &.instant-height .code-wrapper {
+      transition: height 0s !important;
+    }
+
    .code-wrapper {
      overflow: hidden;
      height: auto;
      position: relative;
-      counter-reset: codeNos calc(var(#{$rootPrefix}line-start) - 1);
-      @include border-radius($global-border-radius);
-      @include transition(height 0.5s ease-out);
-      @include border-radius($global-border-radius);
+      counter-reset: codeNos calc(#{fixit-var(line-start)} - 1);
+      transition: height 0.5s ease-out;
+      @include border-radius;
+      @include border-radius;
      // attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
      // non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
-      #{$rootPrefix}max-shown-lines: attr(data-max number, 10);
-      #{$rootPrefix}line-start: attr(data-line-start number, 1);
-      #{$rootPrefix}line-digit: attr(data-line-digit number, 1);
+      @include set-fixit-vars((
+        max-shown-lines: attr(data-max number, 10),
+        line-start: attr(data-line-start number, 1),
+        line-digit: attr(data-line-digit number, 1),
+      ));
    }

    // code preview
    &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
      .code-wrapper {
-        height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
+        height: calc(1.45em * #{fixit-var(max-shown-lines)} + #{fixit-var(code-expand-offset, 0.5rem)});
      }
      &[data-mode='mac'] .code-wrapper {
-        #{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
+        @include set-fixit-var(code-expand-offset, 1.875rem + 0.5rem);
      }
    }
    
@@ -163,36 +169,33 @@ pre {
      align-items: center;
      box-sizing: border-box;
      width: 100%;
-      font-family: $global-font-family;
+      font-family: fixit-var(global-font-family);
      font-weight: bold;
      line-height: 1.4em;
-      color: var(#{$rootPrefix}code-header-color);
-      background-color: var(#{$rootPrefix}code-header-background-color);
+      color: fixit-var(code-header-color);
+      background-color: fixit-var(code-header-background-color);
      position: sticky;
-      top: var(#{$rootPrefix}breadcrumb-height);
-      @include z-index(0, 1);
-      @include border-radius($global-border-radius $global-border-radius 0 0);
-      @include transition(border-radius 0s);
+      top: fixit-var(breadcrumb-height);
+      transition: border-radius 0s;
+      cursor: pointer;
+      @include z-index(base);
+      @include border-radius(top);

      + .code-wrapper {
-        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include border-radius(bottom);

        > pre.chroma {
-          @include border-radius(0 0 $global-border-radius $global-border-radius);
+          @include border-radius(bottom);
        }
      }

-      &:hover {
-        cursor: pointer;
-      }
-
      .code-title {
        width: 100%;
        padding: 0.4rem;

        &::after {
          padding-left: 0.2rem;
-          content: attr(data-name, var(#{$rootPrefix}code-type, 'Code'));
+          content: attr(data-name, fixit-var(code-type, 'Code'));
        }

        // filename for code block
@@ -202,20 +205,20 @@ pre {

        .arrow {
          padding: 0 0.2rem;
-          @include transition(transform 0.2s ease);
+          transition: transform 0.2s ease;
        }

        .title-inner {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
-          background-color: var(#{$rootPrefix}code-header-background-color);
+          background-color: fixit-var(code-header-background-color);
          padding-inline: 1em;
          max-width: calc(100% - 200px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
-          @include z-index(0, 2);
+          @include z-index(base, 1);
        }
      }

@@ -232,12 +235,25 @@ pre {
      .copy-btn[data-copied] .fa-clone {
        --fa: "\f00c";
        font-weight: 900;
-        color: var(#{$rootPrefix}global-link-hover-color);
+        color: fixit-var(global-link-hover-color);
+      }
+
+      .download-btn[data-downloaded] .fa-download {
+        --fa: "\f1ce";
+        font-weight: 900;
+        color: fixit-var(global-link-hover-color);
+      }
+
+      .fullscreen-btn[data-fullscreen] .fa-expand {
+        --fa: "\f066";
+        font-weight: 900;
+        color: fixit-var(global-link-hover-color);
      }

      @each $type, $text in $code-type-map {
        &.language-#{to-lower-case($type)} {
-          #{$rootPrefix}code-type: $text;
+          // e.g., --fi-code-type: "JavaScript";
+          @include set-fixit-var(code-type, '"#{$text}"');
        }
      }
    }
@@ -246,7 +262,39 @@ pre {
    &:not(.line-nos-hidden) .line-nos-btn,
    .code-header [role='button']:hover,
    &:has([contenteditable='true']) .edit-btn {
-      color: var(#{$rootPrefix}global-link-hover-color);
+      color: fixit-var(global-link-hover-color);
+    }
+
+    &.is-fullscreen {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: 0 !important;
+      overflow: auto;
+      @include z-index(fixed, 1);
+      @include border-radius(0);
+
+      .code-header {
+        top: 0 !important;
+        cursor: default;
+        @include border-radius(0);
+
+        .arrow {
+          display: none;
+        }
+      }
+
+      .code-wrapper {
+        overflow: auto;
+        // 1.4em for header height, 0.8rem for padding
+        height: calc(100dvh - 1.4em - 0.8rem);
+      }
+
+      .code-expand-btn {
+        display: none;
+      }
    }

    .code-expand-btn {
@@ -261,10 +309,10 @@ pre {
        rgba($code-background-color, 0.9) 60%,
        $code-background-color 100%
      );
-      @include z-index(0, 1);
-      @include border-radius(0 0 $global-border-radius $global-border-radius);
+      @include z-index(base);
+      @include border-radius(bottom);

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        background: linear-gradient(
          180deg,
          rgba($code-background-color-dark, 0) 0%,
@@ -279,7 +327,7 @@ pre {
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-delay: 0.3s;
-        @include transition(transform 0.2s ease);
+        transition: transform 0.2s ease;
      }
    }

@@ -290,12 +338,12 @@ pre {
    // classic mode code block collapsed
    &.is-collapsed {
      .code-header {
-        #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)};
-        @include border-radius($global-border-radius);
-        @include transition(border-radius 0.2s ease 0.2s);
+        transition: border-radius 0.2s ease 0.2s;
+        @include set-fixit-var(code-header-background-color, darken($code-background-color, 6%));
+        @include border-radius;

-        [data-theme='dark'] & {
-          #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)};
+        [data-theme=dark] & {
+          @include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%));
        }

        + .code-wrapper {
@@ -304,7 +352,7 @@ pre {
      }

      .arrow {
-        @include transform(rotate(-90deg));
+        transform: rotate(-90deg);
      }

      .ellipses-btn {
@@ -392,11 +440,11 @@ pre {
          content: counter(codeNos);
          white-space: nowrap;
          text-align: right;
-          min-width: calc(var(#{$rootPrefix}line-digit) * 1ch);
+          min-width: calc(#{fixit-var(line-digit)} * 1ch);
          padding-inline: 0.75rem;
          flex-shrink: 0;
-          color: var(#{$rootPrefix}global-font-secondary-color);
-          background-color: var(#{$rootPrefix}code-block-background-color);
+          color: fixit-var(secondary);
+          background-color: fixit-var(code-block-background-color);
        }

        // highlight for line numbers
@@ -424,7 +472,7 @@ pre {
    &:not([data-mode='classic']) {
      border: 1px solid darken($code-background-color, 3%);

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        border-color: darken($code-background-color-dark, 3%);
      }
    }
@@ -434,20 +482,22 @@ pre {
        padding-top: 1.875rem;

        &::after {
-          background: var(#{$rootPrefix}mac-red, #fc625d);
-          box-shadow: 20px 0 var(#{$rootPrefix}mac-yellow, #fdbc40), 40px 0 var(#{$rootPrefix}mac-green, #35cd4b);
+          background: fixit-var(mac-red, #fc625d);
+          box-shadow: 20px 0 fixit-var(mac-yellow, #fdbc40), 40px 0 fixit-var(mac-green, #35cd4b);
          left: 8px;
          top: 8px;
          position: absolute;
-          border-radius: 50%;
          content: ' ';
          height: 12px;
          width: 12px;
+          @include border-radius(full);

-          [data-theme='dark'] & {
-            #{$rootPrefix}mac-red-dark: #ff5f56;
-            #{$rootPrefix}mac-yellow-dark: #febc2e;
-            #{$rootPrefix}mac-green-dark: #28c840;
+          [data-theme=dark] & {
+            @include set-fixit-vars((
+              mac-red: #ff5f56,
+              mac-yellow: #febc2e,
+              mac-green: #28c840,
+            ));
          }
        }
      }
@@ -461,12 +511,12 @@ pre {
  }
 }

-@import '../_code-syntax/index';
+@import './_code-syntax';

 // gist shortcode
 .gist {
-  background-color: var(#{$rootPrefix}code-block-background-color);
-  @include border-radius($global-border-radius $global-border-radius 0 0);
+  background-color: fixit-var(code-block-background-color);
+  @include border-radius(top);
  
  .gist-file,
  .gist-data,
@@ -487,8 +537,8 @@ pre {
        td.blob-num {
          position: sticky;
          left: 0;
-          background-color: var(#{$rootPrefix}code-block-background-color);
-          @include z-index(0, 1);
+          background-color: fixit-var(code-block-background-color);
+          @include z-index(base);
        }

        td.blob-code {
@@ -501,11 +551,11 @@ pre {
  .gist-meta {
    padding: 0.4rem 0.8rem;
    @include link(false, false);
-    @include border-radius(0 0 $global-border-radius $global-border-radius);
-    background-color: var(#{$rootPrefix}gist-meta-background-color);
+    @include border-radius(bottom);
+    background-color: fixit-var(gist-meta-background-color);
  }

-  [data-theme='dark'] & {
-    @import '../_code-syntax/github-dark-dimmed';
+  [data-theme=dark] & {
+    @import './_code-syntax/github-dark-dimmed';
  }
 }
@@ -5,11 +5,11 @@
  margin-block: 1rem;
  padding: 1rem 1.25rem;
  position: relative;
-  @include border-radius($global-border-radius * 1.5);
+  @include border-radius(0.5rem);
  @include user-select(none);
  @extend .print-d-none;

-  [data-theme='dark'] & {
+  [data-theme=dark] & {
    background-color: lighten($global-background-color-dark, 3%);
  }

@@ -22,7 +22,7 @@
    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'] & {
+    [data-theme=dark] & {
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03),
@@ -51,7 +51,7 @@
      font-weight: 500;
      display: flex;
      align-items: center;
-      @include transition(all 0.3s ease-out);
+      transition: all 0.3s ease-out;

      &:only-child {
        max-width: 100%;
@@ -73,11 +73,11 @@
      }

      &[rel='prev']:hover {
-        @include transform(translateX(-4px));
+        transform: translateX(-4px);
      }

      &[rel='next']:hover {
-        @include transform(translateX(4px));
+        transform: translateX(4px);
      }
    }
  }
@@ -86,7 +86,7 @@
 // Collection aside container
 .aside-collection {
  position: sticky;
-  top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+  top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
  box-sizing: border-box;
  @include overflow-wrap(break-word);
  @include blur;
@@ -103,7 +103,7 @@
    .collection-summary {
      background-color: darken($global-background-color, 4%);

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        background-color: lighten($global-background-color-dark, 4%);
      }
    }
@@ -116,7 +116,7 @@
    padding: 0.2em 0.5em;
    background-color: darken($global-background-color, 3%);

-    [data-theme='dark'] & {
+    [data-theme=dark] & {
      background-color: lighten($global-background-color-dark, 3%);
    }
    
@@ -127,7 +127,7 @@
    .collection-name {
      flex-grow: 1;
      font-weight: bold;
-      font-size: $collection-title-font-size;
+      font-size: fixit-var(collection-title-font-size);

      &::before {
        content: attr(title) '・';
@@ -136,7 +136,7 @@

    .collection-count {
      flex-shrink: 0;
-      color: var(#{$rootPrefix}secondary);
+      color: fixit-var(secondary);
    }

    .details-icon {
@@ -147,10 +147,10 @@
  }

  .collection-content {
-    font-size: $collection-list-font-size;
+    font-size: fixit-var(collection-list-font-size);
    background-color: darken($global-background-color, 2%);

-    [data-theme='dark'] & {
+    [data-theme=dark] & {
      background-color: lighten($global-background-color-dark, 2%);
    }

@@ -171,27 +171,15 @@
        margin-right: 0.5em;
        position: relative;
        bottom: 2px;
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);
      }

      .collection-item > .active {
        font-weight: bold;
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);

        &::before {
-          color: $single-link-hover-color;
-  
-          [data-theme='dark'] & {
-            color: $single-link-hover-color-dark;
-          }
+          color: fixit-var(single-link-hover-color);
        }
      }
    }
@@ -203,19 +191,19 @@
      gap: 0.5em;
      background-color: darken($global-background-color, 3%);

-      [data-theme='dark'] & {
+      [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);
+        @include border-radius(full);
+        transition: background-color 0.3s ease-out;

        &:hover {
          background-color: darken($global-background-color, 10%);

-          [data-theme='dark'] & {
+          [data-theme=dark] & {
            background-color: lighten($global-background-color-dark, 10%);
          }
        }
@@ -0,0 +1,22 @@
+// Color preview styles for inline code
+.color-code {
+  position: relative;
+  @include set-fixit-var(color-code-size, 0.64em);
+
+  .color-preview {
+    display: inline-block;
+    width: fixit-var(color-code-size);
+    height: fixit-var(color-code-size);
+    @include border-radius(full);
+    margin-right: 0.25em;
+    vertical-align: middle;
+    border: 1px solid;
+    border-color: fixit-var(color-preview-border-color, #d1d9e0b3);
+    pointer-events: none;
+    transform: translateY(-1px);
+
+    [data-theme=dark] & {
+      @include set-fixit-var(color-preview-border-color, #3d444db3);
+    }
+  }
+}
@@ -0,0 +1,62 @@
+// Diagram container
+.diagram-container {
+  position: relative;
+  margin-block: 0.5rem;
+}
+
+// Diagram copy button styles
+.diagram-copy-btn {
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  line-height: 1;
+  padding: 0.5rem;
+  user-select: none;
+  border: 1px solid;
+  color: fixit-var(dcb-color, #25292e);
+  border-color: fixit-var(dcb-border-color, #d1d9e0);
+  background-color: fixit-var(dcb-background-color, #f6f8fa);
+  box-shadow: fixit-var(dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
+  transition-duration: 0.1s;
+  transition-property: color, background-color, box-shadow, border-color;
+  @include border-radius;
+  @include z-index(base);
+  @extend .print-d-none;
+
+  [data-theme=dark] & {
+    @include set-fixit-vars((
+      dcb-color: #d1d7e0,
+      dcb-border-color: #3d444d,
+      dcb-background-color: #2a313c,
+      dcb-box-shadow: 0px 0px 0px 0px #000000,
+    ));
+  }
+
+  &:hover {
+    @include set-fixit-vars((
+      dcb-border-color: #d1d9e0,
+      dcb-background-color: #eff2f5,
+    ));
+
+    [data-theme=dark] & {
+      @include set-fixit-vars((
+        dcb-border-color: #3d444d,
+        dcb-background-color: #2f3742,
+      ));
+    }
+  }
+
+  .fa-clone {
+    font-size: 1rem;
+  }
+
+  &[data-copied] {
+    .fa-clone {
+      --fa: '\f00c';
+      --fa-style: 900;
+      color: fixit-var(global-link-hover-color);
+    }
+  }
+}
@@ -1,7 +1,7 @@
 .fixit-decryptor-container {
-  font-family: $global-font-family;
+  font-family: fixit-var(global-font-family);
  text-align: center;
-  margin-block: var(#{$rootPrefix}decryptor-margin-block);
+  margin-block: fixit-var(decryptor-margin-block);

  .fixit-decryptor-loading {
    vertical-align: middle;
@@ -13,29 +13,24 @@
    display: none;
    box-sizing: border-box;
    outline: none;
-    color: var(#{$rootPrefix}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%);
+    color: fixit-var(global-font-color);
+    border: 1px solid fixit-var(global-border-color);
+    box-shadow: 0px 0px 5px 0px fixit-var(global-border-color);
+    @include border-radius;
+    transition: all 0.1s ease-out;

    &:active,
    &:focus,
    &:hover {
      color: darken($global-link-hover-color, 6%);
-      border-color: var(#{$rootPrefix}global-link-hover-color);
+      border-color: fixit-var(global-link-hover-color);
      box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        color: lighten($global-link-hover-color-dark, 6%);
        box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
      }
    }
-
-    [data-theme='dark'] & {
-      border-color: lighten($global-border-color-dark, 15%);
-      box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
-    }
  }

  .fixit-decryptor-input {
@@ -43,20 +38,15 @@
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
-    background-color: var(#{$rootPrefix}global-background-color);
+    background-color: fixit-var(global-background-color);
  }

  .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;
-    }
+    background-color: fixit-var(global-background-color);
+    transition: all 0.1s ease-out;
  }

  .fixit-encryptor-btn {
@@ -84,7 +74,7 @@ fixit-encryptor {
 // fixit-encryptor for for the encrypted pages
 article fixit-encryptor {
  .fixit-decryptor-container {
-    #{$rootPrefix}decryptor-margin-block: 2rem;
+    @include set-fixit-var(decryptor-margin-block, 2rem);
  }
  &.decrypted > .fixit-decryptor-container {
    .fixit-decryptor-loading,
@@ -102,7 +92,7 @@ article fixit-encryptor {
 // fixit-encryptor shortcodes
 #content fixit-encryptor {
  .fixit-decryptor-container {
-    #{$rootPrefix}decryptor-margin-block: 1rem;
+    @include set-fixit-var(decryptor-margin-block, 1rem);
  }
  &.decrypted > .fixit-decryptor-container {
    display: none;
@@ -6,27 +6,23 @@
  }

  .post-info {
-    border-bottom: 1px solid $global-border-color;
+    border-bottom: 1px solid fixit-var(global-border-color);
    padding: 0.3rem 0;

-    [data-theme='dark'] & {
-      border-bottom: 1px solid $global-border-color-dark;
-    }
-
    .post-info-line {
      display: flex;
      justify-content: space-between;

      .post-info-mod {
        font-size: 0.8em;
-        color: var(#{$rootPrefix}global-font-secondary-color);
+        color: fixit-var(secondary);  

        @include link(false, false);
      }

      .post-info-license {
        font-size: 0.8em;
-        color: var(#{$rootPrefix}global-font-secondary-color);
+        color: fixit-var(secondary);

        @include link(false, false);
      }
@@ -41,6 +37,7 @@
          content: '|';
          margin-left: 0.25rem;
          margin-right: 0.25rem;
+          color: fixit-var(secondary);
        }
      }

@@ -90,18 +87,18 @@
      flex: 1;
      font-size: 1rem;
      font-weight: 600;
-      @include transition(all 0.3s ease-out);
+      transition: all 0.3s ease-out;

      &[rel='next'] {
        text-align: right;
      }

      &[rel='prev']:hover {
-        @include transform(translateX(-4px));
+        transform: translateX(-4px);
      }

      &[rel='next']:hover {
-        @include transform(translateX(4px));
+        transform: translateX(4px);
      }
    }
  }
@@ -1,8 +1,8 @@
-@import '../_partials/_single/toc';
-@import '../_partials/_single/fixit-decryptor';
-@import '../_partials/_single/collections';
-@import '../_partials/_single/related';
-@import '../_partials/_single/color-preview';
+@import 'toc';
+@import 'fixit-decryptor';
+@import 'collections';
+@import 'related';
+@import 'color-preview';

 .single {
  .single-title {
@@ -17,14 +17,14 @@
      width: max-content;
      transform: rotate(30deg);
      margin-right: 0.25em;
-      color: var(#{$rootPrefix}danger);
+      color: fixit-var(danger);
    }

    .icon-repost {
      display: inline-block;
      width: max-content;
      margin-right: 0.25em;
-      color: var(#{$rootPrefix}success);
+      color: fixit-var(success);
    }
  }

@@ -37,7 +37,7 @@

  .post-meta {
    font-size: 0.875rem;
-    color: var(#{$rootPrefix}global-font-secondary-color);
+    color: fixit-var(secondary);

    .comment-visitors,
    .comment-count {
@@ -56,16 +56,12 @@
      img.avatar {
        width: 1.3rem;
        height: 1.3rem;
-        border-radius: 50%;
        vertical-align: text-bottom;
-        border: 0.25px solid $global-border-color;
+        border: 0.25px solid fixit-var(global-border-color);
        box-sizing: border-box;
        object-position: center;
-        @include object-fit(cover);
-
-        [data-theme='dark'] & {
-          border-color: $global-border-color-dark;
-        }
+        @include border-radius(full);
+        object-fit: cover;
      }
    }
  }
@@ -89,14 +85,14 @@
    text-align: center;
    font-size: 15px;
    padding: 5px;
-    color: var(#{$rootPrefix}global-font-secondary-color);
+    color: fixit-var(global-placeholder-color);
  }

  hr {
    position: relative;
    height: 1em;
    margin-block: 1em;
-    background: linear-gradient(to right, var(#{$rootPrefix}hr-background-color) 50%, transparent 50%);
+    background-image: linear-gradient(to right, fixit-var(global-border-color) 50%, transparent 50%);
    background-size: 10px 2px;
    background-position: center;
    background-repeat: repeat-x;
@@ -105,20 +101,20 @@
    &.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(#{$rootPrefix}hr-before-color);
-        content: '\f0c4';
+        @include z-index(base);
+        color: fixit-var(hr-active-color);
        font-size: 20px;
        line-height: 1;
        transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
+        font-family: var(--fa-family-classic);
+        font-weight: 600;
+        content: '\f0c4';
      }
    
      &:hover::before {
@@ -133,7 +129,7 @@
    > h2 {
      font-size: 1.5em;
      padding-bottom: 0.3em;
-      border-bottom: 1px solid $global-border-color;
+      border-bottom: 1px solid fixit-var(global-border-color-light);
    }

    > h3 {
@@ -159,7 +155,7 @@
      margin-top: 1.5rem;
      margin-bottom: 1rem;

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        font-weight: bolder;
      }

@@ -192,7 +188,7 @@
    strong {
      font-weight: bold;

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        color: #ddd;
      }
    }
@@ -203,60 +199,64 @@
      white-space: normal;
      @include overflow-wrap(break-word);

-      [data-theme='dark'] & b,
-      [data-theme='dark'] & strong {
-        color: $single-link-color-dark;
+      b,
+      strong {
+        [data-theme=dark] & {
+          color: inherit;
+        }
      }
    }

-    [data-theme='dark'] a:hover b,
-    [data-theme='dark'] a:hover strong {
-      color: $single-link-hover-color-dark;
-    }
-
-    ul,
-    ol,
-    dl {
+    > ul,
+    > ol,
+    > dl {
      margin-block: 0.5em;
    }

-    ul {
-      list-style-type: disc;
+    ol ol,
+    ol ul,
+    ul ol,
+    ul ul {
+      padding-left: 20px;
+    }

-      // Task lists
-      li[data-task] {
-        list-style: none;
-        margin-left: -1.5rem;
-      }
+    li::marker {
+      color: fixit-var(secondary);
+    }
+    li:hover::marker {
+      color: fixit-var(single-link-hover-color);
    }

    // Task lists
    li[data-task] {
-      color: var(#{$rootPrefix}task-color);
+      list-style: none;
+      color: fixit-var(task-color);
+
      .checkbox-icon {
-        margin-right: 0.25em;
-        color: var(#{$rootPrefix}checkbox-color);
+        margin: 0 .25em 0 -1.5em;
+        color: fixit-var(checkbox-color);
      }
    }
-    li[data-task='x'],
-    li[data-task='-'] {
-      #{$rootPrefix}task-color: var(#{$rootPrefix}secondary);
-      text-decoration: line-through rgba(145, 145, 145, 0.6);
-    }
    li[data-task='x'] {
-      #{$rootPrefix}checkbox-color: var(#{$rootPrefix}primary);
+      @include set-fixit-var(checkbox-color, fixit-var(secondary));
+
+      .checkbox-icon {
+        opacity: 0.6;
+      }
    }
    li[data-task='-'] {
      opacity: 0.6;
+      text-decoration: line-through rgba(145, 145, 145, 0.6);
+      @include set-fixit-var(task-color, fixit-var(secondary));
    }
    li[data-task='/'] {
-      #{$rootPrefix}task-color: var(#{$rootPrefix}success);
+      @include set-fixit-var(task-color, fixit-var(success));
    }
    li[data-task='!'] {
-      #{$rootPrefix}checkbox-color: var(#{$rootPrefix}danger);
+      @include set-fixit-var(checkbox-color, fixit-var(danger));
    }
    li[data-task='?'] {
-      #{$rootPrefix}checkbox-color: var(#{$rootPrefix}warning);
+      @include set-fixit-var(checkbox-color, fixit-var(warning));
    }

    dl {
@@ -269,23 +269,25 @@
    }

    ruby {
-      background-color: var(#{$rootPrefix}code-block-background-color);
+      background-color: fixit-var(code-block-background-color);

      rt {
-        color: var(#{$rootPrefix}global-font-secondary-color);
+        color: fixit-var(secondary);
      }
    }

    mark {
      padding: 0.14em 0.28em;
-      background-color: var(#{$rootPrefix}mark-background-color, mark);
-      color: var(#{$rootPrefix}mark-color, marktext);
-      @include border-radius($global-border-radius);
+      background-color: fixit-var(mark-background-color, mark);
+      color: fixit-var(mark-color, marktext);
+      @include border-radius;

      @each $color, $value in $theme-colors {
        &.mark-#{$color} {
-          #{$rootPrefix}mark-color: #fff;
-          #{$rootPrefix}mark-background-color: var(#{$rootPrefix}#{$color});
+          @include set-fixit-vars((
+            mark-color: #fff,
+            mark-background-color: fixit-var(#{$color}),
+          ));
        }
      }
    }
@@ -293,37 +295,25 @@
    .table-wrapper {
      position: relative;
      overflow-x: auto;
-      #{$rootPrefix}scrollbar-thumb-color: #{$table-background-color};
-
-      [data-theme='dark'] & {
-        #{$rootPrefix}scrollbar-thumb-color: #{$table-background-color-dark};
-      }
+      @include set-fixit-var(scrollbar-thumb-color, fixit-var(table-background-color));

      > table {
        width: 100%;
        max-width: 100%;
        margin: 0.625rem 0;
        border-spacing: 0;
-        background: $table-background-color;
+        background: fixit-var(table-background-color);
        border-collapse: collapse;

-        [data-theme='dark'] & {
-          background: $table-background-color-dark;
-        }
-
        thead {
-          background: $table-thead-color;
-
-          [data-theme='dark'] & {
-            background-color: $table-thead-color-dark;
-          }
+          background: fixit-var(table-thead-color);
        }

        &:not([class]) tbody {
          & tr:nth-child(odd) {
            background: darken($table-background-color, 2.25%);

-            [data-theme='dark'] & {
+            [data-theme=dark] & {
              background-color: lighten($table-background-color-dark, 2.75%);
            }
          }
@@ -331,7 +321,7 @@
          & tr:hover {
            background: darken($table-background-color, 4.5%);

-            [data-theme='dark'] & {
+            [data-theme=dark] & {
              background-color: lighten($table-background-color-dark, 5.5%);
            }
          }
@@ -342,7 +332,7 @@
          padding: 0.3rem 1rem;
          border: 1px solid darken($table-thead-color, 2%);

-          [data-theme='dark'] & {
+          [data-theme=dark] & {
            border-color: darken($table-thead-color-dark, 2%);
          }
        }
@@ -384,8 +374,8 @@

    blockquote {
      display: block;
-      border-left: 0.25em solid $global-border-color;
-      color: $blockquote-color;
+      border-left: 0.25em solid fixit-var(global-border-color);
+      color: fixit-var(blockquote-color);
      padding: 0 1em;
      margin: 1rem 0;

@@ -398,11 +388,6 @@
        margin-inline-start: 0.25em;
      }

-      [data-theme='dark'] & {
-        color: $blockquote-color-dark;
-        border-left-color: $global-border-color-dark;
-      }
-
      @include link(false, true);
    }

@@ -410,10 +395,10 @@
      padding: 2px 4px;
      background-color: rgba(238, 238, 238, 0.7);
      color: #555555;
-      border-radius: 4px;
      cursor: pointer;
+      @include border-radius(0.25rem);

-      [data-theme='dark'] & {
+      [data-theme=dark] & {
        background-color: rgba(56, 139, 253, 0.1);
        color: #58a6ff;
      }
@@ -424,7 +409,12 @@
    .footnotes {
      font-size: 0.75rem;
      white-space: normal;
-      color: darken($global-font-secondary-color, 5%);
+      color: #a3a3ae;
+      @include link(false, true);
+
+      [data-theme=dark] & {
+        color: #9d9d9f;
+      }

      ol {
        margin-block: 1em;
@@ -432,7 +422,7 @@
      }
      
      hr {
-        background-color: var(#{$rootPrefix}hr-background-color);
+        background-color: fixit-var(global-border-color);
        height: 1px;
        margin-block: 1em;
      }
@@ -446,12 +436,6 @@
        text-decoration: underline;
      }

-      @include link(false, true);
-
-      [data-theme='dark'] & {
-        color: lighten($global-font-secondary-color-dark, 5%);
-      }
-
      p {
        margin: 0.25rem 0;
      }
@@ -460,19 +444,13 @@
    kbd {
      display: inline-block;
      padding: 0 0.25rem;
-      background-color: var(#{$rootPrefix}global-background-color);
-      border: 1px solid $global-border-color;
+      background-color: fixit-var(global-background-color);
+      border: 1px solid fixit-var(global-border-color);
      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);
-
-      [data-theme='dark'] & {
-        border: 1px solid $global-border-color-dark;
-        color: $code-color-dark;
-        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
-      }
+      font-family: fixit-var(code-font-family);
+      color: fixit-var(code-color);
+      box-shadow: inset 0 -1px 0 fixit-var(global-border-color);
+      @include border-radius;
    }

    // KaTeX styles
@@ -485,7 +463,7 @@
      padding: 0.14em 0.28em;
      background-color: mark;
      cursor: help;
-      @include border-radius($global-border-radius);
+      @include border-radius;
    }

    // MathJax styles
@@ -510,14 +488,14 @@
      margin-top: 0.5rem;
    }
  }
-  
-  @import '../_shortcodes';
-  @import '../_partials/_single/alert';
-  @import '../_partials/_single/code';
-  @import '../_partials/_single/diagram-copy-btn';
-  @import '../_partials/_single/reward';
-  @import '../_partials/_single/footer';
-  @import '../_partials/_single/comment';
+
+  @import '_shortcodes';
+  @import 'alert';
+  @import 'code';
+  @import 'diagram-copy-btn';
+  @import 'reward';
+  @import 'footer';
+  @import 'comment';
 }

 .lg-toolbar .lg-icon::after {
@@ -5,7 +5,7 @@
    display: block;
    border: 0;
    padding-top: 1px;
-    background: var(#{$rootPrefix}divider-edge-weak);
+    background: fixit-var(divider-edge-weak);
    margin-block: 1rem 0.5rem;
  }

@@ -25,12 +25,12 @@

    .related-title {
      font-weight: bold;
-      font-size: $related-title-font-size;
+      font-size: fixit-var(related-title-font-size);
    }

    .related-count {
      flex-shrink: 0;
-      color: var(#{$rootPrefix}secondary);
+      color: fixit-var(secondary);
    }

    .details-icon {
@@ -41,7 +41,7 @@
  }

  .related-content {
-    font-size: $related-list-font-size;
+    font-size: fixit-var(related-list-font-size);

    .related-list {
      margin: 0;
@@ -60,14 +60,8 @@
        margin-right: 0.5em;
        position: relative;
        bottom: 2px;
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);
      }
    }
  }
 }
-
-
@@ -29,7 +29,7 @@
      }
  
      &:hover span[data-animation] {
-        animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
+        animation: fixit-var(animation-reward, jackInTheBox) 0.8s infinite linear;
        // The animation may affect :hover of img in dark mode
        pointer-events: none;
      }
@@ -38,7 +38,7 @@
        display: inline-block;
        margin: 0.8em 2em 0;
        max-width: 100%;
-        width: $reward-img-width;
+        width: fixit-var(reward-img-width);
      }
    }

@@ -49,13 +49,13 @@
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 1rem;
-      background-color: var(#{$rootPrefix}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));
+      background-color: fixit-var(global-background-color);
+      @include z-index(fixed);
+      @include border-radius;
+      box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);

-      [data-theme='dark'] & {
-        @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
+      [data-theme=dark] & {
+        box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.2);
      }
    }
  }
@@ -65,30 +65,23 @@
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
-    color: lighten($reward-color, 5%);
+    color: fixit-var(reward-color, lighten($reward-color, 5%));
    border: 2px solid lighten($reward-color, 10%);
-    border-radius: $global-border-radius;
    padding: 0.6rem 1rem;
-    background-color: var(#{$rootPrefix}global-background-color);
+    background-color: fixit-var(global-background-color);
    vertical-align: text-top;
    line-height: 1rem;
-    @include transition(all 0.3s ease-out);
+    @include border-radius;
+    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;
-      }
+      border-color: fixit-var(reward-color);
+      background-color: fixit-var(reward-color);
    }

-    [data-theme='dark'] & {
-      color: $reward-color;
+    [data-theme=dark] & {
      border-color: lighten($reward-color, 5%);
    }
  }
@@ -0,0 +1,115 @@
+.admonition {
+  position: relative;
+  margin: 1rem 0;
+  padding: 0 0.75rem;
+  border-left: .25rem solid;
+  overflow: hidden;
+  background-color: fixit-var(admonition-bg-color);
+  border-left-color: fixit-var(admonition-color);
+  @include border-radius;
+
+  .admonition-title {
+    font-weight: fixit-var(admonition-title-font-weight, bold);
+    margin: 0 -0.75rem;
+    padding: 0.25rem 1.8rem;
+    border-bottom: 1px solid;
+    position: relative;
+    @include border-radius(0);
+
+    strong {
+      font-weight: bolder;
+      text-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.2);
+
+      [data-theme=dark] & {
+        text-shadow: 0 0.05rem 0.05rem rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    // title-only admonition without content
+    &:not(:has(+ .details-content)) {
+      @include set-fixit-var(admonition-title-font-weight, normal);
+      padding: 0.75rem 1rem 0.75rem 2.2rem;
+      border: 0;
+
+      i.icon {
+        left: 1.1rem;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  > .admonition-title {
+    border-bottom-color: fixit-var(admonition-bg-color);
+    background-color: fixit-var(admonition-bg-color-collapsed);
+    transition: all 0.2s ease;
+
+    i.icon {
+      color: fixit-var(admonition-color);
+    }
+  }
+
+  &.open > .admonition-title {
+    background-color: fixit-var(admonition-bg-color);
+  }
+
+  .admonition-content {
+    padding: 0.5rem 0;
+    
+    // for extended alert syntax
+    > p {
+      margin: 0;
+    }
+
+    .code-block .code-header {
+      top: initial !important;
+    }
+  }
+
+  i.icon {
+    font-size: 0.85rem;
+    position: absolute;
+    top: 50%;
+    left: 0.9rem;
+    translate: -50% -50%;
+  }
+
+  i.details-icon {
+    position: absolute;
+    top: 50%;
+    right: 0.9rem;
+    translate: 50% -50%;
+  }
+
+  // default admonition type is note
+  @include set-fixit-vars((
+    admonition-color: map-get(map-get($admonition-color-map, note), color),
+    admonition-bg-color: map-get(map-get($admonition-color-map, note), bg-color),
+    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} {
+         @include set-fixit-vars((
+          admonition-color: map-get($item, color),
+          admonition-bg-color: map-get($item, bg-color),
+          admonition-bg-color-collapsed: opacify(map-get($item, bg-color), 0.15),
+        ));
+      }
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0.75rem;
+  }
+
+  // content-only admonition without title
+  &:not(:has(.admonition-title)) {
+    border: 1px solid fixit-var(admonition-bg-color);
+
+    .admonition-content {
+      padding: 0.75rem 0.25rem;
+    }
+  }
+}
@@ -1,8 +1,5 @@
-/**
- * Card link style
- * @author  @Lruihao https://lruihao.cn
- */
-
+/// Card link style
+/// @author @Lruihao https://lruihao.cn
 .card-link {
  position: relative;
  display: block;
@@ -23,7 +20,7 @@
    bottom: 0.75rem;
    left: 0;
    right: 0;
-    background-image: var(#{$rootPrefix}logo-img);
+    background-image: fixit-var(logo-img);
    background-repeat: no-repeat;
    filter: blur(0.5rem);
    opacity: 0.5;
@@ -53,7 +50,7 @@
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
-    color: var(#{$rootPrefix}global-font-color);
+    color: fixit-var(global-font-color);
  }

  &meta {
@@ -61,7 +58,7 @@
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.825rem;
-    color: var(#{$rootPrefix}global-font-secondary-color);
+    color: fixit-var(secondary);
  }

  &icon-link {
@@ -98,10 +95,10 @@
    flex-shrink: 0;
    margin-left: 0.25rem;
    object-fit: cover;
-    border-radius: 50%;
+    @include border-radius(full);
  }

-  [data-theme='dark'] & {
+  [data-theme=dark] & {
    &content {
      background-color: rgba(61, 62, 65, 0.88);
    }
@@ -16,28 +16,20 @@ blockquote.blockquote-center {
  }

  &::before {
-    border-top: 1px solid $global-border-color;
+    border-top: 1px solid fixit-var(global-border-color);
    text-align: left;
    top: -20px;
-    content: '\f10d';
-    font-family: 'Font Awesome 5 Free';
+    font-family: var(--fa-family-classic);
    font-weight: 900;
-
-    [data-theme='dark'] & {
-      border-top-color: $global-border-color-dark;
-    }
+    content: '\f10d';
  }

  &::after {
-    border-bottom: 1px solid $global-border-color;
+    border-bottom: 1px solid fixit-var(global-border-color);
    bottom: -20px;
    text-align: right;
-    content: '\f10e';
-    font-family: 'Font Awesome 5 Free';
+    font-family: var(--fa-family-classic);
    font-weight: 900;
-
-    [data-theme='dark'] & {
-      border-bottom-color: $global-border-color-dark;
-    }
+    content: '\f10e';
  }
 }
@@ -0,0 +1,109 @@
+.file-tree-wrapper {
+  border: 1px solid fixit-var(global-border-color);
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1;
+  margin-block: 0.5rem;
+  @include border-radius;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    [data-theme=dark] & {
+      box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  ul.file-tree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .file-tree-item {
+      position: relative;
+
+      &.file-tree-folder {
+        > .file-tree-toggle {
+          cursor: pointer;
+          font-weight: bold;
+
+          [data-theme=dark] & {
+            color: #ddd;
+          }
+
+          &:hover {
+            i,
+            span {
+              opacity: 0.6;
+            }
+          }
+        }
+      }
+
+      .file-tree-label {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        transition: all 0.15s ease;
+        @include border-radius;
+
+        .file-tree-icon {
+          width: 1rem;
+          text-align: center;
+          flex-shrink: 0;
+        }
+
+        &.is-highlighted {
+          color: fixit-var(global-link-hover-color);
+        }
+      }
+    }
+
+    &:not([data-level='0']) {
+      .file-tree-item {
+        margin: 0.25rem 0;
+        padding-left: 0.25rem;
+
+        .file-tree-label::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: -0.5rem;
+          translate: 0 -50%;
+          width: 0.75rem;
+          height: 1px;
+          background-color: fixit-var(secondary);
+        }
+      }
+    }
+  }
+
+  .file-tree .file-tree {
+    padding-left: 1.25rem;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -0.25rem;
+      bottom: 0.625rem;
+      left: calc(1rem - 0.5px);
+      width: 1px;
+      background-color: fixit-var(secondary);
+      height: fixit-var(file-tree-line-height);
+    }
+  }
+
+  .file-tree-item.is-collapsed {
+    > .file-tree {
+      display: none;
+    }
+
+    > .file-tree-label .file-tree-icon::before {
+      --fa: '\f07b';
+    }
+  }
+}
@@ -0,0 +1,14 @@
+@import 'admonition';
+@import 'bilibili';
+@import 'bluesky';
+@import 'douyin';
+@import 'cardlink';
+@import 'center-quote';
+@import 'echarts';
+@import 'file-tree';
+@import 'instagram';
+@import 'mapbox';
+@import 'mermaid';
+@import 'tabs';
+@import 'timeline';
+@import 'version';
@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  [data-theme='dark'] & {
+  [data-theme=dark] & {
    border: none !important;
  }
 }
@@ -1,5 +1,5 @@
 .mapbox {
  margin: 0.5rem 0;
  padding: 0.5rem 0;
-  @include border-radius($global-border-radius);
+  @include border-radius;
 }
@@ -21,7 +21,7 @@
 }

 .mermaid {
-  [data-theme='dark'] & {
+  [data-theme=dark] & {
    height: 0;
    padding: 0;
  }
@@ -31,7 +31,7 @@
  height: 0;
  padding: 0;

-  [data-theme='dark'] & {
+  [data-theme=dark] & {
    height: auto;
    padding: 0.5rem 0.75rem;
  }
@@ -15,7 +15,7 @@
 tab-container {
  display: flex;
  gap: 0.75rem;
-  margin-block: 0.5rem;
+  margin-block: 0.5rem 1rem;
  position: relative;

  // loading before defined
@@ -34,18 +34,21 @@ tab-container {
    display: block;
    border: none;
    color: inherit;
-    background: transparent;
+    background-color: transparent;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
-    @include transition(all 0.3s ease);
+    transition: all 0.3s ease;
  }

  > .tab-panel {
    &[hidden] {
      display: none;
    }
+    > *:first-child {
+      margin-top: 0;
+    }
  }

  &::part(tablist-tab-wrapper) {
@@ -108,13 +111,13 @@ tab-container {
  // ========================================
  &[type='underline'] {
    > .tab-button {
-      #{$rootPrefix}tab-button-border-color: transparent;
+      @include set-fixit-var(tab-button-border-color, transparent);
      @include tab-button-size(0);

      &[aria-selected='true'],
      &[aria-selected='false']:hover {
-        color: var(#{$rootPrefix}primary);
-        #{$rootPrefix}tab-button-border-color: var(#{$rootPrefix}primary);
+        color: fixit-var(primary);
+        @include set-fixit-var(tab-button-border-color, fixit-var(primary));
      }

      &[aria-selected='false']:hover {
@@ -146,50 +149,50 @@ tab-container {
    // Top placement
    &[placement='top'] {
      &::part(tablist-tab-wrapper) {
-        border-bottom: 2px solid var(#{$rootPrefix}global-border-color);
+        border-bottom: 2px solid fixit-var(global-border-color);
      }

      > .tab-button {
        translate: 0 2px;
-        border-bottom: 2px solid var(#{$rootPrefix}tab-button-border-color);
+        border-bottom: 2px solid fixit-var(tab-button-border-color);
      }
    }

    // Bottom placement
    &[placement='bottom'] {
      &::part(tablist-tab-wrapper) {
-        border-top: 2px solid var(#{$rootPrefix}global-border-color);
+        border-top: 2px solid fixit-var(global-border-color);
      }

      > .tab-button {
        translate: 0 -2px;
-        border-top: 2px solid var(#{$rootPrefix}tab-button-border-color);
+        border-top: 2px solid fixit-var(tab-button-border-color);
      }
    }

    // Left placement
    &[placement='left'] {
      &::part(tablist-tab-wrapper) {
-        border-right: 2px solid var(#{$rootPrefix}global-border-color);
+        border-right: 2px solid fixit-var(global-border-color);
      }

      > .tab-button {
        text-align: right;
        translate: 2px 0;
-        border-right: 2px solid var(#{$rootPrefix}tab-button-border-color);
+        border-right: 2px solid fixit-var(tab-button-border-color);
      }
    }

    // Right placement
    &[placement='right'] {
      &::part(tablist-tab-wrapper) {
-        border-left: 2px solid var(#{$rootPrefix}global-border-color);
+        border-left: 2px solid fixit-var(global-border-color);
      }

      > .tab-button {
        text-align: left;
        translate: -2px 0;
-        border-left: 2px solid var(#{$rootPrefix}tab-button-border-color);
+        border-left: 2px solid fixit-var(tab-button-border-color);
      }
    }
  }
@@ -200,26 +203,26 @@ tab-container {
  // ========================================
  &[type='pill'] {
    > .tab-button {
-      background: var(#{$rootPrefix}code-inline-background-color);
+      background-color: fixit-var(code-inline-background-color);
      @include tab-button-size;
-      @include border-radius(2em);
+      @include border-radius(full);

      &[aria-selected='true'] {
        color: #ffffff;
-        background: var(#{$rootPrefix}primary);
-        @include box-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.3));
+        background-color: fixit-var(primary);
+        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);

-        [data-theme='dark'] & {
-          background: var(#{$rootPrefix}primary);
-          @include box-shadow(0 0.125rem 0.5rem rgba(255, 255, 255, 0.3));
+        [data-theme=dark] & {
+          background-color: fixit-var(primary);
+          box-shadow: 0 0.125rem 0.5rem rgba(255, 255, 255, 0.3);
        }
      }

      &[aria-selected='false']:hover {
-        background: rgba(175, 184, 193, 0.4);
+        background-color: rgba(175, 184, 193, 0.4);

-        [data-theme='dark'] & {
-          background: rgba(99, 110, 123, 0.6);
+        [data-theme=dark] & {
+          background-color: rgba(99, 110, 123, 0.6);
        }
      }
    }
@@ -302,22 +305,22 @@ tab-container {
    }

    > .tab-button {
-      border: 1px solid var(#{$rootPrefix}global-border-color);
-      background-color: var(#{$rootPrefix}code-block-background-color);
+      border: 1px solid fixit-var(global-border-color);
+      background-color: fixit-var(code-block-background-color);
      @include tab-button-size(1.5rem);

      &[aria-selected='true'],
      &[aria-selected='false']:hover {
-        background-color: var(#{$rootPrefix}global-background-color);
-        color: var(#{$rootPrefix}global-link-color);
-        z-index: 1;
+        background-color: fixit-var(global-background-color);
+        color: fixit-var(global-link-color);
+        @include z-index(base);
      }
    }

    > .tab-panel {
      padding: 0.75rem;
-      background-color: var(#{$rootPrefix}global-background-color);
-      border: 1px solid var(#{$rootPrefix}global-border-color);
+      background-color: fixit-var(global-background-color);
+      border: 1px solid fixit-var(global-border-color);
    }

    &[placement='top'],
@@ -331,13 +334,13 @@ tab-container {
        &:first-of-type {
          position: sticky;
          left: 0;
-          z-index: 2;
+          @include z-index(base, 1);
        }

        &:last-of-type {
          position: sticky;
          right: 0;
-          z-index: 2;
+          @include z-index(base, 1);
        }
      }
    }
@@ -345,84 +348,84 @@ tab-container {
    // Top placement
    &[placement='top'] {
      &::part(tablist-tab-wrapper) {
-        border-bottom: 1px solid var(#{$rootPrefix}global-border-color);
+        border-bottom: 1px solid fixit-var(global-border-color);
      }

      > .tab-button {
        translate: 0 1px;
-        @include border-radius($global-border-radius $global-border-radius 0 0);
+        @include border-radius(top);

        &[aria-selected='true'] {
-          border-bottom-color: var(#{$rootPrefix}global-background-color);
+          border-bottom-color: fixit-var(global-background-color);
        }
      }

      > .tab-panel {
        border-top: none;
-        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include border-radius(bottom);
      }
    }

    // Bottom placement
    &[placement='bottom'] {
      &::part(tablist-tab-wrapper) {
-        border-top: 1px solid var(#{$rootPrefix}global-border-color);
+        border-top: 1px solid fixit-var(global-border-color);
      }

      > .tab-button {
        translate: 0 -1px;
-        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include border-radius(bottom);

        &[aria-selected='true'] {
-          border-top-color: var(#{$rootPrefix}global-background-color);
+          border-top-color: fixit-var(global-background-color);
        }
      }

      > .tab-panel {
        border-bottom: none;
-        @include border-radius($global-border-radius $global-border-radius 0 0);
+        @include border-radius(top);
      }
    }

    // Left placement
    &[placement='left'] {
      &::part(tablist-tab-wrapper) {
-        border-right: 1px solid var(#{$rootPrefix}global-border-color);
+        border-right: 1px solid fixit-var(global-border-color);
      }

      > .tab-button {
        translate: 1px 0;
-        @include border-radius($global-border-radius 0 0 $global-border-radius);
+        @include border-radius(left);

        &[aria-selected='true'] {
-          border-right-color: var(#{$rootPrefix}global-background-color);
+          border-right-color: fixit-var(global-background-color);
        }
      }

      > .tab-panel {
        border-left: none;
-        @include border-radius(0 $global-border-radius $global-border-radius 0);
+        @include border-radius(right);
      }
    }

    // Right placement
    &[placement='right'] {
      &::part(tablist-tab-wrapper) {
-        border-left: 1px solid var(#{$rootPrefix}global-border-color);
+        border-left: 1px solid fixit-var(global-border-color);
      }

      > .tab-button {
        translate: -1px 0;
-        @include border-radius(0 $global-border-radius $global-border-radius 0);
+        @include border-radius(right);

        &[aria-selected='true'] {
-          border-left-color: var(#{$rootPrefix}global-background-color);
+          border-left-color: fixit-var(global-background-color);
        }
      }

      > .tab-panel {
        border-right: none;
-        @include border-radius($global-border-radius 0 0 $global-border-radius);
+        @include border-radius(left);
      }
    }
  }
@@ -439,12 +442,8 @@ tab-container {

    &::part(tablist-tab-wrapper) {
      padding: 0.25rem;
-      background: $code-background-color;
-      @include border-radius($global-border-radius);
-
-      [data-theme='dark'] & {
-        background: $code-background-color-dark;
-      }
+      background-color: fixit-var(code-block-background-color);
+      @include border-radius;
    }

    &::part(tablist) {
@@ -456,7 +455,7 @@ tab-container {
      flex-grow: 1;

      @include tab-button-size;
-      @include border-radius($global-border-radius);
+      @include border-radius;

      &[aria-selected='true'],
      &:hover {
@@ -464,11 +463,11 @@ tab-container {
      }

      &[aria-selected='true'] {
-        background-color: var(#{$rootPrefix}global-background-color);
-        @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+        background-color: fixit-var(global-background-color);
+        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));
+        [data-theme=dark] & {
+          box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
        }
      }
    }
@@ -1,30 +1,32 @@
-.#{$prefix}timeline {
+ul.#{$prefix}timeline {
  list-style: none;
  box-sizing: border-box;
  overflow: auto;
  margin: 1rem auto;
-  --timeline-color: #{darken($global-border-color, 5%)};
-  --timeline-circle-color: #FF735A;
-  --timeline-circle-size: 10px;
-  --timeline-width: 2px;
+  @include set-fixit-vars((
+    timeline-color: fixit-var(global-border-color),
+    timeline-circle-color: #FF735A,
+    timeline-circle-size: 10px,
+    timeline-width: 2px,
+  ));

  &[data-animation] {
    .#{$prefix}timeline-item::before {
-      border-color: var(--timeline-color);
+      border-color: fixit-var(timeline-color);
      animation-name: border-color-fade;
      animation-duration: 2s;
      animation-iteration-count: infinite;
-      animation-delay: calc(var(--timeline-index) * 0.3s);
+      animation-delay: calc(#{fixit-var(timeline-index)} * 0.3s);
  
      @keyframes border-color-fade {
        0% {
-          border-color: var(--timeline-color);
+          border-color: fixit-var(timeline-color);
        }
        50% {
-          border-color: var(--timeline-circle-color);
+          border-color: fixit-var(timeline-circle-color);
        }
        100% {
-          border-color: var(--timeline-color);
+          border-color: fixit-var(timeline-color);
        }
      }
    }
@@ -36,14 +38,14 @@

    @each $color, $value in $theme-colors {
      &[data-type='#{$color}'] {
-        --timeline-circle-color: var(#{$rootPrefix}#{$color});
+        @include set-fixit-var(timeline-circle-color, fixit-var(#{$color}));
      }
    }

    .#{$prefix}timeline-item__timestamp {
      font-size: 0.8125rem;
      line-height: 1;
-      color: var(#{$rootPrefix}secondary);
+      color: fixit-var(secondary);

      &.is-top {
        margin-bottom: 0.25rem;
@@ -59,7 +61,7 @@
    }

    &[data-node='dot']::before {
-      background-color: var(--timeline-circle-color) !important;
+      background-color: fixit-var(timeline-circle-color) !important;
    }
    &[data-size='small']::before {
      transform: scale(0.8) translateY(-50%);
@@ -74,31 +76,27 @@
      top: 1.25rem;
      transform: translateY(-50%);
      left: 0;
-      width: var(--timeline-circle-size);
-      height: var(--timeline-circle-size);
-      font-size: var(--timeline-circle-size);
-      line-height: var(--timeline-circle-size);
+      width: fixit-var(timeline-circle-size);
+      height: fixit-var(timeline-circle-size);
+      font-size: fixit-var(timeline-circle-size);
+      line-height: fixit-var(timeline-circle-size);
      text-align: center;
-      border-radius: 50%;
-      border-width: var(--timeline-width);
+      @include border-radius(full);
+      border-width: fixit-var(timeline-width);
      border-style: solid;
-      border-color: var(--timeline-circle-color);
-      background-color: var(#{$rootPrefix}global-background-color);
+      border-color: fixit-var(timeline-circle-color);
+      background-color: fixit-var(global-background-color);
      color: transparent;
-      z-index: 1;
+      @include z-index(base);
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
-      left: calc(var(--timeline-circle-size) / 2 + var(--timeline-width) / 2);
-      width: var(--timeline-width);
+      left: calc(#{fixit-var(timeline-circle-size)} / 2 + #{fixit-var(timeline-width)} / 2);
+      width: fixit-var(timeline-width);
      height: 100%;
-      background-color: var(--timeline-color);
-    }
-  
-    [data-theme='dark'] & {
-      --timeline-color: #{darken($global-border-color, 50%)};
+      background-color: fixit-var(timeline-color);
    }
  }  
 }
@@ -1,13 +1,13 @@
 // Common styles for all TOC types
 .toc {
  .toc-title {
-    font-size: $toc-title-font-size;
+    font-size: fixit-var(toc-title-font-size);
    font-weight: bold;
    text-transform: uppercase;
  }

  .toc-content {
-    font-size: $toc-content-font-size;
+    font-size: fixit-var(toc-content-font-size);

    code {
      @extend %code;
@@ -25,11 +25,7 @@
        margin-right: 0.5em;
        position: relative;
        bottom: 2px;
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);
      }

      ul {
@@ -46,20 +42,16 @@
      }

      li:has(> a:hover)::marker {
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);
      }
    }
  }

  ruby {
-    background-color: var(#{$rootPrefix}code-block-background-color);
+    background-color: fixit-var(code-block-background-color);

    rt {
-      color: var(#{$rootPrefix}global-font-secondary-color);
+      color: fixit-var(secondary);
    }
  }
 }
@@ -70,11 +62,7 @@
  .toc-content {
    li.has-active {
      &::marker {
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);
      }

      &:has(> .active)::marker {
@@ -82,21 +70,13 @@
      }

      > a {
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
+        color: fixit-var(single-link-color);
      }
    }

    ul {
      a.active::before {
-        color: $single-link-hover-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-hover-color-dark;
-        }
+        color: fixit-var(single-link-hover-color);
      }
    }

@@ -109,7 +89,7 @@
 #toc-auto {
  display: block;
  position: sticky;
-  top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+  top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
  box-sizing: border-box;
  visibility: hidden;
  @include overflow-wrap(break-word);
@@ -117,7 +97,7 @@
  @extend .print-d-none;

  [data-header-desktop='normal'] & {
-    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
+    @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
  }

  .toc-title {
@@ -131,27 +111,23 @@
      margin-right: 0.5em;
      position: relative;
      bottom: 2px;
-      color: $global-border-color;
-
-      [data-theme='dark'] & {
-        color: $global-border-color-dark;
-      }
+      color: fixit-var(global-border-color);
    }

    i.toc-icon {
-      @include transition(transform 0.2s ease);
+      transition: transform 0.2s ease;
    }
  }

  &.toc-hidden i.toc-icon {
-    @include transform(rotate(-90deg));
-    @include transition(transform 0.2s ease);
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease;
  }

  .toc-content {
    overflow-y: scroll;
-    // TODO 这里计算错误，待重构
-    max-height: calc(100vh - #{2 * $header-height});
+    // TODO 这里计算错误，待重构使用 JS 计算
+    max-height: calc(100vh - #{2 * #{fixit-var(header-height)}});
    @include scrollbar-width(none, 0);

    &.always-active ul,
@@ -196,11 +172,11 @@
    justify-content: space-between;
    line-height: 2em;
    padding: 0 0.75em;
-    background-color: var(#{$rootPrefix}code-header-background-color);
+    background-color: fixit-var(code-header-background-color);
  }

  .toc-content {
-    background-color: var(#{$rootPrefix}code-block-background-color);
+    background-color: fixit-var(code-block-background-color);

    > nav {
      > ul {
@@ -210,11 +186,7 @@
          font-weight: bold;

          &::before {
-            color: $single-link-hover-color;
-
-            [data-theme='dark'] & {
-              color: $single-link-hover-color-dark;
-            }
+            color: fixit-var(single-link-hover-color);
          }
        }
      }
@@ -232,10 +204,10 @@

  &:not(.open) {
    .toc-title {
-      #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)};
+      @include set-fixit-var(code-header-background-color, darken($code-background-color, 6%));

-      [data-theme='dark'] & {
-        #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)};
+      [data-theme=dark] & {
+        @include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%));
      }
    }
  }
@@ -250,36 +222,37 @@
  opacity: 0;
  translate: 100vw 0;
  width: MIN(calc(100% - 4rem), 460px);
-  height: 100%;
+  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  margin-right: 0;
  border: none;
-  border-left: 1px solid var(#{$rootPrefix}global-border-color);
-  background-color: var(#{$rootPrefix}global-background-color);
+  border-left: 1px solid fixit-var(global-border-color-light);
+  background-color: fixit-var(global-background-color);

  .toc {
    max-width: 100%;
    margin-inline: 1rem;

    .toc-title {
-      font-size: $toc-title-font-size * 1.5;
-      line-height: $toc-title-font-size * 2;
-      margin-block: $toc-title-font-size;
+      font-size: calc(#{fixit-var(toc-title-font-size)} * 1.5);
+      line-height: calc(#{fixit-var(toc-title-font-size)} * 2);
+      margin-block: fixit-var(toc-title-font-size);
    }

    .toc-content {
-      font-size: max($toc-content-font-size, 1rem);
+      font-size: MAX(fixit-var(toc-content-font-size), 1rem);

      nav {
-        max-height: calc(100vh - 5rem);
+        max-height: calc(100dvh - 5rem);
        overflow: auto;
      }
    }
  }

  &::backdrop {
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(2px);
    transition:
      display 0.5s allow-discrete,
      overlay 0.5s allow-discrete,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Cell	ba63d67a3c	chore(release): 0.4.3	2026-03-03 16:17:30 +08:00
Cell	69d8e67c24	feat(code): add fullscreen functionality for code blocks (#707 )	2026-03-03 16:15:01 +08:00
Cell	6196cd5edf	feat(code): add download button for code blocks and related functionality (#706 )	2026-03-02 17:34:57 +08:00
Cell	83a658ba25	fix(i): adjust background color and border color for fixed button	2026-03-02 14:56:09 +08:00
Cell	78a994b92b	chore(lib): update json-viewer-element version to 1.0.4 (#705 )	2026-03-02 11:42:17 +08:00
dependabot[bot]	8599d14976	chore(deps-dev): bump @antfu/eslint-config from 6.7.3 to 7.6.1 (#704 ) Bumps [@antfu/eslint-config](https://github.com/antfu/eslint-config) from 6.7.3 to 7.6.1. - [Release notes](https://github.com/antfu/eslint-config/releases) - [Commits](https://github.com/antfu/eslint-config/compare/v6.7.3...v7.6.1) --- updated-dependencies: - dependency-name: "@antfu/eslint-config" dependency-version: 7.6.1 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-03-02 11:36:47 +08:00
dependabot[bot]	0928c72452	chore(deps-dev): bump the npm-development group with 2 updates (#703 ) Bumps the npm-development group with 2 updates: [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) and [lint-staged](https://github.com/lint-staged/lint-staged). Updates `@types/node` from 24.10.15 to 24.11.0 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `lint-staged` from 16.2.7 to 16.3.0 - [Release notes](https://github.com/lint-staged/lint-staged/releases) - [Changelog](https://github.com/lint-staged/lint-staged/blob/main/CHANGELOG.md) - [Commits](https://github.com/lint-staged/lint-staged/compare/v16.2.7...v16.3.0) --- updated-dependencies: - dependency-name: "@types/node" dependency-version: 24.11.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: npm-development - dependency-name: lint-staged dependency-version: 16.3.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: npm-development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-03-02 11:34:00 +08:00
Cell	c3ac728f04	feat(task-lists): update checked task item styles	2026-03-02 11:32:58 +08:00
Cell	93d0b52cd7	feat(UI): adjust border and separator colors to improve visual hierarchy	2026-02-28 20:11:20 +08:00
Cell	2199c7f125	fix(task-lists): regular expression matching for task list items containing extra spaces	2026-02-28 18:00:01 +08:00
Cell	3926cc0220	refactor: reorganize CSS structure and standardize CSS variable usage for improved maintainability (#690 ) * refactor: CSS variables to use fixit-var for consistency across styles * refactor: reorganize CSS structure and consolidate imports for improved maintainability * refactor: unify CSS variable usage and improve structure across stylesheets * refactor: standardize CSS variable usage for layout * refactor: standardize CSS variable usage for archive and special pages * refactor: standardize CSS variable usage for single page * refactor: standardize CSS variable usage for widgets * refactor(css): refactors the border-radius mixin and adds the .rounded-full utility class * refactor: standardize z-index usage across components * refactor(css): removes deprecated compatibility mixins and replaces them with native CSS properties * feat: unify color variable naming and update theme color values - Rename `global-font-secondary-color` to `global-placeholder-color` for more accurate description of its purpose - Update multiple style references to use the new `secondary` theme color variable - Update theme color mapping to the new color values for improved visual consistency - Fixed the use of search box placeholder colors and removed hard-coded transparency values - Added color preview test documentation for easier verification of color rendering - Cleaned up some duplicate dark mode styles and replaced them with unified CSS variables * refactor: remove the `hr-background-color` variable and uses `global-border-color` uniformly * feat(CSE): add dark theme style to Google CSE search box and results container * fix(task-lists): fixed styling and rendering issues with nested task lists	2026-02-28 17:24:10 +08:00
Andreas Deininger	175cf888d5	fix: eliminate deprecation warnings with hugo version 0.156.0 (#702 ) * Fix deprecation warning with latest hugo version 0.156.0 * fix: use `hugo.Data` to replace the discarded `.Site.Data` * chore(hugo): update Hugo version requirements to 0.156.0 --------- Co-authored-by: Cell <1024@lruihao.cn>	2026-02-27 15:46:31 +08:00
dependabot[bot]	581d8373bf	chore(deps-dev): bump @types/node in the npm-development group Bumps the npm-development group with 1 update: [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node). Updates `@types/node` from 24.10.4 to 24.10.9 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-version: 24.10.9 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: npm-development ... Signed-off-by: dependabot[bot] <support@github.com>	2026-02-27 11:28:01 +08:00
youfou@hotmail.com	98f337a545	chore: update waline to 3.12.1	2026-02-18 21:16:15 +08:00
Cell	9e946c6316	fix(i): missing widget styles	2026-01-30 12:23:48 +08:00
Cell	e23a50d755	refactor(assets): refactors the SCSS file structure and adds styles for new components.	2026-01-23 16:07:55 +08:00
Cell	2a5bd268a3	chore(release): 0.4.2	2026-01-17 14:41:08 +08:00
Cell	5036111d11	fix(toc): update height to use 100dvh for better responsiveness (#688 ) * fix(toc): update height to use 100dvh for better responsiveness * fix(toc): adjust backdrop color and add blur effect for improved visibility	2026-01-17 14:27:58 +08:00
Cell	8367c13ebd	fix(i): make change for FontAwesome v7 https://docs.fontawesome.com/upgrade/whats-changed/	2026-01-17 00:39:12 +08:00
Cell	536e0b171e	fix: add HTMLEscape function to fix XSS attack in search feature (#687 )	2026-01-16 20:02:22 +08:00
Cell	03f3500c35	fix(file-tree): improve item sorting logic // ignore-for-release	2026-01-15 15:32:34 +08:00
Cell	b4008081d7	feat(file-tree): enhance shortcode with `name` param and deprecated `fullRootName` param // ignore-for-release	2026-01-14 18:18:26 +08:00
Cell	fdfd772100	feat(File Tree): add `file-tree` shortcode support (#685 ) * feat(File Tree): add `file-tree` shortcode support * feat(file-tree): add ignoreList parameter to file-tree shortcode * feat(file-tree): enhance file-tree shortcode with ignoreList and folderSlash options * feat(file-tree): enhance file-tree shortcode to support data mode * feat(file-tree): enhance file-tree shortcode to support file mode * feat(file-tree): improve content parsing in file-tree shortcode * feat(file-tree): improve root path validation and error handling in filesystem mode * test(file-tree): add unit tests for `file-tree` shortcode * feat(file-tree): add file-tree code block rendering support * refactor(file-tree): extract filesystem scanning to get-file-tree partial Move directory traversal and root path validation to a separate partial function, consolidating all filesystem-related logic in one place. This simplifies the shortcode implementation and ensures a unified data format for rendering. * docs(readme): extend code fence and shortcode support for file tree in documentation * feat(file-tree): add fullRootName parameter for root path display in file tree * feat(file-tree): add language parameter to get-file-tree function * feat(file-tree): add highlightList parameter for file-tree shortcode * perf(file-tree): add level param for get-file-tree function to descend only level directories deep	2026-01-14 16:01:22 +08:00
Cell	0c1d074890	chore(deps): bump fontawesome version to 7.1.0	2026-01-09 22:15:15 +08:00
Cell	b29368c3e6	fix(admonition): adjust styles for title-only and content-only admonitions // ignore-for-release	2026-01-09 14:32:28 +08:00
Cell	50d27e0e5b	feat(devtools): add template call stack for debugging	2026-01-09 12:29:43 +08:00
Cell	8b5315a141	chore: add .stash to ignore list // ignore-for-release	2026-01-08 17:31:45 +08:00
Cell	c257b9b10f	feat(admonition): add support for content-only alerts without titles (#683 ) * feat(admonition): add support for content-only alerts without titles * fix(admonition): improve title-only alert handling and styling	2026-01-08 16:13:09 +08:00
Cell	12b7c65f80	chore(release): 0.4.1	2026-01-06 16:27:34 +08:00
Cell	4514affb78	fix(image): support avif format in image processing logic (#682 )	2026-01-06 16:21:37 +08:00
Cell	6986044dbc	chore: update release workflow to install fixit-cli and handle config files separately	2026-01-06 15:35:32 +08:00
Cell	fb300f2b16	fix(code): code highlighting not styled for typeit shortcode (#681 )	2026-01-05 14:58:52 +08:00
Cell	43ecb1bdd0	chore(dev): update recommended VSCode extensions for Hugo development	2026-01-05 14:18:26 +08:00
Cell	dda0d1e3f5	docs(security): simplify supported versions section for clarity	2026-01-04 16:03:23 +08:00