update styles for runtime demo
This commit is contained in:
Родитель
ae491f4348
Коммит
e7d79ef5db
|
@ -21,6 +21,7 @@
|
|||
bodySize = document.body.getBoundingClientRect(),
|
||||
ballSize = proto.getBoundingClientRect(),
|
||||
maxHeight = Math.floor(bodySize.height - ballSize.height),
|
||||
maxWidth = 97, // 100vw - width of square (3vw)
|
||||
incrementor = 10,
|
||||
frame,
|
||||
minimum = 10,
|
||||
|
@ -44,7 +45,7 @@
|
|||
} else {
|
||||
m.classList.add('down');
|
||||
}
|
||||
m.style.left = (i / (app.count / 100)) + 'vw';
|
||||
m.style.left = (i / (app.count / maxWidth)) + 'vw';
|
||||
m.style.top = top + 'px';
|
||||
document.body.appendChild(m);
|
||||
}
|
||||
|
|
|
@ -27,6 +27,10 @@
|
|||
<button class="subtract" disabled></button>
|
||||
<button class="stop">Stop</button>
|
||||
<button class="optimize">Optimize</button>
|
||||
<a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/"
|
||||
target="_blank">
|
||||
<button class="optimize">Help</button>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
|
@ -29,8 +29,21 @@ body {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
background-color: beige;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.subtract:disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.mover {
|
||||
height: 1vw;
|
||||
height: 3vw;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
|
@ -38,3 +51,9 @@ body {
|
|||
.border {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.controls button {
|
||||
min-width: 20vw;
|
||||
}
|
||||
}
|
Загрузка…
Ссылка в новой задаче