Merge pull request #431 from pastelsky/contributor-heads

Contributor heads

Author: skipjack

components/contributors/contributors-style.scss

@@ -1,9 +1,37 @@
+@import 'functions';
+
+.contributors__list {
+  padding: 6px;
+}
+
 .contributor {
-  display: inline-block;
-  margin-top:1em;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
   margin-right: 1em;
+  font-size: 14px;
 
   img {
-    height: 50px;
+    height: 45px;
+    width: 45px;
+    border-radius: 50%;
+    box-shadow: 0 0 2px rgba(0,0,0,0.3);
+  }
+
+  .contributor__name {
+    color: getColor(fiord);
+    margin-top: -6px;
+    box-shadow: 0 0 2px rgba(0,0,0,0.3);
+    line-height: 1.4;
+    transition: color 0.1s;
+    padding: 0 6px;
+    border-radius: 2px;
+    background: transparentize(getColor(white), 0.05);
+  }
+
+  &:hover {
+    .contributor__name {
+      color: lighten(getColor(denim), 5%);
+    }
   }
 }

components/contributors/contributors.jsx

@@ -9,14 +9,15 @@ export default ({contributors}) => {
   return (
     <div className="contributors">
       <hr />
-      <h3>Contributors:</h3>
+      <h3>Contributors</h3>
       <div className="contributors__list">
         {
           (contributors).map((contributor) => (
             <a key={ contributor }
               className="contributor"
               href={ `https://github.com/${contributor}` }>
-              <img src={ `https://github.com/${contributor}.png?size=50` } />
+              <img src={ `https://github.com/${contributor}.png?size=90` } />
+              <span className="contributor__name"> {contributor}</span>
             </a>
           ))
         }