Remove header fixed font size in overview boxes

[froggleston]

This change should alleviate some of the font sizing and underlining issues seen in https://github.com/carpentries/workbench/issues/57 and https://github.com/carpentries/workbench/issues/64, and remedied somewhat by @zkamvar in https://github.com/carpentries/varnish/pull/55.

By changing the font-size property in the overview.scss stylesheet from a fixed px value to a relative calculation, the font size of the overview header text and the two internal headers for Questions and Objectives will scale with the viewport width and not result in nasty underlining shenanigans.

Note: this will fix #83

[froggleston]

It looks good! I'm curious about how the implementation works :)

I'm glad you asked! 😄

We needed to change the initial font value pre-viewport width modifier to be fixed so that with an shrinking window size, the font doesn't become so small it's unreadable. The smaller viewport modifier values should ensure that the text doesn't get scaled too much from its initial 22px value. It seems to be good on a 1920x1080 monitor full screen and down to 300px wide for mobile view.

[zkamvar]

I've gone ahead and fixed a couple of things to keep in line with the original wireframe. One thing I found is that the original design had a font weight of 600 for the card titles.

For reference, here is the old version:

The new version looks like this and responds much better: