♻️ Refactor: refactor page style with CSS round function

Resolved #482

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']) & {

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

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

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.