index.styl

@import "_common"
@import "_header"
@import "_sidebar"
@import "_sponsors-index"
@import "_modal"
@import "_themes"
@import "_vueschool.styl"

$width = 900px
$space = 40px

body
  background-color: darken($light, 10%)

#logo
  span
    font-size: 1.2em
  img
    display: none

.sidebar
  display: none

#mobile-bar
  &.top
    background-color: transparent
    box-shadow: none
    z-index: ($z-sidebar - 1)

.with-v3-banner
  #mobile-bar .logo
    display: none !important

#v3-banner
  display: block

#hero,
#news
  padding: $space 40px 30px
  background-color: #fff
  .inner
    max-width: $width * 1.4
    margin: 0 auto
  .left, .right
    display: inline-block
    vertical-align: top
  .left
    width: 39%
  .right
    width: 61%
  .hero-logo
    width: 215px
    height: 215px
    float: right
    margin-right: 60px
  h1
    font-weight: 300
    margin: 0
    font-size: 3.2em
  h2
    font-family: $logo-font
    font-weight: 500
    font-size: 2.4em
    margin: 0 0 10px
    display: none
  .button
    margin: 1em 0
    font-size: 1.05em
    font-weight: 600
    letter-spacing: .1em
    min-width: 8em
    text-align: center
    &:not(:last-child)
      margin-right: 1%
  .social-buttons
    list-style-type: none
    padding: 0
    li
      display: inline-block
      vertical-align: middle
      margin-right: 15px

#news
  padding: $space 20px 70px
  text-align: center
  p
    margin-top: 10px
  a
    color: $green
  .newsletter-form
    position: relative
    max-width: 550px
    margin: 0 auto
    box-sizing: border-box
  .newsletter-input
    width: 100%
    box-sizing: border-box
    padding: 10px 80px 10px 20px
    height: 50px
    border-radius: 50px
    border: 1px solid #ccc
    font-size: 16px
    &:focus
      outline: none
      border-color: #42b983
  .newsletter-button.button
    position: absolute
    padding: 4px 20px
    margin: 0
    height: calc(100% - 8px)
    right: 4px
    top: 4px
    cursor: pointer

#special
  background-color: #fff
  text-align: center
  padding-bottom: 30px
  h3
    margin 0
  a
    color $light
    width: 160px
    height: 80px
    line-height: 80px
  a, span, img
    display: inline-block
    vertical-align: middle
  img
    margin: 15px 0 0
    max-width: 100%
    max-height: 100%

#highlights
  background-color: #fff
  padding-bottom: 70px
  .inner
    max-width: $width
    margin: 0 auto
    text-align: center
  .point
    width: 33%
    display: inline-block
    vertical-align: top
    box-sizing: border-box
    padding: 0 2em
    h2
      color: $green
      font-size: 1.5em
      font-weight: 400
      margin: 0
      padding: .5em 0
    p
      color: $light

#footer
  padding: $space 0
  color: #fff
  text-align: center
  .social-icon
    margin 0 5px
    svg
      width 18px
      height 18px
  a
    font-weight: 700
    color: #fff

@media screen and (max-width: $width)
  body
    -webkit-text-size-adjust: none
    font-size: 14px
  .sidebar
    display: block
  #header
    display: none
  #mobile-bar
    display: block
  #hero
    padding: $space 40px 30px
    .hero-logo
      float: none
      margin: 30px 0 15px
      width: 140px
      height: 140px
    .left, .right
      text-align: center
      width: 100%
    h1
      font-size: 2em
    h2
      display: block
    .button
      font-size: .9em
  #special-sponsor
    span
      display: block
    img
      width: 125px
  #highlights
    .point
      display: block
      margin: 0 auto
      width: 300px
      padding: 0 40px 30px
      &:before
        content: "—"
        color: $green