styles for components with heading type field

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
+* */

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;
     }
   }