1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-25 03:14:01 +01:00
blog/_src/_includes/header.html

58 lines
2.1 KiB
HTML

<header role="banner" class="site__header">
<div class="header__content">
<div class="container">
<div class="grid grid--half">
<div class="grid__col">
<h1 class="header__title">
<a class="header__logo" href="/">kremalicious</a>
</h1>
</div>
<nav role="navigation" class="nav-main grid__col">
<button type="button" class="menu-btn">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</button>
</nav>
<section class="site-search">
<button type="button" class="search-btn">
<svg class="icon icon-search" role="img" aria-labelledby="title">
<title id="title">Search</title>
<use xlink:href="/assets/img/sprite.svg#magnifying-glass"></use>
</svg>
</button>
<div class="search-area">
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button>
</div>
</section>
</div>
<ul class="nav-popover grid grid--half grid-medium--third">
{% for category in site.categories %}
<li class="grid__col">
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</header>
<div id="search-popover" class="search-popover hide">
<div class="container">
<nav id="search-results" class="search-results"></nav>
</div>
</div>