Give work and education entries a hierarchy instead of one flat rhythm - #49
Merged
Conversation
…at rhythm
The work section read as a wall of text, and the cause was a single rule:
`.entry-body > * + *` gave every block an identical 8px gap. Four paragraphs of
prose with four bold words between them, all the same weight and spacing, so
nothing separated anything and the eye had no place to rest.
- Section labels inside an entry are written as `**label**` alone on a line,
which markdown renders as a paragraph containing only a bold run. Those are
now styled as signposts: small, uppercase, letter-spaced, muted, with a lot
of space above and almost none below, so each binds to the paragraph it
introduces rather than floating between two.
- The label no longer inherits the general `strong` rule, which had made it the
highest-contrast thing in the entry and pulled the eye to the signpost rather
than the content.
- Body copy gets `leading-relaxed` and a 68ch measure. At the 840px container
these paragraphs ran to roughly 95 characters, well past what the eye tracks
comfortably, which was the other half of the problem.
- Date, company and role are set tight as one header unit with a deliberate gap
before the body. Previously all four shared one rhythm, so an entry had no
header.
- Entries are separated by a rule, not just space. With space alone the
boundary between two jobs looked identical to the boundary between two
paragraphs of one job, so eight years read as a single column.
- Education gets the same treatment, since it shares `entry-body`.
Also drops the emoji used as icons: next to the page headings on /work,
/projects and /education, in the "See all X" links, and at the start of the
four homepage section headings. An emoji there renders at a different size,
weight and baseline than the text beside it, and it was inconsistent with the
headings that had none. The "See all X" links get a trailing arrow instead,
which inherits colour and weight. The hero's wave stays: it sits inline in a
sentence and reads as voice, not as an icon.
Test plan:
- [x] `pnpm run lint` and `pnpm run build` pass, 82 pages
- [x] internal link check passes, none broken
- [x] /work and the homepage rendered in a browser in dark mode and read at
three scroll positions, not judged from the markup
…urpose The page named one harness, which reads as having settled on a tool. The practice is the opposite: Claude Code day to day alongside OpenCode, Codex and others, because they have different strengths and the field moves fast enough that committing to one is a bad bet. Adds a line to the intro making the same point about the list as a whole. The breadth is the position, not an accident of not having specialised yet. Test plan: - [x] lint and build pass, 82 pages - [x] internal link check passes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The work section read as a wall of text, and the cause was a single rule:
.entry-body > * + *gave every block an identical 8px gap. Four paragraphs ofprose with four bold words between them, all the same weight and spacing, so
nothing separated anything and the eye had no place to rest.
**label**alone on a line,which markdown renders as a paragraph containing only a bold run. Those are
now styled as signposts: small, uppercase, letter-spaced, muted, with a lot
of space above and almost none below, so each binds to the paragraph it
introduces rather than floating between two.
strongrule, which had made it thehighest-contrast thing in the entry and pulled the eye to the signpost rather
than the content.
leading-relaxedand a 68ch measure. At the 840px containerthese paragraphs ran to roughly 95 characters, well past what the eye tracks
comfortably, which was the other half of the problem.
before the body. Previously all four shared one rhythm, so an entry had no
header.
boundary between two jobs looked identical to the boundary between two
paragraphs of one job, so eight years read as a single column.
entry-body.Also drops the emoji used as icons: next to the page headings on /work,
/projects and /education, in the "See all X" links, and at the start of the
four homepage section headings. An emoji there renders at a different size,
weight and baseline than the text beside it, and it was inconsistent with the
headings that had none. The "See all X" links get a trailing arrow instead,
which inherits colour and weight. The hero's wave stays: it sits inline in a
sentence and reads as voice, not as an icon.
Test plan:
pnpm run lintandpnpm run buildpass, 82 pagesthree scroll positions, not judged from the markup