John Valentine
Site stylebook

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

Article content


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.

The metadata section hides extra information about the article.

AuthorJohn Valentine
Categoriestechnical writing, strategy, content, style


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, 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:

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.

PropertyPre-interaction bosonsFermionEmitted bosons
PositionAmbiguous (many shells)UniqueAmbiguous (on‑shell)
Phase (reference waves)ProximateIdenticalExcluded
Phase (partner waves)DistinctUniqueAvailable
EntanglementNot entangledCoupledEntangled

Table 1: Uniqueness properties.


Fig.1: Fermion Event.


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.

i = 1 N a i


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

To quote something is to be resourceful, un-original, and deniable. I never quote anything, and I always tell everyone that. To quote something is to be resourceful, un-original, and deniable. I never quote anything, and I always tell everyone that.
— Probably Oscar Wilde?
I've designed, coded, and written for content systems. I cover areas like APIs, proprietary application help, media assets, training, project artefacts, compliance documentation, and operational guides.
— article: Content
Most of our work to date has produced emergent qualitative results, but science demands quantitative proof, so our current research focus is the development of deterministic simulation software to generate reconcilable statistics.
— J.S. Valentine, Minimal Deterministic Physicality Applied to Cosmology [15]
This quote is unattributed

Note: We might deprecate this style, for an indented quote with a solid left margin.


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.


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.


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), [15]


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.

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.

Image section: Title

This is a longer sub-title

This section scales! (beta quality)

Put your teaser text here to encourage further reading. It's not too long, because... Oh? are you still there?

Warning section

The warning style is for must-read content that steers a reader away from harmful consequences. I used this only once or twice on the whole site.

Reading context section

This text might tell you something about the context for reading the article. For example, it might tell you that the material is speculative or intended only for advanced users.