Style Guide

A demonstration of the visual styles of the various elements that comprise the design of this site including headings and typographic styles.

Divider

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 change colour when hovered.

## Heading Level 2

Heading Level 3

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

### Heading Level 3

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.

#### Heading Level 4

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.

## Adjacent Heading Level 2
### To a Sibling Heading Level 3

Typographic Styles

Ordered List

* Ordered Lists look like this.
* Multi-leveled Ordered Lists look like this:
  * This is an example of a second-level bullet

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
1. This is a Unordered List.
2. Unordered Lists can also have multiple levels:
  1. This is a second-level Unordered List item

Blockquote

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

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

Code

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

`code`

Codeblocks have syntax highlighting using Rouge

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Template</title>
    <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" />
  </head>
  <body>

  </body>
</html>

References

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

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

[^footnote]: Kramdown [Kramdown Footnotes Syntax](http://kramdown.gettalong.org/syntax.html#footnotes)