Replace font-size absolute units with relative units

[aisgbnok]

Summary

I noticed #904 and thought I would attempt to resolve it. I believe I translated all font-size CSS properties from px to rem, in the application.css file.

If your browser is at the default font settings you should see no change in font size, and the site will look identical. If you modify your browser's font size you will now see the site's font size scale accordingly.

• Resolves Use relative units for fonts (rem, em) #904

REM

Web browsers calculate REM from the root element size. By default, modern web browsers use 16px = 1rem. Therefore I performed px/16 = rem.

Rem is a relative unit meaning it is adjustable by the browser or by modifying the root element in CSS. As an example, if a user changes their browser's default font size then rem will increase/decrease accordingly. Therefore this change improves user accessibility.

Mozzila Documentation on CSS values and units.
WC3/WAI - Draft Tutorial

[mlinksva]

Thanks @aisgbnok! At a glance the rendered version of this looks good to me. Further improvements or fixes welcome if needed.

[mlinksva]

(The CI failure is due to an unrelated broken link, will address separately.)