css.js

;(function() {
  var out = [], style
  
  // Scale up margins
  function scale(template, from, to, min, max, step) {
    for (width = from; width <= to; width += 2) {
      out.push('@media (min-width: ' + width + 'px) { ' +
        template.replace('[]', min + (width - from) / (to - from) * (max - min)) + ' }')
      if (width > screen.width && width > screen.height)
        break
    }
  }
  scale('body > div > div > div { margin: 0 []%; }', 480, 1280, 0, 16, 2)
  scale('body > div { padding: []em 0; }', 480, 1280, 0, 0.5, 80)
  scale('div.content, div.row { width: []%; }', 768, 1024, 100, 66.66, 4)
  
  // Scale up font size
  function font_size(selector, from, to, min, max) {
    step = (to - from) / (max - min)
    for (width = from; width <= to; width += step) {
      out.push('@media (min-width: ' + Math.round(width) + 'px) { ' +
        selector + ' { font-size: ' + Math.round(min + (width - from) / (to - from) * (max - min)) + 'px; } ' +
      '}')
      if (width > screen.width && width > screen.height)
        break
    }
  }
  font_size('body', 1280, 1920, 16, 22)
  font_size('div.header h1', 320, 1920, 24, 96)
  font_size('div.header h2', 320, 1920, 18, 72)

  // Add car columns keeping the minimum column width at 240px by taking the page margin scaling into account
  var columns, margin
  for (columns = 3; columns <= 6; columns += 1) {
    margin = (columns - 3) / 5 * 0.32
    width = Math.round((columns * 240) * 1 / (1 - margin))
    out.push('@media (min-width: ' + width + 'px) { ' +
      'ul.cars li { width: ' + (100 / columns) + '%; } ' +
      'html.desktop ul.cars li:nth-child(' + (columns - 1) + 'n+1) { clear: none; } ' +
      'html.desktop ul.cars li:nth-child(' + columns + 'n+1) { clear: both; } ' +
    '}')
  }
  
  out = out.join('\n')
  // console.log(out)
  style = document.createElement('style')
  style.innerHTML = out
  document.getElementsByTagName('head')[0].appendChild(style)
})()