refills 0.1.0 → 0.2.0

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

@@ -3,26 +3,15 @@
 }
 
 .grid-items-lines {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-background-color: white !default;
   $dark-gray: #333 !default;
   $light-gray: #DDD !default;
-  $medium-screen: em(640) !default;
-  $large-screen: em(860) !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-
-  p {
-    line-height: 1.5em;
-  }
-
-  a {
-    text-decoration: none;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $grid-items-background: $base-background-color;
   $grid-item-background: $base-background-color;
-  $grid-item-border: 1px solid transparentize($base-font-color, 0.8); 
+  $grid-item-border: 1px solid transparentize($base-font-color, 0.8);
   $grid-item-columns: 4;
   $grid-item-big-columns: 8;
   $grid-item-color: $base-font-color;
@@ -30,18 +19,19 @@
 
   @include clearfix;
   position: relative;
-    
+
   .grid-item {
-    @include transition (all 0.2s ease-in-out);
     background: $grid-item-background;
     border-bottom: $grid-item-border;
     border-right: $grid-item-border;
     cursor: pointer;
     float: left;
     height: $grid-item-height;
-    overflow: hidden;
     outline: none;
+    overflow: hidden;
     padding: 2em;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
     width: 100%;
 
     @include media($large-screen) {
@@ -69,7 +59,8 @@
 
   .grid-item p {
       color: transparentize($grid-item-color, 0.4);
-      
+      line-height: 1.5em;
+
       @include media($medium-screen) {
         max-width: 70%;
       }
@@ -82,14 +73,14 @@
     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 {
     background: $grid-items-background;
-    bottom: 0px;
+    bottom: 0;
     height: 3px;
     position: absolute;
     width: 100%;
@@ -99,7 +90,7 @@
     background: $grid-items-background;
     height: 100%;
     position: absolute;
-    right: 0px;
+    right: 0;
     width: 4px;
   }
 }

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

@@ -3,29 +3,18 @@
 }
 
 .grid-items {
-  ///////////////////////////////////////////////////////////////////////////////////
-  $base-accent-color: #477DCA !default;
+  $action-color: #477DCA !default;
   $base-background-color: white !default;
-  $medium-screen: em(640) !default;
-  $large-screen: em(860) !default;
-  
-  p {
-    line-height: 1.5em;
-  }
-
-  a {
-    text-decoration: none;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
   $grid-items-background: $base-background-color;
-  $grid-item-background: desaturate($base-accent-color, 30%);
-  $grid-item-colors: 
-    desaturate($base-accent-color, 30%), 
-    #3581A5, 
+  $grid-item-background: desaturate($action-color, 30%);
+  $grid-item-colors:
+    desaturate($action-color, 30%),
+    #3581A5,
     #5FBEBE,
     #98C79A,
-    #A7A891, 
+    #A7A891,
     #BDCC97,
     #979EA0;
   $grid-item-border-size: 9px;
@@ -35,9 +24,8 @@
   $grid-item-height: 14em;
 
   @include clearfix;
-    
+
   .grid-item {
-    @include transition (all 0.2s ease-in-out);
     background: $grid-item-background;
     border-bottom: $grid-item-border-size solid $grid-items-background;
     border-left: ($grid-item-border-size / 2) solid $grid-items-background;
@@ -46,10 +34,12 @@
     cursor: pointer;
     float: left;
     height: $grid-item-height;
-    overflow: hidden;
     outline: none;
+    overflow: hidden;
     padding: 2em;
     text-align: center;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
     width: 100%;
 
     @include media($large-screen) {
@@ -60,13 +50,13 @@
       &: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%);
+        box-shadow: inset 0 0 1px 2px darken($background-from-list, 10%);
 
         &:focus,
         &:hover {
           background-color: darken($background-from-list, 10%);
-          background-repeat: no-repeat;
           background-position: top;
+          background-repeat: no-repeat;
           background-size: cover;
         }
       }
@@ -74,35 +64,36 @@
   }
 
   .grid-item img {
-      display: block;
-      height: 3em;
-      margin-bottom: 1em;
-      margin: auto;
-    }
+    display: block;
+    height: 3em;
+    margin: 0 auto 1em;
+  }
 
   .grid-item h1 {
-      color: $grid-item-color;
-      font-size: 1.3em;
-      margin-bottom: 0.4em;
-    }
+    color: $grid-item-color;
+    font-size: 1.3em;
+    margin-bottom: 0.4em;
+  }
 
   .grid-item p {
-      margin: auto;
-      color: transparentize($grid-item-color, 0.3);
-      
-      @include media($medium-screen) {
-        max-width: 70%;
-      }
+    color: transparentize($grid-item-color, 0.3);
+    line-height: 1.5em;
+    margin: auto;
+
+    @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%;
-      }  
+      }
     }
   }
 

