Continued working on a UI redesign.

snake/snake.scss

@@ -24,6 +24,10 @@ html {
     font-family: "Press Start 2P";
 }
 
+ol > li { margin-left: 4em; }
+#levelSelect > h5 { margin-left: 0.5rem; }
+ul { list-style: none; }
+
 .corner {
     border-style: solid;
     position: absolute;
@@ -72,7 +76,37 @@ body {
             
         header {
             text-align: center;
-            & > h1 { padding-top: 0.5rem; } } } }
+            & > h1 { padding-top: 0.5rem; } }
+            
+        section { transition: 1s; }
+        section p, section ol, section ul { margin-left: 0.5rem; }
+        section#editorControls { display: none; } }
+
+        section#levelSelect {
+            overflow: auto;
+
+            ol {
+                font-size: 80%;
+
+                li {
+                    cursor: pointer;
+                    &.selected { color: $accent2; } } } }
+
+        section#controls {
+            li { margin-top: 0.5rem; }
+
+            .arrow {
+                width: 1rem; height: 1rem;
+
+                &.right { transform: rotate(90deg); }
+                &.down { transform: rotate(180deg); }
+                &.left { transform: rotate(270deg); } } } }
+
+h2, h3, h4 {
+    color: $accent1;
+    text-decoration: underline; }
+
+h5 { color: $accent1; }
 
 button {
     background-color: $out;
@@ -110,25 +144,49 @@ button {
 
 @include forAspect(wide) {
     body {
-        width: 73rem;
+        margin-top: 2rem; 
+
         height: 37rem;
-        margin-top: 4rem; 
+        width: 73rem;
         
         #container { 
             height: 35rem;
             width: 71rem;
             
-            section { margin: 0.5rem; }
+            section {
+                display: inline-block;
+                vertical-align: top; }
             
-            section#description, section#levelSelect, section#controls {
-                width: 18rem; } } }
+            section#gameContainer {
+                width: 30rem;
+                margin-left: 20rem;
+                margin-right: 20rem; }
+
+            #snakeCanvas {
+                width: 30rem;
+                height: 30rem; }
+
+            section#description, section#levelSelect, section#controls,
+            section#options {
+                position: absolute;
+                width: 19rem; }
+                
+            section#description { left: 0.5rem; }
+            section#levelSelect { right: 0.5rem; }
+            section#controls { left: 0.5rem; top: 13.5rem; }
+            section#options { left: 0.5rem; top: 20rem; }
+            
+            section#levelSelect { height: 29rem; }
+            section#levelSelect h5 { margin-top: 1rem; } } }
+
+    
 }
 
 @include forAspect(landscape) {
     body {
         width: 73rem;
         height: 37rem;
-        margin-top: 4rem; 
+        margin-top: 2rem; 
         
         #container { 
             height: 35rem;
@@ -147,6 +205,34 @@ button {
         margin-right: auto; }
 }
 
+
+.debug-size, .debug-aspect {
+    position: fixed;
+    background: #333;
+    color: #CCC; }
+
+.debug-aspect {
+    left: 0;
+    bottom: 0; }
+
+.debug-size {
+    right: 0;
+    bottom: 0; }
+
+.small-only, .medium-only, .large-only, .ultralarge-only, .wide-only,
+.landscape-only, .even-only, .portrait-only, .tall-only {
+    display: none; }
+
+@include forSize(small) { .small-only { display: inline; } }
+@include forSize(medium) { .medium-only { display: inline; } }
+@include forSize(large) { .large-only { display: inline; } }
+@include forAspect(ultraLarge) { .ultralarge-only { display: inline; } }
+@include forAspect(wide) { .wide-only { display: inline; } }
+@include forAspect(landscape) { .landscape-only { display: inline; } }
+@include forAspect(even) { .even-only { display: inline; } }
+@include forAspect(portrait) { .portrait-only { display: inline; } }
+@include forAspect(tall) { .tall-only { display: inline; } }
+
 /* @include forSize(medium) {
     html { font-size: 80%; }
     body {