Reworking site template to utilize Sass

Alright @parkr, there it is. Got a bigger than I thought it would.

So folks, apologies for any mistakes I might have made. This is my first bigger pull request touching more than 2 lines of code at a time.

I'm open for questions/suggestions and won't be mad if this doesn't get merged. :)

## Touched files:

in `/lib/site_template`:

```
.
├── _includes:
|   ├── header.html
|   ├── footer.html
|   └── head.html
├── _layouts:
|   ├── default.html
|   ├── page.html
|   └── post.html
├── _posts:
|   └── 0000-00-00-welcome-to-jekyll.markdown.erb
├── _sass:
|   ├── _base.scss
|   ├── _typography.scss
|   ├── _site-header.scss
|   ├── _site-footer.scss
|   ├── _page-content.scss
|   ├── _posts.scss
|   └── _syntax-highlighting.scss
├── css
|   └── main.scss
└── index.html
```

## General

- Reworded the _Welcome to Jekyll_ post a bit. (plus correct apostrophes, yay: `’` instead of `'`)
- Small changes to breakpoints (750px break point is now 800px, matching `.wrapper`)

## HTML/Markup changes

- Making `site-title` a proper heading (`h1`)
- Adjusting document outlines accordingly (post and page headings are now `h2`’s)
- Changes to `head.html` just change order of the items so things are distinctable more easily.

## CSS/Styles changes

- Use `box-sizing: border-box;` globally
- Using variables for fonts, colors and unified spacing
- __Code formatting__
    - Removing `.terminal` styles because they weren’t used on the site
    - Moving code styles to general typography (they were nested inside `.post` before, but might as well appear outside of posts)
    - Removed prefixed property declarations for `border-radius`, because  most browsers support the unprefixed version nowadays
    - Set overflow scrollbars for codeblocks only on horizontally, not vertically
- __Site header__
    - Removed unnecessary `background-color`
    - Cleaning up some of the styles for the navigation
    - Removing unnecessary HTML attributes from the `svg` element (moving fill color to CSS)
- __Site footer__
    - Using `icon` class for general icon styling
    - Removing unnecessary HTML attributes from the `svg` elements (moving fill color to CSS)
    - Simplifying the little _grid_ in general
    - Removing widths with `calc` which isn’t needed with the alternate box model
In between yours and Harrys’ is fine. Defining `$palm: 600px;` and `$lap: 800px;` and this?

```
@mixin media-query($device) {
    @media screen and (max-width: $device) {
        @content;
    }
}
```