JavaScriptExpert
diff --git a/‎style.css‎ ‎css/style.css‎style.css renamed to css/style.css b/‎style.css‎ ‎css/style.css‎style.css renamed to css/style.css
diff --git a/‎impress.css‎
Lines changed: 0 additions & 50 deletions b/‎impress.css‎
Lines changed: 0 additions & 50 deletions
diff --git a/‎index.html‎
Lines changed: 2 additions & 3 deletions b/‎index.html‎
Lines changed: 2 additions & 3 deletions
diff --git a/‎impress.js‎ ‎js/impress.js‎impress.js renamed to js/impress.js
Lines changed: 22 additions & 4 deletions b/‎impress.js‎ ‎js/impress.js‎impress.js renamed to js/impress.js
Lines changed: 22 additions & 4 deletions
@@ -9,8 +9,7 @@
 
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Crimson+Text:400,700,400italic" rel="stylesheet" />
 
-    <link href="impress.css" rel="stylesheet" />
-    <link href="style.css" rel="stylesheet" />
+    <link href="css/style.css" rel="stylesheet" />
 </head>
 <body>
 
@@ -45,7 +44,7 @@ <h1>impress.js<sup>*</sup></h1>
 </div></div><!-- #canvas.scale > .rotate -->
 </div><!-- #impress -->
 
-<script src="impress.js"></script>
+<script src="js/impress.js"></script>
 
 </body>
 </html>
@@ -27,15 +27,32 @@
 
     })();
 
-    var $ = function(s) { return document.querySelector(s) };
+    var $ = function(s) {
+        return document.querySelector(s);
+    };
 
     var $$ = function(selector){
         return [].slice.call(document.querySelectorAll(selector));
-    }
+    };
+    
+    var impress = document.getElementById("impress");
 
     var canvas = document.getElementById("canvas");
     canvas.rotate = canvas.querySelector(".rotate");
 
+    document.documentElement.style.height = "100%";
+    
+    document.body.style.height = "100%";
+    document.body.style.overflow = "hidden";
+
+    impress.style.position = "absolute";
+    impress.style.top = "50%";
+    impress.style.left = "50%";
+
+    canvas.style["position"] = canvas.rotate.style["position"] = "absolute";
+    canvas.style[_pfx("transformOrigin")] = canvas.rotate.style[_pfx("transformOrigin")] = "top left";
+    canvas.style[_pfx("transition")] = canvas.rotate.style[_pfx("transition")] = "all 1s ease-in-out";
+    
     canvas.dataset["x"] = "0";
     canvas.dataset["y"] = "0";
     canvas.dataset["rotate"] = "0";
@@ -57,10 +74,11 @@
         step.rotate = step.rotate || 0;
         step.scale = step.scale || 1;
 
+        el.style["position"] = "absolute";
         el.style[_pfx("transform")] =  "translate(-50%,-50%)" +
                                  translate(step.x, step.y) +
                                  rotate(step.rotate) +
-                                 scale(step.scale)
+                                 scale(step.scale);
 
     });
 
@@ -72,7 +90,7 @@
         }
         el.classList.add("active");
 
-        document.getElementById("impress").className = "step-" + el.id;
+        impress.className = "step-" + el.id;
 
         var target = {
             rotate: -parseInt(step.rotate, 10),