55 lines
2.4 KiB
Handlebars
55 lines
2.4 KiB
Handlebars
{{!< default}}
|
|
|
|
<h2 class="mb-5 pb-2 text-rose-400 w-full text-sm uppercase font-bold tracking-widest border-b border-slate-600">Freshest Articles</h2>
|
|
<div class="grid grid-cols-3 gap-6">
|
|
{{#foreach posts limit="3"}}
|
|
<article class=" {{post_class}}">
|
|
{{tags separator=" | "}}
|
|
{{#if feature_image}}
|
|
<img class="w-full mb-5"
|
|
data-srcset="{{> srcset}}"
|
|
data-sizes="auto"
|
|
src="{{img_url feature_image size="m"}}"
|
|
srcset="{{> srcset}}"
|
|
sizes="auto"
|
|
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{/if}}">
|
|
{{/if}}
|
|
<a class="text-lg" href={{url}} aria-label="Read article entitled: {{title}}" alt="Read article entitled: {{title}}">{{title}}</a>
|
|
<span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
|
</article>
|
|
{{/foreach}}
|
|
</div>
|
|
|
|
<div class="prose prose-slate lg:max-w-4xl m-auto mt-20">
|
|
{{#foreach posts from="4"}}
|
|
|
|
<article class="flex flex-row items-center h-16 mb-5 {{post_class}}">
|
|
{{#if feature_image}}
|
|
<img class="w-44 mr-7 object-cover h-full shrink-0"
|
|
data-srcset="{{img_url feature_image size='s'}} 400w"
|
|
data-sizes="auto"
|
|
src="{{img_url feature_image size='s'}}"
|
|
srcset="{{img_url feature_image size='s'}} 400w"
|
|
sizes="auto"
|
|
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{/if}}">
|
|
{{/if}}
|
|
<div class="grow">
|
|
{{> "tags" size="sm"}}
|
|
<time class="text-xxs text-blue-600 font-bold mr-3" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
|
|
<a class="no-underline font-light italic text-sm tracking-widest text-stone-200 mr-5" href={{url}} aria-label="Read article entitled: {{title}}" alt="Read article entitled: {{title}}">{{title}}</a>
|
|
</div>
|
|
<span class="shrink-0 text-slate-500 text-xs italic">{{reading_time}}</span>
|
|
</article>
|
|
|
|
{{/foreach}}
|
|
</div>
|
|
|
|
|
|
<div class="prose prose-slate lg:max-w-4xl m-auto">
|
|
{{#foreach posts from="4"}}
|
|
|
|
{{> "card"}} {{!-- partials/card.hbs --}}
|
|
|
|
{{/foreach}}
|
|
</div>
|