Typography update to Vector skin

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

See also: I7dcb65c52ec7d8995763e2227731729d19537c08
Change-Id: Ic5ba836364d04b2c3814777b69b5f47fce25292a

diff --git a/skins/vector/components/common.less b/skins/vector/components/common.less
index 8e7fc4d..7927a9e 100644 (file)
--- 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 2af6389..ebfab42 100644 (file)
--- 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;