💄 Style(media): add narrow option for page style (#80)

assets/css/_core/_media.scss

@@ -2,17 +2,25 @@
   .page {
     width: 60%;
 
-    [page-style=wide] & {
+    [page-style='wide'] & {
       width: 64%;
     }
+
+    [page-style='narrow'] & {
+      max-width: 800px;
+    }
   }
-  
+
   aside {
     width: 20%;
 
-    [page-style=wide] & {
+    [page-style='wide'] & {
       width: 18%;
     }
+
+    [page-style='narrow'] & {
+      width: calc(50% - 400px);
+    }
   }
 }
 
@@ -20,7 +28,7 @@
   .page {
     width: 56%;
 
-    [page-style=wide] & {
+    [page-style='wide'] & {
       width: 60%;
     }
   }
@@ -28,7 +36,7 @@
   aside {
     width: 22%;
 
-    [page-style=wide] & {
+    [page-style='wide'] & {
       width: 20%;
     }
   }
@@ -38,7 +46,7 @@
   .page {
     width: 52%;
 
-    [page-style=wide] & {
+    [page-style='wide'] & {
       width: 56%;
     }
   }
@@ -46,7 +54,7 @@
   aside {
     width: 24%;
 
-    [page-style=wide] & {
+    [page-style='wide'] & {
       width: 22%;
     }
   }
@@ -62,7 +70,7 @@
 
 @media only screen and (max-width: 960px) {
   aside {
-    display: none!important;
+    display: none !important;
   }
 
   #toc-static {
@@ -70,7 +78,7 @@
   }
 
   .page {
-    width: 80%!important;
+    width: 80% !important;
   }
 
   #header-desktop .header-wrapper {
@@ -88,11 +96,11 @@
   }
 
   .page {
-    width: 100%!important;
+    width: 100% !important;
 
     .content {
       [id] {
-        [header-mobile=normal] & {
+        [header-mobile='normal'] & {
           scroll-margin-top: 0;
         }
       }
@@ -104,10 +112,10 @@
       }
     }
   }
-  
-  footer{
+
+  footer {
     .footer-container {
-      font-size: .618rem;
+      font-size: 0.618rem;
     }
   }
 }
@@ -119,8 +127,8 @@
   }
 
   .page {
-    width: 100%!important;
-    padding-top: 0!important;
+    width: 100% !important;
+    padding-top: 0 !important;
 
     .single-title,
     .single-subtitle,
@@ -132,7 +140,7 @@
     .page-break-before {
       page-break-before: always;
     }
-  
+
     .page-break-after {
       page-break-after: always;
     }
@@ -147,7 +155,6 @@
   .post-nav,
   #fixed-buttons,
   #comments {
-    display: none!important;
+    display: none !important;
   }
 }
-

exampleSite/config.toml

@@ -645,8 +645,8 @@ enableEmoji = true
     # whether to show the full text content in RSS
     # 是否在 RSS 中显示全文内容
     rssFullText = false
-    # Page style ("normal", "wide", ...) since v0.2.13
-    # 页面样式 ("normal", "wide", ...) since v0.2.13
+    # Page style ("narrow", "normal", "wide", ...) since v0.2.13
+    # 页面样式 ("narrow", "normal", "wide", ...) since v0.2.13
     pageStyle = "normal"
     # Table of the contents config
     # 目录配置

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -442,7 +442,7 @@ Please open the code block below to view the complete sample configuration :(far
     linkToMarkdown = true
     # {{< version 0.2.4 >}} whether to show the full text content in RSS
     rssFullText = false
-    # {{< version 0.2.13 >}} Page style ("normal", "wide", ...)
+    # {{< version 0.2.13 >}} Page style ("narrow", "normal", "wide", ...)
     pageStyle = "normal"
     # {{< version 0.2.0 >}} Table of the contents config
     [params.page.toc]

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -453,7 +453,7 @@ hugo
     linkToMarkdown = true
     # {{< version 0.2.4 >}} 是否在 RSS 中显示全文内容
     rssFullText = false
-    # {{< version 0.2.13 >}} 页面样式 ("normal", "wide", ...)
+    # {{< version 0.2.13 >}} 页面样式 ("narrow", "normal", "wide", ...)
     pageStyle = "normal"
     # {{< version 0.2.0 >}} 目录配置
     [params.page.toc]