Merge branch 'NXSTAGE-1249-h2-styles' into 'development'

Nxstage 1249 h2 styles

See merge request julkiset-sivut/design-system-lib!124

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) {