MODULE — M07

Ledger

Your writing, talks and releases, all in one column.

Entries

Whole rows are links. Tab into one and the ring is drawn inside it, because a flush row clips an outset ring.

APR 2026 WRITING Why undo is the hardest feature in any editor FEB 2026 TALK Sixty frames on a canvas that has no right to hold them NOV 2025 RELEASE Flatty 1.0

HTML

<div class="rule-stack" style="width:100%">
  <a href="#" class="rule-row ledger-row">
    <span class="ledger-date">APR 2026</span>
    <span class="ledger-kind">WRITING</span>
    <span class="ledger-title">Why undo is the hardest feature in any editor</span>
    <span class="ledger-go" aria-hidden="true">↗</span>
  </a>
  <a href="#" class="rule-row ledger-row">
    <span class="ledger-date">FEB 2026</span>
    <span class="ledger-kind">TALK</span>
    <span class="ledger-title">Sixty frames on a canvas that has no right to hold them</span>
    <span class="ledger-go" aria-hidden="true">↗</span>
  </a>
  <a href="#" class="rule-row ledger-row">
    <span class="ledger-date">NOV 2025</span>
    <span class="ledger-kind">RELEASE</span>
    <span class="ledger-title">Flatty 1.0</span>
    <span class="ledger-go" aria-hidden="true">↗</span>
  </a>
</div>

The same three, in columns

Put the stack in .rule-stack-aligned and the four parts land on shared column lines. Look at where WRITING, TALK and RELEASE end above — and where the titles start here.

APR 2026 WRITING Why undo is the hardest feature in any editor FEB 2026 TALK Sixty frames on a canvas that has no right to hold them NOV 2025 RELEASE Flatty 1.0

HTML

<div class="rule-stack rule-stack-aligned" style="width:100%">
  <a href="#" class="rule-row ledger-row">
    <span class="ledger-date">APR 2026</span>
    <span class="ledger-kind">WRITING</span>
    <span class="ledger-title">Why undo is the hardest feature in any editor</span>
    <span class="ledger-go" aria-hidden="true">↗</span>
  </a>
  <a href="#" class="rule-row ledger-row">
    <span class="ledger-date">FEB 2026</span>
    <span class="ledger-kind">TALK</span>
    <span class="ledger-title">Sixty frames on a canvas that has no right to hold them</span>
    <span class="ledger-go" aria-hidden="true">↗</span>
  </a>
  <a href="#" class="rule-row ledger-row">
    <span class="ledger-date">NOV 2025</span>
    <span class="ledger-kind">RELEASE</span>
    <span class="ledger-title">Flatty 1.0</span>
    <span class="ledger-go" aria-hidden="true">↗</span>
  </a>
</div>

Reference

Read from modules/ledger.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.ledger-row.ledger-date.ledger-kind.ledger-title.ledger-go.rule-stack-aligned

READS--ds-accent--ds-font-body--ds-font-display--ds-gap-tight--ds-ink--ds-ink-faint--ds-ledger-gap--ds-ledger-title-basis--ds-text-chip--ds-text-meta--ds-text-small--ds-text-ui--ds-track-button--ds-track-key

Notes

THE TITLE IS THE ONLY FLEXIBLE PART

Date, kind and arrow are all flex: 0 0 auto, so on a narrow row the title wraps to its own line and the metadata stays together above it. A grid would either keep four columns and crush the title, or collapse all four and strand the arrow on a line of its own.

Which is exactly what happened when we tried it. In a 280px stack the four columns gave the title five lines and put 27px of it outside its own box, under the arrow. So .rule-stack-aligned holds its columns only while the title track can still be as wide as the title asks to be — --ds-ledger-title-basis, 260px — and below that the row is the flex row again. Everything else in it measures 268px, so the switch is at 528px. That is the third literal length in this library, and it is written down in one place with the arithmetic beside it.

The arrow is aria-hidden. It says “this goes somewhere”, which the link already says; announcing “north east arrow” after every title is noise.