Breakpoint mixin

[sboerrigter]

Fixes #791

I decided to also Introduce a max-width mixin, because I often see stuff like this in our code:

@media (max-width: #{map-get($breakpoints, 'medium') - 1px}) {
    foo: bar;
}

With this new mixin we can simply use:

@include max-width('medium') {
    foo: bar;
}

Sorry for the scope creeping.

[sboerrigter]

Thanks for sharing your thoughts @haroldangenent. I agree that we should try to use min-width as much as possible. However in some cases using max-width can drastically reduce the complexity of the code.

I prefer to add the max-width mixin to Sphynx, but adding it later could also work for me. What shall we do?