chore(release): 0.4.4

* feat(responsive): add responsive breakpoints and mixin for media queries

* refactor: print styles and add media query support

* refactor(responsive): enhance responsive styles across various components

.github/copilot-instructions.md

@@ -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;
    ```
@@ -120,7 +120,7 @@ FixIt/
 ```javascript
 // 使用 ES6 类
 export default class Util {
-  copyText(text) {
+  static copyText(text) {
     // ...
   }
 }
@@ -129,7 +129,7 @@ export default class Util {
 class FixIt {
   constructor() {
     this.config = window.config
-    this.util = new Util()
+    this.scrollTop = Util.getScrollTop()
   }
 
   init() {
@@ -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. **开发命令**:

.github/workflows/release.yml

@@ -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

.gitignore

@@ -29,3 +29,4 @@ $RECYCLE.BIN/
 .directory
 
 CHANGELOG.md
+.stash/

.vscode/extensions.json

@@ -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"
   ]
 }

CONTRIBUTING.md

@@ -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:
@@ -119,3 +119,45 @@ Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls
 ## Git Commit Guidelines
 
 We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages. This enables automatic changelog generation using our custom template: [conventional.hbs](https://github.com/Lruihao/auto-changelog-plus/blob/main/settings/conventional.hbs).
+
+> [!NOTE]
+>
+> Commits in a PR will normally be squashed into one commit, so you don't need to rebase locally.
+
+### Commit Message Format
+
+```
+<type>(<scope>): <subject>
+^      ^         ^
+|      |         |__ Subject: Concise description of the change (imperative mood, lowercase).
+|      |____________ Scope: The specific part of the codebase affected (optional but recommended).
+|___________________ Type: Indicates the kind of change.
+```
+
+### Allowed Types
+
+- `feat`: A new feature.
+- `fix`: A bug fix.
+- `refactor`: Code changes that neither fix a bug nor add a feature.
+- `chore`: Changes to the build process, auxiliary tools, libraries, documentation generation etc.
+- `docs`: Documentation only changes.
+- Other conventional types like `perf`, `style`, `test`, `ci`, `build` are also acceptable.
+
+### Allowed Scopes
+
+- `workflow`: CI/CD workflow changes (`.github/workflows/`)
+- `archetypes`: Content templates (`archetypes/`)
+- `assets`: Changes to theme assets like CSS, JS (`assets/`)
+- `i18n`: Internationalization and translation files (`i18n/`)
+- `layouts`: Root-level Hugo template files (`layouts/*.html`)
+- `config`: Theme configuration (`hugo.toml`, `theme.toml`)
+- _(All top-level directories in the layouts and packages directories)_
+- _(Consider adding other scopes as needed for better granularity)_
+
+### Examples
+
+- `feat(_shortcodes): add mapbox zoom control options`
+- `fix(_partials): avoid duplicate canonical link tags`
+- `docs(i18n): update translation key naming guidelines`
+- `ci(workflow): optimize preview deployment cache`
+- `refactor(assets): split theme initialization into smaller modules`

README.md

@@ -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

README.zh-cn.md

@@ -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

SECURITY.md

@@ -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
 

apps/test/assets/filetree/example.json

@@ -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"
+  }
+]

apps/test/content/posts/alert-and-admonition-test.md

@@ -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]+

apps/test/content/posts/code-tabs-test.md

@@ -0,0 +1,166 @@
+---
+title: Code Tabs Test
+date: 2026-01-25T07:50:22+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Code Tabs
+---
+
+Code tabs test cases for grouped code blocks.
+
+<!--more-->
+
+## Default Name
+
+```python {group=tab2}
+print("Python")
+```
+
+```go {group=tab2}
+fmt.Println("Go")
+```
+
+## Custom Name
+
+```js {group=tab-actions name="[JavaScript]"}
+function sum(a, b) {
+  return a + b
+}
+
+console.log(sum(1, 2))
+```
+
+```python {group=tab-actions name="[Python]"}
+def sum(a, b):
+  return a + b
+
+print(sum(1, 2))
+```
+
+## Active Tab
+
+```js {group=tab-active name="Inactive Tab"}
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+```python {group=tab-active name="Active Tab" .active}
+def greet(name):
+  return f"Hello, {name}!"
+```
+
+## Shadow
+
+```js {group=tab-shadow name="Always" shadow="always"}
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+```python {group=tab-shadow name="Hover" shadow="hover"}
+def greet(name):
+  return f"Hello, {name}!"
+```
+
+```go {group=tab-shadow name="Never" shadow="never"}
+func greet(name string) string {
+  return fmt.Sprintf("Hello, %s!", name)
+}
+```
+
+## Mode
+
+```ts {group=tab-mode name="Classic"}
+interface User {
+  id: number
+  name: string
+}
+```
+
+```ts {group=tab-mode name="Mac" mode="mac"}
+interface User {
+  id: number
+  name: string
+}
+```
+
+```ts {group=tab-mode name="Simple" mode="simple"}
+interface User {
+  id: number
+  name: string
+}
+```
+
+## Actions
+
+```bash {group=tab-actions name="lineNos=true" lineNos=true}
+echo "line 1"
+echo "line 2"
+echo "line 3"
+```
+
+```bash {group=tab-actions name="lineNos=false" lineNos=false}
+echo "line 1"
+echo "line 2"
+echo "line 3"
+```
+
+```bash {group=tab-actions name="wrapping" .line-wrapping}
+printf "this is a very very very very very very very very very very very very very very very very long line"
+```
+
+```js {group=tab-actions name="editable" editable=true}
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+## Expanded/Collapsed
+
+```js {group=tab-expand name="Expanded"}
+function longFunction() {
+  console.log('This is a long function.')
+  console.log('It has many lines of code.')
+  console.log('The code block should be expanded by default.')
+  console.log('Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
+  console.log('Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')
+  console.log('Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
+  console.log('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.')
+  console.log('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
+  console.log('The end of the long function.')
+}
+```
+
+```js {group=tab-expand name="Collapsed" .is-collapsed}
+function shortFunction() {
+  console.log('This is a short function.')
+}
+```
+
+## Code tabs inside other blocks
+
+> [!NOTE]+
+>
+> ```python {group=tab-nested}
+> print("Python")
+> ```
+>
+> ```go {group=tab-nested}
+> fmt.Println("Go")
+> ```
+
+{{< details open=true >}}
+
+```python {group=tab2}
+print("Python")
+```
+
+```go {group=tab2}
+fmt.Println("Go")
+```
+
+{{< /details >}}

apps/test/content/posts/codeblock-test.md

@@ -64,6 +64,38 @@ hello('FixIt')
 // Hello, FixIt!
 ```
 
+## Shadow
+
+{{< tabs >}}
+{{% tab title="Always" %}}
+
+```js {shadow="always"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+```
+
+{{% /tab %}}
+{{% tab title="Hover" %}}
+
+```js {shadow="hover"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+```
+
+{{% /tab %}}
+{{% tab title="Never" %}}
+
+```js {shadow="never"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+```
+
+{{% /tab %}}
+{{< /tabs >}}
+
 ## Collapsed/Expanded
 
 ```
@@ -150,7 +182,7 @@ function add(a, b) {
 
 ## Code block inside other blocks
 
-> [!NOTE]-
+> [!NOTE]+
 >
 > ```js {mode="classic"}
 > function add(a, b) {
@@ -158,6 +190,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"}

apps/test/content/posts/color-preview-test.md

@@ -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:

apps/test/content/posts/file-tree-test/data/example.toml

@@ -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"

apps/test/content/posts/file-tree-test/index.md

@@ -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
+```

apps/test/content/posts/fontawesome-test.md

@@ -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):

apps/test/content/posts/katex-test.md

@@ -71,3 +71,11 @@ $$ \ce{CO2 + C -> 2 CO} $$
 $$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
 
 $$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+## $\KaTeX$ in headings
+
+This is a bug:
+
+```latex
+## $\KaTeX$ in headings
+```

apps/test/content/posts/mathjax-test.md

@@ -117,3 +117,29 @@ U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 }
 \end{xy}
 $$
+
+## \$\\text{MathJax}\$ in headings
+
+```latex
+## \$\\text{MathJax}\$ in headings
+```
+
+## More
+
+### Dark Mode Adaptation
+
+Use `.auto-dark-mode` class to automatically adapt to dark mode by inverting the color and hue:
+
+For inline formula:
+
+$\bbox[border: solid .4pt magenta, pink]{x^2=4}$
+{.auto-dark-mode}
+
+For formula blocks:
+
+{{< style "[data-theme=dark] & { filter: invert(1) hue-rotate(0.5turn); }" >}}
+$$
+\bbox[border: solid .4pt magenta, pink]{x^2=4}
+$$
+{.auto-dark-mode}
+{{< /style >}}

apps/test/content/posts/tabs-comprehensive-test.md

@@ -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 >}}

apps/test/content/posts/task-list-test.md

@@ -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.

apps/test/data/filetree/example.yml

@@ -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

apps/test/hugo.toml

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

assets/css/_core/_base.scss

@@ -1,39 +1,33 @@
 @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) {
-  html {
+  @include media('reduce-motion') {
     scroll-behavior: auto;
   }
 }
 
 ::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 +47,11 @@ img {
   object-fit: cover;
 }
 
-img,video {
+img,
+video {
   max-width: 100%;
   height: auto;
+  @include border-radius;
 }
 
 dialog {
@@ -73,26 +69,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';

assets/css/_core/_breadcrumb.scss

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

assets/css/_core/_common.scss

@@ -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,46 @@
 .variant-numeric {
   font-variant-numeric: tabular-nums lining-nums;
 }
+
+.rounded-full {
+  @include border-radius(full);
+}
+
+// auto adapt to dark mode by inverting the color and hue
+.auto-dark-mode {
+  [data-theme=dark] & {
+    filter: invert(1) hue-rotate(0.5turn);
+  }
+}
+
+// print view helper
+.page-break-before {
+  break-before: page;
+}
+
+.page-break-after {
+  break-after: page;
+}
+
+@include media('xs', 'up') {
+  .d-none-desktop {
+    display: none;
+  }
+}
+
+@include media('xs') {
+  .d-none-mobile {
+    display: none !important;
+  }
+}
+
+@include media('print') {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+  }
+
+  .d-none-print {
+    display: none !important;
+  }
+}

assets/css/_core/_index.scss

@@ -0,0 +1,6 @@
+@import "_mixin";
+@import "_base";
+@import "_common";
+@import "_root";
+@import "_layout";
+@import '_widgets';

assets/css/_core/_layout.scss

@@ -1,42 +0,0 @@
-/** Layout **/
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100%;
-
-  main {
-    flex: 1 0 auto;
-
-    aside {
-      flex: 1;
-      padding: 0.5rem;
-      max-width: 500px;
-
-      &:not(:has(~ aside)) {
-        display: none;
-      }
-    }
-
-    &.fi-container {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding-inline: 1rem;
-      gap: 0.5rem;
-
-      &[data-reverse] {
-        flex-direction: row-reverse;
-      }
-
-      &:has(.home:not(.posts)) {
-        align-items: center;
-      }
-    }
-  }
-}
-
-@import "_header";
-@import "_breadcrumb";
-@import "_footer";
-@import "_pagination";

assets/css/_core/_layout/_breadcrumb.scss

@@ -0,0 +1,77 @@
+.breadcrumb-container {
+  padding-inline: 1rem;
+  font-size: 0.75rem;
+  background-color: fixit-var(global-background-color);
+  display: flex;
+  gap: 0.5rem;
+  @include z-index(sticky);
+
+  &:has(~ main[data-reverse]) {
+    flex-direction: row-reverse;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    padding-inline: 0.5rem;
+
+    @include media('sm', 'down') {
+      display: none;
+    }
+  }
+
+  &.sticky {
+    position: sticky;
+    top: fixit-var(header-height);
+
+    @include media('sm', 'up') {
+      body:not([data-header-desktop='sticky']) & {
+        top: 0;
+      }
+      // adjust the scroll margin top of the content anchors on the page
+      body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
+        scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+
+    @include media('xs') {
+      body:not([data-header-mobile='sticky']) & {
+        top: 0;
+      }
+      // adjust the scroll margin top of the content anchors on the page
+      body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
+        scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+  }
+
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5rem 0;
+    margin: 0 auto;
+    list-style: none;
+    border-bottom: 1px inset fixit-var(global-border-color);
+    @extend %page-style;
+
+    .breadcrumb-item {
+      display: flex;
+
+      + .breadcrumb-item::before {
+        content: attr(data-separator);
+        display: inline-block;
+        padding-inline: 0.5rem;
+        color: fixit-var(global-placeholder-color);
+      }
+
+      &.active {
+        color: fixit-var(secondary);
+      }
+    }
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}

assets/css/_core/_layout/_footer.scss

@@ -4,7 +4,6 @@ footer {
   text-align: center;
   line-height: 1.25rem;
   padding: 1rem 0;
-  @extend .print-d-none;
 
   .footer-container {
     display: flex;
@@ -24,36 +23,40 @@ footer {
         color: #dc143c;
         animation: icon-animate 1.33s ease-in-out infinite;
       }
+    }
 
-      .run-times {
-        font-variant-numeric: tabular-nums lining-nums;
-      }
+    @include media('xs') {
+      font-size: 0.618rem;
     }
   }
 
   @include blur;
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 @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);
   }
 }

assets/css/_core/_layout/_header.scss

@@ -1,21 +1,20 @@
 header {
   width: 100%;
-  background-color: $header-background-color;
-  @include z-index(2);
-  @include transition(box-shadow 0.3s ease);
-  @extend .print-d-none;
-
-  [data-theme='dark'] & {
-    background-color: $header-background-color-dark;
-  }
+  background-color: fixit-var(header-background-color);
+  transition: box-shadow 0.3s ease;
+  @include z-index(fixed);
 
   &: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);
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 .header-wrapper {
@@ -27,22 +26,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 +63,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 +72,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 +83,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 +92,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 +110,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 +147,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 +170,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 +179,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 +194,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 +214,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 +233,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 +242,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;
@@ -288,6 +265,14 @@ header {
         }
       }
     }
+
+    @include media('md', 'down') {
+      padding-inline-end: 1rem;
+    }
+
+    @include media('sm', 'down') {
+      padding-inline-start: 1rem;
+    }
   }
 
   &.open .header-wrapper .menu .menu-item.search {
@@ -295,14 +280,18 @@ header {
       width: 24rem;
     }
   }
+
+  @include media('xs') {
+    display: none;
+  }
 }
 
 #header-mobile {
   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 +304,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 +317,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 +330,7 @@ header {
 
         &.active {
           span:nth-child(1) {
-            @include transform(translateY(8px) rotate(45deg));
+            transform: translateY(8px) rotate(45deg);
           }
 
           span:nth-child(2) {
@@ -353,25 +338,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 +362,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 +400,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 +412,7 @@ header {
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow-x: hidden;
-          @include flex(4);
+          flex: 4;
         }
 
         & .nested-item {
@@ -455,11 +434,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 +463,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 +479,7 @@ header {
 
   &.open {
     .header-wrapper {
-      margin-top: -$header-height;
+      margin-top: calc(#{fixit-var(header-height)} * -1);
     }
 
     .menu {
@@ -520,21 +495,29 @@ header {
       }
     }
   }
+
+  @include media('xs') {
+    display: block;
+  }
 }
 
 .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 {
     right: 2rem;
     width: 30rem;
+
+    @include media('md', 'down') {
+      right: 1rem;
+    }
   }
 
   &.mobile {
@@ -544,11 +527,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 +551,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 +592,7 @@ header {
       .search-query {
         font-weight: bold;
 
-        [data-theme='dark'] & {
+        [data-theme=dark] & {
           color: #ddd;
         }
       }
@@ -621,8 +602,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 {

assets/css/_core/_layout/_index.scss

@@ -0,0 +1,82 @@
+// Responsive layout
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+
+  main {
+    flex: 1 0 auto;
+
+    aside {
+      flex: 1;
+      padding: 0.5rem;
+      max-width: 500px;
+
+      &:not(:has(~ aside)) {
+        display: none;
+      }
+
+      @include media('sm', 'down') {
+        display: none !important;
+      }
+    }
+
+    &.fi-container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-inline: 1rem;
+      gap: 0.5rem;
+
+      &[data-reverse] {
+        flex-direction: row-reverse;
+      }
+
+      &:has(.home:not(.posts)) {
+        align-items: center;
+      }
+    }
+  }
+
+  @include media('md') {
+    main {
+      // hide empty aside and expand article when only one aside is empty
+      aside:first-child:empty:has(~ aside:not(:empty)),
+      aside:first-child:not(:empty) ~ aside#toc-auto:empty {
+        display: none;
+      }
+  
+      aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
+      aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
+        flex: 3;
+      }
+    }
+
+    // adjust breadcrumb flex when asides are empty
+    &:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+    &:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+@import "header";
+@import "breadcrumb";
+@import "page-style";
+@import "pagination";
+@import "footer";

assets/css/_core/_layout/_page-style.scss

@@ -0,0 +1,47 @@
+%page-style {
+  @include media('xl') {
+    width: ROUND(60%, 2px);
+    max-width: 1200px;
+  }
+
+  @include media('lg') {
+    width: ROUND(56%, 2px);
+  }
+
+  @include media('md') {
+    width: ROUND(52%, 2px);
+  }
+
+  @include media('sm') {
+    width: ROUND(80%, 2px);
+  }
+
+  @include media('xs') {
+    width: 100%;
+  }
+}
+
+[data-page-style='wide'] {
+  %page-style {
+    @include media('xl') {
+      width: ROUND(64%, 2px);
+      max-width: 1600px;
+    }
+
+    @include media('lg') {
+      width: ROUND(60%, 2px);
+    }
+
+    @include media('md') {
+      width: ROUND(56%, 2px);
+    }
+  }
+}
+
+[data-page-style='narrow'] {
+  %page-style {
+    @include media('xl') {
+      max-width: 800px;
+    }
+  }
+}

assets/css/_core/_layout/_pagination.scss

@@ -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,
@@ -86,5 +69,9 @@
         width: 50%;
       }
     }
+
+    @include media('xs') {
+      margin: 0 5px;
+    }
   }
 }

assets/css/_core/_media.scss

@@ -1,272 +0,0 @@
-@media only screen and (min-width: 1441px) {
-  %page-style {
-    width: ROUND(60%, 2px);
-    max-width: 1200px;
-
-    [data-page-style='wide'] & {
-      width: ROUND(64%, 2px);
-      max-width: 1600px;
-    }
-
-    [data-page-style='narrow'] & {
-      max-width: 800px;
-    }
-  }
-}
-
-@media only screen and (max-width: 1440px) {
-  %page-style {
-    width: ROUND(56%, 2px);
-
-    [data-page-style='wide'] & {
-      width: ROUND(60%, 2px);
-    }
-  }
-}
-
-@media only screen and (min-width: 1201px) {
-  .single .content {
-    :is(.code-block, .diagram-container) {
-      :is(.code-copy-btn, .diagram-copy-btn) {
-        display: none;
-        opacity: 0;
-        transform: scale(0.9);
-        transition:
-          display 0.25s allow-discrete,
-          opacity 0.25s,
-          transform 0.25s,
-          color 0.1s,
-          background-color 0.1s,
-          box-shadow 0.1s,
-          border-color 0.1s;
-      }
-      &:hover {
-        :is(.code-copy-btn, .diagram-copy-btn) {
-          display: block;
-          opacity: 1;
-          transform: scale(1);
-          @starting-style {
-            opacity: 0;
-            transform: scale(0.9);
-          }
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 1200px) {
-  %page-style {
-    width: ROUND(52%, 2px);
-
-    [data-page-style='wide'] & {
-      width: ROUND(56%, 2px);
-    }
-  }
-
-  #header-desktop .header-wrapper {
-    padding-right: 1rem;
-  }
-
-  .search-dropdown.desktop {
-    right: 1rem;
-  }
-}
-
-@media only screen and (max-width: 1200px) and (min-width: 961px) {
-  .wrapper {
-    main {
-      // Hide empty aside and expand article when only one aside is empty
-      aside:first-child:empty:has(~ aside:not(:empty)),
-      aside:first-child:not(:empty) ~ aside#toc-auto:empty {
-        display: none;
-      }
-  
-      aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
-      aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
-        flex: 3;
-      }
-    }
-
-    // Adjust breadcrumb flex when asides are empty
-    &:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
-      .breadcrumb {
-        flex: 3;
-      }
-
-      &::before {
-        display: none;
-      }
-    }
-    &:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
-      .breadcrumb {
-        flex: 3;
-      }
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 960px) {
-  %page-style {
-    width: ROUND(80%, 2px) !important;
-  }
-  
-  aside,
-  .breadcrumb-container::before,
-  .breadcrumb-container::after {
-    display: none !important;
-  }
-
-  #toc-static {
-    display: block;
-  }
-
-  #header-desktop .header-wrapper {
-    padding-left: 1rem;
-  }
-}
-
-@media only screen and (min-width: 681px) {
-  .d-none-desktop {
-    display: none;
-  }
-  .breadcrumb-container.sticky {
-    body:not([data-header-desktop='sticky']) & {
-      top: 0;
-    }
-    // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
-      scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
-    }
-  }
-
-  [data-header-desktop='normal'] .page .content [id] {
-    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
-  }
-  [data-header-desktop='normal'] {
-    #toc-auto,
-    .aside-collection {
-      top: 0;
-    }
-  }
-  [data-header-desktop='sticky'] {
-    .page .content .highlight.code-block .code-header {
-      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
-    }
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  #header-desktop {
-    display: none;
-  }
-
-  #header-mobile {
-    display: block;
-  }
-
-  .d-none-mobile {
-    display: none !important;
-  }
-
-  .breadcrumb-container.sticky {
-    body:not([data-header-mobile='sticky']) & {
-      top: 0;
-    }
-    // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
-      scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
-    }
-  }
-
-  [data-header-mobile='normal'] .page .content [id] {
-    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
-  }
-  [data-header-mobile='normal'] {
-    #toc-auto,
-    .aside-collection {
-      top: 0;
-    }
-  }
-  [data-header-mobile='sticky'] {
-    .page .content .highlight.code-block .code-header {
-      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
-    }
-  }
-  
-  %page-style {
-    width: 100% !important;
-  }
-
-  .page {
-    .taxonomy-cards {
-      .card-item {
-        width: 100%;
-      }
-    }
-  }
-
-  footer {
-    .footer-container {
-      font-size: 0.618rem;
-    }
-  }
-
-  .pagination .page-item {
-    margin: 0 5px;
-  }
-}
-
-@media only print {
-
-  // 确保打印时没有 scrollbar
-  :root {
-    #{$rootPrefix}scrollbar-width: none !important;
-  }
-
-  *::-webkit-scrollbar {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  .scrollbar-thin {
-    scrollbar-width: none !important;
-    -ms-overflow-style: none !important;
-  }
-  
-  @page {
-    size: A4 portrait;
-    margin: 1.27cm;
-  }
-
-  .page {
-    width: 100% !important;
-    padding-top: 0 !important;
-
-    &.single {
-      .single-title,
-      .single-subtitle,
-      .post-meta {
-        text-align: center;
-      }
-    }
-
-    h1:not(.single-title),
-    .page-break-before {
-      page-break-before: always;
-    }
-
-    .page-break-after {
-      page-break-after: always;
-    }
-  }
-
-  .print-d-none {
-    display: none !important;
-  }
-}

assets/css/_core/_mixin/_blur.scss

@@ -0,0 +1,6 @@
+@mixin blur {
+  // TODO refactor blur with backdrop-filter
+  .blur & {
+    filter: blur(1.5px);
+  }
+}

assets/css/_core/_mixin/_border-radius.scss

@@ -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;
+  }
+}

assets/css/_core/_mixin/_box-shadow.scss

@@ -0,0 +1,26 @@
+/// Mixin to apply box-shadow with timing control
+/// @param {String} $when - When to show shadow: always | hover | never (default: always)
+/// @param {List} $shadow - The box-shadow value
+/// @example
+///   @include box-shadow;
+///   @include box-shadow(hover);
+///   @include box-shadow(never);
+///   @include box-shadow(always, 0 4px 8px rgba(0, 0, 0, 0.15));
+@mixin box-shadow(
+  $when: always,
+  $shadow: (0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04))
+) {
+  @if $when == always {
+    box-shadow: $shadow;
+  } @else if $when == hover {
+    transition: box-shadow 0.3s fixit-var(bezier);
+
+    &:hover {
+      box-shadow: $shadow;
+    }
+  } @else if $when == never {
+    box-shadow: none;
+  } @else {
+    @warn "box-shadow mixin: unknown $when value '#{$when}'. Expected always, hover, or never.";
+  }
+}

assets/css/_core/_mixin/_compatibility.scss

@@ -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;
+}

assets/css/_core/_mixin/_index.scss

@@ -0,0 +1,10 @@
+@import 'blur';
+@import 'border-radius';
+@import 'box-shadow';
+@import 'compatibility';
+@import 'link';
+@import 'loading';
+@import 'media';
+@import 'scrollbar-width';
+@import 'theme-vars';
+@import 'z-index';

assets/css/_core/_mixin/_link.scss

@@ -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;
       }

assets/css/_core/_mixin/_loading.scss

@@ -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);
 }

assets/css/_core/_mixin/_media.scss

@@ -0,0 +1,100 @@
+// Responsive breakpoints matching the project's media query design
+// ┌──────────────────────────────────────────────────────┐
+// │  xs   │    sm     │     md     │     lg     │   xl   │
+// │ ≤680  │ 681–960   │ 961–1200   │ 1201–1440  │ ≥1441  │
+// └──────────────────────────────────────────────────────┘
+$breakpoints: (
+  'xs': (
+    'min': null,
+    'max': 680px,
+  ),
+  'sm': (
+    'min': 681px,
+    'max': 960px,
+  ),
+  'md': (
+    'min': 961px,
+    'max': 1200px,
+  ),
+  'lg': (
+    'min': 1201px,
+    'max': 1440px,
+  ),
+  'xl': (
+    'min': 1441px,
+    'max': null,
+  ),
+) !default;
+
+/// Apply styles within a named media target.
+/// @param {String} $target - Target name: xs | sm | md | lg | xl | print | reduce-motion
+/// @param {String} $direction  - Range direction: only | up | down [default: only]
+///
+/// @example
+///   // xs: ≤ 680px
+///   @include media('xs') { ... }
+///   // sm: 681px – 960px
+///   @include media('sm') { ... }
+///   // md and above: ≥ 961px
+///   @include media('md', 'up') { ... }
+///   // lg and below: ≤ 1440px
+///   @include media('lg', 'down') { ... }
+///   // print media
+///   @include media('print') { ... }
+///   // reduced motion
+///   @include media('reduce-motion') { ... }
+@mixin media($target, $direction: 'only') {
+  @if $target == 'print' {
+    @media only print {
+      @content;
+    }
+  } @else if $target == 'reduce-motion' {
+    @media screen and (prefers-reduced-motion: reduce) {
+      @content;
+    }
+  } @else {
+    $range: map-get($breakpoints, $target);
+    $min: if($range != null, map-get($range, 'min'), null);
+    $max: if($range != null, map-get($range, 'max'), null);
+
+    @if $range == null {
+      @warn "Unknown media target `#{$target}`. Expected: xs, sm, md, lg, xl, print, reduce-motion.";
+    } @else if $direction == 'only' {
+      @if $min == null {
+        // xs: max-width only, no lower bound
+        @media only screen and (max-width: $max) {
+          @content;
+        }
+      } @else if $max == null {
+        // xl: min-width only, no upper bound
+        @media only screen and (min-width: $min) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $min) and (max-width: $max) {
+          @content;
+        }
+      }
+    } @else if $direction == 'up' {
+      @if $min == null {
+        // xs-up: no lower bound, always applies
+        @content;
+      } @else {
+        @media only screen and (min-width: $min) {
+          @content;
+        }
+      }
+    } @else if $direction == 'down' {
+      @if $max == null {
+        // xl-down: no upper bound, always applies
+        @content;
+      } @else {
+        @media only screen and (max-width: $max) {
+          @content;
+        }
+      }
+    } @else {
+      @warn "Unknown direction `#{$direction}`. Expected: only, up, down.";
+    }
+  }
+}

