Grid

Projects

A grid of cards: for projects, photos, blog cards and tag pages. Cards pick up the liquid glass light on hover.

Red Dot Tracker

Chase the red dot across every wall, and log every pounce.

Purrometheus

Watches food bowls, nap lengths and 3 a.m. zoomies.

Hairball

Plans each surprise delivery for the most expensive rug.

Hallway dots

Case files

Household mysteries, written up step by step: the missing sock, the moving vase.

Box Inspection Log

1,200 boxes. If it fits, I sits.

Markup

<main class="f-wrap f-prose">
  <header><h1>Projects</h1></header>
  <div class="f-grid" data-f-liquid>
    <article class="f-card f-card--w2 f-card--h2">
      <div class="f-card__media" style="background-image: url(board.jpg)"></div>
      <div class="f-card__body"><h3>Red Dot Tracker</h3><p>…</p></div>
    </article>
    <article class="f-card f-card--text">
      <div class="f-card__body"><h3>Hairball</h3><p>…</p></div>
    </article>
  </div>
</main>
<!-- Sizes: f-card--w2 spans two columns, f-card--h2 two rows. -->