66 lines
4.4 KiB
Handlebars
66 lines
4.4 KiB
Handlebars
<section class="px-5 sm:px-6 py-4" data-home-featured>
|
|
<div class="max-w-content mx-auto">
|
|
{{#get "posts" filter="featured:true" limit="12" include="authors,tags"}}
|
|
{{#if posts}}
|
|
<section data-featured-slider>
|
|
<div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
|
|
<h2 class="text-sm uppercase font-medium text-typ-tone">Featured</h2>
|
|
<div class="flex justify-between gap-2">
|
|
<button class="cursor-pointer hover:opacity-75 disabled:opacity-40" data-featured-prev type="button">
|
|
<i class="icon icon-chevron-left size-4 stroke-2" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M15 6l-6 6l6 6"></path>
|
|
</svg>
|
|
</i>
|
|
<span class="sr-only">Previous</span>
|
|
</button>
|
|
<button class="cursor-pointer hover:opacity-75 disabled:opacity-40" data-featured-next type="button">
|
|
<span class="sr-only">Next</span>
|
|
<i class="icon icon-chevron-right size-4 stroke-2" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M9 6l6 6l-6 6"></path>
|
|
</svg>
|
|
</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-hidden mt-4">
|
|
<div class="featured-slider flex gap-4 sm:gap-5 overflow-x-auto snap-x snap-mandatory scroll-smooth" data-featured-track style="scrollbar-width: none; -ms-overflow-style: none;">
|
|
{{#foreach posts}}
|
|
<a href="{{url}}" class="featured-slider__item relative block group shrink-0 snap-start basis-[78%] sm:basis-[58%] lg:basis-[38%]">
|
|
{{#if feature_image}}
|
|
<figure class="relative block rounded-theme overflow-hidden contrast-125 brightness-75 group-hover:contrast-110 group-hover:brightness-90 transition-all" role="none">
|
|
<img class="w-full aspect-video object-cover rounded-[inherit]" src="{{img_url feature_image size="m"}}" alt="{{title}}">
|
|
</figure>
|
|
<h2 class="text-white absolute bottom-0 left-0 w-full px-3 mb-2.5 text-sm font-medium leading-tight line-clamp-2 text-ellipsis">{{title}}</h2>
|
|
{{else}}
|
|
<figure class="relative rounded-theme overflow-hidden bg-bgr-tone aspect-video border border-brd p-3 flex items-end" role="none">
|
|
<h2 class="text-typ w-full text-sm font-medium leading-tight line-clamp-2 text-ellipsis">{{title}}</h2>
|
|
</figure>
|
|
{{/if}}
|
|
</a>
|
|
{{/foreach}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{/if}}
|
|
{{/get}}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-5 sm:px-6 py-4" data-home-latest>
|
|
<div class="max-w-content mx-auto">
|
|
<div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
|
|
<h2 class="text-sm uppercase font-medium text-typ-tone">Latest</h2>
|
|
</div>
|
|
<div class="flex flex-col gap-8 mb-8 mt-1" data-load-more-root>
|
|
{{> "lists/post-items" posts=posts}}
|
|
{{pagination}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{> "lists/home-categories"}}
|