assets/css/_core/_mixin/_scrollbar-width.scss

@@ -0,0 +1,6 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  @include set-fixit-vars((
+    scrollbar-width: $width,
+    scrollbar-width-legacy: $widthLegacy,
+  ));
+}

assets/css/_core/_mixin/_theme-vars.scss

@@ -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)};
+    }
+  }
+}

assets/css/_core/_mixin/_z-index.scss

@@ -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;
+  }
+}

assets/css/_core/_patch.scss

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

assets/css/_core/_root.scss

@@ -1,69 +1,140 @@
-: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%)};
+    // Animations
+    bezier: cubic-bezier(.4, 0, .2, 1),
 
-  // 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-font-secondary-color: (light: $global-font-secondary-color, dark: $global-font-secondary-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),
+));

assets/css/_core/_widgets/_cell-tooltip.scss

@@ -0,0 +1,11 @@
+body {
+  .cell-tooltip {
+    --tooltip-bg: #ffffff;
+    --tooltip-color: #0f172a;
+
+    [data-theme=dark] & {
+      --tooltip-bg: #39393c;
+      --tooltip-color: #e2e2e6;
+    }
+  }
+}

assets/css/_core/_widgets/_cookieconsent.scss

@@ -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;
       }
     }

assets/css/_core/_widgets/_details.scss

