Skip to content

Instantly share code, notes, and snippets.

@jashaj
Last active February 17, 2017 10:49
Show Gist options
  • Select an option

  • Save jashaj/94663876e877ce0c5256f4fdd36d9df6 to your computer and use it in GitHub Desktop.

Select an option

Save jashaj/94663876e877ce0c5256f4fdd36d9df6 to your computer and use it in GitHub Desktop.
Gitbook v2 flexible layout with header and footer
.book {
height: auto;
display: flex;
flex-direction: row;
}
.book .book-body, .book .book-body .body-inner {
position: relative;
top: unset;
right: unset;
left: unset;
bottom: unset;
}
.book .book-body {
width: 100%;
}
.book .book-search {
display: none;
}
.book.with-search .book-search {
display: block;
top: 0;
}
@media screen and (min-width: 600px) {
.book.with-summary .book-body {
width: calc(100% - 300px);
}
}
@media screen and (min-width: 1240px) {
.book.with-summary .book-summary {
width: 400px;
}
.book.with-summary .book-body {
left: 400px;
width: calc(100% - 400px);
}
.book .book-body .navigation {
position: static;
top: auto;
max-width: 50%;
width: 50%;
display: inline-block;
float: left;
}
.book .book-body .navigation.navigation-unique {
max-width: 100%;
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment