[refs #1] Begin laying out bios

inuitcss · Jul 12, 2016 · fc22884 · fc22884
1 parent ade9132
commit fc22884
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 46 deletions.
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -1,12 +1,17 @@
 ---
 layout: default
 ---
-<article>
 
-  <header>
-    <h1>{{ page.title }}</h1>
-  </header>
+<div class="o-wrapper">
 
-  {{ content }}
+  <article>
 
-</article>
+    <header>
+      <h1>{{ page.title }}</h1>
+    </header>
+
+    {{ content }}
+
+  </article>
+
+</div>
diff --git a/about/team.md b/about/team.md
@@ -3,42 +3,56 @@ layout: page
 title: Team
 ---
 
-<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>
-
-<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>
-
-<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>
-
-<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>
+<ul class="o-layout">
+
+  <li class="o-layout__item  u-12/12">
+
+    <figure class="o-media  c-bio-mini">
+      <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>
+
+  <li class="o-layout__item  u-6/12">
+
+    <figure class="o-media  c-bio-mini">
+      <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>
+
+  <li class="o-layout__item  u-6/12">
+
+    <figure class="o-media  c-bio-mini">
+      <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>
+
+  <li class="o-layout__item  u-6/12">
+
+    <figure class="o-media  c-bio-mini">
+      <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>
+
+  <li class="o-layout__item  u-6/12">
+
+    <figure class="o-media  c-bio-mini">
+      <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>
+
+</ul>
diff --git a/css/components/_components.bio-mini.scss b/css/components/_components.bio-mini.scss
@@ -0,0 +1,10 @@
+/* ==========================================================================
+   #BIO-MINI
+   ========================================================================== */
+
+.c-bio-mini {
+  padding: $unit;
+  background-color: color(primary);
+  color: color(pale);
+  border-radius: $inuit-global-radius;
+}
diff --git a/css/elements/_elements.headings.scss b/css/elements/_elements.headings.scss
@@ -0,0 +1,10 @@
+/* ==========================================================================
+   #HEADINGS
+   ========================================================================== */
+
+@import "../../node_modules/inuitcss/elements/elements.headings";
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 200;
+  letter-spacing: 0.033333333em;
+}
diff --git a/css/main.css b/css/main.css
diff --git a/css/main.scss b/css/main.scss
@@ -65,6 +65,7 @@
  * Logo.................inuitcss logo sprite.
  * Bands................Horizontal content bands.
  * Avatars..............Suite of different styles of avatar.
+ * Bio-mini.............Miniature bios as used on the Team page.
  *
  * UTILITIES
  * Clearfix.............Bind our clearfix onto a utility class.
@@ -110,7 +111,7 @@
 
 // ELEMENTS
 @import "elements/elements.page";
-@import "../node_modules/inuitcss/elements/elements.headings";
+@import "elements/elements.headings";
 @import "../node_modules/inuitcss/elements/elements.images";
 @import "../node_modules/inuitcss/elements/elements.tables";
 @import "elements/elements.links";
@@ -145,6 +146,7 @@
 @import "components/components.logo";
 @import "components/components.bands";
 @import "components/components.avatars";
+@import "components/components.bio-mini";