@@ -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;
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+.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;
+
+  [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;
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}
+
+.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;
+  }
+}

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

@@ -0,0 +1,48 @@
+@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);
+
+  :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;
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}

assets/css/_core/_widgets/_index.scss

@@ -0,0 +1,12 @@
+@import 'cell-tooltip';
+@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';

assets/css/_core/_widgets/_mask.scss

@@ -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);
   }
 }

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

@@ -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);
 }

assets/css/_core/_widgets/_post-chat.scss

@@ -0,0 +1,6 @@
+#postChat_button,
+.post-TianliGPT {
+  @include media('print') {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,15 @@
+.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);
+
+  [data-theme=dark] & {
+    background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color));
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}

assets/css/_core/_widgets/_scrollbar.scss

@@ -0,0 +1,44 @@
+/* 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);
+
+    @include media('print') {
+      scrollbar-width: none;
+    }
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+::-webkit-scrollbar {
+  height: fixit-var(scrollbar-width-legacy);
+  width: fixit-var(scrollbar-width-legacy);
+  overflow: visible;
+
+  @include media('print') {
+    display: none;
+  }
+}
+::-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);
+}

assets/css/_core/_widgets/_typeit.scss

@@ -2,12 +2,13 @@
   .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-color: fixit-var(global-font-color);
+  --ti-cursor-font-family: fixit-var(global-font-family);
   --ti-cursor-transform: translateX(0);
 }

assets/css/_maps/_colors.scss

@@ -0,0 +1,9 @@
+// Theme colors map
+$theme-colors: (
+  'primary': #1677ff,
+  'secondary': #8b949e,
+  'success': #52c41a,
+  'info': #13c2c2,
+  'warning': #faad14,
+  'danger': #ff4d4f
+) !default;

assets/css/_maps/_index.scss

@@ -0,0 +1,5 @@
+@import 'admonition';
+@import 'alert';
+@import 'code-type';
+@import 'colors';
+@import 'utilities';

assets/css/_mixin/_blur.scss

@@ -1,5 +0,0 @@
-@mixin blur {
-  .blur & {
-    @include filter(blur(1.5px));
-  }
-}

assets/css/_mixin/_compatibility.scss

@@ -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;
-}

assets/css/_mixin/_index.scss

@@ -1,6 +0,0 @@
-@import '_blur';
-@import '_compatibility';
-@import '_link';
-@import '_loading';
-@import '_scrollbar-width';
-@import '_z-index';

assets/css/_mixin/_scrollbar-width.scss

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

assets/css/_mixin/_z-index.scss

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

assets/css/_page/_404.scss

@@ -1,6 +1,6 @@
 #content-404 {
   font-size: 1.8rem;
   line-height: 3rem;
-  @include transform(translateY(30vh));
   text-align: center;
+  transform: translateY(30vh);
 }

assets/css/_page/_archive/_index.scss

@@ -22,6 +22,6 @@
     margin-bottom: 1rem;
   }
 
-  @import '../_partials/_archive/terms';
-  @import '../_partials/_archive/tags';
+  @import 'terms';
+  @import 'tags';
 }

assets/css/_page/_archive/_tags.scss

@@ -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));
+        }
+      }
+    }
+  }
+}

assets/css/_page/_archive/_terms.scss

@@ -33,11 +33,15 @@
         margin-bottom: 0.75rem;
       }
 
-      span {
-        float: right;
+      .more-post {
+        text-align: right;
         padding-right: 1rem;
       }
     }
+
+    @include media('xs') {
+      width: 100%;
+    }
   }
 }
 
@@ -59,11 +63,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;
 }

assets/css/_page/_home.scss

@@ -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);
       }
     }
 

assets/css/_page/_index.scss

@@ -4,16 +4,34 @@
 
   .content {
     [id] {
-      scroll-margin-top: var(#{$rootPrefix}scroll-mt);
+      scroll-margin-top: fixit-var(scroll-mt);
+
+      [data-header-desktop='normal'] & {
+        @include media('xs', 'up') {
+          @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
+        }
+      }
+
+      [data-header-mobile='normal'] & {
+        @include media('xs') {
+          @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
+        }
+      }
     }
   }
 
   @include blur;
+
+  @include media('print') {
+    width: 100% !important;
+    padding-top: 0 !important;
+  }
 }
 
 @import '_single';
 @import '_special';
 @import '_archive';
-@import '_home';
-@import '_404';
-@import '_offline';
+@import 'home';
+@import '404';
+@import 'offline';
+@import "patch";

assets/css/_page/_offline.scss

@@ -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;
   }

assets/css/_page/_patch.scss

@@ -0,0 +1,25 @@
+/* Resolve style conflicts between third-party plugins */
+
+@keyframes #{$prefix}pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.animate__pulse {
+  -webkit-animation-name: #{$prefix}pulse !important;
+  animation-name: #{$prefix}pulse !important;
+}
+
+// fix ZenUML intersection height error
+#zenuml-intersection-detector-container {
+  display: none;
+}

