Design tweaks

[ymschaap]

I'm not sure who is now working on fine tuning the styling. But e.g. for mobile it needed a few fixes to not overflow the viewport.

I propose these changes:

• smoother font
• less large h1 + return of the stripe
• mobile h1 within viewport (smaller)
• don't overflow viewport (hack for <table>

I could pick up some more mobile changes if interested.

[ymschaap]

@rviscomi I wrap each <table> node with a <div> using npm run generate.

I did my best of also cleaning up much of the styling that is in different files, and made it more consistent.

Also - for wide screens - I added the content with a max-width. Else it's unreadable :)

I could not center the <tables>, I would need another nested div for that.

[catalinred]

@rviscomi @ymschaap
On the responsive <table> matter, what do you think about this solution?
https://codepen.io/lukepeters/pen/bfFur

It's based on using custom HTML attributes data-* and CSS pseudo-elements ::before or ::after in order to stack tables when on a mobile view. It's a classic approach for tables with fixed number of columns and I did use this solution with success in some of my projects.

[rviscomi]

On chapter pages <aside> and <figcaption> text appears as 18px while paragraphs are 17px. Is this intentional?

Also H1s may need a bit more line-height on mobile:

[rviscomi]

Resolved the merge conflict. Let's get this in and we can iterate on improvements. Thanks for working on this @ymschaap!