hexo-theme-stellar/source/css/_layout/layout.styl

57 lines
1.0 KiB
Stylus
Raw Normal View History

2021-02-19 23:33:19 +08:00
.l_body
display: flex
margin: auto
2021-03-05 21:37:28 +08:00
padding: 0 var(--gap-l)
2021-02-19 23:33:19 +08:00
justify-content: center
.l_body .l_left
2021-11-20 12:32:53 +08:00
z-index: 8
2021-03-05 21:37:28 +08:00
width: var(--width-left)
2021-02-19 23:33:19 +08:00
flex-shrink: 0
position: sticky
position: -webkit-sticky
2024-01-17 00:27:48 +08:00
top: 8px
2021-02-19 23:33:19 +08:00
.l_body .l_main
flex-shrink: 1
flex-grow: 1
width: 320px
2021-03-05 21:37:28 +08:00
max-width: var(--width-main)
2021-02-19 23:33:19 +08:00
2022-10-09 13:42:03 +08:00
//
2024-01-17 00:27:48 +08:00
.main-mask
position: fixed
pointer-events: none
top: 0
left: 0
width: 100%
height: 100%
background: rgba(black, 0.5)
z-index: 9
opacity 0
trans1 opacity
2022-10-09 13:42:03 +08:00
@media screen and (max-width: $device-mobile-max)
2021-02-19 23:33:19 +08:00
.mobile-only
2021-08-19 23:37:44 +08:00
display: block !important
2021-02-19 23:33:19 +08:00
.l_body
padding: 0
.l_left
position: fixed
2021-03-05 21:37:28 +08:00
transform: translateX(-320px)
2021-02-19 23:33:19 +08:00
margin: 0
2024-01-17 00:27:48 +08:00
left: 8px
2021-02-19 23:33:19 +08:00
background: var(--site-bg)
box-shadow: $boxshadow-card-float
2024-01-17 00:27:48 +08:00
z-index: 10
2021-02-19 23:33:19 +08:00
.l_main
max-width: 100%
.l_body.mobile
.l_left
2021-04-02 20:24:16 +08:00
transition: transform .3s ease-out
2021-02-19 23:33:19 +08:00
.l_body.mobile.sidebar
.l_left
transform: translateX(0px)
2024-01-17 00:27:48 +08:00
.main-mask
opacity 1
pointer-events: inherit