Style the demo index.html with a dark background

Note that the slide_puzzle is a bit different because it tries to
fill the viewport with the canvas
This commit is contained in:
Olivier Goffart 2022-02-03 16:41:56 +01:00
parent 8f51e8feda
commit 40fc7422ea
7 changed files with 226 additions and 15 deletions

View file

@ -14,6 +14,38 @@
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
* {
box-sizing: border-box;
}
body {
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
color: white;
text-align: center;
max-width: 1100px;
margin: 0px auto;
min-height: 100vh;
}
p:not(.links) {
text-align: left;
padding: 1ex 5ex;
}
h1 {
text-align: left;
padding: 0.5ex 1ex
}
a {
color: #DBFF00
}
a:not(:hover) {
text-decoration: none;
}
/* beautify ignore:start */
.spinner:before {
content: ''; box-sizing: border-box; position: absolute;
@ -36,7 +68,7 @@
<div class="spinner">Loading...</div>
</div>
<canvas id="canvas"></canvas>
<p>
<p class="links">
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/plotter/main.rs">
View Source Code on GitHub</a>
</p>