casper-modified-ghost-theme/post.hbs

353 lines
17 KiB
Handlebars
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{!<
default}}
{{!--
The
tag
above
means:
insert
everything
in
this
file
into
the
{body}
of
the
default.hbs
template
--}}
<header
class="site-header"
>
{{> site-header}}
</header>
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<main
id="site-main"
class="site-main outer"
>
<div class="inner">
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header">
{{#if primary_tag}}
<section class="post-full-tags">
{{#if tags}}
{{#foreach tags}}
<a
href="{{url}}"
title="{{name}}"
class="tag {{slug}}"
>{{name}}</a>
{{/foreach}}
{{/if}}
</section>
{{/if}}
<h1 class="post-full-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
{{/if}}
<div class="post-full-byline">
<section class="post-full-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
<div class="author-card">
{{#if profile_image}}
<img
class="author-profile-image"
src="{{img_url profile_image size="
xs"}}"
alt="{{name}}"
/>
{{else}}
<div class="author-profile-image">{{> "icons/avatar"}}</div>
{{/if}}
<div
class="author-info"
aria-hidden="true"
>
{{#if bio}}
<div class="bio">
<h2>{{name}}</h2>
<p>{{bio}}</p>
<p><a href="{{url}}">Więcej postów</a> - {{name}}.</p>
</div>
{{else}}
<h2>{{name}}</h2>
<p>Zobacz <a href="{{url}}">więcej postów</a> tego autora.</p>
{{/if}}
</div>
</div>
{{#if profile_image}}
<a
href="{{url}}"
class="author-avatar"
>
<img
class="author-profile-image"
src="{{img_url profile_image size="
xs"}}"
alt="{{name}}"
/>
</a>
{{else}}
<a
href="{{url}}"
class="author-avatar author-profile-image"
>{{> "icons/avatar"}}</a>
{{/if}}
</li>
{{/foreach}}
</ul>
<section class="post-full-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<time
class="byline-meta-date"
datetime="{{date format="
YYYY-MM-DD"}}"
>{{date format="D MMM YYYY"}}</time>
<span class="byline-reading-time"><span class="bull">&bull;</span>
{{reading_time}}</span>
</div>
</section>
</section>
</div>
</header>
{{#if feature_image}}
<figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433
--}}
<img
srcset="{{img_url feature_image size="
s"}}
300w,
{{img_url
feature_image
size="m"
}}
600w,
{{img_url
feature_image
size="l"
}}
1000w,
{{img_url
feature_image
size="xl"
}}
2000w"
sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
2000px"
src="{{img_url feature_image size="
xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}
<section class="post-full-content">
<div class="support-container">
<a
href="/wsparcie-fundacji"
class="support-link"
alt="Prosimy o darowiznę na wsparcie pracy Fundacji „Internet. Czas działać!”"
>
<span>Przekaż darowiznę na wsparcie naszej pracy</span>
<svg
viewBox="0 0 24 24"
class="icon--heart"
alt="Wesprzyj Fundację „Internet. Czas działać!”"
>
<path
d="M 2,9.2446448 C 2,14.107544 6.01943,16.698944 8.96173,19.018444 10,19.836944 11,20.607544 12,20.607544 c 1,0 2,-0.7706 3.0383,-1.5891 C 17.9806,16.698944 22,14.107544 22,9.2446448 22,4.3817048 16.4998,0.93300884 12,5.6081748 7.50016,0.93300884 2,4.3817048 2,9.2446448 Z"
fill="#b1adfe"
id="fill"
/>
<path
d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z"
fill="#15171a"
id="outline"
/>
</svg>
</a>
</div>
<div class="post-content">
{{content}}
</div>
<div class="support-container support-container--bottom">
<a
href="/wsparcie-fundacji"
class="support-link"
alt="Prosimy o darowiznę na wsparcie pracy Fundacji „Internet. Czas działać!”"
>
<span>Przekaż darowiznę na wsparcie naszej pracy</span>
<svg
viewBox="0 0 24 24"
class="icon--heart"
alt="Wesprzyj Fundację „Internet. Czas działać!”"
>
<path
d="M 2,9.2446448 C 2,14.107544 6.01943,16.698944 8.96173,19.018444 10,19.836944 11,20.607544 12,20.607544 c 1,0 2,-0.7706 3.0383,-1.5891 C 17.9806,16.698944 22,14.107544 22,9.2446448 22,4.3817048 16.4998,0.93300884 12,5.6081748 7.50016,0.93300884 2,4.3817048 2,9.2446448 Z"
fill="#b1adfe"
id="fill"
/>
<path
d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z"
fill="#15171a"
id="outline"
/>
</svg>
</a>
</div>
</section>
{{!-- Email subscribe form at the bottom of the page --}}
{{#if @labs.members}}
{{> subscribe-form}}
{{/if}}
{{!--
<section class="post-full-comments">
If you want to embed comments, this is a good place to do it!
</section>
--}}
</article>
<script
data-isso="https://www.internet-czas-dzialac.pl/isso"
data-isso-lang="pl"
data-isso-default-lang="pl"
data-isso-feed="false"
data-isso-vote="false"
data-isso-max-comments-top="inf"
data-isso-max-comments-nested="inf"
data-isso-gravatar="false"
data-isso-avatar="true"
src="https://www.internet-czas-dzialac.pl/isso/js/embed.min.js"
async
></script>
<section id="isso-thread"></section>
{{> isso-scripts }}
</div>
</main>
{{!-- Links to Previous/Next posts --}}
<aside class="read-next outer">
<div class="inner">
<div class="read-next-feed">
{{#if primary_tag}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
{{#if related_posts}}
<article class="read-next-card">
<header class="read-next-card-header">
{{#../primary_tag}}
<h3><span>More in</span> <a href="{{url}}">{{name}}</a></h3>
{{/../primary_tag}}
</header>
<div class="read-next-card-content">
<ul>
{{#foreach related_posts}}
<li>
<h4><a href="{{url}}">{{title}}</a></h4>
<div class="read-next-card-meta">
<p><time
datetime="{{date format="
YYYY-MM-DD"}}"
>{{date format="D MMM YYYY"}}</time>
{{reading_time}}</p>
</div>
</li>
{{/foreach}}
</ul>
</div>
<footer class="read-next-card-footer">
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No
posts' singular='% post' plural='See all % posts'}}
→</a>
</footer>
</article>
{{/if}}
{{/get}}
{{/if}}
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs
--}}
{{#next_post}}
{{> "post-card"}}
{{/next_post}}
{{!-- If there's a previous post, display it using the same markup included from -
partials/post-card.hbs --}}
{{#prev_post}}
{{> "post-card"}}
{{/prev_post}}
</div>
</div>
</aside>
{{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in
default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
// FitVids - start
var $postContent = $(".post-full-content");
$postContent.fitVids();
// FitVids - end
// Replace nav with title on scroll - start
Casper.stickyNavTitle({
navSelector: '.site-nav-main',
titleSelector: '.post-full-title',
activeClass: 'nav-post-title-active'
});
// Replace nav with title on scroll - end
// Hover on avatar
var hoverTimeout;
$('.author-list-item').hover(function () {
var $this = $(this);
clearTimeout(hoverTimeout);
$('.author-card').removeClass('hovered');
$(this).children('.author-card').addClass('hovered');
}, function () {
var $this = $(this);
hoverTimeout = setTimeout(function () {
$this.children('.author-card').removeClass('hovered');
}, 800);
});
});
</script>
{{/contentFor}}