Skip to content

Updating styles for docs site

Suzanne Selhorn requested to merge more-style-updates into master

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

Before After
Each line of bullet text had the same amount of space below it: image Now each bullet is more obviously together: image
Between text and bullets, there was extra space: image Now the space is similar to what it is between paragraphs. image

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 image

Image padding/outlines

Before After
Image has a shadow and lots of padding above and below: image Now has grey outline (same as table color) and just a bit less padding: image

Breadcrumbs

Before After
16px 15px
image image

Alert boxes

New colors:

Before After
Note image image
Tip image image
Caution image image
Danger image image

Closes #701 (closed)

Edited by Suzanne Selhorn

Merge request reports