chore(release): 0.4.5

* feat(markup): add toggle code block functionality with multiple format support

* fix(assets): improve filename generation for code downloads

* feat(code): add `before_tabs` attribute support for tabbed code blocks

* feat(code): implement visibility control for first tab content in code blocks

.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. **开发命令**:

.gitignore

@@ -30,3 +30,4 @@ $RECYCLE.BIN/
 
 CHANGELOG.md
 .stash/
+docs

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)

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)

SECURITY.md

@@ -6,7 +6,7 @@ Only the latest version receives active maintenance and security updates:
 
 | Version | Hugo Version      | LoveIt Compat      | Supported          |
 | :-----: | :---------------: | :----------------: | :----------------: |
-| 0.4.x   | >= 0.147.7        | N/A                | :white_check_mark: |
+| 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:                |

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
 
 ```
@@ -148,6 +180,18 @@ function add(a, b) {
 
     <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
 
+## Code Toggle
+
+```toggle {before_tabs="hugo."}
+[params]
+description = ''
+keywords = []
+
+[params.codeblock]
+mode = 'classic'
+wrapper = true
+```
+
 ## Code block inside other blocks
 
 > [!NOTE]+

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/index.md

@@ -115,7 +115,7 @@ Trying the file not found case (should fallback to next mode):
 
 {{< file-tree file="data/nonexistent.yaml" data="example" />}}
 
-### Site data
+### Hugo data
 
 #### Basic usage
 

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
@@ -217,3 +216,16 @@ type = "file"
 
 {{% /tab %}}
 {{< /tabs >}}
+
+### MathJax inside tabs
+
+{{< tabs >}}
+{{% tab title="Inline" %}}
+$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
+{{% /tab %}}
+{{% tab title="Block" %}}
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+\[ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \]
+{{% /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.

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

@@ -1,6 +1,6 @@
 @mixin blur {
   // TODO refactor blur with backdrop-filter
   .blur & {
-    @include filter(blur(1.5px));
+    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-active-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-active-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/_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,735 @@
+// 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('sm', '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);
+
+      .before-tabs {
+        padding: 0.4rem 0.6rem;
+        white-space: nowrap;
+        color: fixit-var(global-font-color);
+      }
+
+      .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('sm', '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;
@@ -111,8 +119,8 @@
         left: 5%;
         top: 50%;
         transform: translateY(-50%);
-        z-index: 1;
-        color: var(#{$rootPrefix}hr-active-color);
+        @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;
@@ -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,16 +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);
+            }
+          }
+        }
+      }
+    }
   }
 
-  // TODO Reorganization import
-  @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

@@ -4,12 +4,12 @@
   padding: 0 0.75rem;
   border-left: .25rem solid;
   overflow: hidden;
-  background-color: var(#{$rootPrefix}admonition-bg-color);
-  border-left-color: var(#{$rootPrefix}admonition-color);
-  @include border-radius($global-border-radius);
+  background-color: fixit-var(admonition-bg-color);
+  border-left-color: fixit-var(admonition-color);
+  @include border-radius;
 
   .admonition-title {
-    font-weight: var(#{$rootPrefix}admonition-title-font-weight, bold);
+    font-weight: fixit-var(admonition-title-font-weight, bold);
     margin: 0 -0.75rem;
     padding: 0.25rem 1.8rem;
     border-bottom: 1px solid;
@@ -20,14 +20,14 @@
       font-weight: bolder;
       text-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.2);
 
-      [data-theme='dark'] & {
+      [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)) {
-      #{$rootPrefix}admonition-title-font-weight: normal;
+      @include set-fixit-var(admonition-title-font-weight, normal);
       padding: 0.75rem 1rem 0.75rem 2.2rem;
       border: 0;
 
@@ -39,17 +39,17 @@
   }
 
   > .admonition-title {
-    border-bottom-color: var(#{$rootPrefix}admonition-bg-color);
-    background-color: var(#{$rootPrefix}admonition-bg-color-collapsed);
-    @include transition(all 0.2s ease);
+    border-bottom-color: fixit-var(admonition-bg-color);
+    background-color: fixit-var(admonition-bg-color-collapsed);
+    transition: all 0.2s ease;
 
     i.icon {
-      color: var(#{$rootPrefix}admonition-color);
+      color: fixit-var(admonition-color);
     }
   }
 
   &.open > .admonition-title {
-    background-color: var(#{$rootPrefix}admonition-bg-color);
+    background-color: fixit-var(admonition-bg-color);
   }
 
   .admonition-content {
@@ -60,7 +60,9 @@
       margin: 0;
     }
 
-    .code-block .code-header {
+    // reset sticky header position in code block when inside admonition
+    .code-block .code-header,
+    .code-tabs .tabs-header {
       top: initial !important;
     }
   }
@@ -81,17 +83,21 @@
   }
 
   // default admonition type is note
-  #{$rootPrefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)};
-  #{$rootPrefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)};
-  #{$rootPrefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)};
+  @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} {
-        #{$rootPrefix}admonition-color: #{map-get($item, color)};
-        #{$rootPrefix}admonition-bg-color: #{map-get($item, bg-color)};
-        #{$rootPrefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)};
+         @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),
+        ));
       }
     }
   }
@@ -102,7 +108,7 @@
 
   // content-only admonition without title
   &:not(:has(.admonition-title)) {
-    border: 1px solid var(#{$rootPrefix}admonition-bg-color);
+    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;
     font-family: var(--fa-family-classic);
     font-weight: 900;
     content: '\f10d';
-
-    [data-theme='dark'] & {
-      border-top-color: $global-border-color-dark;
-    }
   }
 
   &::after {
-    border-bottom: 1px solid $global-border-color;
+    border-bottom: 1px solid fixit-var(global-border-color);
     bottom: -20px;
     text-align: right;
     font-family: var(--fa-family-classic);
     font-weight: 900;
     content: '\f10e';
-
-    [data-theme='dark'] & {
-      border-bottom-color: $global-border-color-dark;
-    }
   }
 }

assets/css/_page/_single/_shortcodes/_file-tree.scss

@@ -1,17 +1,17 @@
 .file-tree-wrapper {
-  border: 1px solid var(#{$rootPrefix}global-border-color);
+  border: 1px solid fixit-var(global-border-color);
   padding: 0.5rem;
   font-size: 0.8rem;
   line-height: 1;
   margin-block: 0.5rem;
-  @include border-radius($global-border-radius);
-  @include transition(box-shadow 0.2s ease);
+  @include border-radius;
+  transition: box-shadow 0.2s ease;
 
   &:hover {
-    @include box-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-    [data-theme='dark'] & {
-      @include box-shadow(0 2px 8px rgba(255, 255, 255, 0.1));
+    [data-theme=dark] & {
+      box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
     }
   }
 
@@ -28,7 +28,7 @@
           cursor: pointer;
           font-weight: bold;
 
-          [data-theme='dark'] & {
+          [data-theme=dark] & {
             color: #ddd;
           }
 
@@ -47,8 +47,8 @@
         position: relative;
         gap: 0.25rem;
         padding: 0.25rem 0.5rem;
-        @include border-radius($global-border-radius);
-        @include transition(all 0.15s ease);
+        transition: all 0.15s ease;
+        @include border-radius;
 
         .file-tree-icon {
           width: 1rem;
@@ -56,8 +56,12 @@
           flex-shrink: 0;
         }
 
+        .file-tree-label__inner {
+          word-break: break-all;
+        }
+
         &.is-highlighted {
-          color: var(#{$rootPrefix}global-link-hover-color);
+          color: fixit-var(global-link-hover-color);
         }
       }
     }
@@ -75,7 +79,7 @@
           translate: 0 -50%;
           width: 0.75rem;
           height: 1px;
-          background-color: var(#{$rootPrefix}secondary);
+          background-color: fixit-var(secondary);
         }
       }
     }
@@ -92,8 +96,8 @@
       bottom: 0.625rem;
       left: calc(1rem - 0.5px);
       width: 1px;
-      background-color: var(#{$rootPrefix}secondary);
-      height: var(#{$rootPrefix}file-tree-line-height);
+      background-color: fixit-var(secondary);
+      height: fixit-var(file-tree-line-height);
     }
   }
 

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

@@ -0,0 +1,14 @@
+@import 'admonition';
+@import 'bilibili';
+@import 'bluesky';
+@import 'douyin';
+@import 'cardlink';
+@import 'center-quote';
+@import 'echarts';
+@import 'file-tree';
+@import 'instagram';
+@import 'mapbox';
+@import 'mermaid';
+@import 'tabs';
+@import 'timeline';
+@import 'version';

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

@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  [data-theme='dark'] & {
+  [data-theme=dark] & {
     border: none !important;
   }
 }

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

@@ -1,5 +1,5 @@
 .mapbox {
   margin: 0.5rem 0;
   padding: 0.5rem 0;
-  @include border-radius($global-border-radius);
+  @include border-radius;
 }

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

@@ -21,7 +21,7 @@
 }
 
 .mermaid {
-  [data-theme='dark'] & {
+  [data-theme=dark] & {
     height: 0;
     padding: 0;
   }
@@ -31,7 +31,7 @@
   height: 0;
   padding: 0;
 
-  [data-theme='dark'] & {
+  [data-theme=dark] & {
     height: auto;
     padding: 0.5rem 0.75rem;
   }
@@ -43,10 +43,10 @@
   padding: 0;
 }
 
-@media only print {
+@include media('print') {
   .mermaid,
   .mermaid-dark {
-    display: none;
+    display: none !important;
   }
   .mermaid-neutral {
     height: auto;

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

@@ -34,12 +34,12 @@ tab-container {
     display: block;
     border: none;
     color: inherit;
-    background: transparent;
+    background-color: transparent;
     font-size: 0.9em;
     font-weight: 500;
     cursor: pointer;
     flex-shrink: 0;
-    @include transition(all 0.3s ease);
+    transition: all 0.3s ease;
   }
 
   > .tab-panel {
@@ -107,17 +107,15 @@ tab-container {
 
   // ========================================
   // Style 1: Underline Style (Default)
-  // Clean, minimal with bottom border
+  // Clean, minimal with sliding indicator
   // ========================================
   &[type='underline'] {
     > .tab-button {
-      #{$rootPrefix}tab-button-border-color: transparent;
       @include tab-button-size(0);
 
       &[aria-selected='true'],
       &[aria-selected='false']:hover {
-        color: var(#{$rootPrefix}primary);
-        #{$rootPrefix}tab-button-border-color: var(#{$rootPrefix}primary);
+        color: fixit-var(primary);
       }
 
       &[aria-selected='false']:hover {
@@ -125,6 +123,29 @@ tab-container {
       }
     }
 
+    // Anchor tracking: follows hover, rests on active tab
+    &:not(:has(> .tab-button:hover)) > .tab-button[aria-selected='true'],
+    > .tab-button:hover {
+      anchor-name: #{$rootPrefix}tab-underline-active;
+    }
+
+    &::part(tablist-wrapper) {
+      position: relative;
+
+      // Sliding box-shadow indicator via anchor positioning
+      &::before {
+        content: '';
+        position: absolute;
+        position-anchor: #{$rootPrefix}tab-underline-active;
+        inset: anchor(inside);
+        pointer-events: none;
+      }
+    }
+
+    &:has(> .tab-button[aria-selected='false']:hover)::part(tablist-wrapper)::before {
+      opacity: 0.7;
+    }
+
     &[placement='top'],
     &[placement='bottom'] {
       gap: 0.5rem;
@@ -134,9 +155,13 @@ tab-container {
       }
 
       &::part(tablist-wrapper) {
-        overflow-x: scroll;
+        overflow-x: auto;
         overflow-y: hidden;
       }
+
+      &::part(tablist-wrapper)::before {
+        transition: all 0.3s ease-in-out, top, bottom 0s;
+      }
     }
 
     &[placement='left'],
@@ -144,55 +169,65 @@ tab-container {
       > .tab-button {
         @include tab-button-size(1rem, 0);
       }
+
+      &::part(tablist-wrapper)::before {
+        transition: all 0.3s ease-in-out, left, right 0s;
+      }
     }
 
     // Top placement
     &[placement='top'] {
       &::part(tablist-tab-wrapper) {
-        border-bottom: 2px solid var(#{$rootPrefix}global-border-color);
+        border-bottom: 2px solid fixit-var(global-border-color);
       }
 
-      > .tab-button {
+      &::part(tablist-wrapper)::before {
+        box-shadow: inset 0 -2px 0 fixit-var(primary);
         translate: 0 2px;
-        border-bottom: 2px solid var(#{$rootPrefix}tab-button-border-color);
       }
     }
 
     // Bottom placement
     &[placement='bottom'] {
       &::part(tablist-tab-wrapper) {
-        border-top: 2px solid var(#{$rootPrefix}global-border-color);
+        border-top: 2px solid fixit-var(global-border-color);
       }
 
-      > .tab-button {
+      &::part(tablist-wrapper)::before {
+        box-shadow: inset 0 2px 0 fixit-var(primary);
         translate: 0 -2px;
-        border-top: 2px solid var(#{$rootPrefix}tab-button-border-color);
       }
     }
 
     // Left placement
     &[placement='left'] {
       &::part(tablist-tab-wrapper) {
-        border-right: 2px solid var(#{$rootPrefix}global-border-color);
+        border-right: 2px solid fixit-var(global-border-color);
+      }
+
+      &::part(tablist-wrapper)::before {
+        box-shadow: inset -2px 0 0 fixit-var(primary);
+        translate: 2px 0;
       }
 
       > .tab-button {
         text-align: right;
-        translate: 2px 0;
-        border-right: 2px solid var(#{$rootPrefix}tab-button-border-color);
       }
     }
 
     // Right placement
     &[placement='right'] {
       &::part(tablist-tab-wrapper) {
-        border-left: 2px solid var(#{$rootPrefix}global-border-color);
+        border-left: 2px solid fixit-var(global-border-color);
+      }
+
+      &::part(tablist-wrapper)::before {
+        box-shadow: inset 2px 0 0 fixit-var(primary);
+        translate: -2px 0;
       }
 
       > .tab-button {
         text-align: left;
-        translate: -2px 0;
-        border-left: 2px solid var(#{$rootPrefix}tab-button-border-color);
       }
     }
   }
@@ -203,26 +238,26 @@ tab-container {
   // ========================================
   &[type='pill'] {
     > .tab-button {
-      background: var(#{$rootPrefix}code-inline-background-color);
+      background-color: fixit-var(code-inline-background-color);
       @include tab-button-size;
-      @include border-radius(2em);
+      @include border-radius(full);
 
       &[aria-selected='true'] {
         color: #ffffff;
-        background: var(#{$rootPrefix}primary);
-        @include box-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.3));
+        background-color: fixit-var(primary);
+        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
 
-        [data-theme='dark'] & {
-          background: var(#{$rootPrefix}primary);
-          @include box-shadow(0 0.125rem 0.5rem rgba(255, 255, 255, 0.3));
+        [data-theme=dark] & {
+          background-color: fixit-var(primary);
+          box-shadow: 0 0.125rem 0.5rem rgba(255, 255, 255, 0.3);
         }
       }
 
       &[aria-selected='false']:hover {
-        background: rgba(175, 184, 193, 0.4);
+        background-color: rgba(175, 184, 193, 0.4);
 
-        [data-theme='dark'] & {
-          background: rgba(99, 110, 123, 0.6);
+        [data-theme=dark] & {
+          background-color: rgba(99, 110, 123, 0.6);
         }
       }
     }
@@ -305,28 +340,28 @@ tab-container {
     }
 
     > .tab-button {
-      border: 1px solid var(#{$rootPrefix}global-border-color);
-      background-color: var(#{$rootPrefix}code-block-background-color);
+      border: 1px solid fixit-var(global-border-color);
+      background-color: fixit-var(code-block-background-color);
       @include tab-button-size(1.5rem);
 
       &[aria-selected='true'],
       &[aria-selected='false']:hover {
-        background-color: var(#{$rootPrefix}global-background-color);
-        color: var(#{$rootPrefix}global-link-color);
-        z-index: 1;
+        background-color: fixit-var(global-background-color);
+        color: fixit-var(global-link-color);
+        @include z-index(base);
       }
     }
 
     > .tab-panel {
       padding: 0.75rem;
-      background-color: var(#{$rootPrefix}global-background-color);
-      border: 1px solid var(#{$rootPrefix}global-border-color);
+      background-color: fixit-var(global-background-color);
+      border: 1px solid fixit-var(global-border-color);
     }
 
     &[placement='top'],
     &[placement='bottom'] {
       &::part(tablist-wrapper) {
-        overflow-x: scroll;
+        overflow-x: auto;
         overflow-y: hidden;
       }
 
@@ -334,13 +369,13 @@ tab-container {
         &:first-of-type {
           position: sticky;
           left: 0;
-          z-index: 2;
+          @include z-index(base, 1);
         }
 
         &:last-of-type {
           position: sticky;
           right: 0;
-          z-index: 2;
+          @include z-index(base, 1);
         }
       }
     }
@@ -348,84 +383,84 @@ tab-container {
     // Top placement
     &[placement='top'] {
       &::part(tablist-tab-wrapper) {
-        border-bottom: 1px solid var(#{$rootPrefix}global-border-color);
+        border-bottom: 1px solid fixit-var(global-border-color);
       }
 
       > .tab-button {
         translate: 0 1px;
-        @include border-radius($global-border-radius $global-border-radius 0 0);
+        @include border-radius(top);
 
         &[aria-selected='true'] {
-          border-bottom-color: var(#{$rootPrefix}global-background-color);
+          border-bottom-color: fixit-var(global-background-color);
         }
       }
 
       > .tab-panel {
         border-top: none;
-        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include border-radius(bottom);
       }
     }
 
     // Bottom placement
     &[placement='bottom'] {
       &::part(tablist-tab-wrapper) {
-        border-top: 1px solid var(#{$rootPrefix}global-border-color);
+        border-top: 1px solid fixit-var(global-border-color);
       }
 
       > .tab-button {
         translate: 0 -1px;
-        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include border-radius(bottom);
 
         &[aria-selected='true'] {
-          border-top-color: var(#{$rootPrefix}global-background-color);
+          border-top-color: fixit-var(global-background-color);
         }
       }
 
       > .tab-panel {
         border-bottom: none;
-        @include border-radius($global-border-radius $global-border-radius 0 0);
+        @include border-radius(top);
       }
     }
 
     // Left placement
     &[placement='left'] {
       &::part(tablist-tab-wrapper) {
-        border-right: 1px solid var(#{$rootPrefix}global-border-color);
+        border-right: 1px solid fixit-var(global-border-color);
       }
 
       > .tab-button {
         translate: 1px 0;
-        @include border-radius($global-border-radius 0 0 $global-border-radius);
+        @include border-radius(left);
 
         &[aria-selected='true'] {
-          border-right-color: var(#{$rootPrefix}global-background-color);
+          border-right-color: fixit-var(global-background-color);
         }
       }
 
       > .tab-panel {
         border-left: none;
-        @include border-radius(0 $global-border-radius $global-border-radius 0);
+        @include border-radius(right);
       }
     }
 
     // Right placement
     &[placement='right'] {
       &::part(tablist-tab-wrapper) {
-        border-left: 1px solid var(#{$rootPrefix}global-border-color);
+        border-left: 1px solid fixit-var(global-border-color);
       }
 
       > .tab-button {
         translate: -1px 0;
-        @include border-radius(0 $global-border-radius $global-border-radius 0);
+        @include border-radius(right);
 
         &[aria-selected='true'] {
-          border-left-color: var(#{$rootPrefix}global-background-color);
+          border-left-color: fixit-var(global-background-color);
         }
       }
 
       > .tab-panel {
         border-right: none;
-        @include border-radius($global-border-radius 0 0 $global-border-radius);
+        @include border-radius(left);
       }
     }
   }
@@ -436,18 +471,14 @@ tab-container {
   // ========================================
   &[type='segment'] {
     &::part(tablist-wrapper) {
-      overflow-x: scroll;
+      overflow-x: auto;
       overflow-y: hidden;
     }
 
     &::part(tablist-tab-wrapper) {
       padding: 0.25rem;
-      background: $code-background-color;
-      @include border-radius($global-border-radius);
-
-      [data-theme='dark'] & {
-        background: $code-background-color-dark;
-      }
+      background-color: fixit-var(code-block-background-color);
+      @include border-radius;
     }
 
     &::part(tablist) {
@@ -455,11 +486,13 @@ tab-container {
     }
 
     > .tab-button {
+      position: relative;
       font-weight: 400;
       flex-grow: 1;
+      @include z-index(base);
 
       @include tab-button-size;
-      @include border-radius($global-border-radius);
+      @include border-radius;
 
       &[aria-selected='true'],
       &:hover {
@@ -467,12 +500,26 @@ tab-container {
       }
 
       &[aria-selected='true'] {
-        background-color: var(#{$rootPrefix}global-background-color);
-        @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+        anchor-name: #{$rootPrefix}tab-segment-active;
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
 
-        [data-theme='dark'] & {
-          @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
-        }
+    // Sliding active indicator via anchor positioning
+    &::part(tablist-tab-wrapper)::before {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      position-anchor: #{$rootPrefix}tab-segment-active;
+      inset: anchor(inside);
+      background-color: fixit-var(global-background-color);
+      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+      transition: all 0.15s ease, top, bottom 0s;
+      @include border-radius;
+
+      [data-theme=dark] & {
+        box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
       }
     }
   }
@@ -535,3 +582,54 @@ tab-container {
 tab-container .tab-panel:not([hidden]) {
   animation: tabSlideIn 0.3s ease-out;
 }
+
+// Firefox fallback: `::part(...)::before` is not supported.
+// We use a CSS variable to control the border color of the active tab button,
+// and apply the sliding effect directly on the button itself.
+@supports (-moz-appearance: none) {
+  tab-container {
+    &[type='underline'] {
+      > .tab-button {
+        @include set-fixit-var(tab-button-border-color, transparent);
+
+        &[aria-selected='true'],
+        &[aria-selected='false']:hover {
+          @include set-fixit-var(tab-button-border-color, fixit-var(primary));
+        }
+      }
+
+      &[placement='top'] > .tab-button {
+        translate: 0 2px;
+        border-bottom: 2px solid fixit-var(tab-button-border-color);
+      }
+
+      &[placement='bottom'] > .tab-button {
+        translate: 0 -2px;
+        border-top: 2px solid fixit-var(tab-button-border-color);
+      }
+
+      &[placement='left'] > .tab-button {
+        translate: 2px 0;
+        border-right: 2px solid fixit-var(tab-button-border-color);
+      }
+
+      &[placement='right'] > .tab-button {
+        translate: -2px 0;
+        border-left: 2px solid fixit-var(tab-button-border-color);
+      }
+    }
+
+    &[type='segment'] {
+      > .tab-button {
+        &[aria-selected='true'] {
+          background-color: fixit-var(global-background-color);
+          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+
+          [data-theme=dark] & {
+            box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -3,28 +3,30 @@ ul.#{$prefix}timeline {
   box-sizing: border-box;
   overflow: auto;
   margin: 1rem auto;
-  --timeline-color: #{darken($global-border-color, 5%)};
-  --timeline-circle-color: #FF735A;
-  --timeline-circle-size: 10px;
-  --timeline-width: 2px;
+  @include set-fixit-vars((
+    timeline-color: fixit-var(global-border-color),
+    timeline-circle-color: #FF735A,
+    timeline-circle-size: 10px,
+    timeline-width: 2px,
+  ));
 
   &[data-animation] {
     .#{$prefix}timeline-item::before {
-      border-color: var(--timeline-color);
+      border-color: fixit-var(timeline-color);
       animation-name: border-color-fade;
       animation-duration: 2s;
       animation-iteration-count: infinite;
-      animation-delay: calc(var(--timeline-index) * 0.3s);
+      animation-delay: calc(#{fixit-var(timeline-index)} * 0.3s);
   
       @keyframes border-color-fade {
         0% {
-          border-color: var(--timeline-color);
+          border-color: fixit-var(timeline-color);
         }
         50% {
-          border-color: var(--timeline-circle-color);
+          border-color: fixit-var(timeline-circle-color);
         }
         100% {
-          border-color: var(--timeline-color);
+          border-color: fixit-var(timeline-color);
         }
       }
     }
@@ -36,14 +38,14 @@ ul.#{$prefix}timeline {
 
     @each $color, $value in $theme-colors {
       &[data-type='#{$color}'] {
-        --timeline-circle-color: var(#{$rootPrefix}#{$color});
+        @include set-fixit-var(timeline-circle-color, fixit-var(#{$color}));
       }
     }
 
     .#{$prefix}timeline-item__timestamp {
       font-size: 0.8125rem;
       line-height: 1;
-      color: var(#{$rootPrefix}secondary);
+      color: fixit-var(secondary);
 
       &.is-top {
         margin-bottom: 0.25rem;
@@ -59,7 +61,7 @@ ul.#{$prefix}timeline {
     }
 
     &[data-node='dot']::before {
-      background-color: var(--timeline-circle-color) !important;
+      background-color: fixit-var(timeline-circle-color) !important;
     }
     &[data-size='small']::before {
       transform: scale(0.8) translateY(-50%);
@@ -74,31 +76,27 @@ ul.#{$prefix}timeline {
       top: 1.25rem;
       transform: translateY(-50%);
       left: 0;
-      width: var(--timeline-circle-size);
-      height: var(--timeline-circle-size);
-      font-size: var(--timeline-circle-size);
-      line-height: var(--timeline-circle-size);
+      width: fixit-var(timeline-circle-size);
+      height: fixit-var(timeline-circle-size);
+      font-size: fixit-var(timeline-circle-size);
+      line-height: fixit-var(timeline-circle-size);
       text-align: center;
-      border-radius: 50%;
-      border-width: var(--timeline-width);
+      @include border-radius(full);
+      border-width: fixit-var(timeline-width);
       border-style: solid;
-      border-color: var(--timeline-circle-color);
-      background-color: var(#{$rootPrefix}global-background-color);
+      border-color: fixit-var(timeline-circle-color);
+      background-color: fixit-var(global-background-color);
       color: transparent;
-      z-index: 1;
+      @include z-index(base);
     }
     &::after {
       content: '';
       position: absolute;
       top: 0;
-      left: calc(var(--timeline-circle-size) / 2 + var(--timeline-width) / 2);
-      width: var(--timeline-width);
+      left: calc(#{fixit-var(timeline-circle-size)} / 2 + #{fixit-var(timeline-width)} / 2);
+      width: fixit-var(timeline-width);
       height: 100%;
-      background-color: var(--timeline-color);
-    }
-  
-    [data-theme='dark'] & {
-      --timeline-color: #{darken($global-border-color, 50%)};
+      background-color: fixit-var(timeline-color);
     }
   }  
 }