[HTML] Refactor Content header templates

Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators

This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
  including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
  `<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.

This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.

The clearfix ensures that the height between the page title and content is consistent across all pages.

Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414

includes/templates/ContentHeader.mustache

@@ -0,0 +1,17 @@
+{{!-
+    Content Header - Main <H1> title for all pages, with either the indicators or language selector.
+    When language button is visible, indicators are placed in the ContentSubheader.mustache template instead.
+}}
+<header class="mw-body-header">
+    {{#is-language-in-content-top}}
+        {{#data-portlets.data-languages}}
+            {{>Menu}}
+        {{/data-portlets.data-languages}}
+    {{/is-language-in-content-top}}
+
+    {{^is-language-in-content-top}}
+        {{>Indicators}}
+    {{/is-language-in-content-top}}
+
+    {{{html-title-heading}}}
+</header>

includes/templates/ContentSubheader.mustache

@@ -0,0 +1,12 @@
+{{!-
+    Content Subheader - Placed below the content header on all pages.
+    Contains the indicators (if the language button is beside the title)
+    qnd tagline, which is only rendered on article page.
+}}
+<div class="mw-body-subheader">
+    {{#is-language-in-content-top}}
+        {{>Indicators}}
+    {{/is-language-in-content-top}}
+
+    {{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
+</div>

includes/templates/skin.mustache

@@ -54,28 +54,11 @@
 	<a id="top"></a>
 	<div id="siteNotice">{{{html-site-notice}}}</div>
 
-	{{^is-language-in-content}}
-	{{>Indicators}}
-	{{{html-title-heading}}}
-	{{/is-language-in-content}}
+	{{>ContentHeader}}
 
-	{{#is-language-in-content}}
-	<header class="mw-body-header">
-		{{#is-language-in-content-top}}
-			{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
-		{{/is-language-in-content-top}}
-		{{{html-title-heading}}}
-		{{>Indicators}}
-		{{#is-article}}
-			<div id="siteSub" class="noprint">{{msg-tagline}}</div>
-		{{/is-article}}
-	</header>
-	{{/is-language-in-content}}
+	{{>ContentSubheader}}
 
 	<div id="bodyContent" class="vector-body">
-		{{^is-language-in-content}}
-			{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
-		{{/is-language-in-content}}
 		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
 		<div id="contentSub2">{{{html-undelete-link}}}</div>
 		{{{html-user-message}}}

resources/skins.vector.styles/layouts/screen.less

@@ -120,6 +120,14 @@ body {
 	z-index: @z-index-base;
 }
 
+// Prevents margin collapsing on first element (typically a <p>) of content.
+// Custom because .mixin-clearfix() automatically appends :after to the selector
+// and doesn't prevent margin collapsing.
+.vector-body:before {
+	content: '';
+	display: table;
+}
+
 /* Navigation Containers */
 .mw-article-toolbar-container {
 	// Clear the floats on #left-navigation and #right-navigation.