From 3d59ba6ad997e9522adbac0f321b06bf32487b5b Mon Sep 17 00:00:00 2001
From: kaldari <kaldari@gmail.com>
Date: Tue, 25 Mar 2014 18:18:17 -0700
Subject: [PATCH] Typography update to Vector skin

See https://www.mediawiki.org/wiki/Typography_refresh

See also: I7dcb65c52ec7d8995763e2227731729d19537c08
Change-Id: Ic5ba836364d04b2c3814777b69b5f47fce25292a
---
 skins/vector/components/common.less | 77 ++++++++++++++++++++++++++---
 skins/vector/variables.less         | 15 +++---
 2 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/skins/vector/components/common.less b/skins/vector/components/common.less
index 8e7fc4d27d..7927a9ee6d 100644
--- a/skins/vector/components/common.less
+++ b/skins/vector/components/common.less
@@ -24,7 +24,6 @@ body {
 }
 body {
 	background-color: @menu-background-color;
-	font-size: @body-font-size;
 }
 
 /* Content */
@@ -40,6 +39,76 @@ div#content {
 	background-color: @body-background-color;
 	color: @content-font-color;
 	direction: ltr;
+
+	.mw-editsection {
+		font-family: @content-font-family;
+	}
+
+	p {
+		line-height: inherit;
+		margin: 0.5em 0;
+	}
+
+	h1,
+	h2,
+	#firstHeading {
+		font-family: @content-heading-font-family;
+		line-height: @heading-line-height;
+		margin-bottom: 0.25em;
+		padding: 0;
+	}
+
+	h1,
+	#firstHeading {
+		font-size: @content-heading-font-size;
+		margin-top: 0;
+	}
+
+	h2 {
+		font-size: 1.5em;
+		margin-top: 1em;
+	}
+
+	h3,
+	h4,
+	h5,
+	h6 {
+		line-height: @content-line-height;
+		margin-top: 0.3em;
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	h3 {
+		font-size: 1.17em;
+	}
+
+	h3,
+	h4 {
+		font-weight: bold;
+	}
+
+	h4,
+	h5,
+	h6 {
+		font-size: 100%; /* (reset) */
+	}
+
+	#toc h2,
+	.toc h2 {
+		font-size: 100%; /* (reset) */
+		font-family: @content-font-family;
+	}
+
+	// Give extra long preformatted content horizontal scroll bars
+	pre {
+		overflow-x: auto;
+	}
+
+	// Prevent citations from interfering with the line-height
+	sup {
+		line-height: 0;
+	}
 }
 
 /* Hide empty portlets */
@@ -61,12 +130,6 @@ pre, .mw-code {
 	font-size: 0.8em;
 }
 
-#firstHeading {
-	padding-top: 0;
-	margin-top: 0;
-	font-size: @content-heading-font-size;
-}
-
 .redirectText {
 	font-size: 140%;
 }
diff --git a/skins/vector/variables.less b/skins/vector/variables.less
index 2af6389086..ebfab427e9 100644
--- a/skins/vector/variables.less
+++ b/skins/vector/variables.less
@@ -1,18 +1,17 @@
 @html-font-size: 1em;
 
-@body-font-size: 1em;
-
 // Page content
 // FIXME: Use global variable since Echo and CentralNotice use this variable
 @content-border-color: #a7d7f9;
-@content-font-family: sans-serif;
-@content-font-color: black;
-@content-font-size: 0.8em;
-@content-line-height: 1.5em;
+@content-font-family: Arimo, "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@content-font-color: #252525;
+@content-font-size: 0.875em;
+@content-line-height: 1.6;
 @content-padding: 1em;
-@content-heading-font-size: 1.6em;
-@content-heading-font-family: sans-serif;
+@content-heading-font-size: 1.8em;
+@content-heading-font-family: "Linux Libertine", Georgia, Times, serif;
 @body-background-color: #fff;
+@heading-line-height: 1.3;
 
 // Navigation
 @menu-background-color: #f6f6f6;
-- 
2.20.1