Header progress 🛠
This commit is contained in:
parent
162fb639c2
commit
4d4059bb1a
|
@ -25,6 +25,11 @@
|
||||||
{{!-- The footer --}}
|
{{!-- The footer --}}
|
||||||
{{> footer}}
|
{{> footer}}
|
||||||
|
|
||||||
|
{{!-- Common scripts shared between pages --}}
|
||||||
|
<script defer src="{{asset "js/manifest.js"}}"></script>
|
||||||
|
<script defer src="{{asset "js/vendor.js"}}"></script>
|
||||||
|
<script defer src="{{asset "js/app.js"}}"></script>
|
||||||
|
|
||||||
{{!-- The #block helper will pull in data from the #contentFor other template files --}}
|
{{!-- The #block helper will pull in data from the #contentFor other template files --}}
|
||||||
{{{block "scripts"}}}
|
{{{block "scripts"}}}
|
||||||
|
|
||||||
|
|
|
@ -1,2 +1,5 @@
|
||||||
{{!< default}}
|
{{!< default}}
|
||||||
{{!-- Insert everything in this file into the {body} of the default.hbs template --}}
|
{{!-- Insert everything in this file into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
|
{{!-- The header --}}
|
||||||
|
{{> header background=@site.cover_image}}
|
||||||
|
|
34
partials/header.hbs
Normal file
34
partials/header.hbs
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<header class="m-header js-header">
|
||||||
|
{{#if background}}
|
||||||
|
<div class="m-header__shadow"></div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<div class="m-mobile-topbar" data-aos="fade-down">
|
||||||
|
<button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="Open menu">
|
||||||
|
<span class="icon-menu"></span>
|
||||||
|
</button>
|
||||||
|
<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="Open search">
|
||||||
|
<span class="icon-search"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-menu js-menu">
|
||||||
|
<button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="Close menu">
|
||||||
|
<span class="icon-close"></span>
|
||||||
|
</button>
|
||||||
|
<div class="m-menu__main" data-aos="fade-down">
|
||||||
|
<div class="l-wrapper">
|
||||||
|
<div class="m-nav">
|
||||||
|
<nav class="m-nav__left">
|
||||||
|
{{#if @site.navigation}}
|
||||||
|
{{navigation}}
|
||||||
|
{{/if}}
|
||||||
|
</nav>
|
||||||
|
<button class="m-icon-button in-menu-main js-open-search" aria-label="Open search">
|
||||||
|
<span class="icon-search"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
53
partials/navigation.hbs
Normal file
53
partials/navigation.hbs
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
<ul role="menu">
|
||||||
|
{{#if @site.logo}}
|
||||||
|
<li class="only-desktop" role="menuitem">
|
||||||
|
<a href="{{@site.url}}" class="m-logo">
|
||||||
|
<img src="{{@site.logo}}" alt="{{@site.title}}">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
{{#foreach navigation}}
|
||||||
|
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
|
||||||
|
<a href="{{url absolute="true"}}">{{label}}</a>
|
||||||
|
</li>
|
||||||
|
{{/foreach}}
|
||||||
|
<li role="menuitem" class="js-submenu-option">
|
||||||
|
<button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="Toggle submenu">
|
||||||
|
<span class="icon-more"></span>
|
||||||
|
</button>
|
||||||
|
<div class="m-submenu js-submenu">
|
||||||
|
<div class="l-wrapper in-submenu">
|
||||||
|
<section class="m-recent-articles">
|
||||||
|
<h3 class="m-submenu-title in-recent-articles">Recent articles</h3>
|
||||||
|
<div class="js-recent-articles">
|
||||||
|
{{#get "posts" limit="4" order="published_at desc" as |post|}}
|
||||||
|
{{#post}}
|
||||||
|
<div>
|
||||||
|
<a href="{{url}}" class="m-recent-article">
|
||||||
|
<div class="m-recent-article__picture">
|
||||||
|
<div style="background-image: url({{img_url feature_image size="m"}});"></div>
|
||||||
|
</div>
|
||||||
|
<h3 class="m-recent-article__title">{{title}}</h3>
|
||||||
|
<span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{/post}}
|
||||||
|
{{/get}}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="m-tags">
|
||||||
|
<h3 class="m-submenu-title">Tags</h3>
|
||||||
|
<ul>
|
||||||
|
{{#get "tags" limit="10" as |tag|}}
|
||||||
|
{{#tag}}
|
||||||
|
<li>
|
||||||
|
<a href="{{url}}">{{name}}</a>
|
||||||
|
</li>
|
||||||
|
{{/tag}}
|
||||||
|
{{/get}}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
Loading…
Reference in a new issue