diff --git a/Timeless.skin.php b/Timeless.skin.php index f1ceb28..d5e4618 100644 --- a/Timeless.skin.php +++ b/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( [ diff --git a/resources/screen-misc.less b/resources/screen-misc.less index 05658de..3278328 100644 --- a/resources/screen-misc.less +++ b/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; } diff --git a/resources/variables.less b/resources/variables.less index 9f073d3..1cfff51 100644 --- a/resources/variables.less +++ b/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; -@column-right-size: 16em; +// Remember to also update skin.json (and possibly mobile.js) if you change these +// 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; diff --git a/skin.json b/skin.json index cf38d28..cd93a63 100644 --- a/skin.json +++ b/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",