1
0
mirror of https://github.com/Damillora/Yuika synced 2024-09-18 08:02:51 +00:00
Yuika/partials/site-header.hbs
2021-01-12 19:47:42 +00:00

74 lines
2.9 KiB
Handlebars

<div class="index-navbar">
<div class="site-background">
{{> site-background }}
</div>
</div>
<header class="flex flex-col w-full relative py-0">
<div class="site-title">
<div id="menushow" class="py-2">
<span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span>
</div>
<div class="site-head">
<a href="{{@site.url}}" class="block flex flex-col flex-grow">
<div class="">
<h1 class="text-lg text-white">{{@site.title}}</h1>
</div>
</a>
</div>
</div>
<div class="nav-group">
{{navigation}}
{{#if @labs.members}}
<div class="flex-grow"></div>
<ul class="nav">
<li>
<a id="subscribe-button" href="#">Subscribe</a>
</li>
</ul>
{{/if}}
</div>
</header>
</div>
</div>
{{#if @labs.members}}
{{!-- Subscription dialog --}}
<div class="fixed left-0 right-0 top-0 bottom-0 z-30 hidden" id="subscribe-dialog">
<div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
<div class="h-full w-full bg-black opacity-50">
</div>
</div>
<div class="absolute left-0 right-0 top-0 bottom-0 z-40">
<div class="h-full w-full py-16 px-4 text-white">
<div id="subscribe-form">
<h1 class="text-2xl">Subscribe to {{@site.title}}</h1>
<p>Get the latest posts delivered straight to your inbox</p>
<form data-members-form="subscribe">
<div class="py-8">
<label class="text-sm">Email address</label>
<input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
</div>
<button id="subscribe-submit" type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
Subscribe
</button>
</form>
</div>
<div id="subscribe-confirmation">
<h1 class="text-2xl">One more step....</h1>
<p>Please check your email inbox to confirm your subscription!</p>
</div>
<div id="subscribe-success">
<h1 class="text-2xl">Thank you for subscribing to {{@site.title}}!</h1>
<p>The latest posts will be periodically delivered to you when they are published.</p>
</div>
<div id="subscribe-failure">
<h1 class="text-2xl">Invalid subscription link</h1>
<p>The link might have expired, or you entered the wrong link. You can try resubscribing.</p>
</div>
</div>
</div>
<div class="absolute left-0 top-0 z-50 py-2 pl-2 text-white hover:bg-yuika-blue-700 transition duration-300 ease-in-out flex flex-row items-center justify-center">
<a id="subscribe-back" href="#"><span class="h-12 w-12 px-2 py-3 text-white material-icons">arrow_back</span></a>
</div>
</div>
{{/if}}