From ed2f5f6d1031ed28cb2345b66b4649ad482c52e8 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 29 Jul 2024 17:39:39 +0800
Subject: [PATCH] :recycle: Refactor: refactor page style with CSS round
 function

Resolved #482
---
 assets/css/_core/_media.scss | 15 ++++++-----
 assets/css/_core/_patch.scss | 48 ++++++++++++++++++++++++++++++++++++
 assets/css/style.scss        |  4 +--
 hugo.toml                    |  2 +-
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
index 9832a9f7..1f3d66f5 100644
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -1,9 +1,9 @@
 @media only screen and (min-width: 1441px) {
   %page-style {
-    width: Round(60%, 2px);
+    width: ROUND(60%, 2px);
 
     [data-page-style='wide'] & {
-      width: Round(64%, 2px);
+      width: ROUND(64%, 2px);
     }
 
     [data-page-style='narrow'] & {
@@ -14,20 +14,20 @@
 
 @media only screen and (max-width: 1440px) {
   %page-style {
-    width: Round(56%, 2px);
+    width: ROUND(56%, 2px);
 
     [data-page-style='wide'] & {
-      width: Round(60%, 2px);
+      width: ROUND(60%, 2px);
     }
   }
 }
 
 @media only screen and (max-width: 1200px) {
   %page-style {
-    width: Round(52%, 2px);
+    width: ROUND(52%, 2px);
 
     [data-page-style='wide'] & {
-      width: Round(56%, 2px);
+      width: ROUND(56%, 2px);
     }
   }
 
@@ -42,7 +42,7 @@
 
 @media only screen and (max-width: 960px) {
   %page-style {
-    width: Round(80%, 2px) !important;
+    width: ROUND(80%, 2px) !important;
   }
   
   aside {
@@ -58,7 +58,6 @@
   }
 }
 
-
 @media only screen and (min-width: 681px) {
   .breadcrumb-container.sticky {
     body:not([data-header-desktop='sticky']) & {
diff --git a/assets/css/_core/_patch.scss b/assets/css/_core/_patch.scss
index 6d232df6..8fe08375 100644
--- a/assets/css/_core/_patch.scss
+++ b/assets/css/_core/_patch.scss
@@ -18,3 +18,51 @@
   -webkit-animation-name: #{$prefix}pulse !important;
   animation-name: #{$prefix}pulse !important;
 }
+
+/**
+ * After the CSS round() function exceeds 90% browser support in the future, this code can be removed
+ * See https://caniuse.com/mdn-css_types_round
+ */
+@supports not (width: ROUND(60%, 2px)) {
+  @media only screen and (min-width: 1441px) {
+    %page-style {
+      width: 60%;
+  
+      [data-page-style='wide'] & {
+        width: 64%;
+      }
+  
+      [data-page-style='narrow'] & {
+        max-width: 800px;
+      }
+    }
+  }
+  @media only screen and (max-width: 1440px) {
+    %page-style {
+      width: 56%;
+  
+      [data-page-style='wide'] & {
+        width: 60%;
+      }
+    }
+  }
+  @media only screen and (max-width: 1200px) {
+    %page-style {
+      width: 52%;
+  
+      [data-page-style='wide'] & {
+        width: 56%;
+      }
+    }
+  }
+  @media only screen and (max-width: 960px) {
+    %page-style {
+      width: 80% !important;
+    }
+  }
+  @media only screen and (max-width: 680px) {
+    %page-style {
+      width: 100% !important;
+    }
+  }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d2b8092c..f57842e2 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -7,7 +7,7 @@
 @import "_core/base";
 @import "_core/layout";
 @import "_core/common";
-@import "_core/patch";
-@import "_page";
 @import "_core/media";
+@import "_page";
+@import "_core/patch";
 @import "_custom";
diff --git a/hugo.toml b/hugo.toml
index f0c67a2d..84ba87fc 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -852,7 +852,7 @@ enableEmoji = true
     linkToReport = true
     # whether to show the full text content in RSS
     rssFullText = false
-    # FixIt 0.2.13 | NEW Page style ["narrow", "normal", "wide", ...]
+    # FixIt 0.3.10 | CHANGED Page style ["narrow", "normal", "wide", ...]
     pageStyle = "normal"
     # FixIt 0.2.17 | CHANGED Auto Bookmark Support
     # If true, save the reading progress when closing the page.