From c7fcc86c89719f219113fd42bd301f2c880d0719 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 12 Apr 2017 18:31:59 +0200
Subject: [PATCH] more balanced heading sizes

---
 _src/_assets/styles/_page-features.scss       | 2 +-
 _src/_assets/styles/_page-usecases.scss       | 6 +++---
 _src/_assets/styles/bigchain/_newsletter.scss | 2 +-
 _src/_assets/styles/bigchain/_sections.scss   | 2 +-
 _src/_assets/styles/bigchain/_typography.scss | 8 ++++++++
 _src/_assets/styles/bigchain/_variables.scss  | 8 ++++----
 _src/styleguide.md                            | 4 +++-
 7 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/_src/_assets/styles/_page-features.scss b/_src/_assets/styles/_page-features.scss
index 1d648e0..e3c9501 100644
--- a/_src/_assets/styles/_page-features.scss
+++ b/_src/_assets/styles/_page-features.scss
@@ -29,7 +29,7 @@
 }
 
 .feature__title {
-    @extend .h4;
+    @extend .h5;
     color: $brand-main-blue-light;
     margin-top: 0;
     margin-bottom: ($spacer / 3);
diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss
index dd38218..7973848 100644
--- a/_src/_assets/styles/_page-usecases.scss
+++ b/_src/_assets/styles/_page-usecases.scss
@@ -31,7 +31,7 @@
         .icon {
             width: 48px;
             height: 48px;
-            margin-bottom: $spacer / 3;
+            margin-bottom: $spacer / 2;
         }
     }
 
@@ -41,7 +41,7 @@
     }
 
     .section-title {
-        @extend .h3;
+        @extend .h2;
         margin-top: 0;
         margin-bottom: $spacer * 2;
 
@@ -117,7 +117,7 @@
 }
 
 .featuredusecase__title {
-    @extend .h4;
+    @extend .h3;
     margin-top: 0;
     margin-bottom: $spacer;
 
diff --git a/_src/_assets/styles/bigchain/_newsletter.scss b/_src/_assets/styles/bigchain/_newsletter.scss
index 4b9b96f..2851212 100644
--- a/_src/_assets/styles/bigchain/_newsletter.scss
+++ b/_src/_assets/styles/bigchain/_newsletter.scss
@@ -42,7 +42,7 @@
 }
 
 .newsletter__title {
-    @extend .h4;
+    @extend .h5;
     margin-top: 0;
 }
 
diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/bigchain/_sections.scss
index fbc986f..5a4f96a 100644
--- a/_src/_assets/styles/bigchain/_sections.scss
+++ b/_src/_assets/styles/bigchain/_sections.scss
@@ -35,7 +35,7 @@
 }
 
 .section-title {
-    font-size: $font-size-h2;
+    @extend .h2;
     margin-top: 0;
     margin-bottom: ($spacer * 2);
 
diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss
index 8ba3d7e..8edcd6d 100644
--- a/_src/_assets/styles/bigchain/_typography.scss
+++ b/_src/_assets/styles/bigchain/_typography.scss
@@ -131,7 +131,10 @@ h5, .h5,
 h6, .h6 {
     margin-top: $spacer;
     margin-bottom: $spacer;
+}
 
+h5, .h5,
+h6, .h6 {
     &,
     .wf-active &,
     .wf-inactive & {
@@ -179,6 +182,11 @@ strong,
     font-weight: $font-weight-bold;
 }
 
+em,
+.italic {
+    font-style: italic;
+}
+
 .light {
     font-weight: $font-weight-light;
 }
diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss
index 1ca8d25..491a343 100644
--- a/_src/_assets/styles/bigchain/_variables.scss
+++ b/_src/_assets/styles/bigchain/_variables.scss
@@ -51,10 +51,10 @@ $font-size-xs:              0.7rem !default;
 
 $font-size-h1:              2.7rem !default;
 $font-size-h2:              2.3rem !default;
-$font-size-h3:              2rem !default;
-$font-size-h4:              1.3rem !default;
-$font-size-h5:              $font-size-base !default;
-$font-size-h6:              0.85rem !default;
+$font-size-h3:              1.8rem !default;
+$font-size-h4:              1.45rem !default;
+$font-size-h5:              $font-size-lg !default;
+$font-size-h6:              $font-size-base !default;
 
 $line-height:               1.5 !default;
 
diff --git a/_src/styleguide.md b/_src/styleguide.md
index 1214faa..84060bd 100644
--- a/_src/styleguide.md
+++ b/_src/styleguide.md
@@ -56,7 +56,7 @@ The main branding typeface is [**Europa**](http://www.europatype.com/articledeta
 <div class="typeface italic">Europa Regular Italic</div>
 <div class="typeface bold">Europa Bold</div>
 
-The light weight is only used for headlines from a certain size to retain readability on all screens. For the website this means only headings 1 - 3 are using light weight.
+The light weight is only used for headlines from a certain size to retain readability on all screens. For the website this means only headings 1 - 4 are using light weight.
 
 ### Body Copy
 
@@ -98,6 +98,8 @@ Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatib
 
 ##### Heading 5
 
+###### Heading 6
+
 
 ## Lists