actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve css so anchor don't go under sidebar (#638)

This commit is contained in:
Guillaume Gomez 2018-03-14 16:23:55 +01:00 committed by Michael Bryan
parent b86533b2a1
commit cc92d665ca
2 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/theme/book.css
View File

@ -137,33 +137,45 @@ table thead td {
white-space: nowrap;
}
.page-wrapper {
left: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: padding-left 0.5s, margin-left 0.5s;
-moz-transition: padding-left 0.5s, margin-left 0.5s;
-o-transition: padding-left 0.5s, margin-left 0.5s;
-ms-transition: padding-left 0.5s, margin-left 0.5s;
transition: padding-left 0.5s, margin-left 0.5s;
-webkit-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
-moz-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
-o-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
-ms-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
}
.sidebar-visible .page-wrapper {
padding-left: 300px;
}
@media only screen and (max-width: 1079px) {
.sidebar-visible .page-wrapper {
padding-left: 0;
margin-left: 300px;
}
left: 300px;
}
.page {
outline: 0;
padding: 0 15px;
}
.content {
position: relative;
top: 0;
bottom: 0;
overflow-y: auto;
right: 0;
left: 0;
padding: 0 15px;
padding-bottom: 50px;
}
.sidebar-visible .content {
position: absolute;
top: 52px;
}
.content > main {
margin-left: auto;
margin-right: auto;
max-width: 750px;
padding-bottom: 50px;
}
.content a {
text-decoration: none;

37
src/theme/stylus/page.styl
View File

@ -2,20 +2,18 @@
.page-wrapper {
box-sizing: border-box
left: 0
position: absolute
right: 0
top: 0
bottom: 0
// Animation: slide away
transition: padding-left 0.5s, margin-left 0.5s
transition: padding-left 0.5s, margin-left 0.5s, left 0.5s
}
.sidebar-visible .page-wrapper {
padding-left: $sidebar-width
}
@media only screen and (max-width: $page-plus-sidebar-width - 1) {
.sidebar-visible .page-wrapper {
padding-left: 0
margin-left: $sidebar-width
}
left: $sidebar-width
}
.page {
@ -24,11 +22,21 @@
}
.content {
margin-left: auto
margin-right: auto
max-width: $content-max-width
position: relative
top: 0
bottom: 0
overflow-y: auto
right: 0
left: 0
padding: 0 15px
padding-bottom: 50px
main {
margin-left: auto
margin-right: auto
max-width: $content-max-width
}
a {
text-decoration: none;
&:hover { text-decoration: underline; }
@ -36,3 +44,8 @@
img { max-width: 100%; }
}
.sidebar-visible .content {
position: absolute
top: 52px
}