diff --git a/src/components/accordion-container/accordion-container.tsx b/src/components/accordion-container/accordion-container.tsx index 3a008d942d0f8eaf19d9f2244ec3db6dcab14fa2..15b79e0465ed7c25e9b03e4b81da84b3bfd10ee5 100644 --- a/src/components/accordion-container/accordion-container.tsx +++ b/src/components/accordion-container/accordion-container.tsx @@ -30,3 +30,19 @@ export class AccordionContainer { ); } } + +/* +Paragraphs that have an option to include an H2-heading: +Harmonise the padding under the enabled H2-heading in all paragraphs. +Where exactly? Under paragraph or under the h2 title? + +No sidebar navigation: +- Mobile 24 px = 1.5rem +- Tablet: 28 px = 1.75rem +- Screens 960-1200 px: 32 px = 2rem +- Screens wider than 1200 px: 40 px = 2.5rem + +With sidebar navigation: +- Screens 1201-1600 px: 32 px = 2rem +- Screens wider than 1600 px: 40 px = 2.5rem +* */ diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 3b62026bd8f9aa03a40bd24d2838ac816fe6d7bb..b459ea9260df69dc40ccb3c076fb4e2a2f319d5d 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -96,21 +96,17 @@ } // 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 +152,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; } @@ -186,17 +177,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; } }