Style Guide

This page exists to demonstrate the visual styles of the various elements that comprise the design of this site.

Heading Level 2

Second level headings are used to split text into sections. First level headings are only used once per page, in the page or post title. Hyperlinks are underlined and coloured when hovered.

Heading Level 3

Third level headings are most often used to denote names rather than sections, so have a lower visual priority.

Heading Level 4

Fourth level headings are used to split-up longer text into smaller sub-sections. Headings should be short and descriptive of the content they contain.

Adjacent Heading Level 2

To a Sibling Heading Level 3

Adjacent headings of decending levels remove the margin-top from the younger sibling heading to reduce spacing.

Typographic Styles

Ordered List

Unordered List

  1. This is a Unordered List.
  2. Unordered Lists can also have multiple levels:
    1. This is a second-level Unordered List item


Blockquotes are used to “pullout” content and quotes to give them visual dominance, and therefore, impact to whatever text they feature.

This is a blockquote of featured text that has been pulled out of paragraph content


Inline code examples are styled with a monospace typeface and are coloured.

Codeblocks have syntax highlighting using Rouge

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/turret.css" />



References are applied with the Kramdown Footnotes Syntax [^footnote].

e.g. A line of text that references Kramdown Footnotes Syntax 1.