96182cb1e4
- Make all headings responsive (text-2xl sm:text-3xl pattern) - Make all section headings responsive (text-xl sm:text-2xl) - Add responsive margins (mb-6 sm:mb-8 pattern) - Fix flex layouts to stack on mobile (flex-col sm:flex-row) - Make images responsive (w-20 sm:w-24 pattern) - Add responsive padding (p-4 sm:p-6) - Improve grid gaps for mobile (gap-3 sm:gap-4) - Add CSS utilities for table overflow and touch scrolling - Restyle 404 page with proper responsive design Files updated: 22 template and CSS files across all pages Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
28 lines
978 B
Plaintext
28 lines
978 B
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Categories
|
|
withSidebar: true
|
|
permalink: 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-primary-100 dark:hover:bg-primary-900 hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
|
|
{{ cat }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="text-surface-600 dark:text-surface-400">No categories yet.</p>
|
|
{% endif %}
|
|
</div>
|