index.html

---
layout: default
title: Blog
description: News and updates from the AnySoftKeyboard team
---
<section class="hero-bg text-white text-center py-10 md:py-14">
  <div class="max-w-4xl mx-auto px-4">
    <h1 class="text-3xl md:text-4xl font-bold">Blog</h1>
    <p class="text-lg text-white/80 mt-2">News and updates from the team</p>
  </div>
</section>

<section class="py-12 md:py-16 bg-white">
  <div class="max-w-3xl mx-auto px-4">
    {% if site.posts.size > 0 %}
    <ul class="space-y-8" role="list">
      {% for post in site.posts %}
      <li class="blog-post">
        <h2 class="text-2xl font-bold mb-2">
          <a href="{{ post.url | relative_url }}" class="text-gray-900 hover:text-purple-700">{{ post.title }}</a>
        </h2>
        <p class="text-gray-500 text-sm mb-4">
          <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
          {% if post.author %} • {{ post.author }}{% endif %}
        </p>
        {% if post.excerpt %}
        <p class="text-gray-600">{{ post.excerpt | strip_html | truncate: 200 }}</p>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-center text-gray-500 py-12">No posts yet. Check back soon!</p>
    {% endif %}

    {% if paginator.total_pages > 1 %}
    <nav class="flex justify-center gap-4 mt-12" aria-label="Blog navigation">
      {% if paginator.previous_page %}
      <a href="{{ paginator.previous_page_path | relative_url }}" class="px-4 py-2 bg-gray-100 rounded-lg text-gray-700 hover:bg-purple-700 hover:text-white transition-colors" aria-label="Previous page">&laquo; Newer</a>
      {% endif %}
      {% if paginator.next_page %}
      <a href="{{ paginator.next_page_path | relative_url }}" class="px-4 py-2 bg-gray-100 rounded-lg text-gray-700 hover:bg-purple-700 hover:text-white transition-colors" aria-label="Next page">Older &raquo;</a>
      {% endif %}
    </nav>
    {% endif %}
  </div>
</section>