Welcome to my world!

basics 5: vmin

Here we have a box that measures 30vmin square:

.simple-box {
  height: 30vmin;
  width: 30vmin;
  p {
    font-size: 4vmin;
    padding: 2vmin;
  }
}

In this example, the box will always measure 30% of either the height or the width of the viewport -- whichever is less.