diff --git a/_sass/base.scss b/_sass/base.scss index 25f8b7d..ac9c055 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -31,17 +31,13 @@ dl, pre, address, blockquote, -.table-wrapper { - margin-top: 0.5em; -} - table, -p, div, hr, form, fieldset, -noscript { +noscript +.table-wrapper { margin-top: 0; } @@ -51,14 +47,16 @@ h3, h4, h5, h6 { - margin-top: 1.5em; - margin-bottom: 0.25em; + margin-top: 0; + margin-bottom: 1em; font-weight: 500; line-height: $body-heading-line-height; color: $body-heading-color; + } p { + margin-top: 1em; margin-bottom: 1em; } diff --git a/_sass/code.scss b/_sass/code.scss index 97ce8f4..979b314 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -15,6 +15,7 @@ pre.highlight, figure.highlight { padding: $sp-3; margin-bottom: 0; + margin-top: 0; -webkit-overflow-scrolling: touch; background-color: $code-background-color; diff --git a/_sass/content.scss b/_sass/content.scss index 2dd65ba..7ab23d8 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -8,6 +8,16 @@ .page-content { line-height: $content-line-height; + ol, + ul, + dl, + pre, + address, + blockquote, + .table-wrapper { + margin-top: 0.5em; + } + a { overflow: hidden; text-overflow: ellipsis; @@ -19,6 +29,12 @@ padding-left: 1.5em; } + li { + .highlight { + margin-top: $sp-1; + } + } + ol { list-style-type: none; counter-reset: step-counter; @@ -156,15 +172,22 @@ h5, h6 { position: relative; + margin-top: 1.5em; + margin-bottom: 0.25em; &:first-child { + margin-top: $sp-2; + } + + + table, + + .table-wrapper, + + .code-example, + + .highlighter-rouge { + margin-top: 1em; + } + + + p { margin-top: 0; } } - + table, - .table-wrapper, - .code-example, - .highlighter-rouge { - margin-top: 1em; - } } diff --git a/_sass/typography.scss b/_sass/typography.scss index 91325e2..3749d43 100644 --- a/_sass/typography.scss +++ b/_sass/typography.scss @@ -39,12 +39,6 @@ h6, color: $grey-dk-200; } -li { - .highlight { - margin-top: $sp-2; - } -} - .text-small { @include fs-2; } diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md index 06ef9c3..c2f5eb3 100644 --- a/docs/utilities/layout.md +++ b/docs/utilities/layout.md @@ -79,7 +79,7 @@ This paragraph will have 2rem/32px of padding on the right and left at all scree | `.flex-justify-between` | `justify-content: space-between` | | `.flex-justify-around` | `justify-content: space-around` | -Note any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it. +_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._ ## Vertical Alignment