| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| input, button { |
| outline: none; |
| } |
| |
| button { |
| cursor: pointer; |
| } |
| |
| a { |
| text-decoration: none; |
| } |
| |
| // TODO: Explore removing these values |
| .clear { |
| display: block; |
| clear: both; |
| } |
| |
| //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; |
| } |