assets/css/_page/_single/_alert.scss

@@ -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)
+        ));
       }
     }
   }

assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss

@@ -0,0 +1,175 @@
+/// GitHub Dark Dimmed
+/// copyright (c) 2012 - current GitHub, Inc.
+/// Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+/// Maintained by @Lruihao for FixIt theme
+/// Created on 2022-03-01
+/// Updated on 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);
+  }
+}

assets/css/_page/_single/_code-syntax/_index.scss

@@ -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';
   }
 }

assets/css/_page/_single/_code.scss

@@ -0,0 +1,729 @@
+// inline code
+code {
+  @extend %code;
+}
+
+// indented code
+pre {
+  margin: 0;
+  line-height: 1.45em;
+  padding: 0.5rem 0.75rem;
+  overflow: auto;
+  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;
+  }
+
+  code {
+    padding: 0;
+    background-color: transparent;
+    font-size: inherit;
+    line-height: inherit;
+    min-width: max-content;
+    @include border-radius(0);
+
+    [data-theme=dark] & {
+      background-color: transparent;
+    }
+  }
+
+  img {
+    min-height: 1em;
+    max-height: 1.2em;
+    vertical-align: text-bottom;
+  }
+}
+
+.highlight,
+.gist {
+  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%;
+    max-width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  table,
+  table thead,
+  table tr,
+  table td {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+}
+
+// Code fences blocks or highlight shortcodes
+.highlight {
+  margin: 0.5rem 0;
+  position: relative;
+  @include border-radius;
+
+  // lineNumbersInTable=true
+  > div.chroma {
+    position: relative;
+    background-color: fixit-var(code-block-background-color);
+    @include border-radius;
+
+    &:is(pre):has(.ln) {
+      padding: 0.5rem;
+    }
+
+    .lntable {
+      overflow: auto;
+      display: block;
+      background-color: fixit-var(code-block-background-color);
+      @include border-radius;
+
+      td {
+        vertical-align: top;
+        padding: 0;
+      }
+
+      pre {
+        outline-offset: -1px;
+        @include border-radius(0);
+      }
+
+      // line numbers
+      .lntd:first-child {
+        position: sticky;
+        left: 0;
+      }
+      // code content
+      .lntd:last-child {
+        width: 100%;
+        code {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  // line numbers (lineNumbersInTable=false)
+  .ln {
+    padding-right: 0.75rem;
+    display: inline-block;
+    text-align: right;
+    position: sticky;
+    left: 0;
+  }
+  // Line numbers
+  .lnt,
+  .ln {
+    color: fixit-var(secondary);
+    @include user-select(none);
+  }
+
+  &:not(.code-block) {
+    .lntd:last-child pre.chroma {
+      padding-left: 0;
+    }
+  }
+
+  // code fences blocks wrapped
+  &.code-block {
+    &[data-shadow='always'] {
+      @include box-shadow(always);
+    }
+
+    &[data-shadow='hover'] {
+      @include box-shadow(hover);
+    }
+
+    &.instant-height .code-wrapper {
+      transition: height 0s !important;
+    }
+
+    .code-wrapper {
+      overflow: hidden;
+      height: auto;
+      position: relative;
+      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
+      @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 * #{fixit-var(max-shown-lines)} + #{fixit-var(code-expand-offset, 0.5rem)});
+      }
+      &[data-mode='mac'] .code-wrapper {
+        @include set-fixit-var(code-expand-offset, 1.875rem + 0.5rem);
+      }
+    }
+    
+    .code-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: fixit-var(global-font-family);
+      font-weight: bold;
+      line-height: 1.4em;
+      color: fixit-var(code-header-color);
+      background-color: fixit-var(code-header-background-color);
+      position: sticky;
+      top: fixit-var(breadcrumb-height);
+      transition: border-radius 0s;
+      cursor: pointer;
+      @include z-index(base);
+      @include border-radius(top);
+
+      + .code-wrapper {
+        @include border-radius(bottom);
+
+        > pre.chroma {
+          @include border-radius(bottom);
+        }
+      }
+
+      .code-title {
+        width: 100%;
+        padding: 0.4rem;
+
+        &::after {
+          padding-left: 0.2rem;
+          content: attr(data-name, fixit-var(code-type, 'Code'));
+        }
+
+        // filename for code block
+        &[data-name]::after {
+          @include overflow-wrap(break-word);
+        }
+
+        .arrow {
+          padding: 0 0.2rem;
+          transition: transform 0.2s ease;
+        }
+
+        .title-inner {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          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(base, 1);
+        }
+      }
+
+      .ellipses-btn {
+        display: none;
+        padding: 0.4rem;
+      }
+
+      [role='button'] {
+        padding: 0.4rem;
+
+        @include media('print') {
+          display: none !important;
+        }
+      }
+
+      .copy-btn[data-copied] .fa-clone {
+        --fa: "\f00c";
+        font-weight: 900;
+        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)} {
+          // e.g., --fi-code-type: "JavaScript";
+          @include set-fixit-var(code-type, '"#{$text}"');
+        }
+      }
+
+      [data-header-desktop='sticky'] & {
+        @include media('xs', 'up') {
+          top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+        }
+      }
+
+      [data-header-mobile='sticky'] & {
+        @include media('xs') {
+          top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+        }
+      }
+
+      @include media('print') {
+        top: initial !important;
+      }
+    }
+
+    &.line-wrapping .line-wrap-btn,
+    &:not(.line-nos-hidden) .line-nos-btn,
+    .code-header [role='button']:hover,
+    &:has([contenteditable='true']) .edit-btn {
+      color: fixit-var(global-link-hover-color);
+    }
+
+    &.is-fullscreen {
+      position: fixed;
+      inset: 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 {
+      width: 100%;
+      padding-block: 1rem;
+      text-align: center;
+      position: absolute;
+      bottom: 0;
+      background: linear-gradient(
+        180deg,
+        rgba($code-background-color, 0) 0%,
+        rgba($code-background-color, 0.9) 60%,
+        $code-background-color 100%
+      );
+      @include z-index(base);
+      @include border-radius(bottom);
+
+      [data-theme=dark] & {
+        background: linear-gradient(
+          180deg,
+          rgba($code-background-color-dark, 0) 0%,
+          rgba($code-background-color-dark, 0.9) 60%,
+          $code-background-color-dark 100%
+        );
+      }
+
+      .fa-angles-down {
+        opacity: 0;
+        animation-name: fadeOutDown;
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+        animation-delay: 0.3s;
+        transition: transform 0.2s ease;
+      }
+    }
+
+    .code-copy-btn {
+      @extend .diagram-copy-btn;
+    }
+
+    // classic mode code block collapsed
+    &.is-collapsed {
+      .code-header {
+        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] & {
+          @include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%));
+        }
+
+        + .code-wrapper {
+          height: 0;
+        }
+      }
+
+      .arrow {
+        transform: rotate(-90deg);
+      }
+
+      .ellipses-btn {
+        display: inline;
+      }
+
+      .code-header .action-btn,
+      .code-expand-btn {
+        display: none;
+      }
+    }
+
+    // code preview expanded
+    &.is-expanded {
+      margin-bottom: 1rem;
+      &:has([contenteditable='true']) .code-expand-btn {
+        display: none;
+      }
+      .code-expand-btn {
+        background: transparent;
+        padding-block: 0;
+        transform: translateY(1rem);
+
+        .fa-angles-down {
+          animation-name: fadeOutRotate;
+
+          @keyframes fadeOutRotate {
+            0% {
+              opacity: 1;
+              transform: rotate(180deg);
+            }
+            100% {
+              opacity: 0;
+              transform: rotate(180deg) translate3d(0, 100%, 0);
+            }
+          }
+        }
+      }
+    }
+
+    // hide original line numbers
+    &.line-nos-hidden {
+      > .chroma .lntable {
+        width: 100%;
+        display: table;
+      }
+      .lntd:first-child,
+      .ln {
+        display: none;
+      }
+    }
+
+    // line wrapping
+    &.line-wrapping {
+      > .chroma .lntable {
+        width: 100%;
+        display: table;
+
+        // hide original line numbers
+        .lntd:first-child {
+          display: none;
+        }
+      }
+      .lntd:last-child pre.chroma,
+      .code-wrapper > pre.chroma {
+        max-width: 100%;
+        box-sizing: border-box;
+
+        code {
+          text-wrap: wrap;
+          word-break: break-all;
+          overflow-wrap: break-word;
+        }
+      }
+    }
+
+    // line numbers (pseudo-elements) for code blocks
+    &.line-wrapping:not(.line-nos-hidden) .lntd:last-child pre.chroma,
+    &:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
+      > code > .line {
+        display: flex;
+
+        &::before {
+          counter-increment: codeNos;
+          content: counter(codeNos);
+          white-space: nowrap;
+          text-align: right;
+          min-width: calc(#{fixit-var(line-digit)} * 1ch);
+          padding-inline: 0.75rem;
+          flex-shrink: 0;
+          color: fixit-var(secondary);
+          background-color: fixit-var(code-block-background-color);
+        }
+
+        // highlight for line numbers
+        &.hl::before {
+          background-color: transparent;
+        }
+      }
+    }
+
+    // add sticky effect for line numbers when lineNos=false
+    &:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
+      position: sticky;
+      left: 0;
+    }
+
+    // when line numbers shown
+    &:not(.line-nos-hidden) {
+      .lntd:last-child pre.chroma,
+      .code-wrapper > pre.chroma:not(:has(.ln)) {
+        padding-left: 0;
+      }
+    }
+
+    // add border for non-classic mode
+    &:not([data-mode='classic']) {
+      border: 1px solid darken($code-background-color, 3%);
+
+      [data-theme=dark] & {
+        border-color: darken($code-background-color-dark, 3%);
+      }
+    }
+
+    &[data-mode='mac'] {
+      pre.chroma {
+        padding-top: 1.875rem;
+
+        &::after {
+          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;
+          content: ' ';
+          height: 12px;
+          width: 12px;
+          @include border-radius(full);
+
+          [data-theme=dark] & {
+            @include set-fixit-vars((
+              mac-red: #ff5f56,
+              mac-yellow: #febc2e,
+              mac-green: #28c840,
+            ));
+          }
+        }
+      }
+    }
+
+    &[data-mode='simple'] {
+      pre.chroma {
+        padding-block: 0.875rem;
+      }
+    }
+  }
+}
+
+@import './_code-syntax';
+
+// gist shortcode
+.gist {
+  background-color: fixit-var(code-block-background-color);
+  @include border-radius(top);
+  
+  .gist-file,
+  .gist-data,
+  .gist-meta {
+    border: none;
+  }
+
+  .gist-data {
+    background-color: inherit;
+
+    .blob-wrapper {
+      padding-block: 0.5rem;
+
+      table.highlight {
+        background-color: inherit;
+        overflow: initial;
+
+        td.blob-num {
+          position: sticky;
+          left: 0;
+          background-color: fixit-var(code-block-background-color);
+          @include z-index(base);
+        }
+
+        td.blob-code {
+          padding-left: 2px !important;
+        }
+      }
+    }
+  }
+
+  .gist-meta {
+    padding: 0.4rem 0.8rem;
+    @include link(false, false);
+    @include border-radius(bottom);
+    background-color: fixit-var(gist-meta-background-color);
+  }
+
+  [data-theme=dark] & {
+    @import './_code-syntax/github-dark-dimmed';
+  }
+}
+
+// Code Tabs
+.code-tabs {
+  margin: 0.5rem 0;
+  background-color: fixit-var(code-block-background-color);
+  border: 1px solid fixit-var(global-border-color);
+  @include border-radius;
+
+  &[data-shadow='always'] {
+    @include box-shadow(always);
+  }
+
+  &[data-shadow='hover'] {
+    @include box-shadow(hover);
+  }
+
+  &:has(.code-block.active .code-expand-btn) {
+    margin-bottom: 1rem;
+  }
+
+  &:has(.code-block.active.line-wrapping) .tabs-actions .line-wrap-btn,
+  &:has(.code-block.active:not(.line-nos-hidden)) .tabs-actions .line-nos-btn,
+  &:has(.code-block.active [contenteditable='true']) .tabs-actions .edit-btn {
+    color: fixit-var(global-link-hover-color);
+  }
+
+  .tabs-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    line-height: 1.4em;
+    font-size: fixit-var(code-block-font-size);
+    color: fixit-var(code-header-color);
+    background-color: fixit-var(code-header-background-color);
+    position: sticky;
+    top: fixit-var(breadcrumb-height);
+    @include z-index(base);
+    @include border-radius(top);
+
+    .tabs-items {
+      display: flex;
+      overflow-x: auto;
+      position: relative;
+      @include border-radius(top);
+
+      .tab-item {
+        padding: 0.4rem 0.8rem;
+        cursor: pointer;
+        font-weight: bold;
+        color: fixit-var(secondary);
+        white-space: nowrap;
+        @include user-select(none);
+        @include border-radius;
+
+        @include media('xs') {
+          padding-inline: 0.6rem;
+        }
+      }
+
+      &:not(:has(.tab-item:hover)) .tab-item.active,
+      .tab-item:hover {
+        anchor-name: #{$rootPrefix}tab-hover;
+        color: fixit-var(global-font-color);
+      }
+
+      &::before {
+        content: '';
+        position-anchor: #{$rootPrefix}tab-hover;
+        position: absolute;
+        inset: anchor(inside);
+        translate: 2px 2px;
+        width: calc(anchor-size(width) - 0.25rem);
+        height: calc(anchor-size(height) - 0.25rem);
+        box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fixit-var(secondary) 30%, transparent);
+        pointer-events: none;
+        transition: 0.3s ease-in-out;
+        @include border-radius;
+      }
+    }
+
+    .tabs-actions {
+      display: flex;
+      flex-shrink: 0;
+
+      .action-btn {
+        padding: 0.4rem;
+
+        &:hover {
+          color: fixit-var(global-link-hover-color);
+        }
+
+        &.copy-btn[data-copied] .fa-clone {
+          --fa: "\f00c";
+          font-weight: 900;
+          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 {
+          display: none;
+        }
+      }
+    }
+
+    [data-header-desktop='sticky'] & {
+      @include media('xs', 'up') {
+        top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+
+    [data-header-mobile='sticky'] & {
+      @include media('xs') {
+        top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+
+    @include media('print') {
+      top: initial !important;
+    }
+  }
+
+  .tabs-content {
+    .code-block {
+      display: none;
+      margin: 0;
+      @include border-radius(bottom);
+      @include box-shadow(never);
+
+      &.active {
+        display: block;
+      }
+
+      // hide original header
+      .code-header {
+        display: none;
+      }
+    }
+  }
+}

assets/css/_page/_single/_collections.scss

@@ -5,11 +5,10 @@
   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 +21,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 +50,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,24 +72,31 @@
       }
 
       &[rel='prev']:hover {
-        @include transform(translateX(-4px));
+        transform: translateX(-4px);
       }
 
       &[rel='next']:hover {
-        @include transform(translateX(4px));
+        transform: translateX(4px);
       }
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 // 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;
-  @extend .print-d-none;
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 // Collection List
@@ -103,7 +109,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 +122,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 +133,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 +142,7 @@
 
     .collection-count {
       flex-shrink: 0;
-      color: var(#{$rootPrefix}secondary);
+      color: fixit-var(secondary);
     }
 
     .details-icon {
@@ -147,10 +153,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 +177,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 +197,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%);
           }
         }

assets/css/_page/_single/_color-preview.scss

@@ -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);
+    }
+  }
+}

