Make sections clearer in Markdown rendering by changing the CSS

The style used when rendering Markdown makes it difficult to distinguish between sections / sub-sections. MarkdownPad 2, for example, uses clearer CSS by default that adds a horizontal line under Level 2 Headings.

Perhaps the Markdown CSS could be configurable by project so that this can be user configured?

Added feature proposal label

Added markdown label

@thomas.heritage do you think this is now resolved with the new UI?

Thanks for the feedback and changes. The line under h1 headings helps to distinguish them. However, it's still difficult to distinguish h2 and h3 headings -- I notice, for example, that h3 headings have a larger font-size than h2 headings which seems surprising.

I think I might recommend:

• h1 headings: very large font
• h2 headings: smaller font & line underneath
• h3 headings: even smaller font

Added ~12742 ~19492 labels

/cc @creamzy @skyruler

Milestone changed to 8.3

Reassigned to @skyruler

Milestone changed to 8.4

Perhaps the Markdown CSS could be configurable by project so that this can be user configured?

I dont like idea of any configurable css per project. Markdown typography should be one for all GitLab instances.

However, it's still difficult to distinguish h2 and h3 headings

@skyruler what do you think?

Status changed to closed

@dzaporozhets from my side I fixed that @thomas.heritage mentioned. https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/2295

however I also don't like the idea of having custom css because we will lose UI consistency on our project pages.

@skyruler good. Thank you

IMHO it is in some cases still difficult to see the difference between h1 and h2. For example see this snippet: https://gitlab.com/snippets/16784#fixing-mistakes

The h1 "Fixing mistakes" is lost among all the h2s around it, because the line is not clearly visible when there are code boxes around.

The current style is:

.wiki h1 {
    font-size: 1.3em;
    font-weight: 600;
    margin: 24px 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid #e7e9ed;
    color: #313236;
}

To my eyes it looks clearer with font-size: 1.5em and margin: 36px 0 12px;.

The current style:

With the change I proposed: