Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertical margins/paddings of sections are inconsistent between pages #1360

Open
ariasuni opened this issue Nov 25, 2020 · 0 comments
Open

Vertical margins/paddings of sections are inconsistent between pages #1360

ariasuni opened this issue Nov 25, 2020 · 0 comments
Labels
A-Design UI / UX of the website. C-Bug Something isn't working.

Comments

@ariasuni
Copy link
Contributor

ariasuni commented Nov 25, 2020

Page(s) Affected

All the pages.

What needs to be fixed?

  • Sometimes margins are used, sometimes paddings
  • Sometimes margin/padding are added to the top, to the bottom, or both
  • Sometimes px are used, other times rem

This results in inconsistent margins. Sometimes the rhythm of the section is weird, sometimes there’s a lot of wasted space, sometimes margins are plain wrong on mobile or tablet form factors.

Example:

On the home page:

  • The header “Why Rust?” has no padding/margin-bottom, and each value is a section with 24px of margin, so 24px in total
  • The text has 30px of margin-bottom and there are 60px for the section, for a total of 90px.

But on Learn:

  • The header “Get started with Rust” has 30px of padding-bottom and one the divs containing the text of the first section has 12px of padding-top, for a total of 46px
  • The text of sections have 96px of margin-bottom, and 60px for the section, for a total of 196px (!)

Suggested Improvement

  • Always use padding except if we need margin collapsing
  • Always use padding-bottom for elements inside sections, so that we always know easily the distance between elements
  • Always use rem when possible (preferably classes from Tachyons)

Here’s a proposition:

  • Sections use 3rem on top and 5rem on bottom
  • First header of sections and different elements uses 3rem on bottom
  • List of items (e.g. buttons) or elements of the same sub-section (e.g. a button who follows a paragraph) are spaced by 2rem
  • With paragraphs, 1rem between p and 2rem on the last p to separate it from the next hX

The sizes have been chosen so that the final result looks like the “Build it in Rust” section on the home page. It’s one of the most compact section of the website while still not being busy in my opinion. This should help a lot with the complaints of wasted space (see #412 and #786).

Screenshots

Before:
bildo

After:
bildo

Before:
bildo
After:
bildo

Before:
bildo
After:
bildo

@ariasuni ariasuni added A-Design UI / UX of the website. C-Bug Something isn't working. labels Nov 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Design UI / UX of the website. C-Bug Something isn't working.
Projects
None yet
Development

No branches or pull requests

2 participants
@ariasuni and others