codecombat/app/styles/home.sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#home-view

  #kids-coding-container
    $coding-image-size: 272px
    position: relative
    width: 960px + $coding-image-size
    margin: 0px auto

    @media screen and ( max-width: 1279px )
      display: none

    .kid-coding
      position: absolute
      z-index: 1
      top: -57px
      @media screen and ( max-height: 800px )
        top: 50px

      &#boy-coding
        left: -$coding-image-size / 2

      &#girl-coding
        right: -$coding-image-size / 2

  #spacer
    height: 626px
    @media screen and ( max-height: 800px )
      height: 510px
    
  #play-button, #or-ipad, #apple-store-button, #slogan, .alert
    text-align: center
    text-transform: uppercase
    font-weight: bold
    position: absolute
    margin-right: auto
    margin-left: auto
    left: 0
    right: 0
    font-weight: bold
  
  #play-button
    text-align: center
    padding-top: 170px
    font-size: 50px
    color: rgb(255,253,149)
    text-shadow: 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black
    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
    
    &:hover
      background-position: 0 0
      color: rgb(230,180,75)
      text-decoration: none
    
  #or-ipad
    top: 540px
    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
    width: 276px
    padding: 15px
    font-size: 28px
    line-height: 32px
    color: rgb(50,40,31)

    @media screen and ( max-height: 800px )
      top: 451px

  .alert
    top: 213px
    border: 5px solid darkred

  &.hour-of-code
    #site-footer
      background-color: rgb(70, 58, 44)
      height: 185px

      .hour-of-code-explanation
        color: #9e8777
        text-align: center

        a
          color: lighten(#0b63bc, 10%)

body[lang='ru'], body[lang^='de'], body[lang^='pt-BR'], body[lang='pl'], body[lang='tr'], body[lang^='nl'], body[lang^='cs'], body[lang^='sv'], body[lang^='el'], body[lang^='hu'], body[lang^='bg']
  #home-view #slogan
    font-size: 22px
    line-height: 23px
Trying to standardize sass imports in an effort to test #1615, to no avail. 2014-09-30 19:17:54 -04:00			`@import "app/styles/mixins"`
			`@import "app/styles/bootstrap/variables"`
Ready for action, sir! 2014-01-03 13:32:13 -05:00
			`#home-view`
Added kids coding on homepage. 2015-08-08 08:35:08 -04:00
			`#kids-coding-container`
			`$coding-image-size: 272px`
			`position: relative`
Pulled in kids coding on homepage image to be visible on screens as small as 1280px wide. 2015-08-10 14:02:19 -04:00			`width: 960px + $coding-image-size`
Added kids coding on homepage. 2015-08-08 08:35:08 -04:00			`margin: 0px auto`

Pulled in kids coding on homepage image to be visible on screens as small as 1280px wide. 2015-08-10 14:02:19 -04:00			`@media screen and ( max-width: 1279px )`
Added kids coding on homepage. 2015-08-08 08:35:08 -04:00			`display: none`

			`.kid-coding`
			`position: absolute`
			`z-index: 1`
			`top: -57px`
			`@media screen and ( max-height: 800px )`
			`top: 50px`

			`&#boy-coding`
			`left: -$coding-image-size / 2`

			`&#girl-coding`
			`right: -$coding-image-size / 2`

Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`#spacer`
Set up the new site chrome to compress when the height of the screen is < 800px tall. 2014-11-24 18:36:55 -05:00			`height: 626px`
			`@media screen and ( max-height: 800px )`
Exposed home slogan for the smaller screens. Re-hid App Store button for now. 2014-11-25 17:31:14 -05:00			`height: 510px`
Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00
			`#play-button, #or-ipad, #apple-store-button, #slogan, .alert`
			`text-align: center`
			`text-transform: uppercase`
			`font-weight: bold`
			`position: absolute`
			`margin-right: auto`
			`margin-left: auto`
			`left: 0`
			`right: 0`
			`font-weight: bold`

			`#play-button`
New level page with new artwork. 2014-03-16 19:59:48 -04:00			`text-align: center`
Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`padding-top: 170px`
			`font-size: 50px`
			`color: rgb(255,253,149)`
			`text-shadow: 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black`
			`top: 308px`
			`width: 218px`
			`height: 219px`
Set up the new site chrome to compress when the height of the screen is < 800px tall. 2014-11-24 18:36:55 -05:00			`@media screen and ( max-height: 800px )`
			`top: 78px`

Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`background-image: url(/images/pages/home/play_button.png)`
			`background-position: 0 219px`
New level page with new artwork. 2014-03-16 19:59:48 -04:00
Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`&:hover`
			`background-position: 0 0`
			`color: rgb(230,180,75)`
			`text-decoration: none`
Ready for action, sir! 2014-01-03 13:32:13 -05:00
Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`#or-ipad`
			`top: 540px`
			`color: rgb(119,101,84)`
			`font-size: 17px`
			`max-width: 211px`
Set up the new site chrome to compress when the height of the screen is < 800px tall. 2014-11-24 18:36:55 -05:00
			`@media screen and ( max-height: 800px )`
			`top: 310px`
Removed the new button from the home view. 2014-03-16 20:48:16 -04:00
Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`#apple-store-button`
			`top: 593px`
			`height: 63px`
More zazz for home page code language selection. 2014-06-19 17:55:16 -04:00
Set up the new site chrome to compress when the height of the screen is < 800px tall. 2014-11-24 18:36:55 -05:00			`@media screen and ( max-height: 800px )`
			`top: 363px`

Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`#slogan`
			`top: 681px`
			`height: 132px`
			`width: 276px`
			`padding: 15px`
			`font-size: 28px`
			`line-height: 32px`
			`color: rgb(50,40,31)`
Set up the new site chrome to compress when the height of the screen is < 800px tall. 2014-11-24 18:36:55 -05:00
			`@media screen and ( max-height: 800px )`
			`top: 451px`
Fixed #1868. Fixed #1846. Made sure that home view slogan always fits in all languages. 2014-12-07 23:17:22 -05:00
Set up the new Heald-designed site chrome. 2014-11-22 20:38:01 -05:00			`.alert`
			`top: 213px`
Shrinking home page height as much as easily possible to be able to fit it on anyone's screen. 2014-11-23 23:13:06 -05:00			`border: 5px solid darkred`
Updated Hour of Code visitor counting. 2014-11-27 12:44:08 -05:00
			`&.hour-of-code`
			`#site-footer`
			`background-color: rgb(70, 58, 44)`
			`height: 185px`

			`.hour-of-code-explanation`
			`color: #9e8777`
			`text-align: center`

			`a`
			`color: lighten(#0b63bc, 10%)`
Fixed #1868. Fixed #1846. Made sure that home view slogan always fits in all languages. 2014-12-07 23:17:22 -05:00
Changed language specific style in home.sass So that it only affects pt-BR instead of pt-PT. 2015-02-16 13:23:42 -05:00			`body[lang='ru'], body[lang^='de'], body[lang^='pt-BR'], body[lang='pl'], body[lang='tr'], body[lang^='nl'], body[lang^='cs'], body[lang^='sv'], body[lang^='el'], body[lang^='hu'], body[lang^='bg']`
Fixed #1868. Fixed #1846. Made sure that home view slogan always fits in all languages. 2014-12-07 23:17:22 -05:00			`#home-view #slogan`
			`font-size: 22px`
			`line-height: 23px`