Styleguide

This page demonstrates the visual styles of the various elements that determine the design of this site. You are currently reading a lead paragraph which is used to introduce an article or page. It has a bit bigger font size and a visual accent at the bottom.

Typography

I’ve set the body copy in Lora. The headings are set in Playfair and the code snippets in Source Code Pro all through Google Fonts.

Heading 1

Aute occaecat mollit ex eiusmod aute voluptate in Lorem et consectetur. Anim fugiat enim eu ullamco consequat qui officia. Lorem occaecat id sit do adipisicing dolore occaecat magna. Aliquip esse consectetur voluptate exercitation aute id ad duis in cupidatat dolor ex nisi nisi. Fugiat elit in occaecat occaecat commodo cupidatat consectetur ullamco enim et non occaecat reprehenderit. Ullamco aute cupidatat ipsum eu mollit labore.

Heading 2

Aute occaecat mollit ex eiusmod aute voluptate in Lorem et consectetur. Anim fugiat enim eu ullamco consequat qui officia. Lorem occaecat id sit do adipisicing dolore occaecat magna. Aliquip esse consectetur voluptate exercitation aute id ad duis in cupidatat dolor ex nisi nisi. Fugiat elit in occaecat occaecat commodo cupidatat consectetur ullamco enim et non occaecat reprehenderit. Ullamco aute cupidatat ipsum eu mollit labore.

Heading 3

Aute occaecat mollit ex eiusmod aute voluptate in Lorem et consectetur. Anim fugiat enim eu ullamco consequat qui officia. Lorem occaecat id sit do adipisicing dolore occaecat magna. Aliquip esse consectetur voluptate exercitation aute id ad duis in cupidatat dolor ex nisi nisi. Fugiat elit in occaecat occaecat commodo cupidatat consectetur ullamco enim et non occaecat reprehenderit. Ullamco aute cupidatat ipsum eu mollit labore.

Heading 4

Aute occaecat mollit ex eiusmod aute voluptate in Lorem et consectetur. Anim fugiat enim eu ullamco consequat qui officia. Lorem occaecat id sit do adipisicing dolore occaecat magna. Aliquip esse consectetur voluptate exercitation aute id ad duis in cupidatat dolor ex nisi nisi. Fugiat elit in occaecat occaecat commodo cupidatat consectetur ullamco enim et non occaecat reprehenderit. Ullamco aute cupidatat ipsum eu mollit labore.

Aside

Aside (information)

45 / 75 range…

The amount of characters on one line resulting in * comfortable ♥ readi * ng is considered to be between 45-75. The Ideal length being 66. ¹²³

I’m taking this into account while defining the max-width of the content section of the site.

The iI1l test

The iI1l test. Let’s hope these letterforms differ so we don’t mix up a 1 with a l or an i with a l, or a I with a l.

Horizontal ruler

---

Ordered list

1. Lorem
2. Ipsum
   1. dolor
   2. sit
3. Amed

Unordered List

• Lorem
  • ipsum
  • dolor
• Sit
• Amed

Italics

The i tag is used for expressions in an different voice, mood, language or otherwise different from the normal prose. Examples are technological terms, phrases or words from another language.

The quick brown fox jumps over the lazy dog.

Emphasis

The em element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the i element may be preferable.

You simply must try the new 12 year old Aultmore whisky!

Strong importance

The strong element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the b element may be preferable.

Please don’t stick nails in the electrical outlet.

Links

butterscotch squares doing things the right way

Blockquote

This is a blockquote. on multiple lines butterscotch squares test

Strong

For bold text, use strong.

Italics

To italicize text, use em.

Abbr

Abbreviations, like HTML should use abbr, with an optional title attribute for the full phrase.

Citations

Citations, like — Jane Doe, should use cite.

Deleted & Inserted

Deleted text should use del and inserted text should use ins.

Super- and Subscript

Superscript text uses ^sup and subscript text uses _sub.

Keys

Ah and ⌘ + shift keys are important.

Excepteur aliqua sit laborum ^et minim. Consectetur eiusmod veniam nostrud labore minim fugiat adipisicing et qui duis sunt consequat laboris. Deserunt incididunt _et lets see how ⌘ and shift and F4 look in a paragraph also CAPS LOCK reprehenderit incididunt veniam fugiat non aliqua anim anim officia. Lorem ut do nisi mollit reprehenderit reprehenderit officia cupidatat. Anim veniam sit consectetur dolore incididunt labore minim deserunt quis.

Code highlighting

function showError(error) {
  if(error.code==0) {
    alert('An unknown error occurred.');
  } else if(error.code==1) {
    alert('No permission to locate your position.');
  } else if(error.code==2) {
    alert('The location could not be retrieved.');
  } else {
    alert('There was a timeout.');
  }
}

.ninja {
    visibility: hidden;
    animation-duration: 0.000001s;
}