Style Improvement - Larger Heading Margin and Size

[rmorshea]

Right now, the top margin above headings as well as their font size/weight deemphasizes sections on the page. This can lead to a sense that one section bleeds into another. Thus, making it harder to focus on one section as a time.

I've added the following custom CSS to my documentation using this theme and, while I'm no CSS wizard, I think it looks better.

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 2em !important;
  margin-bottom: 0 !important;
  font-weight: 900 !important;
}

h2 {
  font-size: 1.8em !important;
}

h3 {
  font-size: 1.4em !important;
}

Here's some before and after screenshots:

---

Before

---

After

[aantn]

I'm not a maintainer, just another furo user.

I'm not crazy about the increased spacing, but I do agree topics can bleed into one another. Have you tried adding horizontal dividers?

[aantn]

I experimented with dividers myself. In the end I just added underlines to headings instead. It's very subtle, but good enough for me:

h2, h3 {
    border-bottom: 2px solid whitesmoke;
}

You can see an example here.

[rmorshea]

I'll probably try out a less aggressive spacing in addition to something like those underlines.

[rmorshea]

BTW you can get slightly better styling for dark mode by using var(--color-foreground-border) instead of whitesmoke:

[aantn]

Cool. Btw, IDOM looks very cool :)

[aantn]

Thanks!

[pradyunsg]

Furo has gotten a revamp to its typography since this was opened, and I reckon the new typography addresses the concerns raised here. If not, please say so! :)

[rmorshea]

Definitely an improvement IMO. Thanks!