mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/headings.less
Timo Tijhof 0d61c78f73 Move skins.minerva.content.styles into skins.minerva.base.styles
This could be made even simpler by not using a LESS varialbe for
hacks.less, but loading it conditionally through the moduel def.
But, as a first step we can merge the two as-is.

Given that the subject and target are always referenced together
in page views, there is no need to keep an alias around. However,
I'm keeping it anyway so as to not produce any
`/* {"skins.foo":"missing"} */` appendix to the stylesheet response
for these cached URLs.

Bug: T266361
Change-Id: I8578faab8ca32bd49be90711cbd5e182763b8065
2021-06-21 17:50:37 +00:00

76 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>
@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;
}
}