Make medu slide over content

soper-book
Alex Shpak 2020-06-13 18:19:58 +02:00
parent 5f2cc877df
commit c5ae65bc13
3 changed files with 15 additions and 16 deletions

View File

@ -1,23 +1,16 @@
html { html {
font-size: $font-size-base; font-size: $font-size-base;
letter-spacing: 0.33px;
scroll-behavior: smooth; scroll-behavior: smooth;
touch-action: manipulation; touch-action: manipulation;
} }
html,
body { body {
min-width: $body-min-width; min-width: $body-min-width;
overflow-x: hidden;
height: 100vh; // For sticky elements
}
body {
color: $body-font-color; color: $body-font-color;
background: $body-background; background: $body-background;
letter-spacing: 0.33px;
font-weight: $body-font-weight; font-weight: $body-font-weight;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -105,6 +98,8 @@ ul.pagination {
nav { nav {
width: $menu-width; width: $menu-width;
padding: $padding-16; padding: $padding-16;
z-index: 1;
background: $body-background;
@include fixed; @include fixed;
} }
@ -298,12 +293,13 @@ aside nav,
.book-header aside, .book-header aside,
.markdown { .markdown {
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
transition-property: transform, margin, opacity; transition-property: transform, margin, opacity, visibility;
will-change: transform, margin; will-change: transform, margin, opacity;
} }
@media screen and (max-width: $mobile-breakpoint) { @media screen and (max-width: $mobile-breakpoint) {
.book-menu { .book-menu {
visibility: hidden;
margin-inline-start: -$menu-width; margin-inline-start: -$menu-width;
font-size: $font-size-base; font-size: $font-size-base;
} }
@ -317,9 +313,13 @@ aside nav,
} }
#menu-control:checked + main { #menu-control:checked + main {
.book-menu nav, .book-menu {
.book-page { visibility: initial;
}
.book-menu nav {
transform: translateX($menu-width); transform: translateX($menu-width);
box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
} }
.book-page { .book-page {
@ -338,8 +338,7 @@ aside nav,
//for RTL support //for RTL support
body[dir="rtl"] #menu-control:checked + main { body[dir="rtl"] #menu-control:checked + main {
.book-menu nav, .book-menu nav {
.book-page {
transform: translateX(-$menu-width); transform: translateX(-$menu-width);
} }
} }

View File

@ -1 +1 @@
{"Target":"book.min.f4513b2d8fab87aa86ea84b12e6ef34545da99769cec9d70c06ab774f08bda78.css","MediaType":"text/css","Data":{"Integrity":"sha256-9FE7LY+rh6qG6oSxLm7zRUXamXac7J1wwGq3dPCL2ng="}} {"Target":"book.min.e40449dffab36960ca7d6bac529d52d7ab9f9d230ffe5de1799e29cb61bc0cb7.css","MediaType":"text/css","Data":{"Integrity":"sha256-5ARJ3/qzaWDKfWusUp1S16ufnSMP/l3heZ4py2G8DLc="}}