Added difficulty option, score-keeping, and better levels.

snake/snake.scss

@@ -34,7 +34,7 @@ ul { list-style: none; }
 
     height: 1rem;
     width: 1rem;
-    
+
     &:nth-child(1) {
         top: -0.5rem; left: -0.5rem;
         border-width: 0.5rem 0 0 0.5rem; }
@@ -55,7 +55,7 @@ body {
     border: solid 0.5rem $accent1;
     background-color: $accent2;
     padding: 0.5rem;
-    position: relative; 
+    position: relative;
 
     & > .corner {
         width: 1.5rem;
@@ -67,17 +67,17 @@ body {
         border: solid 0.5rem $accent3;
         background-color: $in;
         color: $fg;
-        
-        position: relative; 
-        
+
+        position: relative;
+
         & > .corner {
             background-color: $accent3;
             border-color: $accent2; }
-            
+
         header {
             text-align: center;
             & > h1 { padding-top: 0.5rem; } }
-            
+
         section { transition: 1s; }
         section p, section ol, section ul { margin-left: 0.5rem; }
         section#editorControls { display: none; } }
@@ -122,7 +122,7 @@ button {
     .corner {
         border: none;
         background-color: $in;
-        
+
         height: 0.25rem;
         width: 0.25rem;
 
@@ -144,19 +144,19 @@ button {
 
 @include forAspect(wide) {
     body {
-        margin-top: 2rem; 
+        margin-top: 2rem;
 
         height: 37rem;
         width: 73rem;
-        
-        #container { 
+
+        #container {
             height: 35rem;
             width: 71rem;
-            
+
             section {
                 display: inline-block;
                 vertical-align: top; }
-            
+
             section#gameContainer {
                 width: 30rem;
                 margin-left: 20rem;
@@ -167,28 +167,30 @@ button {
                 height: 30rem; }
 
             section#description, section#levelSelect, section#controls,
-            section#options {
+            section#options, section#score {
                 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 { right: 0.5rem; top: 8rem; }
+            section#score { right: 0.5rem; }
+
+            section#levelSelect { height: 25rem; }
             section#levelSelect h5 { margin-top: 1rem; } } }
 
-    
+
 }
 
 @include forAspect(landscape) {
     body {
         width: 73rem;
         height: 37rem;
-        margin-top: 2rem; 
-        
-        #container { 
+        margin-top: 2rem;
+
+        #container {
             height: 35rem;
             width: 71rem; } }
 }
@@ -207,9 +209,10 @@ button {
 
 
 .debug-size, .debug-aspect {
+    font-family: "PT Mono" !important;
     position: fixed;
-    background: #333;
-    color: #CCC; }
+    background: black;
+    color: white; }
 
 .debug-aspect {
     left: 0;
@@ -232,83 +235,3 @@ button {
 @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 {
-        height: 36rem;
-        width: 62rem;
-        margin-top: 2rem;
-
-        #container {
-            height: 34rem;
-            width: 60rem; } } }
-
-@include forSize(large) {
-    body {
-        height: 36rem;
-        width: 62rem;
-        margin-top: 2rem;
-
-        #container {
-            height: 34rem;
-            width: 60rem; } } }
-
-@include forSize(ultraLarge) {
-    body {
-        height: 42rem;
-        width: 72rem;
-        margin-top: 4rem;
-
-        #container {
-            height: 40rem;
-            width: 70rem; } } }
-
-*/
-/*
-html {
-  background-color: white;
-  color: #354650;
-  
-  font-family: sans-serif;
-}
-
-body {
-  padding: 1em;
-}
-
-header {
-  background-color: #1E4119;
-  color: #FFFB51;
-  padding: 0.5rem 1rem;
-  font-family: "Exo 2";
-  font-weight: 900;
-
-  position: absolute;
-  left: 0; right: 0; top: 0;
-}
-
-header > h1 { font-size: 300%; }
-
-canvas { border: solid thin gray; }
-
-section {
-    display: inline-block;
-    margin: 0.5rem;
-    position: relative; }
-
-section:first-of-type { margin-top: 6rem; }
-
-label {
-    display: inline-block;
-    width: 12rem; }
-
-input[type=button] {
-    position: absolute;
-    right: 0; }
-
-#editorControls { display: none; }
-
-@media (max-width: 600px) {
-    header { text-align: center; } }
-*/