Hardcoded the font-size in px in p, h* or maybe more element.

[twang2218]

I was trying to adjust the font-size across the page for printing for MPE, and at first, I tried following customized style:

html body {
  font-size: 70%;
}

But it's not working, and I found only pre block was affected. After some digs, I realized many CSS are hardcoded in px, which caused the problem. Now, I used the following customized style as a workaround.

html body {
  // font-size: 70%;
  .markdown-preview{
    p {
      font-size: 0.9em;
      line-height: 1.6em;
    }
  
    h1 {
      font-size: 1.9em;
      line-height: 1.1em;
      code {
        font-size: 0.9em;
      }
    }
    h2 {
      font-size: 1.8em;
      line-height: 1.1em;
      code {
        font-size: 0.9em;
      }
    }
    h3 {
      font-size: 1.2em;
      line-height: 1.1em;
      code {
        font-size: 0.9em;
      }
    }
    h4 {
      font-size: 1.1em;
      line-height: 1.1em;
      code {
        font-size: 0.9em;
      }
    }
    h5 {
      font-size: 1em;
      line-height: 1.1em;
      code {
        font-size: 0.9em;
      }
    }

    code {
      padding: 0.2em;
      font-size: 1em;
    }

    pre[class*="language"] {
      padding: 1em 1.4em;
      font-size: 0.8em;
    }
  }
}

@media print{
  html body {
    font-size: 70%;
  }
}

I found font-size, line-weight and padding are sometimes in px unit, there might be more hardcoded sizes. Could you change the style unit in these theme to em?

I think this is the right repo for the theme style problem for MPE, let me know if I posted to the wrong place.