You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
podgrab/client/navbar.html

58 lines
1.4 KiB

4 years ago
{{define "navbar"}}
<style>
/* Larger than tablet */
@media (min-width: 750px) {
.navbar + .docs-section {
border-top-width: 0; }
.navbar,
.navbar-spacer {
display: block;
width: 100%;
height: 6.5rem;
background: #fff;
z-index: 99;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee; }
.navbar-spacer {
display: none; }
.navbar > .container {
width: 100%; }
.navbar-list {
list-style: none;
margin-bottom: 0; }
.navbar-item {
position: relative;
float: left;
margin-bottom: 0; }
.navbar-link {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: .2rem;
margin-right: 35px;
text-decoration: none;
line-height: 6.5rem;
color: #222; }
.navbar-link.active {
color: #33C3F0; }
.has-docked-nav .navbar {
position: fixed;
top: 0;
left: 0; }
.has-docked-nav .navbar-spacer {
display: block; }
/* Re-overiding the width 100% declaration to match size of % based container */
.has-docked-nav .navbar > .container {
width: 80%; }
}
</style>
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="/">Home</a></li>
<li class="navbar-item"><a class="navbar-link" href="/episodes">Episodes</a></li>
</ul>
</div>
</nav>
{{end}}