[todo: define linking rules]
<header class="c-masthead">
<div class="o-flex-container">
<a href="" class="c-masthead__logo">
<svg viewBox="0 0 544 70" width="544" height="236" preserveAspectRatio="xMinYMid meet" class="c-logo--loco">
<use xlink:href="../../assets/logos/sprite.symbol.svg#loco" fill="#fff"></use>
</svg>
</a>
<div class="c-masthead__right c-menu">
<button class="c-menu__button" aria-controls="global-menu" aria-expanded="false">Site name</button>
<nav class="c-menu__nav" id="global-menu" aria-expanded="false">
<ul class="c-menu__list c-menu--global">
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">A blog link</a></li>
<li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">Another blog link</a></li>
</ul>
</nav>
<div class="c-searchmenu">
<div class="c-searchmenu__menuitem">
<a href="#js-searchmenu__panel">
<svg role="img" aria-labelledby="search1" class="u-icon" tabindex="-1" focusable="false">
<title id="search1">Open search</title>
<use xlink:href="../../assets/icons/sprite.symbol.svg#search" />
</svg>
</a>
</div>
<div class="c-searchmenu__target" id="js-searchmenu__panel"></div>
<div class="c-searchmenu__panel">
<form method="get" class="c-searchmenu__form" action="search" autocomplete="off">
<label for="js-searchmenu--input" class="u-visually-hidden">Search for:</label>
<input type="search" id="js-searchmenu--input" class="c-searchmenu__input" placeholder="Search …" value="" name="s" />
<button type="submit" class="c-searchmenu__submit">
<svg role="img" aria-labelledby="search2" class="u-icon" tabindex="-1" focusable="false">
<title id="search2">Submit search query</title>
<use xlink:href="../../assets/icons/sprite.symbol.svg#search" />
</svg>
</button>
</form>
</div>
<div class="c-searchmenu__menuitem c-searchmenu__menuitem--close">
<a href="#elsewhere">
<svg role="img" aria-labelledby="close" class="u-icon">
<title id="close">Close search</title>
<use xlink:href="../../assets/icons/sprite.symbol.svg#dismiss" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
smgwds.menu();
})
</script>
<header class="c-masthead">
<div class="o-flex-container">
<a href="{{link}}" class="c-masthead__logo">
<svg viewBox="0 0 {{width}} {{height}}" width="{{width}}" height="{{aligned-height}}"
preserveAspectRatio="xMinYMid meet" class="c-logo--{{slug}}">
<use xlink:href="{{path '/assets/logos/sprite.symbol.svg'}}#{{slug}}" fill="#fff"></use>
</svg>
</a>
<div class="c-masthead__right c-menu">
<button class="c-menu__button" aria-controls="global-menu" aria-expanded="false">Site name</button>
<nav class="c-menu__nav" id="global-menu" aria-expanded="false">
{{ render '@menu--blog' }}
</nav>
{{ render '@searchmenu' }}
</div>
</div>
</header>
{{{ init }}}