From 295f4648ea48f1af062fc42facc65d8ce0f619cd Mon Sep 17 00:00:00 2001 From: "Garen J. Torikian" Date: Mon, 31 Jul 2017 14:38:10 -0700 Subject: [PATCH] Clean up initial CSS/loading logic --- assets/styles.css | 64 +++++++++++------------------------------------ index.html | 16 +++++------- 2 files changed, 21 insertions(+), 59 deletions(-) diff --git a/assets/styles.css b/assets/styles.css index f590130..45a388d 100644 --- 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 index fd5996e..c30a175 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,6 @@ - - @@ -21,13 +19,8 @@
- - + +
@@ -112,7 +105,7 @@
Change Presentation
- Star + Star @@ -148,6 +141,9 @@

History

©2014. MIT licensed. In no way endorsed or affiliated by Nintendo, Ape, HAL Laboratory, e.t.c. Please don't sue me.

+ + +