CSS in HTML template: adjust #TOC and h1 on mobile

[mb21]

I visited https://vmchale.github.io/jacinda/ on mobile, and found we can improve our stylesheet a bit. Repro:

pandoc https://raw.githubusercontent.com/vmchale/jacinda/main/doc/guide.md -s -o guide.html --toc

Changes:

1. Make all h1 a tiny bit smaller on mobile
2. Since we have no list-markers on the TOC, we should decrease the left paddings a bit to get the same visual effect.

Feedback welcome, then I can update the tests...

[jgm]

What is the default for this - or does it vary with the browser?
Also what is the default for h2, h3, etc.?

[jgm]

My specific worry is that if you set the h1 font-size to 1.8, it will be indistinguishable from h2. Maybe we should explicitly set all hN font sizes, using some kind of harmonious scheme?

[jgm]

By the way, my own aesthetics prefer much smaller headings (more like what you get in print articles). However, then you have some difficulty distinguishing 5 or 6 heading levels. It can perhaps still be done by not using bold fonts for all of them.

[mb21]

Different browsers used to have different values for this, but nowadays this is all standardized. I just tested Chrome, Firefox and Safari on macOS and all set the h1 to 2em. With 1em being 16px in modern browsers, this would be 32px, but we define 1em on desktop-sized screens with html { font-size: 20px}, so in this stylesheet it's 40px.

Maybe we should explicitly set all hN font sizes, using some kind of harmonious scheme?

yes, that's what people used to do (and had to do due to browser differences). My idea with this stylesheet was to rely on browser defaults as much as possible, to keep it small. And I think it worked out pretty well generally... except that the h1 is too big on mobile :P But arguably it's not too bad and we can also just leave it...

My specific worry is that if you set the h1 font-size to 1.8, it will be indistinguishable from h2

That would be bad indeed, but I tested it and it works out like this: We have:

@media (max-width: 600px) {
  body {
    font-size: 0.9em;

so on mobile, 1em is actually 20px * 0.9 = 18px. Thus:

h2 is 1.5em (by browser default) -> 27px.
If we set h1 to 1.8em -> 32.4px.

(you can confirm these pixel values by looking at the "calculated" tab in the browser's dev tools when having an h1/h2 element selected)

[mb21]

then you have some difficulty distinguishing 5 or 6 heading levels. It can perhaps still be done by not using bold fonts for all of them.

we already do that, because with browser defaults for some reason, h5 and h6 are smaller than 1em, so we set them to 1em.

h4, h5, h6 and paragraph text all are 20px, but:

[jgm]

OK, this sounds reasonable then!

[mb21]

great, I updated the tests...