This is the meta section, where we hide extra information about the article. Below is a test of article dependency structure (not finished).
This is the body of the warning. These should be used only sparingly, because they're designed to be visible and eye-catching. Too many would cause an article to become difficult to read.
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.
This site has been written using a custom suite of supporting PHP functions, which ease the authors' task of organising and writing new content. Just like the Wiki principle, we lessen the presentation burden, and touch formatting codes very infrequently. Changes made to style are usually site-wide.
This page uses most of the elements that are available to this site's authors. Given that it's a test, rather than an informative article, some of the layout might look unnatural and contrived; most articles will not use features in quite the same combinations as you see here.
This site was designed to make the most of CSS3 (where we think it looks really good), yet fail gracefully for CSS2 browsers like Internet Explorer 8.
This section scales! (beta quality)
Put your teaser text here to encourage further reading. Don't make it too long, or... Oh? are you still there?
The top of the page has a fixed header, containing the current site (blue background) and page title. All articles of a PHP page will use that template. Icons at the side remove clutter (navigation and meta-data) from the article body.
Sections are defined in coloured bands:
We can use shorthand to link directly to an article by its name, like index, or using alternative body text, like go to the index page. External links are shown with a trailing inline icon (which might not render correctly in IE).
Details are supplied inline for Portfolio links. Optional tags may be included in the box.
These boxes are simpler than portfolio links, and style any lists within. The cards scale vertically to fit their contents, but remain in fluid rows.
Keys
Plucks & Guitars
Strings
Auto-generated page listings can be found as a Site Map (just a list of article titles), and as a List that includes descriptions for each article. Some pages (like this one) may exist without being listed in the site map.
It's best to provide the search form somewhere on each page, say in the navigation areas. Try typing something into that, and the site will try to find the best article for you.
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 may listed, or be called-upon by any article. There are many ways of presenting references:
No article style template would be complete without at least three available levels of headings.
Lorem ipsum dolor sit amet, cum ut populo voluptaria eloquentiam, eum feugiat voluptaria disputationi eu. His ei commodo prompta platonem. Possim eirmod mei et, nominati splendide instructior no sed, ut dicunt omittam electram cum. Audiam impedit noluisse nam ut, eu qui facer sanctus. Vis ad autem liber voluptatibus, lorem quando legimus vim in, cu sed petentium repudiare.
Lorem ipsum dolor sit amet, cum ut populo voluptaria eloquentiam, eum feugiat voluptaria disputationi eu. His ei commodo prompta platonem. Possim eirmod mei et, nominati splendide instructior no sed, ut dicunt omittam electram cum. Audiam impedit noluisse nam ut, eu qui facer sanctus. Vis ad autem liber voluptatibus, lorem quando legimus vim in, cu sed petentium repudiare.
Lorem ipsum dolor sit amet, cum ut populo voluptaria eloquentiam, eum feugiat voluptaria disputationi eu. His ei commodo prompta platonem. Possim eirmod mei et, nominati splendide instructior no sed, ut dicunt omittam electram cum. Audiam impedit noluisse nam ut, eu qui facer sanctus. Vis ad autem liber voluptatibus, lorem quando legimus vim in, cu sed petentium repudiare.
Bold Paragraph
We don't usually do this for headings, because it (a) doesn't look good, and (b) is not good practice, but we provide it here for comparison.
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. [At the time of writing] this will be slightly indented and will have a slightly-shaded background. This helps to set the content apart from the main text, and should cause a reader to skip past if they are looking for the main points in an article. Readers having more time on their hands, or who are interested in the detail, will be able to read it without clicking to reveal the detail.
We use a cross-browser JavaScript library to draw the MathML. It is only enabled on pages that show equations, which improves the user experience. Here's a test:
We take the hard work out of table generation, just for simple tables that don't span multiple cells. Per-column formatting can be specified, and header and row styles are applied automatically. We show a simple example below, and you can see other examples linked here: Site Listing, Project log, Number Type: an advanced example.
| Conserved | Nonconserved |
| Symmetry | Divergence |
| Invariance | Change |
| Inner product | Outer Product |
| Fermionic* | Bosonic |
| Sharp | Multiverse |
| Defined, Localized | Degenerate |
| Instant (at point) | Latent (other point) |
| ... | ... |
Figures are straightforwardly presented, as below. This benefits from a style update that we've not yet applied to the galleries.
Fig.1: Fermion Event.
Lots of smaller images are best arranged as a flowing gallery. This layout makes the most of the width available to the browser, and aligns their bottoms and captions.
 |
| 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 |
This provides a way of decoratively showing quoted text, along with attributions. We have optimised the showing of four different types of attribution, including 'none':
The closing quote needs some work (we can make it right-aligned, but it overwrites side-bubbles; or we can make it as you see it now, and it looks a bit untidy.
CSS needs some checking: 'tight'...
This site runs on Apache and PHP. Because it 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 is typically generated in about 20ms.
We've been mindful of 'search engine optimisation' when developing this site, but have not sought to artificially increase our web presence at the expense of clarity. Some points:
