---
title: Blog
tags: blog pages
navTitle: Blog Home
pagination:
    data: collections.posts
    size: 5
    alias: postList
    reverse: true
permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/"
isContentDivided: true
eleventyNavigation:
    order: 4
eleventyComputed:
    pageTitle: Welcome to {{ sitemeta.siteName | safe }} Blog!
    desc: Blog hosted on {{ sitemeta.siteAuthor.name }}'s pwesonal website.
---

<section class="content__section">
    <h2>Other Blogs</h2>
    <p>{{ sitemeta.siteName }} also has a tumbleblog at <a href="https://tumbleblog.leilukin.com/">tumbleblog.leilukin.com</a>, where I make shorter or more casual posts, as well as sharing stuff that I found interesting or inspirational. Feel free to check it out!</p>
</section>

<section class="content__section">
    <h2>Blog Posts</h2>
    <ul class="blog__posts">
    {% for post in postList %}
        <li class="blog__post">
            <h2 class="blog__post--title">
                <a href="{{ post.url }}">
                    {% if post.data.title %}{{ post.data.articleTitle }}
                    {% else %}
                        <code>{{ post.url }}</code>
                    {% endif %}
                </a>
            </h2>
            <p class="blog__post--time">{{ post.date | formatDate }}</p>
            <p>{{ post.data.desc }}</p>
        </li>
    {% endfor %}
    </ul>

    {% include "global/pagination-oldnew.njk" %}
</section>

<style>
    .blog__posts,
    .blog__post {
        display: grid;
    }

    .blog__posts {
        list-style-type: none;
        padding: 0;
        margin: 1.5em 0 0 0;
    }

    .blog__post {
        --bdr-blogpost: 0.2em solid var(--clr-quote-border);
        gap: 0.6em;
        padding: 1.5em 0;
        border-bottom: var(--bdr-blogpost);
    }

    .blog__post:first-of-type {
        border-top: var(--bdr-blogpost);
    }

    .blog__post--title {
        font-size: clamp(1.55rem, 1rem + 3vw, 1.8rem);
        line-height: 1.3;
        margin-bottom: 0 !important;
    }

    .blog__post--time {
        color: var(--clr-sub-heading);
        font-weight: 700;
    }
</style>