Font size conflicts within gist code blocks

[xjasonlyu]

Describe the bug

When we use gist shortcode to display GitHub Gist codes, e.g.

{{< gist jmooring 50a7482715eac222e230d1e64dd9a89b >}}

In current version (https://github.com/lxndrblz/anatole/commit/38de0c9dfe6bb598bef0effb980bd001553ef59c), it shows like this:

Some letters are bigger and some are smaller. And it applies to all desktop/mobile browsers.

Additional context

I believe this issue is similar to https://github.com/lxndrblz/anatole/issues/406, which causes by the wildcard font-size setting.

https://github.com/lxndrblz/anatole/blob/38de0c9dfe6bb598bef0effb980bd001553ef59c/assets/scss/partials/_base.scss#L3-L7

[xjasonlyu]

To temporarily fix this problem, put this code into your custom.css file:

* {
    font-size: inherit;
}

body {
    font-size: 1.6rem;
}

[xjasonlyu]

Also, there is a giant font size bug in Gist code blocks with iOS Safari view:

And it cannot be reproduced in Chrome/Firefox Desktop or even iPad. Adding this code to the custom css file will fix this problem, but still, I don't know why... 😂

html {
    -webkit-text-size-adjust: 100%;
}