Setup tools to properly use REM

[angusm]

Reference https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 Setup macros similar to https://stackoverflow.com/questions/38367957/how-to-calculate-rem-properly-in-sass#38368130

[kadenzipfel]

rem is based off of the font-size set in the html. em is based off of the font-size set by it's parent element. px is simply the pixel value and cannot be changed by the browser and thus cannot be changed, becoming an accessibility problem.

Since em is so difficult to keep track of, and px limits accessibility, we will use rem.

To simplify the process so we know what pixel value we'll be outputting, we'll use a sass macro similar to https://stackoverflow.com/questions/38367957/how-to-calculate-rem-properly-in-sass#38368130 This way we can write out the pixel value and it will be converted to rem.

Another thing we can do is use media queries using em, then size everything else with rem so that everything scales according to the user's browser settings and the breakpoint settings, e.g.

html
  font-size: 0.8em
  +md
    font-size: 1em
  +lg
    font-size: 1.2em

Where +md and +lg are macros for media queries.