---
layout: layouts/base.njk
title: Categories
withSidebar: true
permalink: categories/
eleventyImport:
  collections:
    - categories
---
<div>
  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Categories</h1>
  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
    Browse posts by category.
    <span class="text-sm">({{ collections.categories.length }} categories)</span>
  </p>

  {% if collections.categories.length > 0 %}
  <ul class="flex flex-wrap gap-3">
    {% for cat in collections.categories %}
    <li>
      <a href="/categories/{{ cat | slugify }}/" class="inline-block px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 rounded-lg hover:bg-accent-100 dark:hover:bg-accent-900 hover:text-accent-700 dark:hover:text-accent-300 transition-colors">
        {{ cat }}
      </a>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="text-surface-600 dark:text-surface-400">No categories yet.</p>
  {% endif %}
</div>