125 lines
5.5 KiB
Handlebars
125 lines
5.5 KiB
Handlebars
{{#contentFor "preload"}}
|
|
{{!-- This block preloads specific assets for the post page --}}
|
|
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
|
|
<link rel="preload" href="{{asset "js/page.js"}}" as="script" />
|
|
{{!-- This block preloads specific assets for the index page --}}
|
|
<link rel="preload" href="{{asset "css/home.css"}}" as="style" />
|
|
<link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
|
|
<link rel="preload" href="{{asset "js/home.js"}}" as="script" />
|
|
{{/contentFor}}
|
|
|
|
{{#contentFor "styles"}}
|
|
{{!-- This block loads specific styles for the post page --}}
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
|
|
{{!-- This block loads specific styles for the index page --}}
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
|
|
{{/contentFor}}
|
|
|
|
{{!-- The tag below means: insert everything in this file
|
|
into the {body} of the default.hbs template --}}
|
|
{{!< default}}
|
|
|
|
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
|
{{#post}}
|
|
{{> header background=feature_image}}
|
|
{{/post}}
|
|
|
|
<main class="main-wrap">
|
|
{{!-- Everything inside the #post tags pulls data from the post --}}
|
|
{{#post}}
|
|
{{!-- Inject styles of the hero image to make it responsive --}}
|
|
{{> hero background=feature_image}}
|
|
<div class="m-hero__content" data-animate="fade-down">
|
|
<h1 class="m-hero-title bigger">{{title}}</h1>
|
|
{{#if custom_excerpt}}
|
|
<p class="m-hero-description">{{custom_excerpt}}</p>
|
|
{{/if}}
|
|
</div>
|
|
</section>
|
|
{{/post}}
|
|
<article>
|
|
<div class="l-content">
|
|
<div class="l-wrapper in-post" data-animate="fade-up">
|
|
<div class="l-post-content">
|
|
<div class="pos-relative js-post-content">
|
|
{{#post}}
|
|
{{content}}
|
|
{{/post}}
|
|
</div>
|
|
</div>
|
|
<div class="l-grid centered">
|
|
{{#get "posts" filter="featured:true" include="authors,tags" order="published_at asc" as |featured|}}
|
|
{{#if featured}}
|
|
<div class="m-featured-slider swiper js-featured-slider">
|
|
<div class="m-featured-slider__list swiper-wrapper">
|
|
{{#foreach featured to="1"}}
|
|
<div class="m-featured-slider__list__item swiper-slide">
|
|
<article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
|
|
<div class="m-featured-article__picture">
|
|
{{#if feature_image}}
|
|
<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: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
|
|
src="{{img_url feature_image size="l"}}"
|
|
/>
|
|
{{/if}}
|
|
</div>
|
|
{{#if primary_tag}}
|
|
<div class="m-featured-article__ribbon">
|
|
<span>{{primary_tag.name}}</span>
|
|
</div>
|
|
{{/if}}
|
|
<a href="{{url}}" class="m-featured-article__content">
|
|
<h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
|
|
{{title}}
|
|
</h2>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
{{/foreach}}
|
|
</div>
|
|
</div>
|
|
{{#foreach featured from="2"}}
|
|
<article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
|
|
<div class="m-article-card__picture">
|
|
<a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
|
|
{{#if feature_image}}
|
|
<img class="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
|
|
{{/if}}
|
|
{{#if primary_tag}}
|
|
<div class="m-article-card__featured">
|
|
<span>{{primary_tag.name}}</span>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<div class="m-article-card__info no-tag">
|
|
<a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
|
|
<div>
|
|
<h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
|
|
{{title}}
|
|
</h2>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
{{/foreach}}
|
|
{{/if}}
|
|
{{/get}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
|
{{#contentFor "scripts"}}
|
|
<script defer src="{{asset "js/page.js"}}"></script>
|
|
<script defer src="{{asset "js/home.js"}}"></script>
|
|
{{/contentFor}}
|