SCSS reset breaks $doc-font-size scaling

[karmaniverous]

Theme version and system environment

• Minimal Mistakes version:
• Ruby gem or remote theme version:
• Jekyll version:
• Git repository URL:
• URL to the page with the problem:
• Operating system:
• Browser version:

What happened?

I want to use $doc-font-size to scale all text in the theme, but the html style in _reset.scss is overriding my change.

Expected behavior

Changing $doc-font-size should alter font sizes globally. It does not.

Steps to reproduce the behavior

Go to _variables.scss and change $doc-font-size, then observe the effect on the text in a post.

Other

It's pretty clear what is happening here.

All of the type scaling variables are based on em sizes, which are set by the most recent absolute font size setting. In _reset.scss we have this:

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

  @include breakpoint($large) {
    font-size: 20px;
  }

  @include breakpoint($x-large) {
    font-size: 22px;
  }
 
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

So the scaling basis will always be 16, 18, 20, or 22px, no matter what is set in the SCSS variables.

[karmaniverous]

I resolved this by adding the following to assets/css/main.scss:

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: $doc-font-size * 1px;

  @include breakpoint($medium) {
    font-size: $doc-font-size * 1.125px;
  }

  @include breakpoint($large) {
    font-size: $doc-font-size * 1.25px;
  }

  @include breakpoint($x-large) {
    font-size: $doc-font-size * 1.375px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}