index.html

---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults

layout: home
---
<main class="container mx-auto px-4">
    <section class="md:w-2/3 lg:w-3/5 my-12 space-y-6">
        <h1 class="text-5xl font-bold">This is a simple web development blog</h1>
        <p class="text-slate-600 dark:text-slate-400 text-2xl">
            Here you will find articles about web development, programming, and 
            other related topics.
        </p>
        <a href="/articles/" class="px-4 py-2 inline-block rounded-full bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-800 active:ring-2 active:ring-slate-400 transition-colors">
            Browse articles
        </a>
    </section>
    
    <section class="my-12 space-y-6">
        {% assign post_amount = 3 %}
        <h2 class="text-4xl font-bold text-center">Last {{ post_amount }} articles</h2>
        <ul class="space-y-4">
            {% for post in site.posts limit:post_amount %}
                <li>
                    <a href="{{ post.url }}" class="group block md:w-3/4 mx-auto text-slate-600 dark:text-slate-300 relative">
                        <div class="p-4 rounded-lg dark:bg-slate-800">
                            <h3 class="group-hover:underline text-xl group-hover:text-slate-900 dark:group-hover:text-slate-100">
                                {{ post.title }}
                            </h3>
                            <div class="mb-4 text-sm">{{ post.date | date_to_string }}</div>
                            <p>
                                {{ post.excerpt }}
                            </p>
                        </div>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </section>
</main>