[less] Merge 'content.less' and 'typography.less'

This separation introduced in I8dbc29b7a19f7f doesn't work as well
as expected. All but strictly `.mw-jump-link` rule are typographic
rules.
In the current mish-mash of when to apply typographic styles only to
article content (`.mw-body`, `mw-body-content`, `.mw-parser-output`,
`#mw-data-after-content`?) inherited from core, it makes looking up
and finding issues between typographic styles harder, and leads to
unnecessary complexity instead of clean separation of concerns.
This question surfaced in where would link styles belong originated in
T213778.

Change-Id: I521185d505d8688f076dd09acbedb22e801f772e

resources/skins.vector.styles/common/content.less

@@ -1,81 +0,0 @@
-/*
- * Any rules which should not be flipped automatically in right-to-left situations should be
- * prepended with @noflip in a comment block.
- *
- */
-
-ul {
-	// `list-style-image` sits on `ul` as it inherits and we don't need to worry about `ol`.
-	// No need for PNG fallback. Fallback is browser default (a smaller, also black, circle).
-	.list-style-image( 'images/bullet-icon.svg' );
-}
-
-pre,
-.mw-code {
-	line-height: @line-height-code;
-}
-
-.mw-body-content {
-	p {
-		margin: 0.5em 0;
-	}
-
-	h1 {
-		margin-top: 1em;
-	}
-
-	h2 {
-		margin-top: 1em;
-		font-size: @font-size-heading-2;
-	}
-
-	h3,
-	h4,
-	h5,
-	h6 {
-		margin-top: 0.3em;
-		margin-bottom: 0;
-		padding-bottom: 0;
-		line-height: @line-height-base;
-	}
-
-	h3 {
-		font-size: @font-size-heading-3;
-	}
-
-	h3,
-	h4 {
-		font-weight: bold;
-	}
-
-	h4,
-	h5,
-	h6 {
-		font-size: @font-size-reset; // Reset.
-	}
-
-	.toc h2 {
-		font-family: @font-family-sans;
-		font-size: @font-size-reset; // Reset.
-	}
-}
-
-/* Allow edit sections outside of mw-body-content (T160269) */
-.mw-editsection,
-.mw-editsection-like {
-	font-family: @font-family-sans;
-}
-
-.mw-jump-link:not( :focus ) {
-	.mixin-screen-reader-text;
-}
-
-// External links
-.mw-parser-output {
-	.external {
-		background-position: center right;
-		background-repeat: no-repeat;
-		.background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' );
-		padding-right: 13px;
-	}
-}

resources/skins.vector.styles/common/typography.less

@@ -1,3 +1,10 @@
+/*
+ * Vector's common typography rules,
+ * including whitespace with `margin` & `padding` and list bullets
+ * as part of typographic styles. Iconography wouldn't belong here.
+ *
+ */
+
 @import '../../../variables.less';
 
 html {
@@ -9,17 +16,36 @@ body {
 	font-family: @font-family-sans;
 }
 
-.mw-body-content {
-	font-size: @font-size-base;
-	// Support IE 9-11, Trident cuts values 2 digits after decimal point.
-	// `calc` enables to set correct calculation in place again. See T102364.
-	font-size: calc( 1em ~'*' unit( @font-size-base ) );
-	line-height: @line-height-base;
+ul {
+	// `list-style-image` sits on `ul` as it inherits and we don't need to worry about `ol`.
+	// No need for PNG fallback. Fallback is browser default (a smaller, also black, circle).
+	.list-style-image( 'images/bullet-icon.svg' );
 }
 
+pre,
+.mw-code {
+	line-height: @line-height-code;
+}
+
+.mw-jump-link:not( :focus ) {
+	.mixin-screen-reader-text;
+}
+
+/* Personal Menu */
+#p-personal li {
+	font-size: @font-size-nav-personal;
+}
+
+/* Allow edit sections outside of mw-body-content (T160269) */
+.mw-editsection,
+.mw-editsection-like {
+	font-family: @font-family-sans;
+}
+
+/* Main content area, including siteNotice, indicators, firstHeading and `.mw-body-content`. */
 .mw-body {
-	// h1's can exist outside of mw-body-content so some heading styles
-	// need to be defined in mw-body as well
+	// h1's can exist outside of `.mw-body-content` so some heading styles
+	// therefore need to be defined in `.mw-body` as well.
 	& h1,
 	&-content h1,
 	&-content h2 {
@@ -49,6 +75,63 @@ body {
 	}
 }
 
-#p-personal li {
-	font-size: @font-size-nav-personal;
+.mw-body-content {
+	font-size: @font-size-base;
+	// Support IE 9-11, Trident cuts values 2 digits after decimal point.
+	// `calc` enables to set correct calculation in place again. See T102364.
+	font-size: calc( 1em ~'*' unit( @font-size-base ) );
+	line-height: @line-height-base;
+
+	h1 {
+		margin-top: 1em;
+	}
+
+	h2 {
+		margin-top: 1em;
+		font-size: @font-size-heading-2;
+	}
+
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-top: 0.3em;
+		margin-bottom: 0;
+		padding-bottom: 0;
+		line-height: @line-height-base;
+	}
+
+	h3 {
+		font-size: @font-size-heading-3;
+	}
+
+	h3,
+	h4 {
+		font-weight: bold;
+	}
+
+	h4,
+	h5,
+	h6 {
+		font-size: @font-size-reset; // Reset.
+	}
+
+	.toc h2 {
+		font-family: @font-family-sans;
+		font-size: @font-size-reset; // Reset.
+	}
+
+	p {
+		margin: 0.5em 0;
+	}
+}
+
+// External links
+.mw-parser-output {
+	.external {
+		background-position: center right;
+		background-repeat: no-repeat;
+		.background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' );
+		padding-right: 13px;
+	}
 }

resources/skins.vector.styles/skin-legacy.less

@@ -6,7 +6,6 @@
 @media screen {
 	@import 'common/normalize.less';
 	@import 'legacy/layout.less';
-	@import 'common/content.less';
 	@import 'common/typography.less';
 
 	// Components

resources/skins.vector.styles/skin.less

@@ -6,7 +6,6 @@
 @media screen {
 	@import 'common/normalize.less';
 	@import 'layout.less';
-	@import 'common/content.less';
 	@import 'common/typography.less';
 
 	// Components