assets/css/_page/_single/_comment.scss

@@ -0,0 +1,11 @@
+> #comments {
+  padding: 2rem 0;
+
+  iframe {
+    width: 100%;
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}

assets/css/_page/_single/_diagram-copy-btn.scss

@@ -0,0 +1,63 @@
+// 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;
+  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);
+  @include user-select(none);
+  @include border-radius;
+  @include z-index(base);
+
+  [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);
+    }
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}

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

@@ -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;

assets/css/_page/_single/_footer.scss

@@ -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,14 +37,18 @@
           content: '|';
           margin-left: 0.25rem;
           margin-right: 0.25rem;
+          color: fixit-var(secondary);
         }
       }
 
       .post-info-share {
-        @extend .print-d-none;
         a * {
           vertical-align: text-bottom;
         }
+
+        @include media('print') {
+          display: none !important;
+        }
       }
     }
   }
@@ -60,7 +60,9 @@
     font-size: 0.9rem;
 
     section:last-child {
-      @extend .print-d-none;
+      @include media('print') {
+        display: none !important;
+      }
     }
   }
 
@@ -84,25 +86,28 @@
     justify-content: space-between;
     gap: 1.5rem;
     padding-block: 0.5rem;
-    @extend .print-d-none;
 
     .post-nav-item {
       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);
       }
     }
