ComponentsData display
Typography
MudText applies the theme's type scale to any text. Choose the Typo for how text should look and HtmlTag for what it means, so the outline stays correct.
The type scale
Every Typo value with the font and size this theme assigns to it. Headings use a serif; body, captions and overlines use IBM Plex.
Night sky
Comet season
Observing log
The northern dome
Tonight's targets
Seeing conditions
Clear skies expected after 22:00
Telescope 2 · 300 mm reflector
Saturn rises in the east shortly after sunset and stays visible until dawn.
Bring a red torch: white light spoils night vision for twenty minutes.
Figure 3. The lunar terminator, 8 May, 21:40.
Field notes
Inherit keeps the font of the parent element.
Alignment
Align sets text-align. Start and End follow the reading direction, so prefer them over Left and Right in content that may be translated.
Align.Inherit
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Align.Left
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Align.Center
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Align.Right
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Align.Justify
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Align.Start
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Align.End
The reading room opens at nine. Quiet study is upstairs; group work happens beside the map collection.
Every color and style
Color × Typo for a representative set of styles. Transparent and Surface disappear on this sheet: they are meant for text on colored backgrounds.
| Color ↓ · Typo → | h5 | subtitle1 | body1 | body2 | caption | overline |
|---|---|---|---|---|---|---|
| Default | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Primary | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Secondary | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Tertiary | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Info | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Success | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Warning | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Error | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Dark | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Transparent | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Inherit | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
| Surface | Timetable | Timetable | Timetable | Timetable | Timetable | Timetable |
Gutters and inline text
GutterBottom adds a bottom margin between blocks. Inline lets a styled run sit inside a sentence; give it a span tag so the HTML stays valid.
Without GutterBottom
Opening hours
Monday to Friday, 9:00 to 19:00.
Saturday, 10:00 to 16:00.
With GutterBottom
Opening hours
Monday to Friday, 9:00 to 19:00.
Saturday, 10:00 to 16:00.
Inline runs inside a paragraph
The 18:42 to Harbour Point departs from platform 4 and calls at every station after Riverside.
Inline siblings share a line
Semantics versus appearance
Typo decides how text looks; HtmlTag decides what it is. Screen readers navigate by the real tags, so pick the heading level from the outline, not from the font size.
€ 1,280 raised
Typo.h4
is a <p>A big number is not a heading. It keeps the large style but stays a paragraph.
Delivery address
Typo.subtitle1
is a <h3>A small card title is still a heading: assistive technology lists it in the outline.
Typo.overline
is a <span>A label inside a line of other content needs a phrasing element, not a block.
Measure twice, observe once.
Typo.body1
is a <blockquote>A quotation gets its own semantic element while keeping body styling.
A typeset article
An overline, a heading, a standfirst, a byline, body copy, a subheading, a pull quote and a caption working together.
Field notes · Issue 14
What a spring of seeing logs taught us
Three months of measurements from the northern dome, and why the coldest nights gave the sharpest images.
By Inês Albuquerque · 6 min read
Between March and May the volunteers recorded the seeing every clear hour: how much the atmosphere blurred a star at the eyepiece. Ninety-one nights went into the log, and a pattern appeared within the first month.
Nights that followed a cold front were steadier than warm, still evenings. The difference was large enough to change which targets we scheduled first.
Cold air, steady air
Turbulence comes from layers of air at different temperatures. After a front passes, those layers mix less, and the image of a double star stops dancing.
“The best night of the season was also the one when nobody wanted to leave the warm room.”
Median seeing by month
March 2.4″ · April 2.1″ · May 1.8″
Table 1. Lower values mean steadier air, in arcseconds, measured at 22:00 local time.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
Platform 4 for Harbour Point
The next block starts here.<MudText Typo="Typo.h5" HtmlTag="p">Platform 4 for Harbour Point</MudText>