From d51dfd35e8f9eed6deb0b89e9048ea872128e030 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Wed, 18 Mar 2026 11:22:51 +0800
Subject: [PATCH] refactor(responsive): enhance responsive styles and add media
 mixin support (#715)

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

* refactor: print styles and add media query support

* refactor(responsive): enhance responsive styles across various components
---
 assets/css/_core/_base.scss                   |   4 +-
 assets/css/_core/_common.scss                 |  32 ++
 assets/css/_core/_layout/_breadcrumb.scss     |  29 +-
 assets/css/_core/_layout/_footer.scss         |   9 +-
 assets/css/_core/_layout/_header.scss         |  27 +-
 assets/css/_core/_layout/_index.scss          |  44 ++-
 assets/css/_core/_layout/_page-style.scss     |  47 +++
 assets/css/_core/_layout/_pagination.scss     |   4 +
 assets/css/_core/_mixin/_index.scss           |   1 +
 assets/css/_core/_mixin/_media.scss           | 100 +++++++
 assets/css/_core/_widgets/_fixed-button.scss  |   5 +-
 assets/css/_core/_widgets/_github-corner.scss |   8 +-
 assets/css/_core/_widgets/_post-chat.scss     |   4 +-
 .../css/_core/_widgets/_reading-progress.scss |   7 +-
 assets/css/_core/_widgets/_scrollbar.scss     |   8 +
 assets/css/_page/_archive/_terms.scss         |   4 +
 assets/css/_page/_index.scss                  |  18 +-
 assets/css/_page/_media.scss                  | 274 ------------------
 assets/css/_page/_patch.scss                  |  50 ----
 assets/css/_page/_single/_code.scss           |  42 ++-
 assets/css/_page/_single/_collections.scss    |  10 +-
 assets/css/_page/_single/_comment.scss        |   7 +-
 .../css/_page/_single/_diagram-copy-btn.scss  |   7 +-
 assets/css/_page/_single/_footer.scss         |  14 +-
 assets/css/_page/_single/_index.scss          |  55 +++-
 assets/css/_page/_single/_reward.scss         |   5 +-
 .../_single/_shortcodes/_admonition.scss      |   1 +
 .../_page/_single/_shortcodes/_mermaid.scss   |   4 +-
 assets/css/_page/_single/_toc.scss            |   9 +-
 29 files changed, 468 insertions(+), 361 deletions(-)
 create mode 100644 assets/css/_core/_layout/_page-style.scss
 create mode 100644 assets/css/_core/_mixin/_media.scss
 delete mode 100644 assets/css/_page/_media.scss

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index 052d5365..7d3d4839 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -9,10 +9,8 @@ html {
   width: 100%;
   scroll-behavior: smooth;
   overflow: auto;
-}
 
-@media screen and (prefers-reduced-motion: reduce) {
-  html {
+  @include media('reduce-motion') {
     scroll-behavior: auto;
   }
 }
diff --git a/assets/css/_core/_common.scss b/assets/css/_core/_common.scss
index fd2a17d9..c92c0d65 100644
--- a/assets/css/_core/_common.scss
+++ b/assets/css/_core/_common.scss
@@ -65,3 +65,35 @@
     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;
+  }
+}
diff --git a/assets/css/_core/_layout/_breadcrumb.scss b/assets/css/_core/_layout/_breadcrumb.scss
index 32b01540..4d1bad99 100644
--- a/assets/css/_core/_layout/_breadcrumb.scss
+++ b/assets/css/_core/_layout/_breadcrumb.scss
@@ -5,7 +5,6 @@
   display: flex;
   gap: 0.5rem;
   @include z-index(sticky);
-  @extend .print-d-none;
 
   &:has(~ main[data-reverse]) {
     flex-direction: row-reverse;
@@ -16,11 +15,35 @@
     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 {
@@ -47,4 +70,8 @@
       }
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_core/_layout/_footer.scss b/assets/css/_core/_layout/_footer.scss
index 62ee7aa1..e61aaefa 100644
--- a/assets/css/_core/_layout/_footer.scss
+++ b/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;
@@ -25,9 +24,17 @@ footer {
         animation: icon-animate 1.33s ease-in-out infinite;
       }
     }
