Footer Archive

<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-12">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid gap-8 md:grid-cols-3 lg:grid-cols-4">
      <!-- Archive by month -->
      <nav aria-labelledby="footer-archive">
        <p id="footer-archive" class="text-sm font-semibold text-[var(--ws-footer-text)]">Archive</p>
        <ul class="mt-4 space-y-2">
          <li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">June 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">12</span></a></li>
          <li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">May 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">18</span></a></li>
          <li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">April 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">21</span></a></li>
          <li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">March 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">15</span></a></li>
        </ul>
      </nav>
      <!-- Categories -->
      <nav aria-labelledby="footer-categories">
        <p id="footer-categories" class="text-sm font-semibold text-[var(--ws-footer-text)]">Categories</p>
        <ul class="mt-4 space-y-2">
          <li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Engineering</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Design</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Product</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Notes</a></li>
        </ul>
      </nav>
      <!-- Tags -->
      <div class="md:col-span-1 lg:col-span-2">
        <p class="text-sm font-semibold text-[var(--ws-footer-text)]">Tags</p>
        <ul class="mt-4 flex flex-wrap gap-2">
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">typescript</a></li>
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">css</a></li>
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">accessibility</a></li>
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">performance</a></li>
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">tailwind</a></li>
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">astro</a></li>
          <li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">archive</a></li>
        </ul>
      </div>
    </div>
    <p class="mt-10 border-t border-[var(--ws-footer-border)] pt-6 text-sm text-[var(--ws-footer-text-muted)]">&copy; 2026 Field Notes. Written since 2009.</p>
  </div>
</footer>