I created this site with custom CSS and a server-side content parser.
The page starts with a header containing the current site (darker background) and page title. Icons at the side reveal search and metadata.
Sections display as coloured bands:
The metadata section hides extra information about the article.
|technical writing, strategy, content, style
No article style template would be complete without at least three available levels of headings.
Do not use bold paragraphs as headings
For accessibility I only use heading tags for headings.
You might want X keyboard shortcuts, , literal text, special terms, text as it appears on-screen, highlight, text that is [not interrupted by] line breaks, text that will not print, or marked text.
Articles should contain essential information, presented concisely. Where we want to present non-essential or detailed information that would cause most readers to lose interest, we use detail boxes:
Here is some non-essential text. This style helps to set the content apart from the main text, avoiding the reader's vertical scan if they are looking for the main points in an article.
Specifies per-column formatting, and applies header and row styles.
|Ambiguous (many shells)
|Phase (reference waves)
|Phase (partner waves)
A gallery collects many smaller images with bottom-aligned captions, flowing within the browser width.
|1: Starting off
|2: Working upwards
|3: Later levels: Sentinel has friends!
|4: Sentinel's Stare.
|5: A starting position in difficult terrain
|6: A 'map view' of a landscape
|7: A view to the top
MathML renders equations.
Quotes display with four different types of attribution: custom, article, reference, and none:
Note: We might deprecate this style, for an indented quote with a solid left margin.
When writing, we can use shorthand to link directly to an article by its name, like index, or using alternative body text, like "see my content skills". External links display with a trailing inline icon.
These cards scale vertically to fit their contents, but remain in fluid rows. See a full example.
Search is available from the icon at the top of the page.
In this context, a reference is a link to a table of external (or internal) works. Each PHP page has a set of references, which can display as a full list from the refs article, or be referenced by any article. References display as inline links, title only, author only, or full details:
Select the 'i' icon to see the meta section.
Because this is a relatively small site, we've kept the metadata and articles as plain text files, one (private) folder per mini-site (PHP page). Page content typically generates in about 20ms.
We used standard descriptions and metadata along with relevant content, in line with W3C intentions. We do not cheat. Some points: