- [Back to hackmd.io](https://hackmd.io) [target=_blank]
- <a href="https://hackmd.io/@hackmd/customer-stories" target="_blank"><span class="fa fa-fw fa-file-text"></span> Customer Stories</a>
- [How I use HackMD in Open Source projects](https://hackmd.io/@hackmd/k8s-story)

<style>
.book-container.open {
width: calc( 100vw - 340px );
}

.summary.open {
background: white;
width: 340px;
padding-left: 30px;
padding-top: 100px;
}

@media (min-width: 758.999999px) {
.summary.open {
box-shadow: none;
}

.summary {
background: white;
width: 340px;
padding-left: 30px;
padding-top: 100px;
box-shadow: none;

left: 0;
}

.book-container {
width: calc( 100vw - 340px );
}
}

html[lang] .summary #summary {
font-family: Roboto;
}

.toolbar {
display: none;
}

.summary .nav-stacked li:first-child {
position: absolute;
top: 0;
width: 100vw;
left: 0;
background-color: #333;
color: white;
height: 30px;
}

@media (max-width: 758px) {
.book-container.open {
right: auto;
}

.summary .nav-stacked li:first-child {
width: 100%;
height: 34px;
padding-top: 2px;
bottom: 0;
}
}

.nav-stacked li:first-child a,
.nav-stacked li:first-child a:active,
.nav-stacked li:first-child a:focus,
.nav-stacked li:first-child a:visited,
.nav-stacked li:first-child a:hover {
color: #eee;
font-size: 0.9em;
font-family: Source Code pro;
margin-top: -3px;
margin-left: -4px;
}

.nav-stacked li:first-child .fa {
display: none;
}

.nav-stacked li:nth-child(2) {
position: absolute;
margin-top: -55px;
font-weight: bold;
letter-spacing: -0.7px;
}

.nav-stacked li:nth-child(2) a {
font-size: 2.1em;
font-family: Source Sans Pro;
}

.nav-stacked li:nth-child(2) a:active,
.nav-stacked li:nth-child(2) a:focus,
.nav-stacked li:nth-child(2) a:hover {
color: #777;
}

.nav-stacked li:nth-child(2) a:active,
.nav-stacked li:nth-child(2) a:focus,
.nav-stacked li:nth-child(2) a:visited,
.nav-stacked li:nth-child(2) a:hover {
text-decoration: none;
}

.nav-stacked li:nth-child(2) .fa:last-child {
display: none;
}
</style>