Add media query mixins

This adds two types of mixins: generic viewport width and height mixins, and targeted device width mixins.

#### Generic width and height mixins

```scss
@include width-over($w) {}
@include width-under($w) {}
@include width-between($a, $b) {}
@include height-over($h) {}
@include height-under($h) {}
@include height-between($a, $b) {}
```

These are shorthands for `@media only screen and (min-width: $a) and (max-width: $b)` and the like.

Examples:

```scss
body {
  @include width-under(400px)          { color: red; }
  @include width-over(600px)           { color: white; }
  @include width-between(400px, 600px) { color: black; }
}
// Output
@media only screen and (max-width: 400px) {
  body { color: red; }
}
@media only screen and (min-width: 600px) {
  body { color: white; }
}
@media only screen and (min-width: 400px) and (max-width: 600px) {
  body { color: black; }
}
```

#### Targeted mixins

These use the general mixins above, but with predefined values.

```scss
@include phone {}              // width under 320px
@include phone-and-tablet {}   // width under 768px
@include tablet-and-phone {}   // width under 768px
@include tablet {}             // width between 321px and 768px
@include tablet-and-desktop {} // width over 321px
@include desktop-and-tablet {} // width over 321px
@include desktop {}            // width over 769px
```

These map to the following breakpoints.

```
0        320        768          ∞
|  phone  |  tablet  |  desktop  |
|         |          |           |
|  phone-and-tablet  |           |
|  tablet-and-phone  |           |
|         |          |           |
|         |  tablet-and-desktop  |
|         |  desktop-and-tablet  |
0        320        768          ∞
```

The targeted mixins are definitely more opinionated, so please add a comment if you have other ideas.