_grid-items.scss in refills-0.1.0

- old
+ new

@@ -1,14 +1,29 @@
 @mixin grid-item-columns($columns) {
   width: (100% / 12) * $columns;
 }
 
 .grid-items {
-  $grid-items-background: $base-body-color;
-  $grid-item-background: desaturate($base-accent-color, 30); 
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-accent-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;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $grid-items-background: $base-background-color;
+  $grid-item-background: desaturate($base-accent-color, 30%);
   $grid-item-colors: 
-    desaturate($base-accent-color, 30), 
+    desaturate($base-accent-color, 30%), 
     #3581A5, 
     #5FBEBE,
     #98C79A,
     #A7A891, 
     #BDCC97,
@@ -21,34 +36,37 @@
 
   @include clearfix;
     
   .grid-item {
     @include transition (all 0.2s ease-in-out);
-    height: $grid-item-height;
     background: $grid-item-background;
-    width: 100%;
-    overflow: hidden;
+    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;
+    border-top: 0;
+    cursor: pointer;
     float: left;
+    height: $grid-item-height;
+    overflow: hidden;
+    outline: none;
     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;
+    width: 100%;
 
     @include media($large-screen) {
       @include grid-item-columns($grid-item-columns);
     }
 
-    @for $i from 1 to 8 { // assign colors from $grid-item-colors list
+    @for $i from 1 through length($grid-item-colors) { // 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);
+        box-shadow: inset 0px 0px 1px 2px darken($background-from-list, 10%);
+
+        &:focus,
         &:hover {
-          background-color: darken($background-from-list, 10);
+          background-color: darken($background-from-list, 10%);
           background-repeat: no-repeat;
           background-position: top;
           background-size: cover;
         }
       }
@@ -56,23 +74,24 @@
   }
 
   .grid-item img {
       display: block;
       height: 3em;
-      margin: auto;
       margin-bottom: 1em;
+      margin: auto;
     }
 
   .grid-item h1 {
       color: $grid-item-color;
       font-size: 1.3em;
-      margin-bottom: .4em;
+      margin-bottom: 0.4em;
     }
 
   .grid-item p {
       margin: auto;
-      color: transparentize($grid-item-color, .3);
+      color: transparentize($grid-item-color, 0.3);
+      
       @include media($medium-screen) {
         max-width: 70%;
       }
     }
 
@@ -86,12 +105,12 @@
       }  
     }
   }
 
   .grid-item-image {
-    background: url(https://raw.github.com/Magnus-G/Random/master/lake-transparent.png);
+    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
     background-color: $grid-item-background;
-    background-repeat: no-repeat;
     background-position: top;
+    background-repeat: no-repeat;
     background-size: cover;
   }
 }