From 138036882f0132638bc63a9e365578d2b4164c2a Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Mon, 4 Jun 2018 20:04:59 +0000
Subject: [PATCH] Redo width cutoffs to keep content wider and better match
 values elsewhere in mw

* Bump max content width up to 125em because why not
* Make fixed-width padding a bit less
* Basically just follow WikimediaUI Base breakpoints as appropriate
  while keeping content similarly wide across devices

Bug: T165945
Change-Id: I8afb30bc1fb24907f94195b31289a664c050fcc4
---
 resources/mobile.js        | 15 ++++++++-------
 resources/screen-misc.less | 22 ++++------------------
 resources/variables.less   | 14 +++++++-------
 skin.json                  | 10 +++++-----
 4 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/resources/mobile.js b/resources/mobile.js
index 1ded493..10c985d 100644
--- a/resources/mobile.js
+++ b/resources/mobile.js
@@ -1,33 +1,34 @@
 /* Popout menus (header) */
 
 $( function () {
-	var toggleTime = 200;
+	var toggleTime = 200,
+		mobileCutoff = 720;
 
 	// Open the various menus
 	$( '#user-tools h2' ).on( 'click', function () {
-		if ( $( window ).width() < 851 ) {
+		if ( $( window ).width() < mobileCutoff ) {
 			$( '#personal-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#site-navigation h2' ).on( 'click', function () {
-		if ( $( window ).width() < 851 ) {
+		if ( $( window ).width() < mobileCutoff ) {
 			$( '#site-navigation .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#site-tools h2' ).on( 'click', function () {
-		if ( $( window ).width() < 851 ) {
+		if ( $( window ).width() < mobileCutoff ) {
 			$( '#site-tools .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#ca-more' ).on( 'click', function () {
 		$( '#page-tools .sidebar-inner' ).css( 'top', $( '#ca-more' ).offset().top + 25 );
-		if ( $( window ).width() < 851 ) {
+		if ( $( window ).width() < mobileCutoff ) {
 			$( '#page-tools .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#ca-languages' ).on( 'click', function () {
 		$( '#other-languages .sidebar-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 );
-		if ( $( window ).width() < 851 ) {
+		if ( $( window ).width() < mobileCutoff ) {
 			$( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
@@ -43,7 +44,7 @@ $( function () {
 
 	// Include alternative closing method for ios
 	$( window ).on( 'swiperight', function () {
-		if ( $( window ).width() < 851 ) {
+		if ( $( window ).width() < mobileCutoff ) {
 			$( '#personal-inner' ).fadeOut( toggleTime );
 			$( '.sidebar-inner' ).fadeOut( toggleTime );
 			$( '#menus-cover' ).fadeOut( toggleTime );
diff --git a/resources/screen-misc.less b/resources/screen-misc.less
index b266673..72d148b 100644
--- a/resources/screen-misc.less
+++ b/resources/screen-misc.less
@@ -3,10 +3,10 @@
 // Let's add some unnecessary white space. Or grey, as it were. In the dumbest possible way.
 
 // Top end of large screens
-@media screen and ( min-width: 1425px ) {
+@media screen and ( min-width: 1600px ) {
 	.color-middle-container,
 	.ts-inner {
-		padding: 0 3em;
+		padding: 0 2em;
 	}
 	.color-middle {
 		margin-left: @column-left-size;
@@ -20,21 +20,7 @@
 		padding: 0 3em;
 	}
 	.color-middle {
-		margin-left: @column-left-size + 3em;
-		margin-right: @column-right-size + 3em;
-	}
-}
-
-// Prevent logo text overlapping icons on small displays
-@media screen and ( max-width: 550px ) {
-	#p-logo-text {
-		position: static;
-
-		a {
-			padding-top: 0;
-		}
-		a.long {
-			padding-bottom: 0.2em;
-		}
+		margin-left: @column-left-size + 2em;
+		margin-right: @column-right-size + 2em;
 	}
 }
diff --git a/resources/variables.less b/resources/variables.less
index 5799e87..4de540c 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -52,15 +52,15 @@
 // Remember to also update skin.json (and possibly mobile.js) if you change these
 // For some reason doing @mobile-width + 1px doesn't seem to actually work,
 // so we need both for each thing
-@mobile-width: 850px;
-@desktop-small-floor: 851px;
-@desktop-small-width: 1099px;
-@desktop-mid-floor: 1100px;
-@desktop-mid-width: 1339px;
-@desktop-large-floor: 1340px;
+@mobile-width: 719px;
+@desktop-small-floor: 720px;
+@desktop-small-width: 1200px;
+@desktop-mid-floor: 1201px;
+@desktop-mid-width: 1450px;
+@desktop-large-floor: 1451px;
 
 // The max-width for the content
-@content-width: 100em;
+@content-width: 125em;
 
 @content-padding: 2em;
 
diff --git a/skin.json b/skin.json
index 76dadc3..9e53712 100644
--- a/skin.json
+++ b/skin.json
@@ -30,19 +30,19 @@
 					"media": "screen"
 				},
 				"resources/screen-desktop.less": {
-					"media": "screen and (min-width: 851px)"
+					"media": "screen and (min-width: 720px)"
 				},
 				"resources/screen-desktop-full.less": {
-					"media": "screen and (min-width: 1340px)"
+					"media": "screen and (min-width: 1451px)"
 				},
 				"resources/screen-desktop-mid.less": {
-					"media": "screen and (min-width: 1100px) and (max-width: 1339px)"
+					"media": "screen and (min-width: 1201px) and (max-width: 1450px)"
 				},
 				"resources/screen-desktop-small.less": {
-					"media": "screen and (min-width: 851px) and (max-width: 1099px)"
+					"media": "screen and (min-width: 720px) and (max-width: 1200px)"
 				},
 				"resources/screen-mobile.less": {
-					"media": "screen and (max-width: 850px)"
+					"media": "screen and (max-width: 719px)"
 				},
 				"resources/print.css": {
 					"media": "print"