Just dumping this in case somebody might need it.

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot

When you need a CSS value (a padding, margin, height etc) to shrink/grow proportionally with the parent element, you normally use percentage values. However, if you need specific values at two given widths, you need to turn to linear functions Show archive.org snapshot . The mixin below gives you just that.

// Call with two desired values at two different widths.
// Returns a calc() expression that will scale proportionally between those two.
// Example:
//   Spacing should be 15px at 320px parent container width, and 80px at 1150px
//   parent container width. => linear-scale(320, 15, 1150, 80)
@function linear-scale($width1, $spacing1, $width2, $spacing2)
  //
    Linear equations:
    $width1 * $relative + $static = $spacing1
    $width2 * $relative + $static = $spacing2

  $relative: ($spacing2 - $spacing1) / ($width2 - $width1)
  $static: $spacing1 - ($width1 * $relative)

  @return calc(#{$relative * 100%} + #{$static * 1px})