diff --git a/app/styles/common/site-chrome.sass b/app/styles/common/site-chrome.sass index 43cfd6087..5558403f8 100644 --- a/app/styles/common/site-chrome.sass +++ b/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 diff --git a/app/styles/home.sass b/app/styles/home.sass index 231778406..1a10de61c 100644 --- a/app/styles/home.sass +++ b/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: 606px + height: 626px + @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 diff --git a/app/templates/base.jade b/app/templates/base.jade index bfbd50258..182de7a76 100644 --- a/app/templates/base.jade +++ b/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") diff --git a/app/templates/home.jade b/app/templates/home.jade index d28401a6a..bc0ce1c28 100644 --- a/app/templates/home.jade +++ b/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")