{% extends "base.html" %} {% block content %}
<div class="blog-index">
    <h1 style="margin-bottom: 2rem">Blog</h1>

    <ul class="blog-list">
        {% for post in posts %}
        <li class="blog-item">
            <a href="{{ post.url }}" class="blog-title"
                >{{ post.meta.title }}</a
            >
            <div class="blog-date">{{ post.meta.date }}</div>
        </li>
        {% endfor %}
    </ul>
</div>

<style>
    .blog-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .blog-item {
        margin-bottom: 2.5rem;
        display: block;
    }

    .blog-title {
        display: block;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--color-link);
        text-decoration: none;
        line-height: 1.3;
        margin-bottom: 0.2rem;
    }

    .blog-title:hover {
        text-decoration: underline;
    }

    .blog-date {
        font-size: 0.9rem;
        color: #888;
        font-family: var(--font-main);
    }

    @media (max-width: 600px) {
        .blog-title {
            font-size: 1.2rem;
        }
        .blog-item {
            margin-bottom: 2rem;
        }
    }
</style>
{% endblock %}