Spending a shadow only where something floats
Border, fill, radius and shadow each say “separate object”. Spend all four on every block and the hierarchy flattens instead of building.
Editorial sections
Source: src/styles/parts/blog.scs — what surrounds the article. The
article body itself is .prose.
See them at full width on the blog and
article demos.
The index header
Notes on building a design system
What we changed, why we changed it, and what it cost — written while it was being done.
Chips
Category filters. A chip is a control, so it looks like one: a pressed state, not a colour change. Mark
the current one with aria-pressed="true" — or .active where there is no
button.
Post cards
Every card is the same object: same edges, same inner padding, the meta line always last, so a row of
them reads as one list rather than six boxes. A post without an illustration still needs a shape, which
is what the generated .post-thumb ground is — deliberately the ink band of the
marketing pages, so an article card belongs to the same site as the landing page.
Design
Engineering
A compiler in pure php
No dart binary, no node: the lexer, parser, evaluator and emitter all run where the framework runs.
Releases
Simple CSS v0.7
Namespaces, source maps, and three parser gaps that only a real stylesheet could have surfaced.
A card with no badge
The thumbnail is generated, so a post with no illustration still has a shape.
The newsletter band
The article
.reading-progress is the one thing a long page cannot say on its own: how far down it the
reader is. It is a sticky two pixel bar whose width the shell drives.
Spending a shadow only where something floats
The rail
Sticky, and the first thing in it is where the reader is in the piece. Below 900px the shell stacks it under the text, where a sticky element would only steal height.
What to read next
Responsive
- below 900px: the featured post becomes one column, the blog hero and the cover shrink, and the newsletter's form takes the full width under its text.