+
+    @include media('xs') {
+      font-size: 0.618rem;
+    }
   }
 
   @include blur;
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 @keyframes icon-animate {
diff --git a/assets/css/_core/_layout/_header.scss b/assets/css/_core/_layout/_header.scss
index 643c0f53..fc0a9032 100644
--- a/assets/css/_core/_layout/_header.scss
+++ b/assets/css/_core/_layout/_header.scss
@@ -1,9 +1,8 @@
 header {
   width: 100%;
   background-color: fixit-var(header-background-color);
-  @include z-index(fixed);
   transition: box-shadow 0.3s ease;
-  @extend .print-d-none;
+  @include z-index(fixed);
 
   &:hover {
     box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
@@ -12,6 +11,10 @@ header {
       box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 .header-wrapper {
@@ -262,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 {
@@ -269,6 +280,10 @@ header {
       width: 24rem;
     }
   }
+
+  @include media('xs') {
+    display: none;
+  }
 }
 
 #header-mobile {
@@ -480,6 +495,10 @@ header {
       }
     }
   }
+
+  @include media('xs') {
+    display: block;
+  }
 }
 
 .search-dropdown {
@@ -495,6 +514,10 @@ header {
   &.desktop {
     right: 2rem;
     width: 30rem;
+
+    @include media('md', 'down') {
+      right: 1rem;
+    }
   }
 
   &.mobile {
diff --git a/assets/css/_core/_layout/_index.scss b/assets/css/_core/_layout/_index.scss
index 190c484e..a661172e 100644
--- a/assets/css/_core/_layout/_index.scss
+++ b/assets/css/_core/_layout/_index.scss
@@ -1,4 +1,4 @@
-/** Layout **/
+// Responsive layout
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -16,6 +16,10 @@
       &:not(:has(~ aside)) {
         display: none;
       }
+
+      @include media('sm', 'down') {
+        display: none !important;
+      }
     }
 
     &.fi-container {
@@ -34,9 +38,45 @@
       }
     }
   }
+
+  @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 "footer";
+@import "page-style";
 @import "pagination";
+@import "footer";
diff --git a/assets/css/_core/_layout/_page-style.scss b/assets/css/_core/_layout/_page-style.scss
new file mode 100644
index 00000000..0dc3265e
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/assets/css/_core/_layout/_pagination.scss b/assets/css/_core/_layout/_pagination.scss
index c7623a02..5b8674f9 100644
--- a/assets/css/_core/_layout/_pagination.scss
+++ b/assets/css/_core/_layout/_pagination.scss
@@ -69,5 +69,9 @@
         width: 50%;
       }
     }
+
+    @include media('xs') {
+      margin: 0 5px;
+    }
   }
 }
diff --git a/assets/css/_core/_mixin/_index.scss b/assets/css/_core/_mixin/_index.scss
index 3c231157..f702dd0c 100644
--- a/assets/css/_core/_mixin/_index.scss
+++ b/assets/css/_core/_mixin/_index.scss
@@ -4,6 +4,7 @@
 @import 'compatibility';
 @import 'link';
 @import 'loading';
+@import 'media';
 @import 'scrollbar-width';
 @import 'theme-vars';
 @import 'z-index';
diff --git a/assets/css/_core/_mixin/_media.scss b/assets/css/_core/_mixin/_media.scss
new file mode 100644
index 00000000..c91e241c
--- /dev/null
+++ b/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.";
+    }
+  }
+}
diff --git a/assets/css/_core/_widgets/_fixed-button.scss b/assets/css/_core/_widgets/_fixed-button.scss
index a1eb07fe..b9064614 100644
--- a/assets/css/_core/_widgets/_fixed-button.scss
+++ b/assets/css/_core/_widgets/_fixed-button.scss
@@ -17,7 +17,6 @@
   transition: color 0.4s ease;
   @include border-radius(full);
   @include blur;
