Resize to fit content to screen. Hi-res skull now scales.

public/main.js

@@ -36,6 +36,7 @@ var UI = {
 
     if (UI.entry.container.html() != html) {
       UI.entry.container.html(html);
+      setTimeout(UI.shrinkToFit, 1);
     }
   },
 
@@ -66,6 +67,20 @@ var UI = {
     });
   },
 
+  shrinkToFit: function(){
+    var fontSize = parseInt($('html').css('font-size'), 10);
+    if (fontSize < 20) { return; }
+    var elem = $('#cc li:last-child');
+    var maxHeight = $('html').outerHeight();
+    var delta = maxHeight - (elem.offset().top + elem.outerHeight());
+    console.log(delta);
+    if (delta < 0) {
+      var a = (delta < -200) ? 10 : 1;
+      $('html').css('font-size', (fontSize - a) + 'px');
+      setTimeout(UI.shrinkToFit, 1);
+    }
+  },
+
   start: function(){
     UI.entry.loadTemplate();
     UI.connectToSocket();

public/screen.css

@@ -3,7 +3,7 @@ html {
   color: white;
   height: 100%;
   font-family: "Liberation Sans", "Nimbus Sans", "Helvetica", sans-serif;
-  font-size: 110px;
+  font-size: 140px;
   overflow: hidden;
 }
 footer p {
@@ -26,15 +26,13 @@ li {
   float: left;
   border: 0.05em solid transparent;
 }
-.Failure {
-  background-color: #900;
-}
 .Success {
   background-color: #070;
 }
-.Failure p::before {
-  content: url(skull.png);
-  padding-right: 0.15em;
+.Failure {
+  background: #900 url(skull.png) no-repeat;
+  background-size: contain;
+  padding-left: 1.4em;
 }
 @-webkit-keyframes green-throb {
   50% { background-color: #0d0; }