topics.html

---
layout: default
title: Topics
permalink: topics/
---

<div class="max-w-3xl mt-8 mx-auto px-4">
  <div class="prose lg:prose-lg sm:pb-8 md:pb-16">
    <h1>Topics</h1>
  </div>

  <div class="flex flex-wrap text-center md:-ml-4">
    {% for category in site.data.categories %}
      <div class="inline-flex items-center text-center">
        <a href="#{{ category.slug }}" class="text-sm md:text-base mt-3 mr-1 items-center px-3 py-1 md:mt-4 md:mr-2 items-center md:px-3 md:py-2 rounded-full font-medium leading-5 bg-{{category.color}}-200 text-{{category.color}}-900">
          {{ category.name }}
        </a>
      </div>
    {% endfor %}
  </div>

  {% for category in site.data.categories %}
    <div class="mt-16 mb-8">
      <a name="{{ category.slug }}">
        <h2 id="#{{ category.slug }}" class="rounded-full text-2xl font-medium leading-8 bg-{{category.color}}-200 text-{{category.color}}-900 md:-mx-8 px-5 sm:px-8 py-2 sm:py-5">
          {{ category.name }}
        </h2>
      </a>
    </div>

    {% for post in site.categories[category.slug] %}
      <div class="mb-8">
        <a href="{{ post.url }}" class="group">
          <h3 class="mt-4 text-xl leading-7 font-semibold text-gray-900 group-hover:underline">
            {{ post.title }}
          </h3>

          <time datetime="{{ post.date | date_to_xmlschema }}" class="text-sm leading-5 text-gray-700 mr-8 post-date">
            {{ post.date | date: '%B %-d, %Y' }}
          </time>

          <p class="pt-3 text-base leading-6 text-gray-700">{{ post.description }}</p>
        </a>
      </div>
    {% endfor %}
  {% endfor %}
</div>