From 93c88a5df60e190e90f1c1fdc08881cb97d7df13 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Thu, 14 Jun 2018 16:22:31 +0000
Subject: [PATCH] Revert "Redo width cutoffs to keep content wider and better
 match values elsewhere in mw"

Accidentally removed an unrelated thing; am too out of it right now to submit a followup putting that back.

This reverts commit 138036882f0132638bc63a9e365578d2b4164c2a.

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

diff --git a/resources/mobile.js b/resources/mobile.js
index 10c985d..1ded493 100644
--- a/resources/mobile.js
+++ b/resources/mobile.js
@@ -1,34 +1,33 @@
 /* Popout menus (header) */
 
 $( function () {
-	var toggleTime = 200,
-		mobileCutoff = 720;
+	var toggleTime = 200;
 
 	// 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 );
diff --git a/resources/screen-misc.less b/resources/screen-misc.less
index 72d148b..b266673 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: 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-right: @column-right-size + 2em;
+		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;
+		}
 	}
 }
diff --git a/resources/variables.less b/resources/variables.less
index 4de540c..5799e87 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: 719px;
-@desktop-small-floor: 720px;
-@desktop-small-width: 1200px;
-@desktop-mid-floor: 1201px;
-@desktop-mid-width: 1450px;
-@desktop-large-floor: 1451px;
+@mobile-width: 850px;
+@desktop-small-floor: 851px;
+@desktop-small-width: 1099px;
+@desktop-mid-floor: 1100px;
+@desktop-mid-width: 1339px;
+@desktop-large-floor: 1340px;
 
 // The max-width for the content
-@content-width: 125em;
+@content-width: 100em;
 
 @content-padding: 2em;
 
diff --git a/skin.json b/skin.json
index 9e53712..76dadc3 100644
--- a/skin.json
+++ b/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"