-  @extend .print-d-none;
 
   [data-theme=dark] & {
     background-color: darken($header-background-color-dark, 3%);
@@ -34,6 +33,10 @@
   &:hover {
     outline: none;
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 .back-to-top {
diff --git a/assets/css/_core/_widgets/_github-corner.scss b/assets/css/_core/_widgets/_github-corner.scss
index 9e263828..4be557d5 100644
--- a/assets/css/_core/_widgets/_github-corner.scss
+++ b/assets/css/_core/_widgets/_github-corner.scss
@@ -17,11 +17,11 @@
   position: fixed;
   top: 0;
   @include z-index(fixed);
-  @extend .print-d-none;
 
   :hover .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
   }
+
   svg {
     width: fixit-var(header-height);
     height: fixit-var(header-height);
@@ -29,6 +29,7 @@
     color: fixit-var(github-corner-color);
     fill: fixit-var(github-corner-fill);
   }
+
   &.left {
     left: 0;
 
@@ -36,7 +37,12 @@
       transform: scale(-1, 1);
     }
   }
+
   &.right {
     right: 0;
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_core/_widgets/_post-chat.scss b/assets/css/_core/_widgets/_post-chat.scss
index b0c3b3de..2086b8e8 100644
--- a/assets/css/_core/_widgets/_post-chat.scss
+++ b/assets/css/_core/_widgets/_post-chat.scss
@@ -1,4 +1,6 @@
 #postChat_button,
 .post-TianliGPT {
-  @extend .print-d-none;
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_core/_widgets/_reading-progress.scss b/assets/css/_core/_widgets/_reading-progress.scss
index 46aff29d..9fcb9267 100644
--- a/assets/css/_core/_widgets/_reading-progress.scss
+++ b/assets/css/_core/_widgets/_reading-progress.scss
@@ -4,9 +4,12 @@
   background-color: fixit-var(bg-progress, fixit-var(success));
   position: fixed;
   @include z-index(fixed);
-  @extend .print-d-none;
-  
+
   [data-theme=dark] & {
     background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color));
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_core/_widgets/_scrollbar.scss b/assets/css/_core/_widgets/_scrollbar.scss
index c30105c1..f2c49fef 100644
--- a/assets/css/_core/_widgets/_scrollbar.scss
+++ b/assets/css/_core/_widgets/_scrollbar.scss
@@ -3,6 +3,10 @@
   * {
     scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);
     scrollbar-width: fixit-var(scrollbar-width);
+
+    @include media('print') {
+      scrollbar-width: none;
+    }
   }
 }
 
@@ -11,6 +15,10 @@
   height: fixit-var(scrollbar-width-legacy);
   width: fixit-var(scrollbar-width-legacy);
   overflow: visible;
+
+  @include media('print') {
+    display: none;
+  }
 }
 ::-webkit-scrollbar-button {
   height: 0;
diff --git a/assets/css/_page/_archive/_terms.scss b/assets/css/_page/_archive/_terms.scss
index 27d17b61..ef94f894 100644
--- a/assets/css/_page/_archive/_terms.scss
+++ b/assets/css/_page/_archive/_terms.scss
@@ -38,6 +38,10 @@
         padding-right: 1rem;
       }
     }