data/source/stylesheets/refills/_hero.scss

@@ -1,63 +1,30 @@
-.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 {
+  $large-screen: 50em !default;
+  align-items: center;
+  background: image-url("background-image.png");
+  background-position: right;
+  background-size: none;
+  display: flex;
+  justify-content: center;
+  min-height: 25em;
+  padding: 2em;
+
+  @include media($large-screen) {
+    background-position: left;
+    background-size: cover;
+    justify-content: flex-end;
   }
 
-  .hero-inner {
-    @include outer-container;
-    @include clearfix;
-    color: $hero-color;
-    margin: auto;
-    padding: 3.5em;
+  .hero-content {
+    max-width: 20em;
     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%;
-        }
-      }
+    @include media($large-screen) {
+      text-align: left;
     }
+  }
 
-    button {
-      @include button(flat, $base-accent-color);
-      padding: 0.7em 1em;
-    }
+  .hero-logo {
+    margin: auto;
   }
 }

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

@@ -1,29 +1,19 @@
 .hover-tile-outer {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-line-height: 1.5em !default;
-  $medium-screen: em(640) !default;
-  
-  h4 {
-    margin: 0;
-  }
-
-  p {
-    line-height: $base-line-height;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $medium-screen: 40em !default;
   $hover-tile-height: 10em;
+  $base-spacing: 1.5em;
 
   background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
+  background-color: beige;
   background-position: top;
   background-size: cover;
-  background-color: beige;
   border: 1px solid $base-border-color;
   cursor: pointer;
   height: $hover-tile-height;
   margin-bottom: $base-line-height;
-  
+
   @include media($medium-screen) {
     width: 40%;
   }
@@ -34,16 +24,16 @@
   }
 
   .hover-tile-container:hover > .hover-tile {
-    @include transform(translate(0, -100%));
+    transform: translate(0, -100%);
   }
 
   .hover-tile {
-    @include transition(all, 0.2s ease-in-out);
     background: inherit;
     color: white;
     height: inherit;
     overflow: hidden;
     padding: $base-spacing;
+    transition: all 0.2s ease-in-out;
   }
 
   .hover-tile-hidden {
@@ -51,10 +41,11 @@
 
     p {
       color: transparentize(#fff, 0.3);
+      line-height: $base-line-height;
     }
 
     h4 {
-      margin-bottom: 0.5em;
+      margin: 0 0 0.5em 0;
     }
   }
 }

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

@@ -1,46 +1,24 @@
 .bullets {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-line-height: 1.5em !default;
-  $base-accent-color: #477DCA !default;
-  $base-link-color: $base-accent-color !default;
+  $action-color: #477DCA !default;
   $dark-gray: #333 !default;
   $base-font-color: $dark-gray !default;
-  
-  padding: 0;
-
-  h2 {
-    margin: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-  }
-
-  img {
-    max-width: 100%;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $icon-bullet-size: 3.5em;
 
-  @include display(flex);
-  @include flex-wrap(wrap);
-  margin-bottom: $base-line-height;
+  display: flex;
+  flex-wrap: wrap;
   margin: 1em;
+  margin-bottom: $base-line-height;
   overflow: auto;
+  padding: 0;
 
   .bullet {
-    @include flex-basis(20em);
-    @include flex-grow(1);
+    flex-basis: 20em;
+    flex-grow: 1;
   }
 
   .bullet-icon {
-    background: $base-accent-color;
+    background: $action-color;
     border-radius: 50%;
     float: left;
     height: $icon-bullet-size;
@@ -49,27 +27,40 @@
   }
 
   .bullet-icon-1 {
-    background: $base-accent-color;
+    background: $action-color;
   }
 
   .bullet-icon-2 {
-    background: adjust-hue($base-accent-color, -50%);
+    background: adjust-hue($action-color, -50%);
   }
 
   .bullet-icon-3 {
-    background: adjust-hue($base-accent-color, -140%);
+    background: adjust-hue($action-color, -140%);
   }
 
   .bullet-content {
-    margin-left: $icon-bullet-size * 1.4;
     margin-bottom: 2em;
+    margin-left: $icon-bullet-size * 1.4;
   }
 
   h2 {
     border-bottom: 1px solid transparentize($base-font-color, 0.8);
     display: inline-block;
     font-size: $icon-bullet-size / 2.5;
-    margin-bottom: $icon-bullet-size / 6;
+    margin: 0 0 ($icon-bullet-size / 6) 0;
     padding-top: $icon-bullet-size / 7;
   }
+
+  li {
+    list-style: none;
+  }
+
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+  }
+
+  img {
+    max-width: 100%;
+  }
 }