JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
upload.php cleanup: really don't make dot files
[wfpl.git] / stylus_helpers.styl
index df34bb0..bc73f95 100644 (file)
@@ -1,4 +1,7 @@
-// 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.
 //
@@ -54,6 +57,26 @@ dimensions(w, h)
        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
@@ -95,7 +118,11 @@ space_evenly(line_height = 1.2em)
 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)
@@ -110,7 +137,11 @@ sprite_rollover(image, width, height, v_offset = 0, h_offset = 0)
 // 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)