mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/headings.less
Bartosz Dziewoński 97aed1ad86 Add styles for new heading HTML
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.

See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes

Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: Ib97d034ab533124f06441e788c8608fb274dccf0
2023-11-27 20:03:16 +00:00

117 lines
2.7 KiB
Plaintext

// Headings in mobile
//
// All headings styled in the content div will be styled like so.
//
// Markup:
// <div class="pre-content">
// <h1 id="mw-first-heading">Heading 1</h1>
// </div>
// <div class="content">
// <p>Paragraph of text</p>
// <div class="mw-heading mw-heading2"><h2>Heading 2</h2></div>
// <p>Paragraph of text</p>
// <div class="mw-heading mw-heading3"><h3>Heading 3</h3></div>
// <p>Paragraph of text</p>
// <div class="mw-heading mw-heading4"><h4>Heading 4</h4></div>
// <p>Paragraph of text</p>
// <div class="mw-heading mw-heading5"><h5>Heading 2</h5></div>
// <p>Paragraph of text</p>
// <div class="mw-heading mw-heading6"><h6>Heading 2</h6></div>
// <p>Paragraph of text</p>
// </div>
//
// Alternative markup (pre-T13555):
// <div class="content">
// <p>Paragraph of text</p>
// <h2><span class="mw-headline">Heading 2</span></h2>
// <p>Paragraph of text</p>
// <h3><span class="mw-headline">Heading 3</span></h3>
// <p>Paragraph of text</p>
// <h4><span class="mw-headline">Heading 4</span></h4>
// <p>Paragraph of text</p>
// <h5><span class="mw-headline">Heading 2</span></h5>
// <p>Paragraph of text</p>
// <h6><span class="mw-headline">Heading 2</span></h6>
// <p>Paragraph of text</p>
// </div>
@import 'mediawiki.mixins.less';
@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
.mw-heading1,
h1 {
font-size: @fontSizeH1;
}
.mw-heading2,
h2 {
font-size: @fontSizeH2;
}
.mw-heading3,
h3 {
font-size: @fontSizeH3;
font-weight: bold;
}
.mw-heading4,
h4 {
font-weight: bold;
}
.pre-content h1,
.content .mw-heading1,
.content h1,
.content .mw-heading2,
.content h2 {
font-family: @font-family-serif;
}
.pre-content h1,
.content .mw-heading1,
.content h1,
.content .mw-heading2,
.content h2,
.mw-heading3,
.mw-heading4,
.mw-heading5,
.mw-heading6,
h3, h4, h5, h6 {
line-height: @line-height-xx-small;
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
.mw-heading2,
.mw-heading3,
.mw-heading4,
.mw-heading5,
.mw-heading6,
h2, h3, h4, h5, h6 {
padding: @headingMargin 0;
}
// `h3`s need extra `margin-top` after paragraphs, see T219572.
p + .mw-heading3,
p + h3 {
margin-top: @headingMargin * 3;
}
// Override the styles above for `hN` nested inside `.mw-heading`, as used on wikitext pages.
.mw-heading {
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
line-height: inherit;
padding: 0;
margin: 0;
}
}
}