max_width

_config.yml

@@ -1,16 +1,16 @@
 ############################### Basic Information ###############################
 info:
   name: Volantis
-  version: '2.1.5'
+  version: '2.1.6'
   docs: https://volantis.js.org/
   cdn: # To use CDN, write 'use_cdn: true' in 'blog/_config.yml'.
-    css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.5.2/css/style.css
+    # css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.5.2/css/style.css
     js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.1.5/js/app.js
 
 
 ############################### Style ###############################
 style:
-  max_width: 1080px # Sum of body width and sidebar width
+  max_width: 1080px # Sum of body width and sidebar width (This limit will be exceeded when the device width is greater than 2000px, reaching 75% of the total width)
   navbar:
     height: 64px
     effect: [shadow, blur] # [shadow, floatable, blur]

source/css/_layout/main.styl

@@ -50,6 +50,8 @@
     width: 100%
     padding-right: 0
     max-width: $layout-width - $sidebar
+    @media screen and (min-width: 2000px)
+      max-width: 55vw
     margin: auto
     ~.l_side
       display: none
@@ -383,6 +385,8 @@ details[open]
   display: flex
   width: 100%
   max-width: $layout-width
+  @media screen and (min-width: 2000px)
+    max-width: 55vw
   margin: 0 auto
   flex-wrap: wrap
   justify-content: space-between

source/css/_layout/navbar.styl

@@ -29,6 +29,8 @@
   .wrapper
     padding: auto $gap
     max-width: $layout-width
+    @media screen and (min-width: 2000px)
+      max-width: 55vw
     margin: auto
     height: $navbar-height
     disable-user-select()
@@ -47,6 +49,8 @@
   &.no_sidebar
     .wrapper
       max-width: $layout-width - $sidebar
+      @media screen and (min-width: 2000px)
+        max-width: 55vw
 
   .wrapper.sub
     .logo