+
+    @include media('xs') {
+      width: 100%;
+    }
   }
 }
 
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index 6ad05cc7..aca3af0a 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -5,10 +5,27 @@
   .content {
     [id] {
       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';
@@ -17,5 +34,4 @@
 @import 'home';
 @import '404';
 @import 'offline';
-@import "media";
 @import "patch";
diff --git a/assets/css/_page/_media.scss b/assets/css/_page/_media.scss
deleted file mode 100644
index 6dc597cc..00000000
--- a/assets/css/_page/_media.scss
+++ /dev/null
@@ -1,274 +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(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
-    }
-  }
-
-  [data-header-desktop='normal'] .page .content [id] {
-    @include set-fixit-var(scroll-mt, fixit-var(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,
-    .page .content .code-tabs .tabs-header {
-      top: calc(#{fixit-var(header-height)} + #{fixit-var(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(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
-    }
-  }
-
-  [data-header-mobile='normal'] .page .content [id] {
-    @include set-fixit-var(scroll-mt, fixit-var(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,
-    .page .content .code-tabs .tabs-header {
-      top: calc(#{fixit-var(header-height)} + #{fixit-var(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 {
-    @include set-fixit-var(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;
-  }
-}
diff --git a/assets/css/_page/_patch.scss b/assets/css/_page/_patch.scss
index b24b3267..b14f8a2f 100644
--- a/assets/css/_page/_patch.scss
+++ b/assets/css/_page/_patch.scss
@@ -19,56 +19,6 @@
   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;
diff --git a/assets/css/_page/_single/_code.scss b/assets/css/_page/_single/_code.scss
index 39d6933f..ba3ab28f 100644
--- a/assets/css/_page/_single/_code.scss
+++ b/assets/css/_page/_single/_code.scss
@@ -237,7 +237,10 @@ pre {
 
       [role='button'] {
         padding: 0.4rem;
-        @extend .print-d-none;
+
+        @include media('print') {
+          display: none !important;
+        }
       }
 
       .copy-btn[data-copied] .fa-clone {
@@ -264,6 +267,22 @@ pre {
           @include set-fixit-var(code-type, '"#{$text}"');
         }
       }
+
+      [data-header-desktop='sticky'] & {
+        @include media('xs', 'up') {
+          top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+        }
+      }
+
+      [data-header-mobile='sticky'] & {
+        @include media('xs') {
+          top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+        }
+      }
+
+      @include media('print') {
+        top: initial;
+      }
     }
 
     &.line-wrapping .line-wrap-btn,
@@ -618,8 +637,9 @@ pre {
         @include user-select(none);
         @include border-radius;
 
-        // mobile style
-        // padding-inline: 0.6rem;
+        @include media('xs') {
+          padding-inline: 0.6rem;
+        }
       }
 
       &:not(:has(.tab-item:hover)) .tab-item.active,
@@ -671,6 +691,22 @@ pre {
         }
       }
     }
+
+    [data-header-desktop='sticky'] & {
+      @include media('xs', 'up') {
+        top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+
+    [data-header-mobile='sticky'] & {
+      @include media('xs') {
+        top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+
+    @include media('print') {
+      top: initial;
+    }
   }
 
   .tabs-content {
diff --git a/assets/css/_page/_single/_collections.scss b/assets/css/_page/_single/_collections.scss
index 1df99def..9599ef52 100644
--- a/assets/css/_page/_single/_collections.scss
+++ b/assets/css/_page/_single/_collections.scss
@@ -7,7 +7,6 @@
   position: relative;
   @include border-radius(0.5rem);
   @include user-select(none);
-  @extend .print-d-none;
 
   [data-theme=dark] & {
     background-color: lighten($global-background-color-dark, 3%);
@@ -81,6 +80,10 @@
       }
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 // Collection aside container
@@ -90,7 +93,10 @@
   box-sizing: border-box;
   @include overflow-wrap(break-word);
   @include blur;
-  @extend .print-d-none;
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 // Collection List
diff --git a/assets/css/_page/_single/_comment.scss b/assets/css/_page/_single/_comment.scss
index cc3ee270..04ecce07 100644
--- a/assets/css/_page/_single/_comment.scss
+++ b/assets/css/_page/_single/_comment.scss
@@ -1,8 +1,11 @@
->#comments {
+> #comments {
   padding: 2rem 0;
-  @extend .print-d-none;
 
   iframe {
     width: 100%;
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_page/_single/_diagram-copy-btn.scss b/assets/css/_page/_single/_diagram-copy-btn.scss
index bab7323b..23712c4e 100644
--- a/assets/css/_page/_single/_diagram-copy-btn.scss
+++ b/assets/css/_page/_single/_diagram-copy-btn.scss
@@ -18,12 +18,9 @@
   border-color: fixit-var(dcb-border-color, #d1d9e0);
   background-color: fixit-var(dcb-background-color, #f6f8fa);
   box-shadow: fixit-var(dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
-  transition-duration: 0.1s;
-  transition-property: color, background-color, box-shadow, border-color;
   @include user-select(none);
   @include border-radius;
   @include z-index(base);
-  @extend .print-d-none;
 
   [data-theme=dark] & {
     @include set-fixit-vars((
@@ -59,4 +56,8 @@
       color: fixit-var(global-link-hover-color);
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_page/_single/_footer.scss b/assets/css/_page/_single/_footer.scss
index ca4cedc4..84419d13 100644
--- a/assets/css/_page/_single/_footer.scss
+++ b/assets/css/_page/_single/_footer.scss
@@ -42,10 +42,13 @@
       }
 
       .post-info-share {
-        @extend .print-d-none;
         a * {
           vertical-align: text-bottom;
         }
+
+        @include media('print') {
+          display: none !important;
+        }
       }
     }
   }
@@ -57,7 +60,9 @@
     font-size: 0.9rem;
 
     section:last-child {
-      @extend .print-d-none;
+      @include media('print') {
+        display: none !important;
+      }
     }
   }
 
@@ -81,7 +86,6 @@
     justify-content: space-between;
     gap: 1.5rem;
     padding-block: 0.5rem;
-    @extend .print-d-none;
 
     .post-nav-item {
       flex: 1;
@@ -101,5 +105,9 @@
         transform: translateX(4px);
       }
     }
+
+    @include media('print') {
+      display: none !important;
+    }
   }
 }
diff --git a/assets/css/_page/_single/_index.scss b/assets/css/_page/_single/_index.scss
index 3cf04c89..c39de7a2 100644
--- a/assets/css/_page/_single/_index.scss
+++ b/assets/css/_page/_single/_index.scss
@@ -26,6 +26,10 @@
       margin-right: 0.25em;
       color: fixit-var(success);
     }
+
+    @include media('print') {
+      text-align: center;
+    }
   }
 
   .single-subtitle {
@@ -33,17 +37,16 @@
     font-size: 1.2rem;
     font-weight: normal;
     line-height: 1.15;
+
+    @include media('print') {
+      text-align: center;
+    }
   }
 
   .post-meta {
     font-size: 0.875rem;
     color: fixit-var(secondary);
 
-    .comment-visitors,
-    .comment-count {
-      @extend .print-d-none;
-    }
-
     span {
       display: inline-block;
     }
@@ -64,6 +67,15 @@
         object-fit: cover;
       }
     }
+
+    @include media('print') {
+      text-align: center;
+
+      .comment-visitors,
+      .comment-count {
+        display: none;
+      }
+    }
   }
 
   .featured-image {
@@ -125,6 +137,7 @@
 
   .content {
     margin-block: 1rem;
+
     > h1,
     > h2 {
       font-size: 1.5em;
@@ -458,6 +471,9 @@
       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;
@@ -490,6 +506,35 @@
     json-viewer[boxed] + json-viewer[boxed] {
       margin-top: 0.5rem;
     }
+
+    @include media('lg', 'up') {
+      :is(.code-block, .diagram-container) {
+        :is(.code-copy-btn, .diagram-copy-btn) {
+          display: none;
+          opacity: 0;
+          transform: scale(0.9);
+          transition:
+            display 0.25s allow-discrete,
+            opacity 0.25s,
+            transform 0.25s,
+            color 0.1s,
+            background-color 0.1s,
+            box-shadow 0.1s,
+            border-color 0.1s;
+        }
+        &:hover {
+          :is(.code-copy-btn, .diagram-copy-btn) {
+            display: block;
+            opacity: 1;
+            transform: scale(1);
+            @starting-style {
+              opacity: 0;
+              transform: scale(0.9);
+            }
+          }
+        }
+      }
+    }
   }
 
   @import '_shortcodes';
diff --git a/assets/css/_page/_single/_reward.scss b/assets/css/_page/_single/_reward.scss
index bda337b9..8dcce909 100644
--- a/assets/css/_page/_single/_reward.scss
+++ b/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;
@@ -85,4 +84,8 @@
       border-color: lighten($reward-color, 5%);
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
diff --git a/assets/css/_page/_single/_shortcodes/_admonition.scss b/assets/css/_page/_single/_shortcodes/_admonition.scss
index be1ff44a..e3eba117 100644
--- a/assets/css/_page/_single/_shortcodes/_admonition.scss
+++ b/assets/css/_page/_single/_shortcodes/_admonition.scss
@@ -60,6 +60,7 @@
       margin: 0;
     }
 
+    // reset sticky header position in code block when inside admonition
     .code-block .code-header,
     .code-tabs .tabs-header {
       top: initial !important;
diff --git a/assets/css/_page/_single/_shortcodes/_mermaid.scss b/assets/css/_page/_single/_shortcodes/_mermaid.scss
index 39d3f3f7..deacd3c7 100644
--- a/assets/css/_page/_single/_shortcodes/_mermaid.scss
+++ b/assets/css/_page/_single/_shortcodes/_mermaid.scss
@@ -43,10 +43,10 @@
   padding: 0;
 }
 
-@media only print {
+@include media('print') {
   .mermaid,
   .mermaid-dark {
-    display: none;
+    display: none !important;
   }
   .mermaid-neutral {
     height: auto;
diff --git a/assets/css/_page/_single/_toc.scss b/assets/css/_page/_single/_toc.scss
index 02ae17d4..73bcce6b 100644
--- a/assets/css/_page/_single/_toc.scss
+++ b/assets/css/_page/_single/_toc.scss
@@ -94,7 +94,6 @@
   visibility: hidden;
   @include overflow-wrap(break-word);
   @include blur;
-  @extend .print-d-none;
 
   [data-header-desktop='normal'] & {
     @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
@@ -157,6 +156,10 @@
       }
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 #toc-static {
@@ -211,6 +214,10 @@
       }
     }
   }
+
+  @include media('sm', 'down') {
+    display: block;
+  }
 }
 
 #toc-dialog {