Sadly this is ridiculously overthought, and inaccessible junk.

Most of what you're doing with calculations has no reason to be calculate. Just set a max-width on things and let flow do it's job.

The latter part though, the accessibility, stems from the use of pixel calculations for font-size, element size, etc. Almost all of which there is no reason for when you should just be using EM.

In fact because you never declare font-size explicitly it's broken on all my machines, since most of mine are set to default to 20px == 1rem, and my media center is 32px == 1rem. Hence why your pixel calculations are junk.

Resizing EVERYTHING via calculatons is, well... just plain silly and nonsensical. The lack of max-width to prevent really high resolution displays from having paragraphs that are too blasted width? The flex for nothing? Not good.

Even the markup has problems -- like TITLE before the character encoding META making the browser start over from the beginning of the document during load, the X-UA for NOTHING, the lack of MEDIA targets on the LINK...

I mean seriously, max-width on h1 of around 15em, main (or what should be a main tag) at around 50 to 54em, h2 and h3 at 10em, 1em padding, 2em outer radius, 1em inner radius, and be done with it. Nice side effect is the absurdly tiny subsection will not shrink until it has to, isntead of that garbage narrow column!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store