Add browser support tables

_data/browser_support.yml

@@ -0,0 +1,8 @@
+shapes:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: support, version: 37 }
+  - { name: Firefox, support: no-support, version: 32 }
+  - { name: Safari, support: support, version: 7.1 }
+  - { name: Opera, support: support, version: 24 }
+  - { name: iOS, support: support, version: 8 }
+  - { name: Android, support: no-support, version: 4.4 }

_includes/browser-support.html

@@ -0,0 +1,17 @@
+{% comment %}
+Valid browser names are id's in flat-icons
+internet-explorer, chrome, firefox, safari, opera, ios, android
+{% endcomment %}
+<table class="browser-support">
+<tr>
+{% for browser in browser_support %}
+    {% assign icon = browser.name | downcase | replace:' ','-' %}
+    <td class="col-{{ browser_support | size }}"><img src="{{ site.baseurl }}/img/browser-logos/{{ icon }}.svg" alt="{{ browser.name }}" title="{{ browser.name }}"></td>
+{% endfor %}
+</tr>
+<tr>
+{% for browser in browser_support %}
+    <td class="{{ browser.support }}">{{ browser.version }}</td>
+{% endfor %}
+</tr>
+</table>

_posts/2014-08-01-shapes.md

@@ -8,6 +8,7 @@ full_image: project_header/icon-shapes.svg
 bg: 67C9b6
 permalink: shapes
 ---
+
 #CSS Shapes
 
 ##What is it?
@@ -48,6 +49,9 @@ Ideas for future work are currently being collected in the [level 2 specificatio
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.shapes %}
+{% include browser-support.html %}
+
 CSS Shapes for floats is implemented in WebKit and Blink.
 It is [available](http://caniuse.com/#feat=css-shapes){:target="_blank"} in Chrome 37 and Opera 24. It will be available in Safari 8 (and the 7.1 and 6.2 updates).
 The [level 1 specification](http://dev.w3.org/csswg/css-shapes/){:target="_blank"}

_sass/_common.scss

@@ -3,6 +3,7 @@
  * * Typography
  * * Color & Decoration
  * * Images & Background Images
+ * * Widgets
  */
 
 @mixin halftone($color, $image: 'inherit') {
@@ -353,3 +354,45 @@ a {
 .header.home {
   @include halftone($offbgcolor, '/img/trianglify-background.svg')
 }
+
+/* Widgets */
+
+/* Browser-Support */
+
+$support-color: lighten(desaturate(#84b24e, 15), 5);
+$partial-support-color: desaturate(#fccb5f, 25);
+$no-support-color: desaturate(#f0614a, 25);
+
+.browser-support {
+  table-layout: fixed;
+  width: 100%;
+  @for $i from 5 through 8 {
+      .col-#{$i} { width: 100%/$i; }
+  }
+  td {
+    box-sizing: border-box;
+    max-height: 1em;
+    border-left: 2px solid white;
+    border-right: 2px solid white;
+    padding: 0.25em 0.5em;
+    text-align: center;
+    vertical-align: middle;
+  }
+  tr:first-child {
+    td {
+      padding-top: 0.4em;
+    }
+    td:nth-child(2n + 1) {
+      background-color: #eee;
+    }
+  }
+  .support {
+    background-color: $support-color;
+  }
+  .partial-support {
+    background-color: $partial-support-color;
+  }
+  .no-support {
+    background-color: $no-support-color;
+  }
+}