Layout is separated from "common" CSS

This unblocks work on the header which will rewrite the layout
code.

This corresponds to a 0.06kb increase in CSS size, which is zero
after gzipping.

Bug: T249073
Change-Id: I23f18fc5f078da3331cad540bbaf533d348f2108

resources/skins.vector.styles/Sidebar.less

@@ -17,10 +17,6 @@
 
 /* Panel */
 #mw-panel {
-	position: absolute;
-	top: 0;
-	width: 10em;
-	left: 0;
 	font-size: @font-size-nav-main;
 
 	/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */

resources/skins.vector.styles/common.less

@@ -33,11 +33,6 @@ body {
 	direction: ltr;
 }
 
-.mw-body,
-#mw-data-after-content {
-	margin-left: 10em;
-}
-
 .mw-body {
 	/* Border on top, left, and bottom side */
 	border: @border-width-base @border-style-base @border-color-content;
@@ -81,11 +76,9 @@ body {
 	}
 
 	.mw-indicators {
-		float: right;
 		font-size: @font-size-base;
 		line-height: @line-height-base;
 		position: relative;
-		z-index: @z-index-indicators;
 	}
 
 	.mw-indicator {
@@ -94,13 +87,11 @@ body {
 }
 
 .mw-body-content {
-	position: relative;
 	font-size: @font-size-base;
 	// Support IE 9-11, Trident cuts values 2 digits after decimal point.
 	// `calc` enables to set correct calculation in place again. See T102364.
 	font-size: calc( 1em ~'*' unit( @font-size-base ) );
 	line-height: @line-height-base;
-	z-index: @z-index-base;
 
 	p {
 		margin: 0.5em 0;
@@ -179,43 +170,5 @@ pre,
 /* Head */
 #mw-page-base {
 	background-position: bottom left;
-	height: 5em;
 	.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
 }
-
-#mw-head-base {
-	margin-top: -5em;
-	margin-left: 10em;
-	height: 5em;
-}
-
-/* Hide, but keep accessible for screen-readers */
-#mw-navigation h2 {
-	position: absolute;
-	top: -9999px;
-}
-
-#mw-head {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 100%;
-}
-
-/* Navigation Containers */
-#left-navigation {
-	float: left;
-	margin-left: 10em;
-	margin-top: 2.5em;
-	/* 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: -2.5em;
-}
-
-#right-navigation {
-	float: right;
-	margin-top: 2.5em;
-}

resources/skins.vector.styles/hd.less

@@ -1,31 +0,0 @@
-/* Vector screen styles for high definition displays. These rules cross the above components and are
-   grouped together here only for the sake of the media query common to each. */
-@media screen and ( min-width: 982px ) {
-	.mw-body,
-	#mw-head-base,
-	#left-navigation,
-	#mw-data-after-content,
-	#footer {
-		margin-left: 11em;
-	}
-
-	.mw-body {
-		padding: 1.25em 1.5em 1.5em 1.5em;
-	}
-
-	#footer {
-		padding: 1.25em;
-	}
-
-	#mw-panel {
-		padding-left: 0.5em;
-	}
-
-	#p-search {
-		margin-right: 1em;
-	}
-
-	#p-personal {
-		right: 1em;
-	}
-}

resources/skins.vector.styles/index.less

@@ -15,6 +15,6 @@
 	@import 'externalLinks.less';
 }
 
+@import 'layout.less';
 @import 'watchstar-ie8.less';
-@import 'hd.less';
 @import 'print.less';

resources/skins.vector.styles/layout.less

@@ -0,0 +1,102 @@
+// 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 'mediawiki.mixins.less';
+
+@media screen {
+	.mw-body,
+	#mw-data-after-content {
+		margin-left: 10em;
+	}
+
+	.mw-indicators {
+		float: right;
+		z-index: @z-index-indicators;
+	}
+
+	.mw-body-content {
+		position: relative;
+		z-index: @z-index-base;
+	}
+
+	/* Head */
+	#mw-page-base {
+		height: 5em;
+	}
+
+	#mw-head-base {
+		margin-top: -5em;
+		margin-left: 10em;
+		height: 5em;
+	}
+
+	/* Hide, but keep accessible for screen-readers */
+	#mw-navigation h2 {
+		position: absolute;
+		top: -9999px;
+	}
+
+	#mw-head {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 100%;
+	}
+
+	/* Navigation Containers */
+	#left-navigation {
+		float: left;
+		margin-left: 10em;
+		margin-top: 2.5em;
+		/* 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: -2.5em;
+	}
+
+	#right-navigation {
+		float: right;
+		margin-top: 2.5em;
+	}
+
+	#mw-panel {
+		position: absolute;
+		top: 0;
+		width: 10em;
+		left: 0;
+	}
+}
+
+/* Vector screen styles for high definition displays. These rules cross the above components and are
+   grouped together here only for the sake of the media query common to each. */
+@media screen and ( min-width: 982px ) {
+	.mw-body,
+	#mw-head-base,
+	#left-navigation,
+	#mw-data-after-content,
+	#footer {
+		margin-left: 11em;
+	}
+
+	.mw-body {
+		padding: 1.25em 1.5em 1.5em 1.5em;
+	}
+
+	#footer {
+		padding: 1.25em;
+	}
+
+	#mw-panel {
+		padding-left: 0.5em;
+	}
+
+	#p-search {
+		margin-right: 1em;
+	}
+
+	#p-personal {
+		right: 1em;
+	}
+}

resources/skins.vector.styles/legacy.less

@@ -14,6 +14,6 @@
 	@import 'externalLinks.less';
 }
 
+@import 'layout.less';
 @import 'watchstar-ie8.less';
-@import 'hd.less';
 @import 'print.less';