diff --git a/src/closed.scss b/src/closed.scss
deleted file mode 100644
index d0fe3fb..0000000
--- a/src/closed.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// Styles for the "closed" frame.
-@keyframes fadeOut {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-body.closed {
- background: #f66;
- text-align: center;
- overflow: hidden;
-
- .closed_notice {
- position: absolute;
- font-weight: bold;
- font-size: 16pt;
- text-transform: uppercase;
- animation: fadeOut 3s forwards;
- animation-timing-function: linear;
- animation-iteration-count: 1;
- }
-
- #stop-overlay {
- z-index: 1;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-size: contain;
- background-repeat: no-repeat;
- background-image: url(/stop.svg);
- background-position: 50% 50%;
- }
-}
diff --git a/src/open.js b/src/open.js
index 84adbc3..39f8f0f 100644
--- a/src/open.js
+++ b/src/open.js
@@ -128,7 +128,8 @@ function startOpenAnimation() {
camera.position.z = 5;
renderer = new THREE.WebGLRenderer({
- antialias: true
+ antialias: true,
+ canvas: document.getElementById('canvas')
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
diff --git a/src/open.scss b/src/open.scss
deleted file mode 100644
index 3e4ce6e..0000000
--- a/src/open.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// Styles for the "Open" page
-
-body.open {
- background-color: #a3d165;
- margin: 0;
- overflow: hidden;
-}
-
-canvas {
- width: 100%;
- height: 100%;
-}
diff --git a/src/style.scss b/src/style.scss
index 0253321..a134288 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,4 +1,7 @@
-* {
+body {
+ margin: 0;
+ overflow: hidden;
+ text-align: center;
font-family: verdana, sans-serif;
}
@@ -9,5 +12,52 @@
left: 0;
}
-@import "open";
-@import "closed";
+// Displays something full-screen
+@mixin full-screen {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+// Styles for the "Open" page
+canvas {
+ @include full-screen;
+ background: #000;
+}
+
+// Styles for the "closed" frame.
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+body.closed {
+ background: #f66;
+
+ .closed_notice {
+ position: absolute;
+ font-weight: bold;
+ font-size: 16pt;
+ text-transform: uppercase;
+ animation: fadeOut 3s forwards;
+ animation-timing-function: linear;
+ animation-iteration-count: 1;
+ }
+
+ #stop-overlay {
+ @include full-screen;
+ z-index: 1;
+ background-size: contain;
+ background-repeat: no-repeat;
+ // File is served from a subdirectory.
+ background-image: url(../stop.svg);
+ background-position: 50% 50%;
+ }
+}
diff --git a/templates/open.html b/templates/open.html
index b5020c0..f9b2c71 100644
--- a/templates/open.html
+++ b/templates/open.html
@@ -8,5 +8,6 @@
+