Improve margins

[amotl]

Hi,

because the CSS class "section" is being used by Sphinx itself to render content sections, it should not be used for general layout aspects.

Thus, this patch introduces a separate class w-canvas as an umbrella for the whole content and removes the coupling of the former w-section / section pairing for this very purpose.

With kind regards,
Andreas.

[proddata]

lgtm

[msbt]

@amotl I've added the mobile margin and the one for images, can you check if it still looks good on your devices?

[msbt]

uh ok, let me revisit those changes, there's another .section class I've missed :s

[msbt]

reverted my changes and only pushed the one that actually fixed something, the mobile menu margin-top

[amotl]

Thank you Matthias. So, you already verified that this patch doesn't break anything on the visual level - both on Desktop and Mobile?

[msbt]

@amotl, yes - at least what I could check with the demo template, the one thing that wasn't working as intended got fixed. We could build a beta release and push it to a single docs repo to see how it behaves in a live environment, @norosa did that with several bigger updates

[proddata]

maybe we should add some examples in the demo template.

Those whitespaces just look terrible:

https://crate.io/docs/crate/tutorials/en/latest/install.html#red-hat-or-centos

[msbt]

@proddata if you could show me some more examples of elements that have too much space before/after (and also tell me how big the space is supposed to be), we could fix it with this PR

[msbt]

this is how it would look like if we used margin-bottom: 32px; instead of 64px:

[proddata]

btw ... I think making the h4-headings a bit darker would improve the readability quite a bit.

---

if we want to go totally crazy, we could rework the code-boxes / syntax highlighting 😬

[msbt]

@belringer what colors do you suggest for h4? https://crate.io/docs/crate/tutorials/en/latest/install.html#red-hat-or-centos

[belringer]

@msbt I suggest color #000000 and additionally font-weight: bold;