From eb268173999615e857af705883ce8c94c5c039dd Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 31 Oct 2015 13:10:31 -0400 Subject: [PATCH] stylus: add function to easy linear scaling --- stylus_helpers.styl | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/stylus_helpers.styl b/stylus_helpers.styl index 9aa4b6b..bc73f95 100644 --- a/stylus_helpers.styl +++ b/stylus_helpers.styl @@ -57,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 -- 1.7.10.4