Fix Bug 1175248: Move breakpoints into reusable variables.

[stephaniehobson]

Makes breakpoints into variables outside of media queries, implements new variables in places where they'd be useful.

[openjck]

I'm seeing Stylus variables (like $small-desktop-start) appear in the compiled CSS. For example:

$ rm css/*.css
$ compile-stylesheets
$ cd css
$ ag small-desktop-starts
wiki.css:129:@media all and (min-width: $small-desktop-starts ){body .topicpage-table{display:table;border-collapse:separate;border-spacing:20px 0;}
wiki.css:156:}@media all and (min-width: $small-desktop-starts) and (max-width: $max-width-default),all and (max-width: $small-mobile-ends){.toc .share strong{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
wiki.css:353:@media all and (min-width: $small-desktop-starts){.landing{display:table-row}

[stephaniehobson]

$#*&#ing stylus. It worked in code pen >_<

[stephaniehobson]

Hm. It was something else I tested. I just assumed Stylus was sane when it came to variables in media queries, which it's not.

$#*&#ing stylus

Anyhoo, ready for re-review.

[openjck]

Hm, I'm still seeing variables in the compiled output. It looks like the latest updates might not have been pushed up.

[stephaniehobson]

Try again?

[openjck]

Ah, my apologies. Somehow I lost this in the mix. Checking now.

[openjck]

Hm, it looks like the variables are still in compiled output.

$ ag --nobreak "\\$.*?-(starts|ends)" | wc -l
119

[stephaniehobson]

The only problem I see is #3275 but I rebased on that and it won't go away. (╯°□°）╯︵ ┻━┻

[darkwing]

I'm not seeing any $ via a text editor search -- are you sure, @openjck ?

[openjck]

Ah. Turns out I was using an old version of Stylus locally. 😦
I do see this when compiling Stylesheets in the VM:

/usr/lib/node_modules/stylus/bin/stylus:646
              throw err;
                    ^
Error: /home/vagrant/src/scripts/../media/stylus/font-awesome.styl:5:9
   1| /*
   2|     Import Stylus version of Font Awesome 4.1
   3|     `stylus -C media/css/libs/font-awesome/css/font-awesome.css media/css/libs/font-awesome/stylus`
   4| */
   5| @import '../css/libs/font-awesome/stylus/font-awesome';
--------------^
   6|
   7| /*
   8|     Mapping 3.2.1 icon names to 4.1

failed to locate @import file ../css/libs/font-awesome/stylus/font-awesome.styl

[stephaniehobson]

Hm. The font-awsome stuff is compiling for me without error. @darkwing are you seeing this?