diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 64 |
1 files changed, 36 insertions, 28 deletions
@@ -7,9 +7,10 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 13px; transition: background-color 100ms; - background-image: url(http://i.asdf.us/im/84/imBreak_1340193016_tumblr_m5vynpMYYg1qiluqao1_500_.png); + background-image: url(./img/imBreak_1340193016_tumblr_m5vynpMYYg1qiluqao1_500_.png); background-position: top right; background-repeat: no-repeat; + background-attachment: fixed; } div { display: inline-block; @@ -23,6 +24,23 @@ div { .desktop body { user-select: none; } +.top { + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +@media only screen and (min-device-width: 800px) { + .tools { + position: fixed; + top: 0; + left: 468px; + width: 400px; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + } +} @media only screen and (max-device-width: 800px) { html,body { margin: 0; @@ -43,11 +61,6 @@ div { br { display: none; } - .top { - display: block; - margin-top: 10px; - margin-bottom: 10px; - } } </style> </head> @@ -56,33 +69,28 @@ div { <div id='labels'></div> <canvas nx="matrix" id="grid"></canvas> </div> -<div> +<div class='tools'> <span class="top"> <canvas nx="number" label="tempo" id="tempo"></canvas> <br><br> <canvas nx="select" id="scale"></canvas> </span> - <br> - <br><br><br> - <br><br><br> - <br><br><br> - <br><br><br> - <br><br><br> - <br><br><br> - <canvas nx="button" label="shift ↑" id="shiftUp"></canvas> - <canvas nx="button" label="shift ↓" id="shiftDown"></canvas> - <br> - <canvas nx="button" label="slide ↑" id="slideUp"></canvas> - <canvas nx="button" label="slide ↓" id="slideDown"></canvas> - <canvas nx="button" label="slide ←" id="slideLeft"></canvas> - <canvas nx="button" label="slide →" id="slideRight"></canvas> - <br> - <canvas nx="button" label="rotate ↑" id="rotateUp"></canvas> - <canvas nx="button" label="rotate ↓" id="rotateDown"></canvas> - <canvas nx="button" label="rotate ←" id="rotateLeft"></canvas> - <canvas nx="button" label="rotate →" id="rotateRight"></canvas> - <canvas nx="button" label="flip ↕" id="flip"></canvas> - <canvas nx="button" label="flop ↔" id="flop"></canvas> + <span> + <canvas nx="button" label="shift ↑" id="shiftUp"></canvas> + <canvas nx="button" label="shift ↓" id="shiftDown"></canvas> + <br> + <canvas nx="button" label="slide ↑" id="slideUp"></canvas> + <canvas nx="button" label="slide ↓" id="slideDown"></canvas> + <canvas nx="button" label="slide ←" id="slideLeft"></canvas> + <canvas nx="button" label="slide →" id="slideRight"></canvas> + <br> + <canvas nx="button" label="rotate ↑" id="rotateUp"></canvas> + <canvas nx="button" label="rotate ↓" id="rotateDown"></canvas> + <canvas nx="button" label="rotate ←" id="rotateLeft"></canvas> + <canvas nx="button" label="rotate →" id="rotateRight"></canvas> + <canvas nx="button" label="flip ↕" id="flip"></canvas> + <canvas nx="button" label="flop ↔" id="flop"></canvas> + </span> </div> </body> <script> |