Styleguide
Colours
The pairs shown are also the recommendations for accessible combinations.
The colors in the source are structured to allow for changing themes in the future. At the moment, only the dark theme is used.
Headings
Heading
Subheading
Headings come in two sizes, that scale according to fixed media queries. Note that the sizes do not signify the markup! You can set the `level` prop separately, to account for that.
Text
This is a single paragraph of running text. It has no margins by itself. This is to avoid leaking out any extra spacing.
This is more text, in another paragraph, spaced from the wrapper.
Text can be composed by adding a "spacer", `vs0-6`, class on the wrapping element. In Markdown text, the inter-paragraph spacing is handled already, so you don't need to worry about that.
Link
Links handle hover and focus styles, as well as security parameters (rel="noopener noreferrer") for external links. You can change their size by using the font-size `f1-6` atomic classes. They will also happily inherit the font-size from parents.
Vertical Spacing
Vertical spacing can be achieved with the `vs0-6` classes. They set spacing such that only elements with previous siblings set margins between them. This avoids leaking space outside, and keeps things consistent on the spacing scale.
Vertical spacing is nice when marking out sections on a page. This page uses them as well!
MarkdownBlock
Markdown Block H1
Markdown Block H2
Markdown Block H3
This is text that has its spacing set according to the container. Text in MarkdownBlock also has a set "measure", a width of ~70 characters.
Most of the content on this site is hardcoded. However, the content of posts is technically freeform and in Markdown. In these kinds of "editorial" content, the important thing is to anticipate how the resulting markup and content might break, and plan for resilience.
Aspect Ratio (MdImg)
It is often beneficial to preserve a known aspect ratio for replaced / intrinsically sized objects. This reduces layout shifting, which can make layout slow and distract the user.