Fluid Everything Else

Versions

• Version 1 - static values and a container query
• Version 2 - First draft of fluid values
• Version 3 - Adjusted image position
• Version 4 - Put a kink in the text path
• Version 5 - Bezier curve text path (needs JS)

Calculator

• Uses simultaneous equations to produce a pure CSS expression, with an explanatory comment to mitigate magic numbers
• The "at" values for each point are the pixel width for the container/viewport
• The target value for each point is in the "fixed" unit
• The variable unit doesn't change the calculation, only the unit in the output
• Calculate also copies the output to the clipboard