adamrenklint/asimovjs.org

@-webkit-keyframes fadeUp

  0%
    opacity: 0
    -webkit-transform: translateY(30px) scale(0.98)

  70%
    opacity: 0
    -webkit-transform: translateY(30px) scale(0.98)

  100%
    opacity: 1
    -webkit-transform: translateY(0) scale(1)

@-moz-keyframes fadeUp

  0%
    opacity: 0
    -moz-transform: translateY(30px) scale(0.98)

  70%
    opacity: 0
    -moz-transform: translateY(30px) scale(0.98)

  100%
    opacity: 1
    -moz-transform: translateY(0) scale(1)

@keyframes fade

  0%
    opacity: 0

  40%
    opacity: 0

  100%
    opacity: 1


.wrapper
  width: 620px
  margin: 80px auto 0

  h1
    margin-bottom: 30px
    font-size 60px
    color $accent
    animation: fade 800ms ease

  p
    font-size: 1.625em
    line-height: @font-size + 1%
    animation: fade 800ms ease

  .terminal
    width: 440px
    height: 280px
    background: white
    box-shadow: inset 0 0 0 1px #e8e8e8, 0 1px 3px rgba(black,0.054)
    border-radius: 7px
    margin: 40px auto 0
    position: relative
    animation: fadeUp 1200ms ease

    &:after
      content: ''
      position: absolute
      bottom: -5px
      left: -5px
      width: 450px
      height: 50%
      background: -moz-linear-gradient(top, rgba(252,252,252,0) 0%, rgba(252,252,252,1) 50%, rgba(252,252,252,1) 100%)
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,0)), color-stop(50%,rgba(252,252,252,1)), color-stop(100%,rgba(252,252,252,1)))
      background: -webkit-linear-gradient(top, rgba(252,252,252,0) 0%,rgba(252,252,252,1) 50%,rgba(252,252,252,1) 100%)
      background: -o-linear-gradient(top, rgba(252,252,252,0) 0%,rgba(252,252,252,1) 50%,rgba(252,252,252,1) 100%)
      background: -ms-linear-gradient(top, rgba(252,252,252,0) 0%,rgba(252,252,252,1) 50%,rgba(252,252,252,1) 100%)
      background: linear-gradient(to bottom, rgba(252,252,252,0) 0%,rgba(252,252,252,1) 50%,rgba(252,252,252,1) 100%)
      z-index: 2

    .header
      width: 100%
      box-sizing: border-box
      padding: 15px 0
      border-bottom: 1px solid #e8e8e8
      position: relative

      &:before
        content:''
        position: absolute
        top: 11px
        left: 10px
        height: 10px
        width: 38px
        background: url('../images/windowcontrols.svg') no-repeat center center
        background-size: 100%
        opacity: 0.3
        transform: scale(0.9)

    .terminalContent
      font-family: 'Source Code Pro'
      text-align: left
      padding: 10px 20px

      p
        font-size: 1.063em
        margin-bottom: 8px
        color: $darker

  .callToActions
    margin: -80px 0 0 0
    position: relative
    z-index: 3
    animation: fadeUp 1200ms ease

    a
      margin: 0 10px

.tweet
  position: fixed
  bottom: 20px
  left: 20px
  z-index: 1