Contents

.hero {  
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default;
  $base-accent-color: #477DCA !default;
  $large-screen: em(860) !default;
  //////////////////////////////////////////////////////////////////////////////////

  $hero-background-top: #7F99BE; 
  $hero-background-bottom: #20392B;
  $hero-color: white;
  $gradient-angle: 10deg;
  $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';

  @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
  background-color: #324766;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3em;

  .hero-logo img {
    height: 4em;
    margin-bottom: 1em;
  }

  .hero-inner {
    @include outer-container;
    @include clearfix;
    color: $hero-color;
    margin: auto;
    padding: 3.5em;
    text-align: center;

    .hero-copy {
      text-align: center;
      
      h1 {
        font-size: 1.6em;
        margin-bottom: 0.5em;

        @include media($large-screen) {
          font-size: 1.8em;
        }
      }

      p {
        font-weight: 200;
        line-height: 1.4em;
        margin: 0 auto 3em auto; 

        @include media($large-screen) {
          font-size: 1.1em;
          max-width: 40%;
        }
      }
    }

    button {
      @include button(flat, $base-accent-color);
      padding: 0.7em 1em;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.1.0	source/stylesheets/refills/_hero.scss