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:
- The default has no background.
- Image has a background image, title, subtitle, and tagline. See an example.
- Contents contains a list of links for the current page's headings. This is not yet automated.
- Warning is bright red; see the floating box. See an example.
- Important is boxed and stands out.
- Reading Context is yellow, intended for text that suggests how the page should be read. See an example.
- Detail is fainter and slightly indented, for text that is optional reading.
- See Also is blue, with links to other pages.
The metadata section hides extra information about the article.
| Author | John Valentine |
| Date | 2010-04-16 |
| Edits | 2023-12-11 |
| Categories | technical writing, strategy, content, style |
Headings
No article style template would be complete without at least three available levels of headings.
Heading 1
Paragraph text
Heading 2
Paragraph text
Heading 3
Paragraph text
Do not use bold paragraphs as headings
For accessibility I only use heading tags for headings.
Character styles
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.
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:
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.
Data tables
Specifies per-column formatting, and applies header and row styles.
| Property | Pre-interaction bosons | Fermion | Emitted bosons |
| Position | Ambiguous (many shells) | Unique | Ambiguous (on‑shell) |
| Origin | Multiple | (reset) | Common |
| Phase (reference waves) | Proximate | Identical | Excluded |
| Phase (partner waves) | Distinct | Unique | Available |
| Entanglement | Not entangled | Coupled | Entangled |
Table 1: Uniqueness properties.
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:
Note: We might deprecate this style, for an indented quote with a solid left margin.
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.
Keys
- Axel’s Sharp Atmosphere
- FM E-Piano Four High
- FM Square Glassy Boops
- Grand Piano
- Harpsichord
- Pipe Organ Flutes and Reeds
- Pipe Organ Trumpet Pedal
Strings
- Dexie String Mix Pad
- Light Hammered Dulcimer
- Solo Violin
- String Cello
- String Contrabass
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.
- , 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.