Set up the new site chrome to compress when the height of the screen is < 800px tall.

app/styles/common/site-chrome.sass

@@ -6,10 +6,17 @@
   &.show-background
     background: url(/images/pages/base/background.jpg) top center no-repeat    
     background-color: rgb(150,202,68)
+    
+    @media screen and ( max-height: 800px )
+      background-position: center -226px
+      
   padding-top: 185px
   max-width: 1920px
   margin: 0 auto
 
+  @media screen and ( max-height: 800px )
+    padding-top: 50px
+
   //- Nav
   
   #site-nav
@@ -22,7 +29,10 @@
     text-align: center
     min-width: 1024px
     z-index: 1
-
+    
+    @media screen and ( max-height: 800px )
+      top: -80px
+      
     #nav-logo
       position: absolute
       margin-right: auto
@@ -31,6 +41,15 @@
       right: 0
       top: -45px
       
+      @media screen and ( max-height: 800px )
+        display: none
+      
+    #small-nav-logo
+      display: none
+      @media screen and ( max-height: 800px )
+        display: inline-block
+        height: 30px
+      
     #site-nav-links
       position: absolute
       bottom: 21px

app/styles/home.sass

@@ -4,8 +4,9 @@
 #home-view
   
   #spacer
-    //height: 750px  // No one could see this; let's shrink it as much as we can.
+    height: 626px
-    height: 606px
+    @media screen and ( max-height: 800px )
+      height: 376px
     
   #play-button, #or-ipad, #apple-store-button, #slogan, .alert
     text-align: center
@@ -27,6 +28,9 @@
     top: 308px
     width: 218px
     height: 219px
+    @media screen and ( max-height: 800px )
+      top: 78px
+      
     background-image: url(/images/pages/home/play_button.png)
     background-position: 0 219px
     
@@ -40,11 +44,17 @@
     color: rgb(119,101,84)
     font-size: 17px
     max-width: 211px
+
+    @media screen and ( max-height: 800px )
+      top: 310px
     
   #apple-store-button
     top: 593px
     height: 63px
 
+    @media screen and ( max-height: 800px )
+      top: 363px
+
   #slogan
     top: 681px
     height: 132px
@@ -53,6 +63,9 @@
     font-size: 28px
     line-height: 32px
     color: rgb(50,40,31)
+
+    @media screen and ( max-height: 800px )
+      top: 451px
     
   .alert
     top: 213px

app/templates/base.jade

@@ -1,7 +1,10 @@
 block header
   #site-nav
-    img#nav-logo(src="/images/pages/base/logo.png", title="CodeCombat - Learn how to code by playing a game", alt="CodeCombat")
+    a(href="/")
+      img#nav-logo(src="/images/pages/base/logo.png", title="CodeCombat - Learn how to code by playing a game", alt="CodeCombat")
     div#site-nav-links
+      a(href="/")
+        img#small-nav-logo(src="/images/pages/base/logo.png", title="CodeCombat - Learn how to code by playing a game", alt="CodeCombat")
       a(href="/")
         span.glyphicon.glyphicon-home
       a(href="/about", data-i18n="nav.about")

app/templates/home.jade

@@ -5,9 +5,9 @@ block outer_content
   
   a#play-button(href="/play", data-i18n="common.play")
 
-  //#or-ipad(data-i18n="home.or_ipad")
+  #or-ipad(data-i18n="home.or_ipad")
   
-  //img(src="/images/pages/home/app_store_badge.svg")#apple-store-button
+  img(src="/images/pages/home/app_store_badge.svg")#apple-store-button
   
   #slogan(data-i18n="home.slogan")