From 1f7de003ef65fddb2dc6286b069f1e18e5441cfc Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 12 Dec 2017 18:03:28 -0800
Subject: [PATCH] Restrict gallery styles to only pages which need it

The mediawiki.page.gallery.styles module is only loaded
when needed, yet inside hacks.less we load gallery
styles unconditionally.

The hacks.less file is also only meant for css that overrides
template styles, so it didn't belong there anyway.

Change-Id: I4afc91ad7f67ae66544708d25541b3e8dd247873
---
 .../skins.minerva.content.styles/hacks.less     | 11 -----------
 skin.json                                       |  3 +++
 .../mediawiki.page.gallery.styles/tablet.less   | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 skinStyles/mediawiki.page.gallery.styles/tablet.less

diff --git a/resources/skins.minerva.content.styles/hacks.less b/resources/skins.minerva.content.styles/hacks.less
index 331de1c..fccea42 100644
--- a/resources/skins.minerva.content.styles/hacks.less
+++ b/resources/skins.minerva.content.styles/hacks.less
@@ -156,17 +156,6 @@ FIXME: Review all of these hacks to see if they still apply.
 // Hacks to render galleries and multicol tables better on mobile
 @media all and ( max-width: @width-breakpoint-tablet ) {
 
-	// Center images that might be less than the screen width.
-	// Image will appear centered and caption will take up full screen.
-	.gallery {
-		.gallerybox {
-			width: 100% !important;
-			div {
-				width: 100% !important;
-			}
-		}
-	}
-
 	.content {
 		table {
 			// Make {{col-beg}}, {{col-break}}, and {{col-end}} templates display single column tables
diff --git a/skin.json b/skin.json
index 99f52c4..b1b7a24 100644
--- a/skin.json
+++ b/skin.json
@@ -43,6 +43,9 @@
 			"mobile.special.mobileoptions.styles": [
 				"skinStyles/mobile.special.mobileoptions.styles/minerva.less"
 			],
+			"mediawiki.page.gallery.styles": [
+				"skinStyles/mediawiki.page.gallery.styles/tablet.less"
+			],
 			"mediawiki.special.userlogin.common.styles": [
 				"skinStyles/mediawiki.special.userlogin.common.styles/minerva.less"
 			],
diff --git a/skinStyles/mediawiki.page.gallery.styles/tablet.less b/skinStyles/mediawiki.page.gallery.styles/tablet.less
new file mode 100644
index 0000000..7bc3e97
--- /dev/null
+++ b/skinStyles/mediawiki.page.gallery.styles/tablet.less
@@ -0,0 +1,17 @@
+@import 'minerva.variables';
+@import 'minerva.mixins';
+
+// Hacks to render galleries and multicol tables better on mobile
+@media all and ( max-width: @deviceWidthTablet ) {
+
+	// Center images that might be less than the screen width.
+	// Image will appear centered and caption will take up full screen.
+	.gallery {
+		.gallerybox {
+			width: 100% !important;
+			div {
+				width: 100% !important;
+			}
+		}
+	}
+}