I created this site with custom CSS and a server-side content parser.

Article content

Sections

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:

1. The default has no background.
2. Image has a background image, title, subtitle, and tagline. See an example.
3. Contents contains a list of links for the current page's headings. This is not yet automated.
4. Warning is bright red; see the floating box. See an example.
5. Important is boxed and stands out.
6. Reading Context is yellow, intended for text that suggests how the page should be read. See an example.
7. Detail is fainter and slightly indented, for text that is optional reading.
8. See Also is blue, with links to other pages.

Headings

No article style template would be complete without at least three available levels of headings.

Character styles

You might want X keyboard shortcuts, Buttons..., 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.

Detail section

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:

Data tables

Specifies per-column formatting, and applies header and row styles.

Figures

Fig.1: Fermion Event.

Gallery

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

Maths

MathML renders equations.

Quotes

Quotes display with four different types of attribution: custom, article, reference, and none:

Navigation

Inline links

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.

Categorised cards

These cards scale vertically to fit their contents, but remain in fluid rows. See a full example.

Site maps

Find auto-generated page listings as a Site Map, or as a List that includes descriptions for each article. Articles may be absent from the site map.

Searches

Search is available from the icon at the top of the page.

• If you happen upon an exact match for an article title, then that article is displayed.
• If not, then the article titles, keywords, and descriptions are searched, and a list of matching articles is presented.
• By default, the search results page shows links to Site Map, Index, and other important pages, so if no search results are found, there will always be somewhere for the reader to go.

References

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 this link[15] for a list of all references, highlighting the chosen reference. Another link example.
• Minimal Deterministic Physicality Applied to Cosmology [15]
• J.S. Valentine.
• J.S. Valentine, Minimal Deterministic Physicality Applied to Cosmology, Unified Field Mechanics: pp. 477-492, World Scientific, DOI: 10.1142/9789814719063_0048 (2014), http://johnvalentine.co.uk/ph. [15]

Metadata

Select the 'i' icon to see the meta section.

Structure

Server-side

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.

Basic SEO

We used standard descriptions and metadata along with relevant content, in line with W3C intentions. We do not cheat. Some points:

• The site auto-generates XML sitemaps from page and article data. Sitemaps for browsing users are also auto-generated. We compose index (front) pages manually, and the rest of the content links Wiki-style.
• Each mini-site and each article has keyword and description meta-data.
• Titles for each article are concise and unique.