Files
hcframe-doc/theme-vdoing/styles/mobile.styl
2021-02-03 17:01:33 +08:00

79 lines
1.8 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-open
.sidebar-mask
display: none
.sidebar
transform translateX(0)
.sidebar-button
left $sidebarWidth
.page
padding-left ($sidebarWidth + .8rem)
padding-right .8rem
&.have-rightmenu
.page
padding-right ($rightMenuWidth + .8rem)
&.no-sidebar
.page
padding-left 0!important
@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