102 lines
2.2 KiB
Stylus
102 lines
2.2 KiB
Stylus
@require './config'
|
|
|
|
$mobileSidebarWidth = $sidebarWidth * 0.9
|
|
|
|
// narrow desktop / iPad
|
|
@media (max-width: $MQNarrow)
|
|
.sidebar
|
|
font-size 15px
|
|
|
|
@media (max-width: $MQMobile)
|
|
.sidebar
|
|
width $sidebarWidth * 0.95
|
|
|
|
@media (min-width: ($MQMobile + 1px)) and (max-width: $MQNarrow)
|
|
.sidebar
|
|
width $mobileSidebarWidth
|
|
.theme-container
|
|
&.sidebar-open
|
|
.page
|
|
padding-left ($mobileSidebarWidth + .8rem)!important
|
|
|
|
// wide mobile
|
|
@media (max-width: $MQMobile)
|
|
.sidebar
|
|
top 0
|
|
height 100vh
|
|
padding-top $navbarHeight
|
|
transform translateX(-100%)
|
|
transition transform .2s ease
|
|
.page
|
|
padding-left 0
|
|
.theme-container
|
|
&.sidebar-open
|
|
.sidebar
|
|
transform translateX(0)
|
|
.sidebar-mask // 蒙版在小屏中才能显示
|
|
display block
|
|
&.no-navbar
|
|
.sidebar
|
|
padding-top: 0
|
|
|
|
// narrow mobile
|
|
@media (max-width: $MQMobileNarrow)
|
|
h1
|
|
font-size 1.9rem
|
|
{$contentClass}
|
|
div[class*="language-"]
|
|
margin 0.85rem -1.5rem
|
|
border-radius 0
|
|
|
|
// 侧边栏显示隐藏的适配
|
|
@media (min-width: ($MQMobile + 1px)) // 720px
|
|
.theme-container
|
|
.sidebar-hover-trigger
|
|
display: block
|
|
.sidebar-hover-trigger:hover ~ .sidebar
|
|
transform translateX(0)
|
|
z-index: 100
|
|
|
|
&:not(.sidebar-open)
|
|
.sidebar-hover-trigger ~ .sidebar:hover
|
|
transform translateX(0)
|
|
z-index: 100
|
|
|
|
&.sidebar-open
|
|
.sidebar-mask
|
|
display: none
|
|
.sidebar
|
|
transform translateX(0)
|
|
.sidebar-button
|
|
left $sidebarWidth
|
|
.page
|
|
padding-left ($sidebarWidth + .8rem)
|
|
padding-right .8rem
|
|
.sidebar-hover-trigger
|
|
display: none
|
|
|
|
&.have-rightmenu
|
|
.page
|
|
padding-right ($rightMenuWidth + 20rem)
|
|
&.no-sidebar
|
|
.page
|
|
padding-left 0!important
|
|
.sidebar-hover-trigger
|
|
display: none
|
|
|
|
&.hide-navbar
|
|
.sidebar-hover-trigger
|
|
top 4.5rem
|
|
.sidebar
|
|
top 0
|
|
|
|
@media (max-width: $MQNarrow)
|
|
.theme-container
|
|
&.sidebar-open:not(.on-sidebar)
|
|
.sidebar-button
|
|
$mobileSidebarWidth = $sidebarWidth * 0.7
|
|
left $mobileSidebarWidth
|
|
.theme-container.no-sidebar
|
|
.sidebar-button
|
|
display none
|