Heights, widths and re-size for SVG applets

These are experiments to set widths and heights for interactive applets, allowing for various size screens. It also tries to cope intelligently with screen re-size.

Best square - (max 450px w×h)

Don't use class="square" (set height of SVG and thus div by javascript).

.max_w_450{margin:0 auto;width:100%;max-width:450px;max-height:450px}
.vmin{margin:0 auto;max-width:calc(100vmin - 1em)}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .vmin{max-width:100%}
}

Best rectangle (75% wide, max 450px high)

This is the best rectangle, responding to browser height and width. Uses max_w75pc_h450, but DON'T use ht100pc:

.max_w75pc{margin:0 auto;max-width:75%}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w75pc{max-width:100%}
}

Best empty square

This is the best (empty) square, responding to browser height and width. Uses max_w_450, vmin, square:

/* same as best square, PLUS .square **/

.max_w_450{margin:0 auto;width:100%;max-width:450px;max-height:450px}
.vmin{margin:0 auto;max-width:calc(100vmin - 1em)}
.square{
	box-sizing:border-box;
	width:100%;
	padding-bottom:100%;
}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .vmin{max-width:100%}
}

Best empty rectangle

This is the best (empty) rectangle, responding to browser height and width. Uses max_w75pc_h450, ht100pc:

/****** BEST EMPTY RECTANGLE - max width 75%; 1.288 ratio*****/

.max_w75pc_h450{margin:0 auto 2em;max-width:75%;height:75vh;max-height:450px}
.ht100pc{height:100%}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w75pc_h450{max-width:100%}
}
@media screen and (max-height: 510px) {
  .max_w75pc_h450{height:calc(100vh - 3em)}
}

max_w75pc_h450, ht100pc: best rectangle

Fail: max width 450 square

max_w_450 too high for phone landscape
bleeds over following text

Fail: Fill the screen

maxWidthHt, ht100pc (fill screen, but too big for desktop)

Fail: max width 75%

max_w_h_75pc, ht100pc: too high for desktop

/*********** FAILS *********************/

.maxWidthHt{width:100%;margin-bottom:2em;max-width:calc(100vw - 3em);height:calc(100vh - 3em)}
.max_w_h_75pc{margin:0 auto 2em;max-width:75%;height:75vh}
.interactive svg{box-sizing:border-box}


.vminEmpty{max-height:calc(100vmin - 3em);margin-bottom:2em}

@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w_h_75pc{max-width:100%;height:75vh}
  .max_w75pc_h450{max-width:100%}
  .max_w75pc{max-width:100%}
  .vmin{max-width:100%}
  .maxWidthHt{max-width:100%}
}
@media screen and (max-height: 510px) {
  .max_w75pc_h450{height:calc(100vh - 3em)}
}
/*****************************************/