hacketyhack/hackety-hack.com

View on GitHub
app/assets/stylesheets/home.css.scss

Summary

Maintainability
Test Coverage
@-webkit-keyframes sway {
  0% {
    -webkit-transform: rotate(-2deg);
    -webkit-transform-origin: 50% 0;
  }
  100% {
    -webkit-transform: rotate(2deg);
    -webkit-transform-origin: 50% 0;
  }
}

.body-home {
  #home-splash {
    border-top: 1px solid $heading + #444;
    .container {
      padding: 0;
      width: 976px;
    }
  }
}

.body-home #content-wrap {
  .container {
    padding-top: 0;
  }

  border-top: none;
  section {
    @include clearfix;
    background: white;
    padding-bottom: 1em;

    p {
      font-size: 1.25em;
      line-height: 1.75em;
      padding-bottom: 0.75em;
    }

    h1 {
      font-size: 3em;
      margin: 0 -18px 0.5em;
      padding: 0.5em 18px;
      color: white;
      border-bottom: 6px solid black;
    }

  }

  #download {
    background: white url("download.png") 0 4em no-repeat;
    h1 {
      background: $green url("felt.png");
      border-color: $green - #111;
    }
    .btn {
      @include columns(4);
      @include offset(5);
      text-align: center;
      margin-top: 1em;
      margin-bottom: 1em;

      .download {
        text-transform: uppercase;
        margin-bottom: 1em;
      }
      .version {
        font-size: 0.8em;
      }
    }
    .content {
      @include columns(10);
      @include offset(5);
    }
  }

  #explore {
    background: white url("explore.png") 95% 7em no-repeat;
    h1 {
      background: $linkColor url("felt.png");
      border-color: $linkColor - #111;
    }
    .content {
      @include columns(10);
      margin-left: 2em;
    }
  }

  #ask {
    background: white url("ask.png") 0 7em no-repeat;
    min-height: 340px;

    h1 {
      background: $orangered url("felt.png");
      border-color: $orangered;
    }
    .content {
      @include columns(10);
      @include offset(5);
    }
  }
}