---
---
.docs-page {
background-color: #fff;
margin: -30px -15px;
padding: 15px 0;
@media (min-width: 768px) {
box-shadow: 1px 1px 5px #ddd;
display: flex;
margin-bottom: 0;
padding: 15px;
}
}
.docs-content {
margin-top: 30px;
padding: 0 15px;
.post-header {
border-bottom: 1px solid #9e9e9e;
margin-bottom: 15px;
padding-bottom: 15px;
}
.post-title {
margin-bottom: 0;
}
@media (min-width: 768px) {
margin: 0;
padding: 0;
}
}
.docs-nav-trigger {
height: 15px;
opacity: 0;
position: absolute;
width: 18px;
&:checked ~ .docs-nav {
display: block;
}
}
.docs-nav-toggle {
border-radius: 0;
display: block;
margin-bottom: 10px;
position: relative;
.menu-icon {
left: 5px;
position: absolute;
top: 8px;
vertical-align: middle;
}
@media (min-width: 768px) {
border-radius: inherit;
display: none;
margin-left: auto;
margin-right: auto;
.menu-icon {
position: inherit;
}
}
}
.docs-nav {
background: #eee;
display: none;
flex-shrink: 0;
margin: -10px 0;
padding: 15px;
ul {
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
}
.header,
.header a,
.header :visited {
color: #03a9f4;
font-weight: bold;
}
.header:not(:first-child) {
margin-top: 10px;
}
li:not(.header) {
margin-left: 15px;
margin-top: 5px;
a,
a:visited,
a:hover {
color: inherit;
}
}
@media (min-width: 768px) {
background: inherit;
border-right: 1px solid #9e9e9e;
display: block;
margin: 0;
margin-right: 20px;
padding: 0;
padding-right: 20px;
width: auto;
}
}