staple 0.0.9 → 0.1.0

data/source/stylesheets/staple/_footer.scss

@@ -1,76 +0,0 @@
-.footer {
-  $footer-background: desaturate(darken($base-accent-color, 20), 30);
-  $footer-color: white;
-  $footer-link-color: transparentize($footer-color, .6);
-  $footer-disclaimer-color: transparentize($footer-color, .6);
-
-  background: $footer-background;
-  padding: $base-spacing*2 $gutter;
-  width: 100%;
-
-  .footer-logo {
-    text-align: center;
-    margin-bottom: 2em;
-
-    img {
-      height: 3em;
-    }
-  } 
-
-  .footer-links {
-    @include clearfix;
-    margin-bottom: $base-spacing;
-
-    @include media($medium-screen) {
-      @include shift(3);
-    }
-  }
-
-  ul {
-    margin-bottom: $base-spacing*2;
-
-    @include media($medium-screen) {
-      @include span-columns(3);
-      @include omega(3n);
-      @include clearfix;
-    }
-  }
-
-  li {
-    text-align: center;
-
-    @include media($medium-screen) {
-      text-align: left;
-    }
-  }
-
-  li a {
-    color: $footer-link-color;
-
-    &:hover {
-      color: transparentize($footer-color, 0);
-    }
-  }
-
-  li h3 {
-    color: $footer-color;
-    font-size: 1em;
-    font-weight: 800;
-    margin-bottom: .4em;
-  }  
-
-  hr {
-    border: 1px solid transparentize($footer-disclaimer-color, .3);
-    margin: 0 auto $base-spacing;
-    width: 12em;
-  }
-
-  p {
-    color: $footer-disclaimer-color;
-    font-size: .9em;
-    line-height: 1.5em;
-    margin: auto;
-    max-width: 35em;
-    text-align: center;
-  }
-}

data/source/stylesheets/staple/_grid-items-lines.scss

@@ -1,86 +0,0 @@
-@mixin grid-item-columns($columns) {
-  width: (100% / 12) * $columns;
-}
-
-.grid-items-lines {
-  $grid-items-background: $base-background-color;
-  $grid-item-background: $base-background-color;
-  $grid-item-border: 1px solid transparentize($base-font-color, .8); 
-  $grid-item-columns: 4;
-  $grid-item-big-columns: 8;
-  $grid-item-color: $base-font-color;
-  $grid-item-height: 14em;
-
-  @include clearfix;
-  position: relative;
-    
-  .grid-item {
-    @include transition (all 0.2s ease-in-out);
-    height: $grid-item-height;
-    background: $grid-item-background;
-    width: 100%;
-    overflow: hidden;
-    float: left;
-    padding: 2em;
-    border-right: $grid-item-border;
-    border-bottom: $grid-item-border;
-    cursor: pointer;
-
-    @include media($large-screen) {
-      @include grid-item-columns($grid-item-columns);
-    }
-
-    &:hover {
-      background: transparentize($grid-item-color, .95);
-    }
-  }
-
-  .grid-item img {
-      display: block;
-      height: 2.5em;
-      margin-bottom: 1.2em;
-      opacity: .2;
-    }
-
-  .grid-item h1 {
-      color: $grid-item-color;
-      font-size: 1.3em;
-      margin-bottom: .4em;
-    }
-
-  .grid-item p {
-      color: transparentize($grid-item-color, .4);
-      @include media($medium-screen) {
-        max-width: 70%;
-      }
-    }
-
-  .grid-item-big {
-    @include media($large-screen) {
-      @include grid-item-columns($grid-item-big-columns);
-    }
-    p {
-      @include media($medium-screen) {
-        max-width: 60%;
-      }  
-    }
-  }
-
-  // this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
-  .bottom-cover {
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-    height: 3px;
-    background: $grid-items-background;
-  }
-
-  .right-cover {
-    position: absolute;
-    right: 0px;
-    height: 100%;
-    width: 4px;
-    background: $grid-items-background;
-  }
-}
-

data/source/stylesheets/staple/_grid-items.scss

