[opt] site layout

_config.yml

@@ -522,6 +522,7 @@ style:
     start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
     search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
   sidebar:
+    sticky: false # true/false 屏幕足够宽时，侧边栏是否吸附在正文区域旁边
     # 可以设置：纯色/渐变色/图片作为背景
     # background: var(--sidebar-bg)
     # background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))'

source/css/_custom.styl

@@ -85,7 +85,6 @@ $border-button = 4px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
     --width-main: 860px
-    --gap-l: 64px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
     --width-left: 252px

source/css/_layout/layout.styl

@@ -1,8 +1,8 @@
 .l_body
-  display: flex
+  display: grid
+  grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
   margin: auto
   padding: 0 var(--gap-l)
-  justify-content: center
   font-size: var(--fsp)
 
 .l_body .l_left
@@ -13,30 +13,13 @@
   position: -webkit-sticky
   top: 8px
 
-.l_body .l_main
-  flex-shrink: 1
-  flex-grow: 1
-  width: 320px
-  max-width: var(--width-main)
-
-
 // 手机布局
-.main-mask
-  position: fixed
-  pointer-events: none
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-  background: rgba(black, 0.2)
-  z-index: 9
-  opacity 0
-  trans1 opacity
 @media screen and (max-width: $device-mobile-max)
   .mobile-only
     display: block !important
   .l_body
     padding: 0
+    grid-template-columns: 1fr
     .l_left
       position: fixed
       transform: translateX(-320px)
@@ -55,3 +38,16 @@
     .main-mask
       opacity 1
       pointer-events: inherit
+
+
+.main-mask
+  position: fixed
+  pointer-events: none
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background: rgba(black, 0.2)
+  z-index: 9
+  opacity 0
+  trans1 opacity

source/css/_layout/main.styl

@@ -1,9 +1,6 @@
 .l_main
   position: relative
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
-  @media screen and (min-width: 1400px)
-    margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
     padding-top: 8px
   header

source/css/_layout/sidebar/sidebar.styl

@@ -6,6 +6,10 @@
   .header
     margin: var(--gap-l) var(--gap-l) 0
     margin-top: "calc(2 * %s)" % var(--gap-l)
+  if hexo-config('style.sidebar') && hexo-config('style.sidebar.sticky')
+    @media screen and (min-width: 1400px)
+      margin-left: auto
+      margin-right: "calc(2 * %s)" % var(--gap-l)
   @media screen and (min-width: $device-mobile-max)
     >.widgets:first-child>.widget-wrapper:first-child
       margin-top: "calc(2 * %s)" % var(--gap-l)