codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 05:53:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Scott Erickson 2014-11-24 15:36:55 -08:00
parent bbc9b615ea
commit 6b8a9593ef
4 changed files with 41 additions and 6 deletions

21
app/styles/common/site-chrome.sass
View file

@ -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

17
app/styles/home.sass
View file

@ -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

5
app/templates/base.jade
View file

@ -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")

4
app/templates/home.jade
View file

@ -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")