Nested lists have huge fontsize

[Apollinaire]

The following markdown :

- Item one
- Item two
  - Sub item
    - Sub sub Item
- Item three

is displayed as follows :

Using version 1.7.7 and default theme.

Can anyone reproduce it ?

Edit: It's from the font sizes defined in em in the theme. The em unit is relative to the parent element, so each child ul will be 1.5 times bigger than its parent, since the font size is 1.5em for it.

[jxnblk]

Are there font-sizes for ul defined in ems in one of the built-in themes? If so, that should be fixed

[Apollinaire]

No font sizes are defined for ul or ol, and they seem to be picking up the fontsize from the third value in the fontSizes array of the theme.
This seems to fix it:

  ol: {
    fontSize: '16px',
    textAlign: 'center',
    '@media screen and (min-width:64em)': {
      fontSize: '32px',
    },
  },
  ul: {
    fontSize: '16px',
    textAlign: 'center',
    '@media screen and (min-width:64em)': {
      fontSize: '32px',
    },
  },
  p: {
    fontSize: '16px',
    textAlign: 'center',
    '@media screen and (min-width:64em)': {
      fontSize: '32px',
    },
  },

[Apollinaire]

I added the values for <p> because when you do nested lists there is a

in every list that has a sublist so it's picking the 1.5em value too.

[tamagokun]

For me, this was caused both by ul compounding font sizes, and markdown wrapping the li in a paragraph tag, which I don't believe is what markdown should be doing:

* item 1
* item 2
    * item 2a
    * item 2b
* item 3

given the following markdown, item 2 is wrapped in <p>, which with the default theme makes it bigger and adds margin. To work around all this, i've modified the default theme css with:

css: {
  ...theme.css,
  'li ul, li ol': {
    fontSize: '1em',
  },
  'li > p': {
    fontSize: '1em',
    margin: 0
  }
}