Contents

.landing-wraper
  // fallback
  background-color: $blue
  background-image: url($baseurl + 'assets/img/content/aboutme_small.png'), linear-gradient(to bottom right, $vivid-blue , $blue)
  background-position: right
  background-repeat: no-repeat
  background-size: auto 100vh
  height: 100vh
  max-height: 100vh

.landing-content
  padding: 30vh 10vw 0

.landing-page-sub-title
  display: inline
  padding-right: 5px

.btn-landing
  display: flex
  justify-content: space-between
  margin: 4rem 2rem
  width: 380px

  .btn-outline
    color: $vivid-pink

@media screen and ( min-width: 376px )
  .landing-wraper
    background-image: url($baseurl + 'assets/img/content/aboutme_large.png'), linear-gradient(to bottom right, $vivid-blue , $blue)

@media screen and ( max-width: 767px )
  // display on ipad but not phone
  .landing-page-sub-title
    display: none

@media screen and ( max-width: 768px )
  .btn-landing
    display: none

  .landing-content
    padding: 20vh 5vw 0

  .mouse
    animation: intro 1s
    border: 1px solid $soft-white
    border-radius: 11px
    height: 40px
    left: 5vw
    position: absolute
    top: 75vh
    width: 20px

  .scroll
    animation: finger 2.5s infinite
    background: $vivd-yellow
    border-radius: 4px
    display: block
    height: 5px
    margin: 30px auto
    width: 4px

  @keyframes intro
    from
      opacity: 0
      transform: translateY(40px)

    to
      opacity: 1
      transform: translateY(0)

  @keyframes finger
    from
      opacity: 0

    to
      opacity: 1
      transform: translateY(-20px)

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
made-slowly-0.0.1	_sass/landing.sass