@@ -1,97 +0,0 @@
-@mixin grid-item-columns($columns) {
-  width: (100% / 12) * $columns;
-}
-
-.grid-items {
-  $grid-items-background: $base-background-color;
-  $grid-item-background: desaturate($base-accent-color, 30); 
-  $grid-item-colors: 
-    desaturate($base-accent-color, 30), 
-    #3581A5, 
-    #5FBEBE,
-    #98C79A,
-    #A7A891, 
-    #BDCC97,
-    #979EA0;
-  $grid-item-border-size: 9px;
-  $grid-item-columns: 4;
-  $grid-item-big-columns: 8;
-  $grid-item-color: white;
-  $grid-item-height: 14em;
-
-  @include clearfix;
-    
-  .grid-item {
-    @include transition (all 0.2s ease-in-out);
-    height: $grid-item-height;
-    background: $grid-item-background;
-    width: 100%;
-    overflow: hidden;
-    float: left;
-    padding: 2em;
-    border-top: 0;
-    border-bottom: $grid-item-border-size solid $grid-items-background;
-    border-left: $grid-item-border-size /2 solid $grid-items-background;
-    border-right: $grid-item-border-size /2 solid $grid-items-background;
-    text-align: center;
-    cursor: pointer;
-
-    @include media($large-screen) {
-      @include grid-item-columns($grid-item-columns);
-    }
-
-    @for $i from 1 to 8 { // assign colors from $grid-item-colors list
-      &:nth-child(#{$i}) {
-        $background-from-list: nth($grid-item-colors, $i);
-        background-color: $background-from-list;
-        box-shadow: inset 0px 0px 1px 2px darken($background-from-list, 10);
-        &:hover {
-          background-color: darken($background-from-list, 10);
-          background-repeat: no-repeat;
-          background-position: top;
-          background-size: cover;
-        }
-      }
-    }
-  }
-
-  .grid-item img {
-      display: block;
-      height: 3em;
-      margin: auto;
-      margin-bottom: 1em;
-    }
-
-  .grid-item h1 {
-      color: $grid-item-color;
-      font-size: 1.3em;
-      margin-bottom: .4em;
-    }
-
-  .grid-item p {
-      margin: auto;
-      color: transparentize($grid-item-color, .3);
-      @include media($medium-screen) {
-        max-width: 70%;
-      }
-    }
-
-  .grid-item-big {
-    @include media($large-screen) {
-      @include grid-item-columns($grid-item-big-columns);
-    }
-    p {
-      @include media($medium-screen) {
-        max-width: 60%;
-      }  
-    }
-  }
-
-  .grid-item-image {
-    background: url(/images/lake-transparent.png);
-    background-color: $grid-item-background;
-    background-repeat: no-repeat;
-    background-position: top;
-    background-size: cover;
-  }
-}

data/source/stylesheets/staple/_hero.scss

