Updating styles for docs site
This MR addresses the following:
- Fixes issues with spacing (above and below items) in bulleted and ordered lists.
- Updates heading styles (font size, padding, and removes the line from underneath them).
- Moves tier badges to the left so they aren't floating (now that the underlines are gone beneath headings).
- Removes extra padding around images, as well as the shadow. Instead, uses a thin grey line around images.
- Updates alert boxes (notes, tips) and block quotes to have a thin slightly-rounded outline, and updates colors.
- Makes breadcrumbs smaller.
- Makes body text 1px smaller.
Bullet spacing screenshots
Heading styles & tier badges
We went with these styles to try to better differentiate heading levels. (We wanted bigger gaps between each heading level.)
Heading | In this MR | On site before |
---|---|---|
Body | 14px | 15px |
H1 | 34px | 30px |
H2 | 28px | 28px |
H3 | 23px | 24px |
H4 | 18px | 22px |
H5 | 16px black | 20px grey |
H6 | 14px black | 18px grey |
H1 with tier
Before | After |
---|---|
Image padding/outlines
Before | After |
---|---|
Image has a shadow and lots of padding above and below: | Now has grey outline (same as table color) and just a bit less padding: |
Breadcrumbs
Before | After |
---|---|
16px | 15px |
Alert boxes
New colors:
Before | After |
---|---|
Note | |
Tip | |
Caution | |
Danger |
Closes #701 (closed)
Edited by Suzanne Selhorn