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

resources/mobile.js

@@ -1,34 +1,33 @@
 /* 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() < mobileCutoff ) {
+		if ( $( window ).width() < 851 ) {
 			$( '#personal-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#site-navigation h2' ).on( 'click', function () {
-		if ( $( window ).width() < mobileCutoff ) {
+		if ( $( window ).width() < 851 ) {
 			$( '#site-navigation .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#site-tools h2' ).on( 'click', function () {
-		if ( $( window ).width() < mobileCutoff ) {
+		if ( $( window ).width() < 851 ) {
 			$( '#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() < mobileCutoff ) {
+		if ( $( window ).width() < 851 ) {
 			$( '#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() < mobileCutoff ) {
+		if ( $( window ).width() < 851 ) {
 			$( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
@@ -44,7 +43,7 @@ $( function () {
 
 	// Include alternative closing method for ios
 	$( window ).on( 'swiperight', function () {
-		if ( $( window ).width() < mobileCutoff ) {
+		if ( $( window ).width() < 851 ) {
 			$( '#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: 1600px ) {
+@media screen and ( min-width: 1425px ) {
 	.color-middle-container,
 	.ts-inner {
-		padding: 0 2em;
+		padding: 0 3em;
 	}
 	.color-middle {
 		margin-left: @column-left-size;
@@ -20,7 +20,21 @@
 		padding: 0 3em;
 	}
 	.color-middle {
-		margin-left: @column-left-size + 2em;
+		margin-left: @column-left-size + 3em;
-		margin-right: @column-right-size + 2em;
+		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;
+		}
 	}
 }

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: 719px;
+@mobile-width: 850px;
-@desktop-small-floor: 720px;
+@desktop-small-floor: 851px;
-@desktop-small-width: 1200px;
+@desktop-small-width: 1099px;
-@desktop-mid-floor: 1201px;
+@desktop-mid-floor: 1100px;
-@desktop-mid-width: 1450px;
+@desktop-mid-width: 1339px;
-@desktop-large-floor: 1451px;
+@desktop-large-floor: 1340px;
 
 // The max-width for the content
-@content-width: 125em;
+@content-width: 100em;
 
 @content-padding: 2em;
 

skin.json

@@ -30,19 +30,19 @@
 					"media": "screen"
 				},
 				"resources/screen-desktop.less": {
-					"media": "screen and (min-width: 720px)"
+					"media": "screen and (min-width: 851px)"
 				},
 				"resources/screen-desktop-full.less": {
-					"media": "screen and (min-width: 1451px)"
+					"media": "screen and (min-width: 1340px)"
 				},
 				"resources/screen-desktop-mid.less": {
-					"media": "screen and (min-width: 1201px) and (max-width: 1450px)"
+					"media": "screen and (min-width: 1100px) and (max-width: 1339px)"
 				},
 				"resources/screen-desktop-small.less": {
-					"media": "screen and (min-width: 720px) and (max-width: 1200px)"
+					"media": "screen and (min-width: 851px) and (max-width: 1099px)"
 				},
 				"resources/screen-mobile.less": {
-					"media": "screen and (max-width: 719px)"
+					"media": "screen and (max-width: 850px)"
 				},
 				"resources/print.css": {
 					"media": "print"