$transition-time: .4s !default; $mobile-width: 24em !default; $mobile-opacity: .7 !default;
.ml-drawer-inside {
padding: 3em 10px; max-height: 75%; overflow: auto;
}
.ml-drawer {
position: fixed; left: 0; top: 0; height: 3rem; &[open] { height: 100%; } &[open] .ml-menu-button { transform: rotate(-90deg); } .ml-menu-button { position: fixed; top: 10px; left: 10px; width: 2rem; height: 2rem; text-align: center; line-height: 2rem; font-size: 2rem; speak: none; list-style: none; z-index: 100; } a { text-decoration: none; } ul { list-style-type: none; }
}
.ml-bookmark li {
font-size: 1.05em
}
@media screen and (max-width: 1300px) {
.ml-drawer[open] { width: 100%; z-index: 10; } .ml-drawer-inside { max-width: $mobile-width; margin: 56px auto 0; }
}
@media screen and (min-width: 1301px) {
.ml-toc { font-size: .9em } .ml-drawer { width: calc(50% - 490px); }
}
@media screen and (min-width: 1600px) {
.ml-drawer { width: 18%; }
}
@media screen and (prefers-reduced-motion: no-preference) {
.ml-drawer { transition: height $transition-time; summary { transition: transform $transition-time; } } .ml-bookmark li { transition: background $transition-time; }
}
.ml-toc li {
margin: .8em 0; line-height: 1.1em
}
.ml-toc, .ml-toc-sub, .ml-bookmark {
margin: 0; padding: 0;
}
.ml-toc, .ml-toc-sub {
padding-left: 1em;
}
.ml-toc-1 > .ml-toc-sub, .ml-toc-2 > .ml-toc-sub {
padding-left: 0; margin: .5em 0 1em
}
.ml-bookmark {
margin-bottom: 1em; text-align: center; width: 80%; padding: 1em; a { display: block; width: 100%; line-height: 2.5em; }
}