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.
foundation · May 18, 2014 · 596d5f9 · 596d5f9
1 parent 3fe76b4
commit 596d5f9
Showing 1 changed file with 14 additions and 6 deletions.
diff --git 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; }