Merge "Redo width cutoffs to keep content wider and better match values elsewhere in mw"

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 );

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;
 	}
 }

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;
 

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"