{% extends 'base.html' %} {% block title %} {{ config.title }} | {{ section.title }} {% endblock title %} {% block content %} <section class="section"> <div class="container max-w-7xl mx-auto"> <div class="flex flex-col items-center flex-start space-y-2 py-8"> <h1 class="title leading-10 text-3xl text-garage-gray">{{ section.title }}</h1> <p class="italic">{{ section.description }}</p> </div> <div class="content"> {{ section.content | safe }} </div> <div class="px-0 md:px-8 xl:px-4 2xl:px-0"> <div class="space-y-20"> {% if paginator %} {% set pages = paginator.pages %} {% else %} {% set pages = section.pages %} {% endif %} {% for page in pages %} <article class="border-l-4 border-garage-gray pl-4 max-w-5xl"> <h2 class="text-garage-gray hover:text-garage-orange text-2xl pb-3"> <a class="w-full block" href='{{ page.permalink }}'> {{ page.title }} </a> </h2> {% if page.description %} <p class="w-max italic text-gray-600 py-0.5 px-1.5 bg-gray-100 rounded mb-1">{{ page.description }}</p> {% endif %} <div class="flex space-x-1 text-sm py-2 bg-garage-orange bg-opacity-10 w-full p-1.5 rounded"> <div class="column is-8"> {{ macros::page_publish_metadata(page=page) }} </div> <div class="column is-4 has-text-right-desktop"> {{ macros::page_content_metadata(page=page) }} </div> </div> <div class="content mt-2"> <div class="text-gray-700"> {{ page.summary | safe }} </div> <a class="group font-semibold p-4 flex items-center space-x-1 text-garage-orange" href='{{ page.permalink }}'> <div class="h-0.5 mt-0.5 w-4 group-hover:w-8 group-hover:bg-garage-gray transition-all bg-garage-orange"></div> <span>Read</span> <span class="text-garage-orange group-hover:text-garage-gray transition-all"> <i class="fas fa-arrow-right fa-xs"></i> </span> </a> </div> <div class="columns"> <div class="column"> {% if page.taxonomies.categories %} {{ macros::render_categories(categories=page.taxonomies.categories) }} {% endif %} </div> <div class="column has-text-right-desktop"> {% if page.taxonomies.tags %} {{ macros::render_tags(tags=page.taxonomies.tags) }} {% endif %} </div> </div> </article> {% endfor %} </div> </div> </div> </section> {% endblock %}