Clean up initial CSS/loading logic

gjtorikian · Jul 31, 2017 · 295f464 · 295f464
1 parent cb4ffb2
commit 295f464
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 59 deletions.
diff --git a/assets/styles.css b/assets/styles.css
@@ -46,55 +46,21 @@ body {
   text-align: center;
 }
 
-/* Thanks, http://tobiasahlin.com/spinkit/ ! */
-
-.spinner {
-  margin: 100px auto;
-  width: 32px;
-  height: 32px;
-  position: relative;
-  margin-bottom: 129px;
-}
-
-.cube1, .cube2 {
-  background-color: #333;
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  -webkit-animation: cubemove 1.8s infinite ease-in-out;
-  animation: cubemove 1.8s infinite ease-in-out;
-}
-
-.cube2 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
+canvas, canvas-overlay {
+  display: block;
 }
-
-@-webkit-keyframes cubemove {
-  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
-  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
-  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
-  100% { -webkit-transform: rotate(-360deg) }
+canvas-overlay {
+  background-color: black;
+  opacity: 1;
+  will-change: opacity;
+  transition: 2s opacity;
+  z-index: 1;
 }
-
-@keyframes cubemove {
-  25% { 
-    transform: translateX(42px) rotate(-90deg) scale(0.5);
-    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
-  } 50% { 
-    transform: translateX(42px) translateY(42px) rotate(-179deg);
-    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
-  } 50.1% { 
-    transform: translateX(42px) translateY(42px) rotate(-180deg);
-    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
-  } 75% { 
-    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-  } 100% { 
-    transform: rotate(-360deg);
-    -webkit-transform: rotate(-360deg);
-  }
+canvas {
+  image-rendering: optimizeSpeed;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: -o-crisp-edges;
+  image-rendering: pixelated;
+  -ms-interpolation-mode: nearest-neighbor;
 }
diff --git a/index.html b/index.html
@@ -12,22 +12,15 @@
 
 <!-- all of that up there is just crap for the site! now the real fun begins. -->
 
-<script src="dist/index.js"></script>
-
 </head>
 
 <body>
   <div class="container">
 
     <div class="row">
       <div class="col-xs-5">
-        <div id="loading-indicator" class="spinner">
-          <div class="cube1"></div>
-          <div class="cube2"></div>
-        </div>
-        <canvas id="ebbb-holder" class="hidden" width="256" height="256">
-          Canvas.
-        </canvas>
+        <canvas-overlay style="opacity: 0;"></canvas-overlay>
+        <canvas width="256" height="224"></canvas>
       </div>
       <div class="col-xs-7">
         <div class="row">
@@ -112,7 +105,7 @@ <h6>Change Presentation</h6>
       <div class="col-xs-12">
         <hr />
         <!-- Place this tag where you want the button to render. -->
-        <a class="github-button" href="https://github.com/gjtorikian/Earthbound-Battle-Backgrounds-JS" data-count-href="/gjtorikian/Earthbound-Battle-Backgrounds-JS/stargazers" data-count-api="/repos/gjtorikian/Earthbound-Battle-Backgrounds-JS#stargazers_count">Star</a>
+        <a class="github-button" href="https://github.com/gjtorikian/Earthbound-Battle-Backgrounds-JS" data-count-href="/gjtorikian/Earthbound-Battle-Backgrounds-JS/stargazers" data-show-count>Star</a>
         <!-- Place this tag right after the last button or just before your close body tag. -->
         <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://gjtorikian.github.io/Earthbound-Battle-Backgrounds-JS/" data-text="SMAAAASH!! Earthbound's battle backgrounds generated entirely in JavaScript" data-via="gjtorikian">Tweet</a>
@@ -148,6 +141,9 @@ <h3>History</h3>
       <p>&copy;2014. MIT licensed. In no way endorsed or affiliated by Nintendo, Ape, HAL Laboratory, <em>e.t.c.</em> Please don't sue me.</p>
     </div>
   </div>
+
+  <script src="dist/index.js"></script>
+  <script>setTimeout(() => document.querySelector("canvas-overlay").style.opacity = 0)</script>
   <script type="text/javascript">
 
   var _gaq = _gaq || [];