Markdown headers not rendered correctly in airport guides

[OlaRune]

Browser: Mozilla Firefox 86.0.1 Airport: Any Approximate play time before issue: Immediate

Issue Description

When looking at the ingame airport guides (question mark menu -> airport guide) the headings are not rendered correctly. As far as I can see only two levels (# and ##) are rendered differently, although the difference is so small that they may be the same. # looks a little brighter for me, but that may be imagined. Subsequent header levels (###, ####, etc.) are rendered in the same way as ##.

Example: Look at CYHZ airport guide on Github which uses multiple header levels. They each render differently. Looking at the same airport guide ingame the headers look the same (with maybe the first one a little brighter?).

Other issues:

• Bullet points (-) are not rendered at all
• Bold font (enclosed in **) are not rendered at all

Steps to reproduce

• See example above.

[n8rzz]

couple things here:

• we use a library to parse the markdown to html
• we use a css reset that, in the absence of classnames, removes all styles form bare html elements

The "missing" styles your are referencing here is basically point 2. As an example, the bulleted list is there in the markup, but because we use that element for layout (quite a bit actually) it doesn't have the bullets.

All these things are quite simple to fix, even if we cannot control the classnames of the output. We just need to add a new css module, and a root level classname to the airport info. From there we can style elements till our heart's content.

example:

// html
<div class="airport-info"></div>

// css
.airport-info li {
  list-style: disc;
}

[OlaRune]

@n8rzz Thanks for the input. I don't know a thing about HTML or CSS so this has to be fixed by someone else.

My only HTML experience is doing HTML injections as a "hacker" in my early teens to set obscene background images on people's guestbooks... 😂