@import "global"; html { height: 100%; font-size: $font-size; } body { font-family: 'Source Sans Pro', sans-serif; line-height: $font-line-height; } #window { min-height: 100vh; background: $color-canvas; } .badge { background: $color-money; display: inline-block; padding: 2px; color: white; border-radius: 2px; } .credit-amount--indicator { font-weight: bold; color: $color-money; } #main-content { &.no-sub-nav { min-height: calc(100vh - 60px); //should be -$height-header, but I'm dumb I guess? It wouldn't work main { margin-top: $height-header; } } &.with-sub-nav { min-height: calc(100vh - 60px); //should be -$height-header, but I'm dumb I guess? It wouldn't work } main { padding: $spacing-vertical; &.constrained-page { max-width: $width-page-constrained; margin-left: auto; margin-right: auto; } } }