GitHub strips the CSS, so the README is a picture of the site

GitHub strips CSS from a README, so a profile written as markdown tables can never look like the site it points to. The only way to show the site’s own type and colors there is a picture of it. So the site now draws one, from the same data files as the homepage, on every deploy, and the README is a single image that never needs another edit.

The README pane is about 880px wide, so the wide image copies the homepage as it lays itself out at that width: two columns, clients in two columns, the site’s own sizes and theme colors. satori has no CSS columns, so each list is split into flex columns by hand and filled top to bottom the way a browser fills them. It is rasterized at twice the size to stay sharp.

On a phone GitHub shrank that image until the type was unreadable, so a narrow version copies the phone layout instead. The first one was drawn at 400px. GitHub shows the README about 310px wide on a 390px phone, so its type still came out near 11px. Redrawn at 340px with a 16px margin, it shows close to one to one.

Choosing between the two was the hard part. A <picture> can pick a source by width or by color scheme, but GitHub’s theme script rewrites any source that names a color scheme, so the width rule cannot share a source with it. Each picture leads with a plain width rule that swaps in a 91 byte transparent pixel on the wrong screen, and the theme rules follow.

Two pictures, and one of them is always blank.