[modern] Add Header element and styles

- Removed `#mw-head-base`.
- `#mw-page-base` -> `.mw-header-placeholder`.
- `#mw-head` moved down to `@height-header` to make space for new header.
- Content moved down to `@height-header + @height-tabs`.

Added Less variables:
- @height-header: 69px;
- @height-logo-icon: 50px;
- @height-header--inner: 54px;
- @height-tabs: 2.5em;

Style splits:
- Added Header.less
- @height-header: 2.5em;

Bug: T246170
Change-Id: I07280c4c7a2054439153e76359f712281049df0b

includes/templates/index.mustache

@@ -35,8 +35,9 @@
 }}
 
 {{{html-headelement}}}
-<div id="mw-page-base" class="noprint"></div>
-<div id="mw-head-base" class="noprint"></div>
+
+<div id="mw-page-base" class="mw-header-placeholder noprint"></div>
+
 <div id="content" class="mw-body" role="main">
 	<a id="top"></a>
 	{{#html-sitenotice}}
@@ -67,6 +68,10 @@
 	</div>
 </div>
 {{{html-dataAfterContent}}}
+
+<header class="mw-header">
+</header>
+
 <div id="mw-navigation">
 	<h2>{{{html-navigation-heading}}}</h2>
 	<div id="mw-head">

resources/skins.vector.styles/index.less

@@ -1,9 +1,10 @@
 @import '../../variables.less';
+@import 'mediawiki.mixins.less';
 
 /* Vector screen styles */
 @media screen {
 	@import 'common.less';
-	@import 'legacy/layout.less';
+	@import 'layout.less';
 	@import 'PersonalMenu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';

resources/skins.vector.styles/layout.less

@@ -0,0 +1,108 @@
+// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
+// The rules here should only define the layout, not color or typography.
+
+@import '../../variables.less';
+@import 'mediawiki.mixins.less';
+
+// Modern layout variables
+@height-tabs: 2.5em; // Keep in sync with .vectorTabs height
+
+// Header sizes defined in the description of T246170 and comment T246170#5957100
+@padding-horizontal-header: 24px;
+@padding-top-header: 10px;
+@padding-bottom-header: 5px;
+@height-header--inner: 54px;
+@height-logo-icon: 50px;  // Logo sizes per specification in T245190.
+@height-header: @height-header--inner +
+	@padding-top-header + @padding-bottom-header;  // 54px + 10px + 5px = 69px;
+@width-grid-column-one: 11em;
+
+/* Space for header above content */
+.mw-header-placeholder {
+	// Reserve space for the absolute positioned header and tabs.
+	height: @height-header;  // Pixels.
+	padding-bottom: @height-tabs;  // Different unit: em.
+}
+
+/* Header layout */
+.mw-header {
+	position: absolute;
+	z-index: @z-index-header;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: @height-header--inner;
+
+	// Padding is outside the sizing box (content-box).
+	padding: @padding-top-header @padding-horizontal-header @padding-bottom-header;
+
+	// Vertical centering of header elements (IE>=11), requires flex.
+	// Non-flex fallback for IE<=9: float rule on the child elements.
+	.flex-display();
+	// https://caniuse.com/#search=align-items
+	align-items: center;
+}
+
+/* Main column */
+.mw-body,
+#mw-data-after-content,
+#left-navigation,
+#footer, /* FIXME: Remove 2 weeks after deployment. */
+.mw-footer {
+	margin-left: @width-grid-column-one;
+}
+
+/* Content */
+.mw-indicators {
+	float: right;
+	z-index: @z-index-indicators;
+}
+
+.mw-body-content {
+	position: relative;
+	z-index: @z-index-base;
+}
+
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+	position: absolute;
+	top: -9999px;
+}
+
+/* Tabs */
+#mw-head {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100%;
+}
+
+/* Navigation Containers */
+#left-navigation {
+	float: left;
+	margin-top: @height-header;
+	/* When right nav would overlap left nav, it's placed below it
+	(normal CSS floats behavior). This rule ensures that no empty space
+	is shown between them due to right nav's margin-top. Page layout
+	is still broken, but at least the nav overlaps only the page title
+	instead of half the content. */
+	margin-bottom: -@height-header;
+}
+
+#right-navigation {
+	float: right;
+	margin-top: @height-header;
+}
+
+#mw-panel {
+	position: absolute;
+	z-index: @z-index-sidebar;
+	top: 0;
+	width: @width-grid-column-one;
+	left: 0;
+}
+
+#footer, /* FIXME: Remove 2 weeks after deployment. */
+.mw-footer {
+	margin-top: 0;
+}

variables.less

@@ -115,6 +115,8 @@
 // See skinStyles/jquery.ui/jquery.ui.datepicker.css.
 // @z-index-ui-datepicker-cover: -1;
 @z-index-base: 0;
+@z-index-header: 1;
+@z-index-sidebar: 1;
 @z-index-menu-checkbox: 1;
 @z-index-search-button: 1;
 // Ensure that this is displayed on top of .mw-body-content and clickable.