index.html

---
title: Articles
layout: default
pagination:
    enabled: true
---
<section class="bg-white dark:bg-gray-900">
    <div class="mx-auto max-w-screen-xl">
        {% for post in paginator.posts %}
            <article>
                <div class="flex flex-col-reverse sm:flex-row justify-start sm:justify-between items-start sm:items-center mb-2 text-gray-500">
                    <span class="text-sm">{{ post.date | date: '<strong class="text-sm text-base text-gray-500 dark:text-gray-400">%b %-d</strong> %Y' }}</span>
                </div>
                <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                    <a href="{{ post.url }}" class="no-underline hover:underline">{{ post.title }}</a>
                </h2>
                <div class="flex gap-4 overflow-x-scroll" style="scrollbar-width: none;">
                    {% for tag in post.tags limit:3 %}
                        <a href="{{ '/tag/' | append: tag | replace: " ","-" }}" class="no-underline hover:underline text-primary-600 dark:text-primary-500 text-xs font-medium inline-flex items-center py-0.5 px-0 whitespace-nowrap">
                            <svg class="mr-1 w-3 h-3  text-primary-600 dark:text-primary-500" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 24 24">
                                <path d="M18.045 3.007 12.31 3a1.965 1.965 0 0 0-1.4.585l-7.33 7.394a2 2 0 0 0 0 2.805l6.573 6.631a1.957 1.957 0 0 0 1.4.585 1.965 1.965 0 0 0 1.4-.585l7.409-7.477A2 2 0 0 0 21 11.479v-5.5a2.972 2.972 0 0 0-2.955-2.972Zm-2.452 6.438a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
                            </svg>
                            {{ tag }}
                        </a>
                    {% endfor %}
                </div>
                <p class="font-light text-gray-500 dark:text-gray-300">
                    {{ post.excerpt | markdownify | strip_html }}
                </p>
                <div class="flex items-center flex-wrap gap-4 mb-6" style="row-gap: 0">
                    {% if post.author.size == 1 %}
                        {% include home/single-author.html %}
                    {% else %}
                        {% include home/multiple-authors.html %}
                    {% endif %}
                </div>
            </article>
                {% if forloop.last == false %}
                <hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700" style="margin-top: 0; margin-bottom: 1.5rem"/>
                {% endif %}
        {% endfor %}
    </div>
    {% include pagination.html %}
</section>