From a0db312b91d164c06bfaef7132f487a4d3d3470b Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Wed, 29 Oct 2014 17:30:14 -0400 Subject: [PATCH] Some real data. --- _dist/_css/all.css | 4 +- _dist/_css/critical.css | 12 +---- _dist/_js/initial.js | 2 +- _dist/_js/main.js | 2 +- _dist/_js/respond.js | 2 +- _dist/index.php | 90 ++++++++++++++++++++------------------ _tmpl/_data/efforts.json | 78 +++++++++++++++++++++++++++++---- _tmpl/_partials/issues.hbs | 18 +++----- 8 files changed, 131 insertions(+), 77 deletions(-) diff --git a/_dist/_css/all.css b/_dist/_css/all.css index bfce441..f9deaf9 100755 --- a/_dist/_css/all.css +++ b/_dist/_css/all.css @@ -1,3 +1,3 @@ -/*! Project Name - v - 2014-10-24 +/*! Project Name - v - 2014-10-29 * Copyright (c) 2014 Mat Marquis - mat@matmarquis.com */ -body{background-image:url(_img/bg.png);background-image:url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%01%C2%00%00%00%E1%02%03%00%00%00%269%5D%FA%00%00%00%0CPLTE%F7%F7%F7%EF%F0%F0%F3%F4%F4%EC%ED%ED%9B%2B%93%D1%00%00%00%9AIDATx%DA%ED%CD%B1%11%40%40%18%84Q%CC%88%B5%A4%84K%AE%1E%AD%08%D1%24%05l%F2%A7g%DE%E6%DF%BE%A9%B4%B5%C7%F6J7g%D7%88D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%87%14%9F%D8%95%E5%F6V%96%DD%92%EF%27%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%E2O%C4%BBWv%A4X%EA%1A%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%E2%88%E2%07%C8%F2C%01%11%C1%19%FD%00%00%00%00IEND%AEB%60%82);font-family:Proxima Nova,sans-serif;margin:0;padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{color:#751415;font-weight:700;text-decoration:none;-webkit-font-smoothing:antialiased}.a11y-hide{color:transparent;display:block;font-size:1px;height:1px;overflow:hidden;position:absolute}img{max-width:100%}p{color:#e7e2e2;margin:1em 0;font-family:Proxima Nova,sans-serif}.sitehead{width:100%}.logo{margin:0}.logo img{display:block;margin:0 auto;padding:1.75em 0 1.5em;max-width:340px;width:60%}.issues{background:#2a2a2a;border-bottom:5px solid #000;margin-bottom:5em;clear:both}.feat{clear:both;width:100%}.feat:after{clear:both;content:"";display:block}.head{border-left:.3125em solid #000;clear:both;float:left;display:block;padding:.3em 0;position:relative;width:100%}.heading0 .head{background:#e20e03}.heading1 .head{background:#e62d23}.heading2 .head{background:#e73b33}.heading3 .head{background:#e74840}.heading4 .head{background:#f15048}.heading5 .head{background:#f55952}.feat+.feat .head{border-top:1px solid rgba(0,0,0,.25)}.head .feat-hed{float:left}.head .status{clear:both;opacity:.8;font-size:.925em;margin-top:.525em}@media(min-width:30em){.head .status{clear:none;float:right}}.body{max-height:0;overflow:hidden;border:1px solid red;-webkit-transition:1s max-height;transition:1s max-height}.open .body{max-height:9999px}.open .head{background:#000}.body{clear:both;padding-top:1em;padding-bottom:4em;width:100%}.body:after{content:"";clear:both;display:block}.body p{text-shadow:1px 1px 0 #000}@media(min-width:30em){.body .col-a{float:left;width:75.7894737%}.body .col-b{float:right;max-width:21.8947368%}}.head span,.body{display:block;margin:0 auto;padding:.5em 1.2em 0;max-width:1040px}.body{padding-bottom:2em}.usage{background:#eeeff0;border-left:6px solid #191818;clear:both;float:left;padding-left:1em;margin-top:1em;margin:1em 0 1.5em -6px;width:100%}.usage code{color:#191818;display:block;padding:1px;line-height:1.5;word-wrap:break-word}.feat-hed{-webkit-font-smoothing:antialiased;color:#fff;font:400 1.3125em/1.2 DIN Condensed,sans-serif;font-weight:400;margin:0;padding:.25em 0 .5em}.col-b{background:#222;margin:-.5em -1em 0 -1em}.impl-hed{color:#fafafa;display:block;font-size:.925em;margin:0 0 .5em 1em;padding-top:.75em;-webkit-font-smoothing:antialiased}.support{border-bottom:3px solid #111;display:block;text-align:justify;max-height:4em;padding:.5em 1em .25em;width:100%}.support:after{content:"";display:inline-block;width:100%;margin:0 auto}.support img{display:inline;margin:0 1px;padding:.15em 0;opacity:.15;max-width:40px;width:12.5%}.support img.partial-support{opacity:.5}.support img.full-support{opacity:1}@media(min-width:30em){.col-b{background:0;margin:0}.support{background:rgba(225,225,225,.95);border-radius:.25em;border-width:0;display:block;float:right;margin:0;max-height:inherit;padding:.25em .5em;width:auto}.support:after{display:none}.impl-hed{margin:0 0 .75em}.support img{display:block;width:32px}}@media(min-width:50em){.support img{float:left;width:28px}}@media(min-width:30em) and (max-width:50em){.impl-hed .abbr{display:none}}.subhed{background:#000;color:#f9f9f9;clear:both;display:inline-block;float:left;font-size:.975em;margin-left:-9999px;padding:.4em 1em .375em 9999px;-webkit-font-smoothing:antialiased}.docs{clear:both;margin-left:-6px;float:left;margin-bottom:1.5em;width:100%}.docs dt{background:#ebebec;border-left:6px solid #191818;border-right:1px solid rgba(200,200,200,.5);clear:left;color:#191818;float:left;font-weight:700;margin-right:.5em;min-width:8em}.docs dd{background:#efefef;border-left:6px solid #191818;clear:left;margin:0 0 .5em;min-width:70%;width:100%}.docs dd a{font-weight:400;text-indent:1em}.docs dt,.docs dd{display:block;padding:.25em .5em .2em}dt.published{background:#cee6b8}dd.published,dt.published{border-left-color:#334b11;color:#334b11}dt.draft{background:#efdadd}dd.draft,dt.draft{border-left-color:#761718;color:#761718}@media(min-width:50em){.docs dt,.docs dd{clear:none;width:auto}} \ No newline at end of file +body{background-image:url(_img/bg.png);background-image:url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%01%C2%00%00%00%E1%02%03%00%00%00%269%5D%FA%00%00%00%0CPLTE%F7%F7%F7%EF%F0%F0%F3%F4%F4%EC%ED%ED%9B%2B%93%D1%00%00%00%9AIDATx%DA%ED%CD%B1%11%40%40%18%84Q%CC%88%B5%A4%84K%AE%1E%AD%08%D1%24%05l%F2%A7g%DE%E6%DF%BE%A9%B4%B5%C7%F6J7g%D7%88D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%87%14%9F%D8%95%E5%F6V%96%DD%92%EF%27%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%E2O%C4%BBWv%A4X%EA%1A%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%22%91H%24%12%89D%E2%88%E2%07%C8%F2C%01%11%C1%19%FD%00%00%00%00IEND%AEB%60%82);font-family:Proxima Nova,sans-serif;margin:0;padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{color:#751415;font-weight:700;text-decoration:none;-webkit-font-smoothing:antialiased}.a11y-hide{color:transparent;display:block;font-size:1px;height:1px;overflow:hidden;position:absolute}img{max-width:100%}p{color:#e7e2e2;margin:1em 0;font-family:Proxima Nova,sans-serif}.sitehead{width:100%}.logo{margin:0}.logo img{display:block;margin:0 auto;padding:1.75em 0 1.5em;max-width:340px;width:60%}.issues{background:#2a2a2a;border-bottom:5px solid #000;margin-bottom:5em;clear:both}.feat{clear:both;width:100%}.feat:after{clear:both;content:"";display:block}.head{border-left:.3125em solid #000;clear:both;float:left;display:block;padding:.3em 0;position:relative;width:100%}.heading0 .head{background:#e20e03}.heading1 .head{background:#e62d23}.heading2 .head{background:#e73b33}.heading3 .head{background:#e74840}.heading4 .head{background:#f15048}.heading5 .head{background:#f55952}.feat+.feat .head{border-top:1px solid rgba(0,0,0,.25)}.head .feat-hed{float:left}.head .status{clear:both;opacity:.8;font-size:.925em;margin-top:.525em}@media(min-width:30em){.head .status{clear:none;float:right}}.body{display:none!important}.open .body{display:block!important}.open .head{background:#000}.body{clear:both;padding-top:1em;padding-bottom:4em;width:100%}.body:after{content:"";clear:both;display:block}.body p{text-shadow:1px 1px 0 #000}@media(min-width:30em){.body .col-a{float:left;width:75.7894737%}.body .col-b{float:right;max-width:21.8947368%}}.head span,.body{display:block;margin:0 auto;padding:.5em 1.2em 0;max-width:1040px}.body{padding-bottom:2em}.usage{background:#eeeff0;border-left:6px solid #191818;clear:both;float:left;padding-left:1em;margin-top:1em;margin:1em 0 1.5em -6px;width:100%}.usage code{color:#191818;display:block;padding:1px;line-height:1.5;word-wrap:break-word}.feat-hed{-webkit-font-smoothing:antialiased;color:#fff;font:400 1.3125em/1.2 DIN Condensed,sans-serif;font-weight:400;margin:0;padding:.25em 0 .5em}.col-b{background:#222;margin:-.5em -1em 0 -1em}.impl-hed{color:#fafafa;display:block;font-size:.925em;margin:0 0 .5em 1em;padding-top:.75em;-webkit-font-smoothing:antialiased}.support{border-bottom:3px solid #111;display:block;text-align:justify;max-height:4em;padding:.5em 1em .25em;width:100%}.support:after{content:"";display:inline-block;width:100%;margin:0 auto}.support img{display:inline;margin:0 1px;padding:.15em 0;opacity:.15;max-width:40px;width:12.5%}.support img.partial-support{opacity:.5}.support img.full-support{opacity:1}@media(min-width:30em){.col-b{background:0;margin:0}.support{background:rgba(225,225,225,.95);border-radius:.25em;border-width:0;display:block;float:right;margin:0;max-height:inherit;padding:.25em .5em;width:auto}.support:after{display:none}.impl-hed{margin:0 0 .75em}.support img{display:block;width:32px}}@media(min-width:50em){.support img{float:left;width:28px}}@media(min-width:30em) and (max-width:50em){.impl-hed .abbr{display:none}}.subhed{background:#000;color:#f9f9f9;clear:both;display:inline-block;float:left;font-size:.975em;margin-left:-9999px;padding:.4em 1em .375em 9999px;-webkit-font-smoothing:antialiased}.docs{clear:both;margin-left:-6px;float:left;margin-bottom:1.5em;width:100%}.docs dt{background:#ebebec;border-left:6px solid #191818;border-right:1px solid rgba(200,200,200,.5);clear:left;color:#191818;float:left;font-weight:700;margin-right:.5em;min-width:8em}.docs dd{background:#efefef;border-left:6px solid #191818;clear:left;margin:0 0 .5em;min-width:70%;width:100%}.docs dd a{font-weight:400;text-indent:1em}.docs dt,.docs dd{display:block;padding:.25em .5em .2em}dt.published{background:#cee6b8}dd.published,dt.published{border-left-color:#334b11;color:#334b11}dt.draft{background:#efdadd}dd.draft,dt.draft{border-left-color:#761718;color:#761718}@media(min-width:50em){.docs dt,.docs dd{clear:none;width:auto}} \ No newline at end of file diff --git a/_dist/_css/critical.css b/_dist/_css/critical.css index 865d9a4..aba5242 100755 --- a/_dist/_css/critical.css +++ b/_dist/_css/critical.css @@ -19,32 +19,22 @@ p{ color: rgb(231, 226, 226); margin-top: 1em; margin-right: 0px; margin-bottom: @media (min-width: 30em){ .head .status{ clear: none; float: right; } } -.body{ max-height: 0px; overflow-x: hidden; overflow-y: hidden; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; -webkit-transition-property: max-height; -webkit-transition-duration: 1s; -webkit-transition-timing-function: initial; -webkit-transition-delay: initial; } -.body{ clear: both; padding-top: 1em; padding-bottom: 4em; width: 100%; } .body p{ text-shadow: rgb(0, 0, 0) 1px 1px 0px; } @media (min-width: 30em){ .body .col-a{ float: left; width: 75.7894737%; } .body .col-b{ float: right; max-width: 21.8947368%; } } -.head span, .body{ display: block; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0.5em; padding-right: 1.2em; padding-bottom: 0px; padding-left: 1.2em; max-width: 1040px; } -.body{ padding-bottom: 2em; } +.head span{ display: block; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0.5em; padding-right: 1.2em; padding-bottom: 0px; padding-left: 1.2em; max-width: 1040px; } .usage{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(238, 239, 240); border-left-width: 6px; border-left-style: solid; border-left-color: rgb(25, 24, 24); clear: both; float: left; padding-left: 1em; margin-top: 1em; margin-right: 0px; margin-bottom: 1.5em; margin-left: -6px; width: 100%; background-position: initial initial; background-repeat: initial initial; } .usage code{ color: rgb(25, 24, 24); display: block; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; line-height: 1.5; word-wrap: break-word; } .feat-hed{ -webkit-font-smoothing: antialiased; color: rgb(255, 255, 255); font: normal normal 400 1.3125em/1.2 'DIN Condensed', sans-serif; font-weight: 400; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0.25em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; } .col-b{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(34, 34, 34); margin-top: -0.5em; margin-right: -1em; margin-bottom: 0px; margin-left: -1em; background-position: initial initial; background-repeat: initial initial; } .impl-hed{ color: rgb(250, 250, 250); display: block; font-size: 0.925em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 1em; padding-top: 0.75em; -webkit-font-smoothing: antialiased; } .support{ border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(17, 17, 17); display: block; text-align: justify; max-height: 4em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.25em; padding-left: 1em; width: 100%; } -.support img{ display: inline; margin-top: 0px; margin-right: 1px; margin-bottom: 0px; margin-left: 1px; padding-top: 0.15em; padding-right: 0px; padding-bottom: 0.15em; padding-left: 0px; opacity: 0.15; max-width: 40px; width: 12.5%; } -.support img.partial-support{ opacity: 0.5; } -.support img.full-support{ opacity: 1; } @media (min-width: 30em){ .col-b{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-position: 0px 50%; background-repeat: initial initial; } .support{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgba(225, 225, 225, 0.949219); border-top-left-radius: 0.25em 0.25em; border-top-right-radius: 0.25em 0.25em; border-bottom-right-radius: 0.25em 0.25em; border-bottom-left-radius: 0.25em 0.25em; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: block; float: right; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; max-height: inherit; padding-top: 0.25em; padding-right: 0.5em; padding-bottom: 0.25em; padding-left: 0.5em; width: auto; background-position: initial initial; background-repeat: initial initial; } .impl-hed{ margin-top: 0px; margin-right: 0px; margin-bottom: 0.75em; margin-left: 0px; } -.support img{ display: block; width: 32px; } -} -@media (min-width: 50em){ -.support img{ float: left; width: 28px; } } @media (max-width: 50em) and (min-width: 30em){ .impl-hed .abbr{ display: none; } diff --git a/_dist/_js/initial.js b/_dist/_js/initial.js index b7be39a..24d8bf9 100755 --- a/_dist/_js/initial.js +++ b/_dist/_js/initial.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-24 +/*! Project Name - v - 2014-10-29 * Copyright (c) 2014 Mat Marquis - mat@matmarquis.com */!function(a){"use strict";function b(c){if(f&&f.parentNode){var d=a.document.createElement("link");d.rel="stylesheet",d.href=c,f.parentNode.insertBefore(d,f)}else a.setTimeout(function(){b(c)},15)}function c(b){if(f&&f.parentNode){var d=a.document.createElement("script");d.src=b,f.parentNode.insertBefore(d,f)}else a.setTimeout(function(){c(b)},15)}var d,e=!0;e&&(d=a.document.getElementsByName("fonts")[0]);var f=a.document.getElementById("initialjs"),g=["enhancing enhanced"];if(d&&b(d.content),"querySelector"in a.document){a.document.documentElement.className+=" "+g.join(" ");var h=a.document.getElementsByName("fullcss")[0].content;if(h&&b(h),f){var i=f.getAttribute("data-fulljs");i&&c(i)}}}(this); \ No newline at end of file diff --git a/_dist/_js/main.js b/_dist/_js/main.js index 3692e80..3e2c9b4 100755 --- a/_dist/_js/main.js +++ b/_dist/_js/main.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-24 +/*! Project Name - v - 2014-10-29 * Copyright (c) 2014 Mat Marquis - mat@matmarquis.com */!function(){var a=document.querySelectorAll(".head"),b=function(){var a=this.parentNode,b=(a.querySelector(".body"),a.className.indexOf("open")>-1);a.setAttribute("class",b?a.className.replace("open",""):a.className+" open")};for(i=0,l=a.length;l>i;i++){var c=a[i];c.addEventListener("click",b),c.parentNode.setAttribute("class",c.parentNode.className+" heading"+i)}}(); \ No newline at end of file diff --git a/_dist/_js/respond.js b/_dist/_js/respond.js index 6071d56..a5a43e7 100755 --- a/_dist/_js/respond.js +++ b/_dist/_js/respond.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-24 +/*! Project Name - v - 2014-10-29 * Copyright (c) 2014 Mat Marquis - mat@matmarquis.com */ \ No newline at end of file diff --git a/_dist/index.php b/_dist/index.php index 0879fb9..8563e77 100755 --- a/_dist/index.php +++ b/_dist/index.php @@ -38,26 +38,30 @@
-

The basic srcset attribute

+

Basic srcset attribute

Active Development
+

Implementation Status

- Chrome - Firefox - Opera - Internet Explorer - Safari + + Chrome : true + + Firefox : + + Opera : true + + Safari : true + + Internet Explorer : +
- -

The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media - queries, it gives developers control as to when and if those images are presented to the user.

-

The picture element is one part of the HTML specification.

+

Usage

@@ -97,25 +101,29 @@
+

Implementation Status

- Chrome - Firefox - Opera - Internet Explorer - Safari + + Chrome : true + + Firefox : + + Opera : true + + Safari : + + Internet Explorer : +
- -

The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media - queries, it gives developers control as to when and if those images are presented to the user.

-

The picture element is one part of the HTML specification.

+

Usage

- 
<img src="small.jpg" srcset="small.jpg, big.jpg 2x">
 + 

       

 
       
Documentation

@@ -146,30 +154,34 @@
 

   

     
-      
The picture element

+      
picture element

       
Active Development

     
   

   

+    
     

       
Implementation Status

       

-        Chrome
-        Firefox
-        Opera
-        Internet Explorer
-        Safari
+        
+          Chrome : true
+        
+          Firefox : 
+        
+          Opera : true
+        
+          Safari : 
+        
+          Internet Explorer : 
+        
       

     

     

-
-      
The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media 
-        queries, it gives developers control as to when and if those images are presented to the user.

-      
The picture element is one part of the HTML specification.

+      

 
       
Usage

       

-        
<img src="small.jpg" srcset="small.jpg, big.jpg 2x">

+        

       

 
       
Documentation

@@ -201,29 +213,23 @@
   

     
       
Element Queries

-      
Proposal

+      
Initial Planning

     
   

   

+    
     

       
Implementation Status

       

-        Chrome
-        Firefox
-        Opera
-        Internet Explorer
-        Safari
+        
       

     

     

-
-      
The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media 
-        queries, it gives developers control as to when and if those images are presented to the user.

-      
The picture element is one part of the HTML specification.

+      

 
       
Usage

       

-        
<img src="small.jpg" srcset="small.jpg, big.jpg 2x">

+        

       

 
       
Documentation

diff --git a/_tmpl/_data/efforts.json b/_tmpl/_data/efforts.json
index 8e9c42a..2793e26 100644
--- a/_tmpl/_data/efforts.json
+++ b/_tmpl/_data/efforts.json
@@ -1,25 +1,87 @@
 {
   "efforts": [
     {
-      "title": "The basic srcset attribute",
+      "title": "Basic srcset attribute",
       "status": "Active Development",
-      "": "",
-      "snippet": ""
+      "desc": "",
+      "snippet": "",
+      "support": [{
+          "name": "Chrome",
+          "support": true
+        },
+        {
+          "name": "Firefox",
+          "support": false
+        },
+        {
+          "name": "Opera",
+          "support": true
+        },
+        {
+          "name": "Safari",
+          "support": true
+        },
+        {
+          "name": "Internet Explorer",
+          "support": false
+        }]
     },
     {
       "title": "Advanced srcset and sizes attributes",
       "status": "Active Development",
-      "snippet": ""
+      "desc": "",
+      "snippet": "",
+      "support": [{
+          "name": "Chrome",
+          "support": true
+        },
+        {
+          "name": "Firefox",
+          "support": false
+        },
+        {
+          "name": "Opera",
+          "support": true
+        },
+        {
+          "name": "Safari",
+          "support": false
+        },
+        {
+          "name": "Internet Explorer",
+          "support": false
+        }]
     },
     {
-      "title": "The picture element",
+      "title": "picture element",
       "status": "Active Development",
-      "snippet": ""
+      "desc": "",
+      "snippet": "",
+      "support": [{
+          "name": "Chrome",
+          "support": true
+        },
+        {
+          "name": "Firefox",
+          "support": false
+        },
+        {
+          "name": "Opera",
+          "support": true
+        },
+        {
+          "name": "Safari",
+          "support": false
+        },
+        {
+          "name": "Internet Explorer",
+          "support": false
+        }]
     },
     {
       "title": "Element Queries",
-      "status": "Proposal",
-      "snippet": ""
+      "status": "Initial Planning",
+      "desc": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/_tmpl/_partials/issues.hbs b/_tmpl/_partials/issues.hbs
index 9fb7f76..88ebc89 100644
--- a/_tmpl/_partials/issues.hbs
+++ b/_tmpl/_partials/issues.hbs
@@ -1,4 +1,4 @@
-{{#each efforts}}
+{{#efforts}}
 

   

     
@@ -7,21 +7,17 @@
     
   

   

+    
     

       
Implementation Status

       

-        Chrome
-        Firefox
-        Opera
-        Internet Explorer
-        Safari
+        {{#each support}}
+          {{name}}: {{support}}
+        {{/each}}
       

     

     

-
-      
The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media 
-        queries, it gives developers control as to when and if those images are presented to the user.

-      
The picture element is one part of the HTML specification.

+      
{{desc}}

 
       
Usage

       

@@ -52,4 +48,4 @@
     

   

 

-{{/each}}
\ No newline at end of file
+{{/efforts}}
\ No newline at end of file