Site overrides root font-size, which interferes with accessibility and external content

[medmunds]

Issue

_utils.scss overrides the browser's root font-size to 62.5%, apparently to simplify the math for using rem-based sizing (it makes 1rem = 10px).

But this can cause accessibility problems for users who have set their browser to use a specific font size. See (e.g.,) https://fedmentor.dev/posts/rem-html-font-size-hack/.

It also causes any externally-injected content to render extremely small. (E.g., browser extension that add page features. Or ReadTheDocs widgets, which is where I ran into this while adapting the djangoproject styles for Django's docs builds.)

Suggested fix

A patch implementing all of these is in django/django#21416:

• In _utils.scss:
  • Remove the html { font-size } rule
  • Change the font-size mixin to set font-size: $size/16 + rem (and drop the px fallback that's there for IE7)
• In _style.scss, change the three uses of rem-based sizing:
  • Change font-size: 3.2rem; to @include font-size(32);
  • Change the two scroll-margin-top from rem to px (e.g., 6.3rem becomes 63px)
  • Change the .community-cta-wrapper gap from 6rem to 60px (or 3.75rem, but that section already uses px for padding).

There are no other uses of rem-based sizing in the scss.

(I'm happy to open a PR if it would be helpful.)