From: danielck <dani@dani.fi>
Date: Sun, 18 May 2014 18:24:53 +0000 (+0300)
Subject: Allow controlling heading sizes on small screens
X-Git-Tag: v5.2.3~12^2
X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=refs%2Fpull%2F5170%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Allow controlling heading sizes on small screens

Introduced variables $h1-font-reduction etc to allow customizing font sizes on mobile separately without overriding them in a custom stylesheet.
---

diff --git a/scss/foundation/components/_type.scss b/scss/foundation/components/_type.scss
index adea4f6c7..d1d0f932b 100755
--- a/scss/foundation/components/_type.scss
+++ b/scss/foundation/components/_type.scss
@@ -24,6 +24,14 @@ $h4-font-size: rem-calc(23) !default;
 $h5-font-size: rem-calc(18) !default;
 $h6-font-size: 1rem !default;
 
+// We use these to control header size reduction on small screens
+$h1-font-reduction: rem-calc(10) !default;
+$h2-font-reduction: rem-calc(10) !default;
+$h3-font-reduction: rem-calc(5) !default;
+$h4-font-reduction: rem-calc(5) !default;
+$h5-font-reduction: 0 !default;
+$h6-font-reduction: 0 !default;
+
 // These control how subheaders are styled.
 $subheader-line-height: 1.4 !default;
 $subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;
@@ -253,12 +261,12 @@ $align-class-breakpoints:
       }
     }
 
-    h1 { font-size: $h1-font-size - rem-calc(10); }
-    h2 { font-size: $h2-font-size - rem-calc(10); }
-    h3 { font-size: $h3-font-size - rem-calc(5); }
-    h4 { font-size: $h4-font-size - rem-calc(5); }
-    h5 { font-size: $h5-font-size; }
-    h6 { font-size: $h6-font-size; }
+    h1 { font-size: $h1-font-size - $h1-font-reduction; }
+    h2 { font-size: $h2-font-size - $h2-font-reduction; }
+    h3 { font-size: $h3-font-size - $h3-font-reduction; }
+    h4 { font-size: $h4-font-size - $h4-font-reduction; }
+    h5 { font-size: $h5-font-size - $h5-font-reduction; }
+    h6 { font-size: $h6-font-size - $h6-font-reduction; }
 
     .subheader { @include subheader; }