Fix #7595: Redesign dottydoc theme

[TheElectronWill]

This PR:

• makes the sidebar more narrow, and applies some other tweaks (e.g. color the current page and don't make the sidebar fullscreen on mobile)
• (re)sets the colors to a light palette
• replaces Source Code Pro by Fira Code
• replaces Source Sans Pro by Lato
• removes Lobster (the curvy script font used in the navbar)

Ligatures: Fira Code provides font ligatures, which I've disabled to avoid confusing people. I can enable them if you don't believe they will be a problem.

Text font: Nobody seems to dislike the current text font, but maybe you'd prefer another one?
EDIT: Lato is widely appreciated in the Scala community, and for me it increases readability over the current font. It also works very well with Fira Code.

Theme Comparison

Current theme:

New theme:

Font Choice

Please click on the image to open it in full size. Do you have a preference?

Current theme: Roboto Slab
Proposal (EDIT: applied in this PR): Lato
Alternative: Roboto or something else

Roboto Slab (current):

Lato (proposal - used by scala-lang.org and many Scala projects):

Roboto (used by the Rust Book):

---

I think this addresses most of the issues raised in #7595. Please tell me what you think! All comments are welcome.

[TheElectronWill]

PS: this PR does not change the front page.
However it seems clear that it needs to be redesigned too, we'll have to talk about this.

[odersky]

I can't judge the changes looking at the source code since I don't know enough about the technologies used. Is there are way to pre-view the outcome? If not, I'd say let's just try it and tweak it later if necessary.

[TheElectronWill]

@odersky There are some screenshots in the "details" of the Theme Comparison and Font Choice sections.

If you want to have the full website you can pull and run sbt genDocs (output will be in docs/_site), but the screenshots should be enough for a non-detailed comparison.

[smarter]

LGTM, thanks a lot for taking the time to do this ! Using the same font that scala-lang uses makes sense to me.

[odersky]

I think it's a huge improvement! There's one thing we could still fiddle with: I have the impression the code font is a bit thin. If I compare with, say, the Rust Book, their code fonts seem to have a bit more weight. Can we achieve the same?

[julienrf]

The result looks great, thanks @TheElectronWill!

The blog articles list still looks ugly in my opinion, though:

What do you think of decreasing the font weight?

[TheElectronWill]

I think it's a huge improvement! There's one thing we could still fiddle with: I have the impression the code font is a bit thin. If I compare with, say, the Rust Book, their code fonts seem to have a bit more weight. Can we achieve the same?

I see what you mean. Hopefully I can just increase the font weight property and it will look nice, I'll try that.

The blog articles list still looks ugly in my opinion, though.
What do you think of decreasing the font weight?

I think it's the font size that especially needs some tweaking. The headings are way bigger than the posts' summaries. On mobile the first title takes almost 1/2 of the page!