Allow docs sidebar to take up more width

This commit is contained in:
Henrik Lilleengen 2018-01-06 17:19:51 +01:00
parent 522d453546
commit 676ed2efcb

View File

@ -1,3 +1,7 @@
body {
display: flex;
}
h1 { h1 {
font-size: 45px; font-size: 45px;
} }
@ -34,11 +38,16 @@ pre.highlight code {
font-size: 12px; font-size: 12px;
font-weight: 200; font-weight: 200;
background-color: #2e353d; background-color: #2e353d;
position: fixed; position: relative;
top: 0px; position: -webkit-sticky;
width: 225px; position: sticky;
height: 100%; top: 0;
min-width: 225px;
max-width: 400px;
height: 100vh;
color: #FFF; color: #FFF;
display: flex;
flex-direction: column;
} }
.sidebar .brand { .sidebar .brand {
@ -66,6 +75,12 @@ pre.highlight code {
.sidebar .menu-list { .sidebar .menu-list {
width: inherit; width: inherit;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex: 1 1;
} }
.sidebar .menu-list ul, .sidebar .menu-list ul,
@ -198,11 +213,8 @@ body {
.sidebar .menu-list.menu-list-bottom { .sidebar .menu-list.menu-list-bottom {
margin-bottom: 0; margin-bottom: 0;
position: fixed; height: auto;
width: inherit; justify-content: flex-end;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #23282e; border-top: 1px solid #23282e;
} }
@ -241,6 +253,10 @@ body {
@media (max-width: 767px) { @media (max-width: 767px) {
body {
flex-direction: column;
}
.main-container { .main-container {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
@ -251,6 +267,12 @@ body {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
overflow: visible; overflow: visible;
height: auto;
max-width: 100%;
}
.container {
width: 100%;
} }
.sidebar .toggle-btn { .sidebar .toggle-btn {
@ -279,15 +301,31 @@ body {
padding-left: 20px; padding-left: 20px;
line-height: 50px !important; line-height: 50px !important;
} }
.sidebar .menu-list-bottom {
flex: 0 1;
}
} }
@media (min-width: 767px) { @media (min-width: 767px) {
.sidebar .menu-list .menu-content { .sidebar .menu-list .menu-content {
display: block; display: block;
z-index: 10;
} }
#menu-content .sub-menu {
display: block;
overflow: hidden;
height: 0;
}
#menu-content .in {
height: auto;
}
#main { #main {
width:calc(100% - 225px); flex: 1 1 50%;
float: right; width: 50%;
} }
} }