add photos, shorten quotes

_src/_assets/styles/bigchain/_testimonials.scss

@@ -1,24 +1,21 @@
 
 .testimonials {
-    // clear after every third column
+    margin-bottom: 0;
+
     .grid__col {
-        flex-basis: 33%;
+        display: flex;
+        flex-wrap: wrap;
     }
 }
 
 .testimonial {
-
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.testimonial__image {
+.testimonial__quote,
-
+.testimonial__caption {
-}
+    flex: 0 0 100%;
-
-.testimonial__avatar {
-    width: 85px;
-    height: 85px;
-    display: block;
-    margin: auto;
 }
 
 .testimonial__quote {
@@ -27,10 +24,13 @@
     position: relative;
     border: none;
     color: $text-color;
-    padding-right: 0;
+    padding: 0;
+    font-style: normal;
 
     // styling
-
+    margin-bottom: $spacer;
+    font-size: 95%;
+    align-self: flex-start;
 
     // quote characters
     &:before {
@@ -38,9 +38,54 @@
         font-size: 250%;
         color: $gray;
         line-height: 1;
+        margin-left: -1rem;
     }
 }
 
 .testimonial__caption {
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    border-top: 2px solid $gray;
+    padding-top: $spacer;
+    position: relative;
 
+    // speech triangle
+    &:before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        left: 4rem;
+        top: 0;
+        border-width: .9rem .9rem 0 0;
+        border-color: transparent;
+        border-top-color: $gray;
+    }
+}
+
+.testimonial__avatar {
+    @extend .img--responsive;
+    width: 4rem;
+    height: 4rem;
+    display: inline-block;
+    margin-right: $spacer;
+    border-radius: 50%;
+    border: 2px solid $gray;
+}
+
+.testimonial__cite {
+    @extend .small;
+    font-style: normal;
+    flex: 1;
+    color: $gray-light;
+}
+
+.testimonial__name {
+    font-weight: $font-weight-bold;
+}
+
+.testimonial__org {
+    display: block;
 }

_src/_data/testimonials.yml

@@ -1,14 +1,20 @@
 
 - name: Juan Benet
   org: IPFS
-  quote: 'BigchainDB is exciting! It marries the performance and power of traditional databases with the public verifiability of blockchains. I look forward to adding merkle-linking and digital signatures to all kinds of traditional databases with BigchainDB and IPFS!'
+  link: https://ipfs.io
+  image: /assets/img/juan-benet.png
+  quote: 'BigchainDB is exciting! It marries the performance and power of traditional databases with the public verifiability of blockchains.'
 
 
 - name: Ian Worrall
   org: Encrypted Labs
-  quote: 'BigchainDB is a game changer.  I have been involved in the Blockchain industry full-time since 2013 and this is the first true solution I have seen that resolves many of the restraints with the Bitcoin blockchain.  Not only is the technology associated with BigchainDB fantastic but the approach, team, and scalability potential is unparalleled.  I am excited to watch it unfold.'
+  link: http://encryptedlabs.com
+  image: /assets/img/ian-worrall.jpg
+  quote: 'BigchainDB is a game changer. This is the first true solution I have seen that resolves many of the restraints with the Bitcoin blockchain.'
 
 
 - name: Fabian Vogelsteller
   org: Ethereum Foundation
-  quote: 'I think distributed databases and Blockchains can learn a lot from each other. BigchainDB is the logical next step in scaling non-computational blockchains, especially when storing larger datasets on a permission basis.'
+  link: https://www.ethereum.org
+  image: /assets/img/fabian-vogelsteller.jpg
+  quote: 'BigchainDB is the logical next step in scaling non-computational blockchains.'

_src/_includes/testimonials.html

@@ -8,12 +8,12 @@
 
             <blockquote class="testimonial__quote">{{ testimonial.quote }}</blockquote>
 
-            <div class="testimonial__image">
-                <img class="testimonial__avatar" src="/assets/img/{{ testimonial.image }}">
-            </div>
-
             <figcaption class="testimonial__caption">
-                {{ testimonial.name }} &bull; &bull; {{ testimonial.org }}
+                <img class="testimonial__avatar" src="{{ testimonial.image }}">
+                <cite class="testimonial__cite">
+                    <span class="testimonial__name">{{ testimonial.name }}</span>
+                    <span class="testimonial__org"><a href="{{ testimonial.link }}">{{ testimonial.org }}</a></span>
+                </cite>
             </figcaption>
         </figure>
     </div>

_src/index.html

@@ -97,6 +97,10 @@ js: page-front.min.js
 <section class="section">
     <div class="row row--wide">
 
+        <header class="section-header">
+            <h1 class="section-title">What others are saying</h1>
+        </header>
+
         {% include testimonials.html %}
 
     </div>