From 09d0feb28748d12ee794e50833806a502d617b39 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Thu, 5 Dec 2019 21:46:50 -0800
Subject: [PATCH] Add `@font-size-root` var and rename `@font-size-body-mobile`

Following Vector and OOUI in `@font-size-root` and put it in central
file. Removing duplicated code in `html` and `body` achieving the
same thing.
Also renaming `@font-size-body-mobile` to a distinct
`@font-size-body--feature-phone` ending the confusion that it's a
variable only used at `@width-breakpoint-mobile - 1`.

Change-Id: Ie355d015d882f61c813991c3244bfcb67f161791
---
 minerva.less/minerva.variables.less            |  2 ++
 resources/skins.minerva.base.styles/ui.less    |  3 +--
 .../skins.minerva.content.styles/main.less     | 18 +++++++-----------
 3 files changed, 10 insertions(+), 13 deletions(-)

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;
 		}
 	}
 }