<nav aria-label="Header"> <div class="bar default"> <div class="button button-menu" role="button" aria-label="Menu"> <label class="toggle-button icon icon-menu" for="toggle-drawer"> <span></span> </label> </div> <div class="stretch"> <div class="title"> <b>{{ .Site.Title }}</b> <span style="color: rgba(249, 245, 255, 0.63);"> / {{ .Title }}</span> </div> </div> {{ with .Site.Social.twitter }} <div class="button button-twitter" role="button" aria-label="Twitter"> <a href="https://twitter.com/{{ . }}" title="@{{ . }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a> </div> {{ end }} {{ with .Site.Social.github }} <div class="button button-github" role="button" aria-label="GitHub"> <a style="padding: 0px; font-size:40px" href="https://github.com/{{ . }}" title="@{{ . }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a> </div> {{ end }} <!-- TODO: disabled until Hugo supports the generation of a content index natively <div class="button button-search" role="button" aria-label="Search"> <label class="toggle-button icon icon-search" title="Search" for="toggle-search"></label> </div> --> </div> <div class="bar search"> <div class="button button-close" role="button" aria-label="Close"> <label class="toggle-button icon icon-back" for="toggle-search"></label> </div> <div class="stretch"> <div class="field"> <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck> </div> </div> <div class="button button-reset" role="button" aria-label="Search"> <button class="toggle-button icon icon-close" id="reset-search"></button> </div> </div> </nav>