@micro-app/plugin-vuepress/theme/styles/mobile.styl

[Plugin] adapter vuepress plugin.

@require '~@default-theme/styles/config'

$mobileSidebarWidth = $sidebarWidth * 0.82

@media (min-width: ($MQMobile + 1px)) {
    .theme-container.no-sidebar {
        .aside {
            display: none;
        }
    }
}

// narrow desktop / iPad
@media (max-width: $MQNarrow)
    .aside {
        width: 'calc((100% - %s)/2 + %s)' % ($maxWidth $mobileSidebarWidth);
        min-width: $mobileSidebarWidth;
    }
    .sidebar {
        font-size 15px
        width $mobileSidebarWidth
    }
    .main-content {
        width: 'calc(100% - %s)' % $mobileSidebarWidth;
    }
    .page {
        padding-left: 1rem;
    }

// wide mobile
@media (max-width: $MQMobile)
    .aside {
        position: fixed;
        width: 0;
        min-width: 0;
    }
    .theme-container {
        .aside[class] { // fixed mobile aside
            display: block;
        }
    }
    .sidebar {
        top 0
        padding-top $navbarHeight
        transform translateX(-100%)
        transition transform .2s ease
    }
    .page {
        padding-left 0
    }

    .theme-container
        &.sidebar-open
            .sidebar
                transform translateX(0)
        &.no-navbar
            .sidebar
                padding-top: 0

    .main-content
        width: 100%;


// narrow mobile
@media (max-width: $MQMobileNarrow)
    h1
        font-size 1.9rem
    {$contentClass}
        div[class*="language-"]
            margin 0.85rem auto
            border-radius 0