Print mode: Define when to use serif and when to use sans-serif

Additional changes:
* Define variables for fonts and use them
* Group and make clearer where fonts apply

Bug: T169823
Change-Id: I0b7d557048859936f2eb2f646202bc8071bb84ba
This commit is contained in:
jdlrobson 2017-07-25 14:41:00 -07:00 committed by Jdlrobson
parent 204781957d
commit 728e9a13a2
2 changed files with 28 additions and 6 deletions

View File

@ -1,10 +1,30 @@
@pureBlack: #000;
@import 'variables.less';
@media print {
/* These styles retain the existing typography in screen.less
In future (when deploying these styles) we may want to refactor skins.vector.styles
to apply certain styles in print as well as screen mode. */
#toc,
body.vector-experimental-print-styles {
padding: 10px;
font-family: serif;
font-family: @font-family-serif;
}
.printfooter,
#footer,
// Tables, thumbs and lists are sans-serif in print mode (unlike screen mode) because these will render
// more legibly on print media in a smaller font sizes
.thumb,
table,
ol,
dl,
ul,
h3,
h4,
h5,
h6 {
font-family: @font-family-sans-serif;
}
.vector-experimental-print-styles {
@ -32,7 +52,6 @@
h5,
h6 {
margin: 30px 0 0;
font-family: sans-serif;
}
h2,
@ -88,7 +107,6 @@
#toc {
page-break-before: always;
page-break-after: always;
font-family: serif;
background: none;
border: 0;
display: block;

View File

@ -1,16 +1,20 @@
@html-font-size: 100%;
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-sans-serif: sans-serif;
// Page content
// FIXME: Use global variable since Echo and CentralNotice use this variable
@content-border-color: #a7d7f9;
// FIXME: Find an open font that works with this stack and is readable by Windows users
@content-font-family: sans-serif;
@content-font-family: @font-family-sans-serif;
@content-font-color: #222;
@content-font-size: 0.875em;
@pureBlack: #000;
@content-line-height: 1.6;
@content-padding: 1em;
@content-heading-font-size: 1.8em;
@content-heading-font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
@content-heading-font-family: @font-family-serif;
@content-heading-font-family-generic: sans-serif;
@body-background-color: #fff;
@heading-line-height: 1.3;