index.hbs

{{!< default}}

<main class="kg-width-wide">
    <p class="mt-6 font-bold uppercase text-gray-600 dark:text-gray-400"># LATEST</p>

    <div class="grid lg:grid-cols-2 gap-16 md:gap-12 xl:gap-16 mb-18 mt-4">

    {{#foreach posts}}
        {{#match @index 0}}
            <div>
                <a href="{{ url }}" class="block overflow-hidden rounded">
                    {{> "picture" eager="true" picture_classes="w-full rounded aspect-[16/9] lg:aspect-[5/3] object-cover transform hover:scale-105 transition duration-500" }}
                </a>
                <div class="mt-4 flex items-center gap-2 font-bold leading-sm capitalize text-indigo-500 flex-wrap md:flex-nowrap md:line-clamp">
                    {{#foreach tags }}
                        {{#if @index }}
                            <span class="" aria-hidden="true">&bull;</span>
                        {{/if}}
                            <a href="{{url}}" class="">{{name}}</a>
                    {{/foreach }}
                </div>
                <div class="flex flex-col gap-3">
                    <a href="{{ url }}" class="text-xl lg:text-3xl font-semibold mt-4 inline-block">{{ title }}</a>
                    <a href="{{ url }}" class="text-lg text-gray-500 dark:text-gray-400 line-clamp-2">{{ excerpt }}</a>
                    <p class="text-sm text-gray-400 dark:text-gray-500 tracking-tight flex items-center gap-2 mt-4"> {{date}} <span class="h-1 w-1 rounded-full bg-gray-400 dark:bg-gray-600"></span> {{reading_time minute="1 min" minutes="% mins"}}</p>
                </div>
            </div>
        {{/match}}
    {{/foreach}}


    <div class="flex flex-col gap-12">
        {{#foreach posts as |featured|}}
            {{#if @index}}
                {{#match @index '<' 4}}
                    <div class="flex items-center lg:items-start flex-col sm:flex-row sm:gap-10" href="#">
                        <a href="{{ url }}" class="block overflow-hidden rounded w-full sm:w-[35%]">
                            {{> "picture" picture_classes="block object-cover lg:min-w-48 lg:h-40 w-full aspect-[16/9] rounded transform hover:scale-105 transition duration-500" }}
                        </a>
                        <div class="sm:w-[60%] mt-4 sm:mt-0">
                            <div class="flex items-center gap-2 font-bold leading-sm capitalize text-indigo-500 flex-wrap md:flex-nowrap md:line-clamp">
                                {{#foreach tags }}
                                    {{#if @index }}
                                        <span class="" aria-hidden="true">&bull;</span>
                                    {{/if}}
                                        <a href="{{url}}" class="">{{name}}</a>
                                {{/foreach }}
                            </div>
                            <a href="{{ url }}" class="mt-2 inline-block text-xl font-semibold">{{ title }}</a>
                            <a href="{{ url }}" class="mt-2 text-gray-500 dark:text-gray-400 lg:hidden line-clamp-2">{{ excerpt }}</a>
                            <p class="text-sm text-gray-400 dark:text-gray-500 tracking-tight flex items-center gap-2 mt-4"> {{date}} <span class="h-1 w-1 rounded-full bg-gray-400 dark:bg-gray-600"></span> {{reading_time minute="1 min" minutes="% mins"}}</p>
                        </div>
                    </div>
                {{/match }}
            {{/if }}
        {{/foreach}}
    </div>
    </div>
    

    <p class="mt-12 font-bold uppercase text-gray-600 dark:text-gray-400"># OLDER POSTS</p>

    <div class="mt-4">
        <div class="posts-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-10" >
            {{#foreach posts}}
                {{#match @index '>' 3}}
                    {{> "card" }}
                {{/match}}
            {{/foreach}}
        </div>

        <div class="pb-6 md:py-12">
            {{pagination}}
        </div>

    </div>

</main>