Added elements and mixins for creating a 'cover' that hides the page until all elemets are ready.

sass/core.scss

@@ -32,3 +32,25 @@ body{
   flex-flow: row;
 }
 
+// Used to hide the ENTIRE page until the system has finished readying
+// everything.
+.cover {
+  @include cover();  
+}
+
+
+.coverFadeout {
+  -webkit-animation: coverFadeout 1s linear 1 forwards;
+  animation: coverFadeout 1s linear 1 forwards;
+}
+
+@-webkit-keyframes coverFadeout {
+  0% {@include opacity(1);}
+  100% {@include opacity(0);}
+}
+
+
+@keyframes coverFadeout {
+  0% {@include opacity(1);}
+  100% {@include opacity(0);}
+}

sass/mixins.scss

@@ -0,0 +1,25 @@
+
+@mixin opacity($value){
+  -webkit-opacity: $value;
+  -moz-opacity: $value;
+  opacity: $value;
+}
+
+@mixin transition($properties){
+  -webkit-transition: $properties;
+  -moz-transition: $properties;
+  -ms-transition: $properties;
+  -o-transition: $properties;
+  transition: $properties;
+}
+
+@mixin cover(){
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: hidden;
+  background-color: rgb(0,0,0); /* Fallback color */
+}

sass/modal.scss

@@ -5,14 +5,7 @@
 /* The Modal (background) */
 .modal {
   display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: hidden;
-  background-color: rgb(0,0,0); /* Fallback color */
+  @include cover();
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 

sass/style.scss

@@ -1,6 +1,7 @@
 
 // Variables and Mixins
 @import 'variables';
+@import 'mixins';
 
 // NES Specific colors
 @import 'nescolors';