style.styl

/*
Table of Contents:
  Hero
  How it works
  Header buttons
  News
  Featured User
*/


// Hero
.hero
  height: 70vh
  background-size: cover


// How it works
.howItWorks
  background-color: #eee
  margin: 0
  padding: 1em


// Header buttons
header.label
  cursor: auto
  color: white
  font-size: 1.5em
  position: absolute
  left: -.3em
  background-color: #bbb
  &:hover // materialize fix
    box-shadow()
    background-color: #bbb
  i
    font-size: 1em
    display: inline-flex
    vertical-align: -5%

// News
.newsFeed article
  display: flex
  flex-direction: column
  align-items: center
  padding-bottom: 5em
  h4, h5
    text-align: center
  *
    width: 65%


// Featured User
.featuredUser
  // Desktop
  +above(700px)
    margin-bottom: 2em
    article
      align-items: center
      display: flex
      flex-wrap: wrap
      justify-content: center
      margin: 1.5em 1em
      +above(1200px)
        margin: 3em auto
        max-width: 1200px
    .left
      flex: 1 35%
      padding: 0 25px
      text-align: center
      img
        width: 100%
        max-width: 30em
        min-width: 15em
        border-radius: 800px
    .right
      flex: 1 60%
      padding: 0 2vw
      h1
        font-size: 5vw
        margin: 0 0 1rem 0
    +above(1200px)
      .right h1 {font-size: 60px}

  // Mobile
  +below(700px)
    margin-bottom: .8em
    article
      display: flex
      align-items: center
      justify-content: center
      margin: 1em 1em 1.5em 1em
      .left
        img
          width: 10em
          border-radius: 800px
      .right
        margin-left: 5vw
        h1
          font-size: 2em
          margin: 0 0 1rem 0
        p
          display: none