+
+    @include media('print') {
+      display: none !important;
+    }
   }
 }

assets/css/_page/_single/_index.scss

@@ -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,18 @@
       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);
+    }
+
+    @include media('print') {
+      text-align: center;
     }
   }
 
@@ -33,16 +37,15 @@
     font-size: 1.2rem;
     font-weight: normal;
     line-height: 1.15;
+
+    @include media('print') {
+      text-align: center;
+    }
   }
 
   .post-meta {
     font-size: 0.875rem;
-    color: var(#{$rootPrefix}global-font-secondary-color);
-
-    .comment-visitors,
-    .comment-count {
-      @extend .print-d-none;
-    }
+    color: fixit-var(secondary);
 
     span {
       display: inline-block;
@@ -56,16 +59,21 @@
       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);
+        @include border-radius(full);
+        object-fit: cover;
+      }
+    }
 
-        [data-theme='dark'] & {
-          border-color: $global-border-color-dark;
-        }
+    @include media('print') {
+      text-align: center;
+
+      .comment-visitors,
+      .comment-count {
+        display: none;
       }
     }
   }
@@ -89,14 +97,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 +113,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 {
@@ -129,11 +137,12 @@
 
   .content {
     margin-block: 1rem;
+
     > h1,
     > 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 +168,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1rem;
 
-      [data-theme='dark'] & {
+      [data-theme=dark] & {
         font-weight: bolder;
       }
 
@@ -192,7 +201,7 @@
     strong {
       font-weight: bold;
 
-      [data-theme='dark'] & {
+      [data-theme=dark] & {
         color: #ddd;
       }
     }
@@ -203,60 +212,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 +282,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 +308,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 +334,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 +345,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 +387,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 +401,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 +408,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 +422,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 +435,7 @@
       }
       
       hr {
-        background-color: var(#{$rootPrefix}hr-background-color);
+        background-color: fixit-var(global-border-color);
         height: 1px;
         margin-block: 1em;
       }
@@ -446,12 +449,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 +457,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
@@ -480,19 +471,25 @@
       max-width: 100%;
       overflow-x: auto;
       overflow-y: hidden;
+      // neutralize the margin-right setting of .katex .vlist-t2
+      // to prevent scrollbars from appearing when the width is not full
+      padding-right: 2px;
     }
     .katex-error {
       padding: 0.14em 0.28em;
       background-color: mark;
       cursor: help;
-      @include border-radius($global-border-radius);
+      @include border-radius;
     }
 
     // MathJax styles
-    mjx-container[jax='CHTML'][display='true'] {
-      max-width: 100%;
-      overflow-x: auto;
-      overflow-y: hidden;
+    mjx-container[jax='CHTML'] {
+      // formula Blocks
+      &[display='true'] {
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
 
       // fix the color of xypic diagrams
       mjx-xypic {
@@ -509,15 +506,44 @@
     json-viewer[boxed] + json-viewer[boxed] {
       margin-top: 0.5rem;
     }
+
+    @include media('lg', 'up') {
+      :is(.code-block, .diagram-container) {
+        :is(.code-copy-btn, .diagram-copy-btn) {
+          display: none;
+          opacity: 0;
+          transform: scale(0.9);
+          transition:
+            display 0.25s allow-discrete,
+            opacity 0.25s,
+            transform 0.25s,
+            color 0.1s,
+            background-color 0.1s,
+            box-shadow 0.1s,
+            border-color 0.1s;
+        }
+        &:hover {
+          :is(.code-copy-btn, .diagram-copy-btn) {
+            display: block;
+            opacity: 1;
+            transform: scale(1);
+            @starting-style {
+              opacity: 0;
+              transform: scale(0.9);
+            }
+          }
+        }
+      }
+    }
   }
-  
-  @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 {

assets/css/_page/_single/_related.scss

@@ -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);
       }
     }
   }
 }
-
-

assets/css/_page/_single/_reward.scss

@@ -1,7 +1,6 @@
 .post-reward {
   padding: 1rem;
   text-align: center;
-  @extend .print-d-none;
 
   &:has(.reward-ways:empty) {
     display: none;
@@ -29,7 +28,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 +37,7 @@
         display: inline-block;
         margin: 0.8em 2em 0;
         max-width: 100%;
-        width: $reward-img-width;
+        width: fixit-var(reward-img-width);
       }
     }
 
@@ -49,13 +48,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,31 +64,28 @@
     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%);
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }

assets/css/_page/_single/_shortcodes/_admonition.scss

@@ -0,0 +1,117 @@
+.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;
+    }
+
+    // reset sticky header position in code block when inside admonition
+    .code-block .code-header,
+    .code-tabs .tabs-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;
+    }
+  }
+}

assets/css/_page/_single/_shortcodes/_cardlink.scss

@@ -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);
     }

assets/css/_page/_single/_shortcodes/_center-quote.scss

@@ -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';
   }
 }