From 95c80c4efe8b5360e436a60ff42c1332e7ce240c Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Mon, 27 Apr 2020 11:38:14 -0700
Subject: [PATCH] Refactor: Revert to previous ordering

In I23f18fc5f078da3331cad540bbaf533d348f2108 layout was pulled out
into a separate file and we changed the ordering of our CSS.

This was done with the thinking that media print queries would be
mixed with media screen.

After discussions with Volker, I have been convinced this was a
mistake.

media queries of the same type can be nested so the @media screen
is removed from layout.less and the media query in index.less will
be used instead.

Change-Id: I3aab00c9bcc734ea1ba5a9cf242c6e36ac1cc076
---
 resources/skins.vector.styles/index.less      |   2 +-
 resources/skins.vector.styles/legacy.less     |   2 +-
 .../skins.vector.styles/legacy/layout.less    | 120 +++++++++---------
 3 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less
index e5dd2e2..45589f8 100644
--- a/resources/skins.vector.styles/index.less
+++ b/resources/skins.vector.styles/index.less
@@ -3,6 +3,7 @@
 /* Vector screen styles */
 @media screen {
 	@import 'common.less';
+	@import 'legacy/layout.less';
 	@import 'PersonalMenu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';
@@ -16,6 +17,5 @@
 	@import 'externalLinks.less';
 }
 
-@import 'legacy/layout.less';
 @import 'watchstar-ie8.less';
 @import 'print.less';
diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less
index ca2a4fd..7542f6e 100644
--- a/resources/skins.vector.styles/legacy.less
+++ b/resources/skins.vector.styles/legacy.less
@@ -3,6 +3,7 @@
 /* Vector screen styles */
 @media screen {
 	@import 'common.less';
+	@import 'legacy/layout.less';
 	@import 'PersonalMenu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';
@@ -15,6 +16,5 @@
 	@import 'externalLinks.less';
 }
 
-@import 'legacy/layout.less';
 @import 'watchstar-ie8.less';
 @import 'print.less';
diff --git a/resources/skins.vector.styles/legacy/layout.less b/resources/skins.vector.styles/legacy/layout.less
index 76766cb..f502422 100644
--- a/resources/skins.vector.styles/legacy/layout.less
+++ b/resources/skins.vector.styles/legacy/layout.less
@@ -3,81 +3,79 @@
 
 @import 'mediawiki.mixins.less';
 
-@media screen {
-	.mw-body,
-	#mw-data-after-content {
-		margin-left: 10em;
-	}
+.mw-body,
+#mw-data-after-content {
+	margin-left: 10em;
+}
 
-	.mw-indicators {
-		float: right;
-		z-index: @z-index-indicators;
-	}
+.mw-indicators {
+	float: right;
+	z-index: @z-index-indicators;
+}
 
-	.mw-body-content {
-		position: relative;
-		z-index: @z-index-base;
-	}
+.mw-body-content {
+	position: relative;
+	z-index: @z-index-base;
+}
 
-	/* Head */
-	#mw-page-base {
-		height: 5em;
-	}
+/* Head */
+#mw-page-base {
+	height: 5em;
+}
 
-	#mw-head-base {
-		margin-top: -5em;
-		margin-left: 10em;
-		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;
-	}
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+	position: absolute;
+	top: -9999px;
+}
 
-	#mw-head {
-		position: absolute;
-		top: 0;
-		right: 0;
-		width: 100%;
-	}
+#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;
-	}
+/* 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;
-	}
+#right-navigation {
+	float: right;
+	margin-top: 2.5em;
+}
 
-	#mw-panel {
-		position: absolute;
-		top: 0;
-		width: 10em;
-		left: 0;
-	}
+#mw-panel {
+	position: absolute;
+	top: 0;
+	width: 10em;
+	left: 0;
+}
 
-	#footer, /* FIXME: Remove 2 weeks after deployment. */
-	.mw-footer {
-		margin-left: 10em;
-		margin-top: 0;
-	}
+#footer, /* FIXME: Remove 2 weeks after deployment. */
+.mw-footer {
+	margin-left: 10em;
+	margin-top: 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 ) {
+@media ( min-width: 982px ) {
 	.mw-body,
 	#mw-head-base,
 	#left-navigation,