@@ -1,54 +0,0 @@
-.hero {
-  $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-repeat: no-repeat;
-  background-position: top;
-  background-size: cover;
-  padding-bottom: 4em;
-
-  .hero-logo img {
-    height: 3em;
-    margin-bottom: 2.5em;
-  }
-
-  .hero-inner {
-    @include outer-container;
-    @include clearfix;
-    padding: 3em;
-    margin: auto;
-    text-align: center;
-    color: $hero-color;
-
-    .hero-copy {
-      text-align: center;
-      
-      h1 {
-        font-size: 1.6em;
-        margin-bottom: .5em;
-
-        @include media($large-screen) {
-          font-size: 1.8em;
-        }
-      }
-
-      p {
-        font-family: $serif;
-        margin: auto;
-        margin-bottom: 3em; 
-        font-weight: 200;
-        line-height: 1.4em;
-
-        @include media($large-screen) {
-          font-size: 1.1em;
-          max-width: 40%;
-        }
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_hover-tile-animation.scss

@@ -1,52 +0,0 @@
-.hover-tile-outer {
-  $hover-tile-height: 10em;
-
-  background-position: bottom;
-  background-size: cover;
-  background: url("/images/mountains.png");
-  background-size: cover;
-  background-color: $base-accent-color;
-  border: 1px solid $base-border-color;
-  height: $hover-tile-height;
-  margin-bottom: $base-line-height;
-  cursor: pointer;
-  
-  @include media($medium-screen) {
-    width: 40%;
-  }
-
-  .hover-tile-container {
-    height: $hover-tile-height;
-    overflow: hidden;
-  }
-
-  .hover-tile-container:hover > .hover-tile {
-    @include transform(translate(0, -100%));
-  }
-
-  .hover-tile {
-    @include transition(all, .2s ease-in-out);
-    background:inherit;
-    color: white;
-    height:inherit;
-    padding: 1em 1.5em;
-  }
-
-  .hover-tile-visible {
-    color: transparentize(white, .3);
-    font-size: 2em;
-    font-weight: 200;  
-    padding-top: 1.5em;
-    text-align: center;
-  }
-
-  .hover-tile-hidden {
-    background: transparentize(black, .5);
-    h4 {
-      margin-bottom: .5em;
-    }
-    p {
-      color: transparentize(white, .3);
-    }
-  }
-}

data/source/stylesheets/staple/_icon-bullet-points.scss

@@ -1,63 +0,0 @@
-.bullets {
-  $icon-bullet-size: 3.5em;
-
-  overflow: auto;
-  margin-bottom: $base-line-height;
-
-  // change ".three-col-bullet" class to this for two bullet layout
-  .two-col-bullet {
-    @include media($large-screen) {
-      @include span-columns(6);
-      @include omega(2n);  
-    } 
-  }
-  
-  .three-col-bullet {
-    @include media($large-screen) {
-      @include span-columns(4);
-      @include omega(3n);
-    }
-  }
-
-  // change ".three-col-bullet" class to this for four bullet layout
-  .four-col-bullet {
-    @include media($large-screen) {
-      @include span-columns(3);
-      @include omega(4n);
-    }
-  }
-
-  .bullet-icon {
-    float: left;
-    background: $base-accent-color;
-    padding: $icon-bullet-size /4;
-    border-radius: 50%;
-    width: $icon-bullet-size;
-    height: $icon-bullet-size;
-  }
-
-  .bullet-icon-1 {
-    background: $base-accent-color;
-  }
-
-  .bullet-icon-2 {
-    background: adjust-hue($base-accent-color, -50);
-  }
-
-  .bullet-icon-3 {
-    background: adjust-hue($base-accent-color, -140);
-  }
-
-  .bullet-content {
-    margin-left: $icon-bullet-size *1.4;
-    margin-bottom: 2em;
-  }
-
-  h2 {
-    font-size: $icon-bullet-size /2.5;
-    padding-top: $icon-bullet-size /7;
-    margin-bottom: $icon-bullet-size /6;
-    border-bottom: 1px solid transparentize($base-font-color, .8);
-    display: inline-block;
-  }
-}

data/source/stylesheets/staple/_image-gradient-dynamic.scss

@@ -1,59 +0,0 @@
-.image-gradient-dynamic {
-  $image-gradient-color-top: red; 
-  $transparency-top: .9;
-  $image-gradient-color-bottom: green; 
-  $transparency-bottom: .6;
-  $vertical-angle: 0deg;
-
-  $image-gradient-color-left: teal; 
-  $transparency-left: .8;
-  $image-gradient-color-right: yellow; 
-  $transparency-right: .8;
-  $horizontal-angle: 90deg;
-
-  position: relative;
-  line-height: 0;
-  width: 100%;
-  margin-bottom: $base-line-height;  
-
-  img {
-   width: 100%;
-   height: auto;
-   position: relative;
-   top: 0;
-   left: 0; 
-  }
-
-  .copy {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: auto;
-    z-index: 999;
-    text-align: center;
-    @include transform(translate(-50%, -50%));
-
-    p {
-      line-height: 1.5em;
-      padding: 1em 2em;
-      position: relative;
-      color: white;
-      font-weight: 800;
-    }
-  }
-
-  .overlay {
-    @include linear-gradient($vertical-angle, transparentize($image-gradient-color-top, $transparency-top), 
-      transparentize($image-gradient-color-bottom, $transparency-bottom));
-    display: block;
-    @include position(absolute, 0px 0px 0px 0px);
-
-    &:after {
-      content: '';
-      @include linear-gradient($horizontal-angle, transparentize($image-gradient-color-left, $transparency-left), 
-        transparentize($image-gradient-color-right, $transparency-right));
-      display: block;
-      @include position(absolute, 0px 0px 0px 0px);
-    }
-  }
-}

data/source/stylesheets/staple/_intro-text.scss

@@ -1,67 +0,0 @@
-.intro-text {
-  $intro-text-width: 60%;
-
-  margin-bottom: 5em;
-  margin-top: 4em;
-  text-align: center;
-
-  h2 {
-    font-family: $serif;
-    font-weight: 800;
-    margin-bottom: .3em;
-
-    @include media($large-screen) {
-      font-size: 3em;
-      margin-bottom: .4em;
-    }
-  }
-
-  h3 {
-    background: $base-accent-color;
-    color: white;
-    display: inline-block;
-    font-size: .7em;
-    font-weight: 800;
-    margin-bottom: 2em;
-    padding: 3px 8px;
-    text-transform: uppercase;
-
-    @include media($large-screen) {
-      margin-bottom: 3.3em;
-    }
-  }
-
-  h4 {
-    color: lighten($base-font-color, 20);
-    font-size: 1.3em;
-    font-weight: 300;
-    line-height: 1.4em;
-    margin: 0 auto 1em;
-
-    @include media($large-screen) {
-      font-size: 1.7em;
-      line-height: 1.35em;
-      margin: 0 auto 1em;
-      width: $intro-text-width;
-    }    
-  }
-
-  p {
-    margin: auto;
-
-    @include media($large-screen) {
-      width: $intro-text-width;
-    }
-
-    a {
-      font-size: .8em;
-      font-weight: 400;
-      text-transform: uppercase;
-
-      span {
-        font-size: 1.3em;
-        line-height: 0;
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_label-alerts.scss

@@ -1,11 +0,0 @@
-$alert-red: #FBE3E4;
-$alert-yellow: #FFF6BF;
-$alert-green: #E6EFC2;
-
-$label-alerts: (alert: $alert-yellow, error: $alert-red, notice: lighten($base-accent-color, 40), success: $alert-green);
-
-@each $alert, $color in $label-alerts {
-  .label-#{$alert} {
-    color: darken($color, 45);
-  }
-}

data/source/stylesheets/staple/_modal.scss

@@ -1,147 +0,0 @@
-.modal {
-  $modal-padding: 3em;
-  $modal-background: $base-background-color;
-  $modal-close-color: $light-gray;
-  $modal-image-height: 135px;
-  $modal-image-width: $modal-image-height;
-
-  label {
-    cursor: pointer;
-    margin-bottom: 0;
-  }
-
-  label img {
-    $img-width: 300px;
-    border-radius: $img-width/2;
-    display: block;
-    max-width: $img-width;
-  }
-
-  input[type="checkbox"] {
-    display: none;
-  }
-
-  .btn {
-    @extend button;
-  }
-
-  .modal-open {
-    overflow: hidden;
-  }
-
-  .modal-window { // overlay
-    @include transition(opacity .25s ease);
-    @include position(fixed, 0px 0px 0px 0px);
-    background: rgba(0,0,0, .85);
-    opacity: 0;
-    text-align: left;
-    visibility: hidden;
-    z-index: 99999999999;
-
-    .modal-bg {
-      @include position(absolute, 0px 0px 0px 0px);
-      cursor: pointer;
-    }
-  }
-
-  .modal-close {
-    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
-    @include size(1.5em);
-    cursor: pointer;
-    background: $modal-background;
-
-    &:after,
-    &:before {
-      @include position(absolute, 3px 3px 0 50%);
-      @include transform(rotate(45deg));
-      @include size(.15em 1.5em);
-      background: $modal-close-color;
-      content: '';
-      display: block;
-      margin: -3px 0 0 -1px;
-    }
-
-    &:hover:after,
-    &:hover:before {
-      background: darken($modal-close-color, 10);
-    }
-
-    &:before {
-      @include transform(rotate(-45deg));
-    }
-  }
-
-  .modal-inner {
-    @include transition(opacity .25s ease);
-    border-radius: $base-border-radius;
-    background: $modal-background;
-    margin: auto;
-    max-height: 95%;
-    position: relative;
-    overflow: auto;
-    width: 95%;
-    padding: $modal-padding /2;
-    margin-top: .6em;
-
-    @include media($medium-screen) {
-      padding: $modal-padding;
-      width: 60%;
-      max-height: 60%;
-      margin-top: 10em;
-    }
-
-    @include media($large-screen) {
-      width: 50%;
-      margin-top: 10em;
-    }
-
-    h1 {
-      color: $base-font-color;
-      margin-bottom: .6em;
-      text-align: left;
-      text-transform: capitalize;
-    }
-
-    p.body, p.intro {
-      font-size: $base-font-size;
-      max-width: 100% !important;
-      text-align: left;
-
-      &.intro {
-        color: $blue;
-        line-height: 1.6em;
-      }
-
-      &.body { 
-        color: $base-font-color;
-        line-height: 1.45em;
-
-        @include media($medium-screen) {
-          @include columns(2 8em);
-        }
-      }
-    }
-
-    a.cta {
-      color: white;
-      display: inline-block;
-      margin-right: .5em;
-      margin-top: 1em;
-
-      &:last-child {
-        padding: 0 2em;
-      }
-    }
-  }
-
-  .modal-state:checked + .modal-window {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .modal-state:checked + .modal-window .modal-inner {
-    top: 0;
-  }
-}
-
-// Based on code by Kasper Mikiewicz