diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less index 253b3cc51..9c30a30c2 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -16,6 +16,8 @@ @fontFamilyBase: @fontFamilySans; @font-size-browser: 16; // Assumed browser default of `16px`. +@font-size-root: 100%; +@font-size-root--feature-phone: 0.8 * @font-size-root; @font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default. @font-size-minerva-smallest: unit( 13 / @font-size-browser, em ); // Equals `13px` at `16px` browser default. @tocFontSize: @font-size-minerva-small; diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index 18c713c40..a755e660f 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -10,8 +10,7 @@ body { } html { - // FIXME: Still from Eric Meyer's reset, that should be better fine-grained. - font-size: 100%; + font-size: @font-size-root; // Support Safari: Prevent font scaling in landscape -webkit-text-size-adjust: none; } diff --git a/resources/skins.minerva.content.styles/main.less b/resources/skins.minerva.content.styles/main.less index b61878d73..4463c2b5a 100644 --- a/resources/skins.minerva.content.styles/main.less +++ b/resources/skins.minerva.content.styles/main.less @@ -9,11 +9,8 @@ // // Styleguide 1. -@font-size-body: 100%; - body { font-family: @fontFamilyBase; - font-size: @font-size-body; line-height: 1.4; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 ); overflow-y: scroll; @@ -37,11 +34,10 @@ body { } } -@font-size-body-mobile: 0.8 * @font-size-body; - +// Feature phones < 320px viewport receive smaller font. @media all and ( max-width: @width-breakpoint-mobile - 1 ) { - body { - font-size: @font-size-body-mobile; + html { + font-size: @font-size-root--feature-phone; } .content { @@ -63,19 +59,19 @@ body { } // Most iOS browsers' default font size is 16px but Dynamic Type's default - // font size is 17px. We need to scale down @font-size-body and - // @font-size-body-mobile by this ratio in order to make them relative to these + // font size is 17px. We need to scale down @font-size-root and + // @font-size-root--feature-phone by this ratio in order to make them relative to these // browsers' defaults again. By doing this, the default Dynamic Type text size // will appear identical to the browser's default text size. @dynamicTypeScalingFactor: 16 / 17; body { - font-size: @font-size-body * @dynamicTypeScalingFactor; + font-size: @font-size-root * @dynamicTypeScalingFactor; } @media all and ( max-width: @width-breakpoint-mobile - 1 ) { body { - font-size: @font-size-body-mobile * @dynamicTypeScalingFactor; + font-size: @font-size-root--feature-phone * @dynamicTypeScalingFactor; } } }