mediawiki-skins-MinervaNeue/resources/skins.minerva.content.styles/headings.less
Volker E ea00e7cb28 Align LESS typography variable naming scheme to WikimediaUI Base
Another step into unified naming scheme, here all typography
variables.

Change-Id: Ic0ee64fc924ccc2b04a6b9d040e2f00dc6c45799
2019-12-05 21:15:33 -08:00

78 lines
1.5 KiB
Plaintext

// Headings in mobile
//
// All headings styled in the content div will be styled like so.
//
// Markup:
// <div class="pre-content">
// <h1 id="section_0">Heading 1</h1>
// </div>
// <div class="content">
// <p>Paragraph of text</p>
// <h2>Heading 2</h2>
// <p>Paragraph of text</p>
// <h3>Heading 3</h3>
// <p>Paragraph of text</p>
// <h4>Heading 4</h4>
// <p>Paragraph of text</p>
// <h5>Heading 2</h5>
// <p>Paragraph of text</p>
// <h6>Heading 2</h6>
// <p>Paragraph of text</p>
// </div>
//
// Styleguide 1.1.
@import 'mediawiki.mixins.less';
@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
@headingLineHeight: 1.3;
h1 {
font-size: @fontSizeH1;
}
h2 {
font-size: @fontSizeH2;
}
h3 {
font-size: @fontSizeH3;
font-weight: bold;
}
h4 {
font-weight: bold;
}
.pre-content h1,
.content h1,
.content h2 {
font-family: @font-family-serif;
}
.pre-content h1,
.content h1,
.content h2,
h3, h4, h5, h6 {
line-height: @headingLineHeight;
word-wrap: break-word;
// This value isn't valid per the specification [0] but fixes the behaviour in
// Google Chrome (45.0.2454.93), and, likely, other browsers too.
//
// [0] https://drafts.csswg.org/css-text-3/#propdef-word-break
word-break: break-word;
}
.content {
// Deliberately not applied to h1
h2, h3, h4, h5, h6 {
padding: @headingMargin 0;
}
// `h3`s need extra `margin-top` after paragraphs, see T219572.
p + h3 {
margin-top: @headingMargin * 3;
}
}