Merge "Make variables for resolution boundaries"

Timeless.skin.php

@@ -19,6 +19,9 @@ class SkinTimeless extends SkinTemplate {
 		$out->addModuleStyles( [
 			'mediawiki.skinning.content.externallinks',
 			'skins.timeless',
+			// This is a separate module from skins.timeless because it has its own
+			// @media declarations in its less, and apparently modules cannot be defined
+			// with both. That is the only reason.
 			'skins.timeless.misc'
 		] );
 		$out->addModules( [

resources/screen-misc.less

@@ -2,6 +2,7 @@
 
 // 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) {
 	.color-middle-container,
 	.ts-inner {
@@ -13,7 +14,8 @@
 	}
 }
 
-@media screen and (min-width: 1250px) and (max-width: 1339px) {
+// Top half end of mid screens
+@media screen and (min-width: (@desktop-small-width + @desktop-mid-width) / 2) and (max-width: @desktop-mid-width) {
 	.ts-inner {
 		padding: 0 3em;
 	}

resources/variables.less

@@ -42,6 +42,7 @@
 @fonts-secondary: 'Linux Libertine', 'Times New Roman', serif;
 // Based on information on https://wiki.archlinux.org/index.php/Metric-compatible_fonts
 @fonts-monospace: 'Consolas', 'Courier', 'Nimbus Mono', 'Liberation Mono', 'Courier New', monospace;
+
 @border: .2em;
 @radius: .2em;
 
@@ -49,12 +50,20 @@
 
 // Widths
 
-@column-left-size: 14em;
+// Remember to also update skin.json (and possibly mobile.js) if you change these
-@column-right-size: 16em;
+// These are all max widths; get the min by subtrcting 1px from the previous thing.
+@mobile-width: 850px;
+@desktop-small-width: 1099px;
+@desktop-mid-width: 1339px;
 
+// The max-width for the content
 @content-width: 100em;
+
 @content-padding: 2em;
 
+@column-left-size: 14em;
+@column-right-size: 16em;
+
 @fixed-header-height: 3.125em;
 
 

skin.json

@@ -1,6 +1,6 @@
 {
 	"name": "Timeless",
-	"version": "0.6",
+	"version": "0.8.1",
 	"author": "Isarra Yos",
 	"url": "https://www.mediawiki.org/wiki/Skin:Timeless",
 	"descriptionmsg": "timeless-desc",
@@ -47,7 +47,8 @@
 				"resources/print.css": {
 					"media": "print"
 				}
-			}
+			},
+			"@NOTE": "Remember to also update variables.less if you change the width cutoffs here. screen-misc.less and mobile.js may also need updating."
 		},
 		"skins.timeless.misc": {
 			"position": "top",