From 596d5f9e0eaa79faa89c821fca1f760884df4f09 Mon Sep 17 00:00:00 2001 From: danielck Date: Sun, 18 May 2014 21:24:53 +0300 Subject: [PATCH] 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. --- scss/foundation/components/_type.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) 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; } -- 2.47.2