X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=stylus_helpers.styl;h=bc73f953dbd11dee25cc5799a1ad1e87ad1d4e44;hb=1cc2fd791d55bca1a63afbeb2628dd1a8bd2ba3f;hp=9aa4b6bb3cb5b110e67aa7775800efa4f798f7ac;hpb=900e09b8300463e3dd42e89c21de181520513e95;p=wfpl.git

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