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; white-space: nowrap;
} }
.page-wrapper { .page-wrapper {
left: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-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; -moz-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
-o-transition: padding-left 0.5s, margin-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; -ms-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
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 { .sidebar-visible .page-wrapper {
padding-left: 300px; left: 300px;
}
@media only screen and (max-width: 1079px) {
.sidebar-visible .page-wrapper {
padding-left: 0;
margin-left: 300px;
}
} }
.page { .page {
outline: 0; outline: 0;
padding: 0 15px; padding: 0 15px;
} }
.content { .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-left: auto;
margin-right: auto; margin-right: auto;
max-width: 750px; max-width: 750px;
padding-bottom: 50px;
} }
.content a { .content a {
text-decoration: none; text-decoration: none;

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

@ -2,20 +2,18 @@
.page-wrapper { .page-wrapper {
box-sizing: border-box box-sizing: border-box
left: 0
position: absolute
right: 0
top: 0
bottom: 0
// Animation: slide away // 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 { .sidebar-visible .page-wrapper {
padding-left: $sidebar-width 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
}
} }
.page { .page {
@ -24,11 +22,21 @@
} }
.content { .content {
margin-left: auto position: relative
margin-right: auto top: 0
max-width: $content-max-width bottom: 0
overflow-y: auto
right: 0
left: 0
padding: 0 15px
padding-bottom: 50px padding-bottom: 50px
main {
margin-left: auto
margin-right: auto
max-width: $content-max-width
}
a { a {
text-decoration: none; text-decoration: none;
&:hover { text-decoration: underline; } &:hover { text-decoration: underline; }
@ -36,3 +44,8 @@
img { max-width: 100%; } img { max-width: 100%; }
} }
.sidebar-visible .content {
position: absolute
top: 52px
}