The math of CSS locks

A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other. … I found this technique in Tim’s article and, when I tried wrapping my head around it, and creating variants of it,