source/stylesheets/refills/_breadcrumbs.scss in refills-0.0.1 vs source/stylesheets/refills/_breadcrumbs.scss in refills-0.0.2

@@ -1,77 +1,84 @@
 .breadcrumb { 
   $breadcrumb-border-color: $base-border-color;
   $breadcrumb-border: 1px solid $breadcrumb-border-color;
-  $breadcrumb-height: 2em;
+  $breadcrumb-height: $base-line-height * 1.5;
   $breadcrumb-arrow-color: $breadcrumb-border-color;
   $breadcrumb-background: $base-body-color;
-  $breadcrumb-inactive-hover-color: darken($breadcrumb-border-color, 5);
+  $breadcrumb-inactive-hover-color: $breadcrumb-background;
+  $breadcrumb-color: $medium-gray;
+  $breadcrumb-color-hover: $base-accent-color;
+  $breadcrumb-color-active: $breadcrumb-color;
 
-  margin: 0;
-  padding: 0;
-  border-radius: $base-border-radius;
-  display: inline-block;
+  @include inline-block;
+  text-align: left;
+  margin-bottom: $base-line-height;
 
   a {
-    color: $base-font-color;
+    @include inline-block;
     background-color: $breadcrumb-background;
     border: $breadcrumb-border;
-    display: inline-block;
+    color: $breadcrumb-color;
     line-height: $breadcrumb-height;
-    text-decoration: none;
-    padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
-    position: relative;
     margin-right: -5px;
+    font-size: .8em;
+    padding: 0 $breadcrumb-height/4 0 $breadcrumb-height/2;
+    position: relative;
+    text-decoration: none;
+    margin-bottom: 2px;
 
     &:first-child {
       padding-left: $breadcrumb-height/2;
       border-top-left-radius: $base-border-radius;
       border-bottom-left-radius: $base-border-radius;
     }
 
     &:last-child {
-      font-weight: bold;
       background-color: $breadcrumb-background;
-      padding-right: $breadcrumb-height/2;
-      border-top-right-radius: $base-border-radius;
+      color: $breadcrumb-color-active;
       border-bottom-right-radius: $base-border-radius;
+      border-top-right-radius: $base-border-radius;
+      padding-right: $breadcrumb-height/2;
     }
 
     &:hover {
+      color: $breadcrumb-color-hover;
       background-color: $breadcrumb-inactive-hover-color;
     }
 
     &:hover:after {
       border-left-color: $breadcrumb-inactive-hover-color;;
     }
 
     &:after,
-    &:before { 
-      content: ''; 
-      display: block; 
-      border-top: $breadcrumb-height/2 solid transparent;
+    &:before {
+      @include position(absolute, 0px auto 0px 100%);
       border-bottom: $breadcrumb-height/2 solid transparent;
       border-left: $breadcrumb-height/4 solid transparent;
-      position: absolute;
+      border-top: $breadcrumb-height/2 solid transparent;
+      content: '';
+      display: block;
       margin: auto;
-      top: 0;
-      bottom: 0;
-      left: 100%;
       z-index: 2;
     }
 
     &:last-child:after,
     &:last-child:before {
        border: none;
     }
 
-    &:before { 
+    &:before {
       border-left-color: $breadcrumb-arrow-color;
       margin-left: 1px;
       z-index: 1;
     }
-    &:after { 
+    &:after {
       border-left-color: $breadcrumb-background;
+    }
+
+    @include media($medium-screen) {
+      font-size: 1em;
+      padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
     }
   }
 }