diff --git a/css/not-vue.css b/css/not-vue.css index cc2d236..cdf9ef0 100644 --- a/css/not-vue.css +++ b/css/not-vue.css @@ -178,4 +178,40 @@ #app-navigation:not(.vue) .collapsible:hover > a, #app-navigation:not(.vue) .collapsible:focus > a { background-image: none; +} + +/* mobile.css */ + +@media only screen and (width < 1024px) { + + #app-navigation:not(.vue) { + transform: translateX(-300px); + position: fixed; + height: var(--body-height); + } + + .snapjs-left #app-navigation { + transform: translateX(0); + } + + #app-navigation:not(.hidden) + #app-content { + margin-left: 0; + } + + #app-navigation-toggle { + position: fixed; + display: inline-block !important; + left: 0; + width: 44px; + height: 44px; + z-index: 1050; + cursor: pointer; + opacity: 0.6; + } + + #app-navigation-toggle:hover, + #app-navigation-toggle:focus { + opacity: 1; + } + } \ No newline at end of file