bert/isdefoobaropen
1
0
Fork 0
Code Pull Requests Releases Activity

Restructure Sass files for faster loading.

Browse Source
This commit is contained in:
Bert Peters
2019-03-14 15:32:22 +01:00
parent dd05de6764
commit 5b851b83d9
5 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/closed.scss
View File

@@ -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%;
}
}

3
src/open.js
View File

@@ -128,7 +128,8 @@ function startOpenAnimation() {
camera.position.z = 5; camera.position.z = 5;
renderer = new THREE.WebGLRenderer({ renderer = new THREE.WebGLRenderer({
antialias: true antialias: true,
canvas: document.getElementById('canvas')
}); });
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;

12
src/open.scss
View File

@@ -1,12 +0,0 @@
// Styles for the "Open" page
body.open {
background-color: #a3d165;
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}

56
src/style.scss
View File

@@ -1,4 +1,7 @@
* { body {
margin: 0;
overflow: hidden;
text-align: center;
font-family: verdana, sans-serif; font-family: verdana, sans-serif;
} }
@@ -9,5 +12,52 @@
left: 0; left: 0;
} }
@import "open"; // Displays something full-screen
@import "closed"; @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%;
}
}

1
templates/open.html
View File

@@ -8,5 +8,6 @@
<script src="generated/bundle.js"></script> <script src="generated/bundle.js"></script>
</head> </head>
<body class="open"> <body class="open">
<canvas id="canvas">Je browser is een aardappel en ondersteunt geen HTML5 canvas, maar de bar is open.</canvas>
</body> </body>
</html> </html>