adaptive.styl

width-between($min, $max)
  $max = $max - 1
  $min = $min - 1

  @media (min-width : $min * 1px) and (max-width : $max * 1px)
    {block}

height-between($min, $max)
  $max = $max - 1
  $min = $min - 1

  @media (min-height : $min * 1px) and (max-height : $max * 1px)
    {block}

width-lessthan($v)
  $v = $v - 1

  @media (max-width : $v * 1px)
    {block}

height-lessthan($v)
  $v = $v - 1

  @media (max-height : $v * 1px)
    {block}

width-morethan($v)
  $v = $v

  @media (min-width : $v * 1px)
    {block}

height-morethan($v)
  $v = $v - 1

  @media (min-height : $v * 1px)
    {block}

calc-between-width($w1, $v1, $w2, $v2)
  return "calc(%s * 1px + (%s - %s) * (100vw - %s * 1px) / (%s - %s) )" % ($v1 $v2 $v1 $w1 $w2 $w1)

calc-between-height($h1, $v1, $h2, $v2)
  return "calc(%s * 1px + (%s - %s) * (100vh - %s * 1px) / (%s - %s) )" % ($v1 $v2 $v1 $h1 $h2 $h1)

width-between-property($property, $w1, $v1, $w2, $v2, $before = false, $after = false)
  {$property} $v1 * 1px

  +width-between($w1, $w2)
    {$property} calc-between-width($w1, $v1, $w2, $v2)

  if $before
    +width-lessthan($w1)
      {$property} $v1 * 1px

  if $after
    +width-morethan($w2)
      {$property} $v2 * 1px


height-between-property($property, $h1, $v1, $h2, $v2, $before = false, $after = false)
  {$property} $v1 * 1px

  +height-between($h1, $h2)
    {$property} calc-between-height($h1, $v1, $h2, $v2)

  if $before
    +height-lessthan($h1)
      {$property} $v1 * 1px

  if $after
    +height-morethan($h2)
      {$property} $v2 * 1px


// shortcuts
calc-between($w1, $v1, $w2, $v2)
  return calc-between-width($w1, $v1, $w2, $v2)

width-between-fontsize($w1, $v1, $w2, $v2, $before = false, $after = false)
  width-between-property 'font-size', $w1, $v1, $w2, $v2, $before, $after

height-between-fontsize($h1, $v1, $h2, $v2, $before = false, $after = false)
  height-between-property 'font-size', $h1, $v1, $h2, $v2, $before, $after


portrait()
  @media (orientation: portrait)
    {block}

landscape()
  @media (orientation: landscape)
    {block}