Jdlrobson has submitted this change and it was merged.
Change subject: Typography updates from typography refresh meeting
......................................................................
Typography updates from typography refresh meeting
* Clean up blockquote display
* Increase line-height for content
* TOC redesign
* hatnote redesign
* Remove thumbnail borders
* Tweak thumbnail captions
* Optimize header font display for Linux:
After doing some research and consulting with Linux Wikipedia users,
it was determined that the way to get the best font rendering in
Linux (i.e. the closest to that desired by the designers) was to
utilize the font fallback mappings in Linux, rather than trying to
specify specific free fonts. This change was the consensus decision
of the refresh meeting, but may be revisited in the future.
* Set article title to 1.8em
Note that infobox changes are not part of this changeset, but will
be in a follow-up change.
Change-Id: I8259c92c6b71ea4be04250ad53b248e2efe7870e
---
M less/screen-beta.less
M less/thumbnails.less
M less/variables-beta.less
3 files changed, 64 insertions(+), 19 deletions(-)
Approvals:
Jdlrobson: Verified; Looks good to me, approved
diff --git a/less/screen-beta.less b/less/screen-beta.less
index 47032ee..7818ca4 100644
--- a/less/screen-beta.less
+++ b/less/screen-beta.less
@@ -1,10 +1,3 @@
-blockquote {
- font-family: @content-heading-font-family;
- font-size: 1.2em;
- line-height: 1.6em;
-}
-
-
.action-view {
#bodyContent {
max-width: 715px;
@@ -19,7 +12,7 @@
/* Content */
div#content {
- line-height: 1.5em;
+ line-height: @content-line-height;
.mw-editsection {
font-family: @content-font-family;
}
@@ -31,7 +24,7 @@
h1,
#firstHeading {
font-family: @content-heading-font-family;
- font-size: 1.833em;
+ font-size: 1.8em;
line-height: 30pt;
padding: 0;
margin-bottom: 4pt;
@@ -86,9 +79,56 @@
overflow-x: auto;
}
+ blockquote {
+ font-family: @content-heading-font-family;
+ font-size: 1.1em;
+ line-height: @content-line-height;
+ margin: 1em 0;
+ padding: 0 35px 0 40px;
+ position: relative;
+
+ &:before {
+ content: open-quote;
+ font-size: 3em;
+ line-height: 1;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ &:after{
+ content: close-quote;
+ font-size: 3em;
+ line-height: 1;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+ }
+
+ // Table of contents
+ #toc {
+ padding: 0 1.4em;
+ margin: 0 1em 0 0;
+ font-size: 100%;
+ background-color: transparent;
+ border: none;
+ border-left: 5px solid #e0e0e0;
+ color: #333;
+ }
+
+ #toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
+ text-align: left;
+ }
+
+ .tocnumber {
+ display: none;
+ }
+
// FIXME: this is hacky
#toc h2 {
font-size: 100%;
+ font-family: @content-font-family;
}
sup {
@@ -104,8 +144,6 @@
padding-right: 13px;
}
-// Table of contents
-#toc,
.mw-warning {
border: 1px solid #E0E0E0;
}
@@ -114,9 +152,10 @@
// Should not be ported to core.
.rellink,
.dablink {
- line-height: 1.5em;
- margin-bottom: 0;
- padding: 3px 0px 0px 0px;
+ font-style: italic;
+ font-size: 90%;
+ line-height: 1.5;
+ margin: 0 0 .5em 0;
+ padding: 0 0 0 1.6em;
color: #333;
}
-
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 7547d92..7bc0369 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -17,8 +17,9 @@
.thumbcaption {
line-height: 1.5em;
+ font-size: .85em;
// Override html .thumbcaption in skins.common.interface.
!important makes me sad.
- padding: 3px 0px 0px 0px !important;
+ padding: 3px 0 0 0 !important;
color: #333;
}
@@ -26,4 +27,8 @@
.magnify {
display: none;
}
+
+ .thumbimage {
+ border: none;
+ }
}
diff --git a/less/variables-beta.less b/less/variables-beta.less
index 7679109..70442e1 100644
--- a/less/variables-beta.less
+++ b/less/variables-beta.less
@@ -3,10 +3,11 @@
@body-font-size: inherit;
// Page content
-@content-font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
+@content-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@content-font-color: #252525;
@content-font-size: 0.875em;
-@content-line-height: inherit;
+@content-line-height: 1.6;
@content-padding: 1em;
@content-heading-font-size: 1.6em;
-@content-heading-font-family: "DejaVu Serif", Georgia, serif;
+// Times will map to an appropriate free font in Linux
+@content-heading-font-family: Georgia, Times, serif;
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/108155
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8259c92c6b71ea4be04250ad53b248e2efe7870e
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/VectorBeta
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
