yann/liebling
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

WIP Post page progress

Browse source
This commit is contained in:
Eduardo Gomez 2019-02-28 17:26:55 +01:00
parent 6540ac76cc
commit eefe852f30
3 changed files with 131 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/js/post.js
View file

File diff suppressed because one or more lines are too long

129
post.hbs
View file

@ -0,0 +1,129 @@
{{!< default}}
{{#post}}
{{> header background=feature_image}}
{{> hero background=feature_image}}
</header>
<main role="main">
<article>
<section class="l-content">
<div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300">
<div class="l-post-content js-progress-content">
<header class="m-heading">
<h1 class="m-heading__title in-post">{{title}}</h1>
<section class="m-heading__meta">
{{#if primary_tag}}
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
<span class="m-heading__meta__divider">&bull;</span>
{{/if}}
<time class="m-heading__meta__time">{{date published_at}}</time>
</section>
</header>
<section class="pos-relative js-post-content">
<div class="m-share">
<div class="m-share__content js-sticky">
<a href="#" class="m-icon-button filled in-share">
<span class="icon-facebook"></span>
</a>
<a href="#" class="m-icon-button filled in-share">
<span class="icon-twitter"></span>
</a>
<button class="m-icon-button filled in-share progress js-scrolltop">
<span class="icon-arrow-top"></span>
<svg>
<circle class="progress-ring__circle js-progress" stroke="#04aeee" fill="transparent" />
</svg>
</button>
</div>
</div>
{{content}}
</section>
</div>
</div>
</section>
<section class="m-subscribe-section">
<div class="l-wrapper in-post">
<div class="m-subscribe-section__content">
<div class="m-subscribe-section__text">
<h4 class="m-subscribe-section__title">Subscribe to our newsletter</h4>
<p class="m-subscribe-section__description">
Get the latest posts delivered right to your inbox.
</p>
</div>
<div class="m-subscribe-section__form">
{{subscribe_form
form_class="m-subscribe-section__form"
input_class="m-input in-subscribe-section"
button_class="m-button primary block"
placeholder="Your email address"
autofocus="true"
}}
</div>
</div>
</div>
</section>
<section class="m-author">
<div class="m-author__content">
<div class="m-author__picture">
<a href="{{primary_author.url}}" class="m-author-picture">
{{#if primary_author.profile_image}}
<div style="background-image: url({{primary_author.profile_image}});"></div>
{{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}}
</a>
</div>
<div class="m-author__info">
<h4 class="m-author__name">
<a href="{{primary_author.url}}">{{primary_author.name}}</a>
</h4>
{{#if authors}}
<p class="m-small-text in-author-along-with">
{{authors separator=", " prefix="Among with " from="2"}}
</p>
{{/if}}
{{#if primary_author.bio}}
<p class="m-author__bio">{{primary_author.bio}}</p>
{{/if}}
<ul class="m-author-links">
{{#if primary_author.website}}
<li>
<a href="{{primary_author.website}}" target="_blank" rel="noopener">
<span class="icon-globe"></span>
</a>
</li>
{{/if}}
{{#if primary_author.facebook}}
<li>
<a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener">
<span class="icon-facebook"></span>
</a>
</li>
{{/if}}
{{#if primary_author.twitter}}
<li>
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener">
<span class="icon-twitter"></span>
</a>
</li>
{{/if}}
</ul>
</div>
</div>
</section>
<section class="m-comments">
<div class="m-load-comments">
<div class="m-load-comments__line"></div>
<button class="m-icon-button filled as-load-comments">
<span class="icon-comments"></span>
</button>
</div>
</section>
</article>
</main>
{{/post}}
{{#contentFor "scripts"}}
<script defer src="{{asset "js/post.js"}}"></script>
{{/contentFor}}