-// Copyright 2014 Jason Woofenden -- Public Domain (CC0)
+// This program is in the public domain within the United States. Additionally,
+// we waive copyright and related rights in the work worldwide through the CC0
+// 1.0 Universal public domain dedication, which can be found at
+// http://creativecommons.org/publicdomain/zero/1.0/
// This file contains helpers for using stylus in your project.
//
width: _px(w)
height: _px(h)
+// generate (return) a "calc(Fpx + R%)" to scale linearly with parent
+// args:
+// pb: pixel width of parent (when biggest)
+// ps: pixel width of parent (when smallest)
+// cb: pixel width of child (when biggest)
+// cs: pixel width of child (when smallest)
+linear_scale_calc(pb, ps, cb, cs)
+ // math explained: (figuring out F and R in calc(Fpx + R%))
+ // f + r * pb = cb // known_1: formula(pb) -> cb
+ // f = cb - r * pb // solve_for_f: subtract (r * pb) from both sides
+ // f + r * ps = cs // known_2: formula(pb) -> cb
+ // cb - r * pb + r * ps = cs // substitute solved_for_f into known_2
+ // -r * pb + r * ps = cs - cb // subtract cb from both sides
+ // r * (-pb + ps) = cs - cb // factor out r from left side
+ // r = (cs - cb) / (-pb + ps) // divide both sides by (-pb + ps)
+ // r = (cb - cs) / (pb - ps) // multiply left side by -1/-1
+ r = (cb - cs) / (pb - ps)
+ f = cb - r * pb
+ unquote("calc(" + unit(f, "px") + ' + ' + unit(100 * r, "%") + ")")
+
// Make children of this element inline-blocks that are spaced evenly accross.
//
// To create a minimum distance between: don't use word-spacing, it's broken in
// </nav>
// styl:
// nav li
-// sprite_rollover "images/nav.png" 150 35 2
+// sprites_rollover "images/nav.png" 150 35 2
sprites_rollover(image, width, height, count, v_offset = 0, h_offset = 0)
width: unit(width, px)
height: unit(height, px)
- background-image: url(image)
+ if image[1]
+ background: url(image[0])
+ background: url(image[1]), linear-gradient(transparent, transparent);
+ else
+ background-image: url(image)
background-position: top left
background-repeat: no-repeat;
for n in (0...count)
// see sprites_rollover
sprites(image, height, count, v_offset = 0, h_offset = 0)
height: unit(height, px)
- background-image: url(image)
+ if image[1]
+ background: url(image[0])
+ background: url(image[1]), linear-gradient(transparent, transparent);
+ else
+ background-image: url(image)
background-position: top left
background-repeat: no-repeat;
for n in (0...count)