[refs #1] Add initial avatars

about/team.md

@@ -2,12 +2,43 @@
 layout: page
 title: Team
 ---
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat.
+<figure class="o-media">
+  <img src="/assets/img/avatars/harry-roberts.jpg" alt="" class="o-media__img  c-avatar" />
+  <div class="o-media__body">
+    <h2>Harry Roberts</h2>
+    <h3>Lead Developer, Founder</h3>
+  </div>
+</figure>
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer
+<figure class="o-media">
+  <img src="/assets/img/avatars/nenad-jelovac.jpg" alt="" class="o-media__img  c-avatar" />
+  <div class="o-media__body">
+    <h2>Nenad Jelovac</h2>
+    <h3>Core Developer</h3>
+  </div>
+</figure>
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras laoreet ultrices ligula eget tempus. Aenean metus purus, iaculis ut imperdiet eget, sodales et massa. Duis pellentesque nisl vel massa dapibus non lacinia velit volutpat.
+<figure class="o-media">
+  <img src="/assets/img/avatars/anselm-hannemann.jpg" alt="" class="o-media__img  c-avatar" />
+  <div class="o-media__body">
+    <h2>Anselm Hannemann</h2>
+    <h3>Core Developer</h3>
+  </div>
+</figure>
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras laoreet ultrices ligula eget tempus. Aenean metus purus, iaculis ut imperdiet eget, sodales et massa. Duis pellentesque nisl vel massa dapibus non lacinia velit volutpat. Maecenas accumsan interdum sodales. In hac habitasse platea dictumst. Pellentesque ornare blandit orci, eget
+<figure class="o-media">
+  <img src="/assets/img/avatars/dennis-heibult.jpg" alt="" class="o-media__img  c-avatar" />
+  <div class="o-media__body">
+    <h2>Dennis Heibült</h2>
+    <h3>Core Developer</h3>
+  </div>
+</figure>
+
+<figure class="o-media">
+  <img src="/assets/img/avatars/florian-Bouvot.jpg" alt="" class="o-media__img  c-avatar" />
+  <div class="o-media__body">
+    <h2>Florian Bouvot</h2>
+    <h3>Core Developer</h3>
+  </div>
+</figure>

css/components/_components.avatars.scss

@@ -0,0 +1,19 @@
+/* ==========================================================================
+   #AVATARS
+   ========================================================================== */
+
+.c-avatar {
+  border-radius: 100%;
+  width:  128px;
+  height: 128px;
+}
+
+.c-avatar--small {
+  width:  64px;
+  height: 64px;
+}
+
+.c-avatar--large {
+  width:  64px;
+  height: 64px;
+}

css/main.scss

@@ -64,6 +64,7 @@
  * Lock-up..............The logo contained in the site’s header.
  * Logo.................inuitcss logo sprite.
  * Bands................Horizontal content bands.
+ * Avatars..............Suite of different styles of avatar.
  *
  * UTILITIES
  * Clearfix.............Bind our clearfix onto a utility class.
@@ -143,6 +144,7 @@
 @import "components/components.lockup";
 @import "components/components.logo";
 @import "components/components.bands";
+@import "components/components.avatars";
 
 
 

index.html

@@ -51,11 +51,11 @@ <h1><a href="/">Home</a></h1>
 
 
 
-  <h2><a href="/about">About</a></h2>
+  <h2><a href="/about/">About</a></h2>
 
   <ul>
     <li>
-      <a href="/about/team.html">Team</a>
+      <a href="/about/team/">Team</a>
     </li>
   </ul>