Thoughts list

Examples

When to use it

The Thoughts index. Newest first; tools for teams grouped below the essays.

Live: Thoughts.

Anatomy

Row

a.t-row: the whole row is one link. .t-n, .t-title, .t-d.

Group

.t-group with an h2, 4px rule (5px desktop).

States

Hover

Rule turns marker colour, number ink, title link colour.

Focus

2px ring around the whole row.

Behaviour

Phone, tablet, desktop

Stacked on phone; number column 160 from 768; title 36/42 on desktop.

Motion

A row click grows the row into the article’s band; Back shrinks it (see Patterns, Page transitions).

Accessibility

One link per row; the title is the accessible name’s start.

Words

Article titles in Title Case; the description is the article’s one-sentence summary.

Code

Classes: .t-intro .t-row .t-n .t-title .t-d .t-group. Styles in site/assets/css/site.css.

<a class="t-row" href="/thoughts/meetings-are-the-medium/"><span class="t-n">01</span><span><span class="t-title">Meetings Are the Medium</span><span class="t-d">Andy Grove called meetings the medium of managerial work. How to design them for decisions, what breaks them, and when to cancel one.</span></span></a>
<a class="t-row" href="/thoughts/okrs-are-not-magic/"><span class="t-n">02</span><span><span class="t-title">OKRs Are Not Magic</span><span class="t-d">OKRs fail when organisations overcomplicate them. A simple version that works, the common traps, and what I learned when mine failed.</span></span></a>