diff --git a/index.html b/index.html index 98dfed4..1ccfe60 100644 --- a/index.html +++ b/index.html @@ -67,48 +67,42 @@ -
+
-
- +
+ +
+
+
+
+ +
+ +
+
+ + +
+
+ +
+ + +
- +
diff --git a/user_css/main.css b/user_css/main.css index 9f64c5d..7f9b0c0 100644 --- a/user_css/main.css +++ b/user_css/main.css @@ -1,34 +1,68 @@ +/* +|----------------------------------------- +| Core CSS +|----------------------------------------- + */ + +*, *:before, *:after{ + box-sizing: border-box; +} + html, body { + font-family: Open Sans, Arial, sans-serif; + height: 100%; + width:100%; margin: 0; padding: 0; + background: #000; overflow: hidden; } -div#container { + +/* reset all list items */ +ul{ + list-style: none; + padding: 0; + margin: 0; +} + +.container { + display: flex; + flex-direction: column; width: 100%; height: 100%; } -div#main { - position:absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: rgb(0, 0, 0); -} -div#main canvas { + +.main { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} + +/* +|----------------------------------------- +| Canvas +|----------------------------------------- +| +| Classes are automatically overwritten +| by the filter styles, therefore only +| attributes and id's can be used. +| + */ + +canvas { margin: auto; display: block; padding: 0px; - background-color: rgb(248, 248, 248); -} -canvas { cursor: none; } + canvas.textureSmooth { image-rendering: auto; image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic; } + canvas.texturePixelated { image-rendering: -webkit-optimize-contrast; image-rendering: -o-crisp-edges; @@ -37,92 +71,135 @@ canvas.texturePixelated { image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } -span#tempMessage { - color: red; + +/* +|----------------------------------------- +| Messages +|----------------------------------------- + */ + +.message { + background: #6cc27d; + padding: 1em 2em; + text-align: center; + color: #fff; bottom: 0px; - position: absolute; - right: 0px; + position: fixed; + left: 0px; display: none; - font-size: 40pt; font-weight: bold; - text-align: right; vertical-align: bottom; font-family: monospace; -} -div#menu { - position: absolute; z-index: 1; - width: 100%; - height: 0px; -} -div#menu ul { - list-style:none; - position:relative; - float:left; - margin:0; - padding:0; - width: 100%; - background-color: rgb(255, 255, 255); - z-index: 2; -} -div#menu ul span, div#menu ul a { - color: rgb(50, 50, 50); - text-decoration: none; - font-weight: 700; - font-size: 12px; - line-height: 32px; - padding: 0 15px; - font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; -} -div#menu ul ul a, div#menu ul ul span { - line-height: 120%; - padding: 10px 15px; -} -div#menu ul li { - position: relative; - float: left; - margin: 0; - padding: 0; -} -div#menu ul li:hover { - background-color: rgb(240, 240, 240) !important; -} -div#menu ul li:hover > ul { - display: block; -} -li.hide { - display: none !important; -} -div#menu ul ul { - display: none; - position: absolute; - top: 100%; - left: 0; - background: rbg(255, 255, 255); - padding: 0; -} -div#menu ul ul li { - float: none; - display: table-row; - z-index: 3; - background-color: rgb(255, 255, 255); -} -div#menu ul ul ul { - top: 0; - left: 100%; -} -input { - max-width: 150px; -} -div#menu.paused > ul, div#menu.playing > ul:hover { - opacity: 1; } -div#menu.playing > ul { + +/* +|----------------------------------------- +| Main Menu +|----------------------------------------- + */ + +/* top level menu */ +.menu { + position: fixed; + display: flex; + flex-wrap: wrap; + width: 100%; + background: #fff; + border-bottom: 1px solid rgba(0,0,0,.1); + transition: .3s ease; +} + +/* auto hide menu while playing */ +.playing .menu{opacity: 0;} +.playing .menu:hover{opacity: 0.9;} + +/* sub level menu */ +.menu ul{ + visibility: hidden; opacity: 0; + position: absolute; + top:100%; + left:0; + background: whitesmoke; + box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); + transition: .3s ease; + z-index: 1; } -div#menu input+span { - padding-left: 30px; + +/* bottom level nav */ +.menu ul ul{ + top:0; + left: 100%; } -.nowrap { + +.menu li{ white-space: nowrap; + position: relative; + padding: .7em 1em; + cursor:pointer; +} + +.menu li:hover{ + background: rgba(0,0,0,.1); +} + +/* show sub nav on hover */ +.menu li:hover > ul{ + visibility: visible; + opacity: 1; +} + +/* +|----------------------------------------- +| Touch Controls +|----------------------------------------- + */ + +.touch-controls{ + display: flex; + padding: 1em; +} + +.touch-controls button{ + display: inline-block; + -webkit-appearance: none; + border:0; + outline: 0; + background: #fff; + opacity: 0.7; + width: 3em; + height: 3em; + line-height: 3em; + text-align: center; + cursor: pointer; + transition: .1s ease; + margin:.5em; +} + +.touch-controls button:active{ + transform: scale(0.95); + box-shadow: 0 0 10px 0 rgba(0,0,0,0.4) inset; +} + +.touch-dpad, .touch-buttons{ + flex-grow: 1; + text-align: center; +} + +.touch-buttons{ + align-self: flex-end; +} + +.touch-dpad--up{ + flex-grow: 1; + width: 100%; +} + +/* Only show controls on small screens */ +@media screen and (min-width:600px){ + .touch-controls{ + display: none; + } } +