Make medu slide over content
This commit is contained in:
parent
5f2cc877df
commit
c5ae65bc13
3 changed files with 15 additions and 16 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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="}}
|
Loading…
Reference in a new issue