%h1 Triangular Gradient<br>Mixin

.tri-test

%p.explain <span>Explanation of the mixin:</span><br>The mixin basically generates a gradient container<br>and two triangles that are used to block out the shape.<br>

%p.key <br><span>@include triangle($half-width, $height, $color-a, $color-b, $direction)</span><br><br>$half-width: <span> half of the total width</span><br>$height: <span>height of the triangle</span><br>$color-a/b:<span> colors used in gradient</span><br>$direction:<span>direction of trangle: up, down, left, right</span>

@import "compass/css3";

$pink:#8b156f;
$blue: #18214c;
$bkg: #222;
@import url(https://fonts.googleapis.com/css?family=Julius+Sans+One);

//SCROLL TO THE BOTTOM TO PLAY WITH THE MIXIN ITSELF
//START OF MIXIN
@mixin triangle($half-width, $height, $color-a, $color-b, $direction){
  position: relative;
  overflow: hidden;
  background: linear-gradient(-40deg,$color-a, $color-b);
  background: -webkit-linear-gradient(-40deg,$color-a, $color-b);
  background: -moz-linear-gradient(-40deg,$color-a, $color-b);
  width: 2*$half-width;
  height: $height;
  &:before, &:after{
    position: absolute;
    content:'';
    }
  @if $direction=="up"{
     &:before, &:after{
     border-left:$half-width solid transparent;
     border-right: $half-width solid transparent;
    border-top: $height solid $bkg;
  }
  &:before{
    margin-left: $half-width * -1;
  }
  &:after{
    margin-left: $half-width;
  }
  }
  @else if $direction=="down"{
     &:before, &:after{
     border-left:$half-width solid transparent;
     border-right: $half-width solid transparent;
    border-bottom: $height solid $bkg;
  }
  &:before{
    margin-left: $half-width * -1;
  }
  &:after{
    margin-left: $half-width;
  }
  }
  @else if $direction=="left"{
     &:before, &:after{
     border-top:$height/2 solid transparent;
     border-bottom: $height/2 solid transparent;
    border-left: $half-width*2 solid $bkg;
  }
  &:before{
    margin-top: ($height/2) * -1;
  }
  &:after{
    margin-top: $height/2;
  }
  }
  @else if $direction=="right"{
   &:before, &:after{
     border-top:$height/2 solid transparent;
     border-bottom: $height/2 solid transparent;
    border-right: $half-width*2 solid $bkg;
  }
  &:before{
    margin-top: ($height/2) * -1;
  }
  &:after{
    margin-top: $height/2;
  } 
  }
}
//END OF MIXIN

//TEXT STYLES
html{
  background: $bkg;
  font-family: "Julius Sans One", sans-serif;
  color: white;
  & h1{
    text-align: center;
    margin: 20px 0 -20px 0;
    font-size: 17px;
    letter-spacing: 5px;
    line-height: 30px;
  }
  & .explain{
    text-align: center;
    color: #777;
    font-size: 12px;
    line-height: 1.5em;
    letter-spacing: 1px;
    & span{
      color: #ccc;
    }
  }
}
.key{
  text-align: center;
  color: $pink;
  line-height: 1.5em;
  font-size: 13px;
  letter-spacing: 2px;
  padding-bottom: 50px;
  & span{
    color: #ddd;
  }
}


//MIXIN BEING USED
.tri-test{
 @include triangle(40px, 200px, $pink, $blue, down);
  margin: 50px auto;
}