diff --git a/_config.yml b/_config.yml index 1bf9c53..fa94399 100755 --- a/_config.yml +++ b/_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))' diff --git a/source/css/_custom.styl b/source/css/_custom.styl index f39d350..55c375e 100644 --- a/source/css/_custom.styl +++ b/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 diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl index 14d8972..08107d5 100644 --- a/source/css/_layout/layout.styl +++ b/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) @@ -54,4 +37,17 @@ transform: translateX(0px) .main-mask opacity 1 - pointer-events: inherit \ No newline at end of file + 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 \ No newline at end of file diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl index 68b38a6..bbfd035 100644 --- a/source/css/_layout/main.styl +++ b/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 diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl index 70477e5..cbb3aab 100644 --- a/source/css/_layout/sidebar/sidebar.styl +++ b/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)