diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 3b62026bd8f9aa03a40bd24d2838ac816fe6d7bb..ee9484491b24922c6ab37dc6b5ebacce26f5f386 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -48,7 +48,7 @@ padding: 1.5rem 0 1rem; @include breakpoint($narrow) { - padding: 2rem 0 1.5rem; + padding: 2rem 0 1rem; } } @@ -78,39 +78,37 @@ &:after { background-color: transparent; - border-bottom: 1px solid var(--grayscale-dark); + border-bottom: 3px solid var(--grayscale-dark); content: ' '; display: flex; height: 2px; width: 100%; margin-left: 0; - margin-bottom: 1rem; + margin-bottom: 0.5rem; position: relative; top: 50%; transform: translateY(-50%); @include breakpoint($narrow) { margin-left: 2rem; + border-bottom: 1px solid var(--grayscale-dark); + margin-bottom: 1rem; } } } // H2 used in landing pages and in Introduction paragraph: caps, bigger font. +// These styles are applied if there is a Sidebar on the page in Desktop sizes h2.hy-heading__introduction, h2.hy-heading__landingsection { - @include font-size(28px, 32px); - letter-spacing: -0.88px; + @include font-size(28px, 28px); + @include font-weight($bold); + letter-spacing: -1px; text-transform: uppercase; @include breakpoint($narrow) { - // > 480px - @include font-size(40px, 40px); - letter-spacing: -1.25px; - } - @include breakpoint($wide) { - // H2 for front page and landing page, Medium size @include font-size(40px, 40px); - letter-spacing: -1.25px; + letter-spacing: -1.3px; } } @@ -156,15 +154,10 @@ h1.hy-heading__introduction { h2.hy-heading__introduction, h2.hy-heading__landingsection { @include breakpoint($extrawide) { - // > 1200px - // ex. Side menu layout on Mid-sized desktop; Medium font @include font-size(40px, 40px); - letter-spacing: -1.25px; + letter-spacing: -1.3px; } - @include breakpoint($xlarge) { - // > 1441px - // ex. Side menu layout on Large desktop; Large font @include font-size(48px, 48px); letter-spacing: -1.6px; } @@ -179,6 +172,20 @@ h1.hy-heading__introduction { padding: 0 0 1rem; } } + + h2.hy-heading__landingsection, + h2.hy-heading__contentsection { + padding-bottom: 1.5rem; + @include breakpoint($narrow) { + padding-bottom: 1.75rem; + } + @include breakpoint($wide) { + padding-bottom: 2rem; + } + @include breakpoint($xlarge) { + padding-bottom: 2.5rem; + } + } } // Applied when there is NO sidebar @@ -186,17 +193,12 @@ h1.hy-heading__introduction { h2.hy-heading__introduction, h2.hy-heading__landingsection { @include breakpoint($extrawide) { - // > 1200px - // ex. Full width layout on Mid-sized desktop; Large font @include font-size(48px, 48px); letter-spacing: -1.6px; } - @include breakpoint($xlarge) { - // > 1400px - // ex. Full width layout on Large desktop; X-large font - @include font-size(54px, 54px); - letter-spacing: -1.8px; + @include font-size(48px, 48px); + letter-spacing: -1.6px; } } @@ -212,6 +214,20 @@ h1.hy-heading__introduction { } } + h2.hy-heading__landingsection, + h2.hy-heading__contentsection { + padding-bottom: 1.5rem; + @include breakpoint($narrow) { + padding-bottom: 1.75rem; + } + @include breakpoint($wide) { + padding-bottom: 2rem; + } + @include breakpoint($extrawide) { + padding-bottom: 2.5rem; + } + } + //Hero h1 h1.hy-heading__introduction { @include breakpoint($extrawide) {