| // CONVENIENCE |
| .clear { |
| display: block; |
| clear: both; |
| } |
| |
| .light-text { |
| color: white; |
| } |
| |
| .right { |
| float: right; |
| } |
| |
| .left { |
| float: left; |
| } |
| |
| .center { |
| text-align: center; |
| } |
| |
| //mixins |
| @mixin fullScreen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100vw; |
| height: 100vh; |
| } |
| |
| @mixin pureCenter($left: 50%, $top: 50%) { |
| position: absolute; |
| top: $top; |
| left: $left; |
| transform: translate(-50%, -50%); |
| } |
| |
| @mixin maintain-aspect-ratio( |
| $width-factor: 16, |
| $height-factor: 9, |
| $target-width: 80vw, |
| $target-height: 80vh |
| ) { |
| width: $target-width; |
| height: $target-width * ($height-factor / $width-factor); |
| max-width: $target-height * ($width-factor / $height-factor); |
| max-height: $target-height; |
| } |