Styleguide

The style guide for chrisburnell.com.

Colours

  • Bowhead

    #4f758e
    hsl(203.7, 28.5%, 43.2%)

  • Raven

    #5f8aa6
    hsl(203.7, 28.5%, 51.2%)

  • Coyote

    #7298b1
    hsl(203.7, 28.5%, 57.1%)

  • Lynx

    #303537
    hsl(197, 7%, 20%)

  • Bear

    #eaeef1
    hsl(206, 20%, 93%)

  • Thunder

    #060606
    hsl(0, 0%, 2.4%)

  • Mineshaft

    #2b2b2b
    hsl(0, 0%, 16.9%)

  • Kaiser

    #4f4f4f
    hsl(0, 0%, 31%)

  • Dove

    #737373
    hsl(0, 0%, 45.1%)

  • Alto

    #dddddd
    hsl(0, 0%, 86.7%)

  • Milou

    #f9f9f9
    hsl(0, 0%, 97.6%)

  • Canada

    #eb2d37
    hsl(356.8, 82.6%, 54.9%)

Measures

Tiny
Small
Medium
Large
Gigantic
Responsive

Transitions

transition: all 0.2s ease;
transition: all 0.2s ease;

Fonts

Primary Font: "Proxima Nova", sans-serif;

Primary Font italic: "Proxima Nova", sans-serif;

Primary Font bold: "Proxima Nova", sans-serif;

Secondary Font: Georgia, Times, Times New Roman, serif;

Secondary Font italic: Georgia, Times, Times New Roman, serif;

Monospace Font: monospace;

Title Font: "Heebo", sans-serif;

Headings

Heading Level 1 · α

Heading Level 2 · β

Heading Level 3 · γ

Heading Level 4 · δ

Heading Level 5 · ε

Heading Level 6 · ζ

Paragraph

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Aside

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript for things like: 4th of August, a2 + b2 = c2, 5,490.35 km2, etc.

Subscript for things like: H2O, H2SO4, C24H26O7

This small text for fine print, etc.

Abbreviation: HTML

This text has a short inline quotation

This text has a short inline quotation with another short inline quotation inside

The dfn element indicates a definition

The mark element indicates a highlight

This is what inline code looks like

This is sample output from a computer program

The variable element, such as x = y

Keyboard input: Tab

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Unordered List

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered List

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Ordered List Reversed

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. This is the last list item
    1. This is a nested list item
    2. This is another nested list item in an ordered list

Ordered List Reversed, Twice

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. This is the last list item
    1. This is a nested list item
    2. This is another nested list item in an ordered list

Definition List

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
And another term.
And it gets a definition too, which is this line.

Table

Heading AHeading BHeading CHeading D
Cell A-1Cell B-1Cell C-1Cell D-1
Cell A-2Cell B-2Cell C-2Cell D-2
Cell A-3Cell B-3Cell C-3Cell D-3
Foot AFoot BFoot CFoot D

Table with Alternating Rows

Heading AHeading BHeading C
Cell A-1Cell B-1Cell C-1
Cell A-2Cell B-2Cell C-2
Cell A-3Cell B-3Cell C-3
Cell A-4Cell B-4Cell C-4
Cell A-5Cell B-5Cell C-5
Foot AFoot BFoot C

Table with Subheadings

Heading AHeading BHeading C
Subheading iCell A-iCell B-iCell C-i
Subheading iiCell A-iiCell B-iiCell C-ii
Foot AFoot BFoot C

Details and Summary

Summary

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Preformatted Text


P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Code Block

@mixin owl($measure: small) {
  @if not map-has-key($measures, $measure) {
    @error "There is no measure named #{$measure} in `$measures`. measure should be one of #{map-keys($measures)}.";
  }

  & > * + * {
    @include v(margin-top, $measure);
  }
}

Sparkline

Figure

Sintra, Portugal skyline by … me

Deck

Shelf

Shelf with Images

Video

Speakerdeck

CodePen Embed

Can I Use Embed

Can I Use css-sel3? Data on support for the css-sel3 feature across the major browsers from caniuse.com.

Twitter Embedded Quote