Blog Minimal

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6">
    <div class="mb-12">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Blog</h2>
      <p class="mt-2 text-lg text-[var(--ws-blog-text-soft)]">Thoughts on design systems, CSS, and modern web development.</p>
    </div>

    <div class="divide-y divide-[var(--ws-blog-border)] border-y border-[var(--ws-blog-border)]">
      <article class="group py-6">
        <a href="#" class="block">
          <div class="flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]">
            <time datetime="2026-03-08">Mar 8, 2026</time>
            <span aria-hidden="true">&middot;</span>
            <span class="text-[var(--ws-blog-accent)]">Patterns</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">The complete guide to building a pattern registry</h3>
          <p class="mt-1 text-sm text-[var(--ws-blog-text-soft)]">From CSS snippets to full page sections — how we built a searchable, AI-native component library.</p>
        </a>
      </article>

      <article class="group py-6">
        <a href="#" class="block">
          <div class="flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]">
            <time datetime="2026-02-28">Feb 28, 2026</time>
            <span aria-hidden="true">&middot;</span>
            <span class="text-[var(--ws-blog-accent)]">CSS</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Scroll-driven animations without JavaScript</h3>
          <p class="mt-1 text-sm text-[var(--ws-blog-text-soft)]">Modern CSS scroll timelines replace Intersection Observer for reveal, parallax, and progress bar effects.</p>
        </a>
      </article>

      <article class="group py-6">
        <a href="#" class="block">
          <div class="flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]">
            <time datetime="2026-02-20">Feb 20, 2026</time>
            <span aria-hidden="true">&middot;</span>
            <span class="text-[var(--ws-blog-accent)]">Workflow</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Using the CLI to scaffold landing pages</h3>
          <p class="mt-1 text-sm text-[var(--ws-blog-text-soft)]">Combine the Webspire CLI with AI agents to compose full landing pages from registry patterns.</p>
        </a>
      </article>

      <article class="group py-6">
        <a href="#" class="block">
          <div class="flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]">
            <time datetime="2026-02-14">Feb 14, 2026</time>
            <span aria-hidden="true">&middot;</span>
            <span class="text-[var(--ws-blog-accent)]">Deep dive</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Glass effects with OKLCH and fallbacks</h3>
          <p class="mt-1 text-sm text-[var(--ws-blog-text-soft)]">A complete guide to building accessible glassmorphism with modern color spaces and progressive enhancement.</p>
        </a>
      </article>

      <article class="group py-6">
        <a href="#" class="block">
          <div class="flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]">
            <time datetime="2026-02-06">Feb 6, 2026</time>
            <span aria-hidden="true">&middot;</span>
            <span class="text-[var(--ws-blog-accent)]">Architecture</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Why we chose Astro v6 for a pattern registry</h3>
          <p class="mt-1 text-sm text-[var(--ws-blog-text-soft)]">Static-first, content-collections, and zero client JS — how Astro's architecture perfectly fits a documentation site.</p>
        </a>
      </article>
    </div>
  </div>
</section>