LESS mixin for Viewport Ratio Contrains

viewportRatio.less

/* This version is adapted from http://stackoverflow.com/a/24894523/382536 to  
* constrain width to 100% height instead. See blog post for further reading:
* https://www.jasonnathan.com/article/gsap/building-a-zoomable-user-interface-with-meteorjs-gsap
*
* param {Number} @x - width
* param {Number} @y height
*/
.viewportRatio(@x, @y) {
  @height:100vh;
  @width: (@x * 100vh / @y);
  @max-height:( @y / @x * 100vw);
  @max-width: 100vw;
}

//usage

#constrainContainer{ 
/** or body, aspect ratio is 3:4 */
  .viewportRatio(3, 4);
  height: @height;
  width: @width;
  max-height: @max-height;
  max-width: @max-width;
  position:relative;
}

.Page{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

#contact{
  /* 1/3 of total area*/
  transform:scale(.3333);
}

#works{
  /* 1/6 of total area  */
  transform:scale(.1111);
}