From 5659fed15b0f9ba50003091162d51eb5b9f4983b Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Fri, 31 Oct 2014 13:49:02 -0400 Subject: [PATCH] Data. --- _dist/_css/all.css | 4 +- _dist/_css/critical.css | 8 +- _dist/_js/initial.js | 2 +- _dist/_js/main.js | 2 +- _dist/_js/respond.js | 2 +- _dist/index.php | 171 +++++++++++++++++-------------------- _tmpl/_css/all.css | 6 +- _tmpl/_data/efforts.json | 109 ++++++++++++++++++----- _tmpl/_partials/issues.hbs | 24 ++---- _tmpl/index.hbs | 2 +- 10 files changed, 187 insertions(+), 143 deletions(-) diff --git a/_dist/_css/all.css b/_dist/_css/all.css index deb33a4..f1e46d7 100755 --- a/_dist/_css/all.css +++ b/_dist/_css/all.css @@ -1,3 +1,3 @@ -/*! Project Name - v - 2014-10-30 +/*! Project Name - v - 2014-10-31 * 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:2em 0 .5em;max-width:300px;width:50%}.intro{padding-bottom:1.5em;max-width:920px;margin:0 auto}.intro p{color:#444;font-size:1.1em;font-weight:700;line-height:1.4;padding:0 5%;text-align:center;text-shadow:1px 1px 0 #fff}@media(min-width:45em){.intro p{font-size:1.2em;line-height:1.5}}.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;cursor:pointer;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;font-size:.925em;margin-top:.525em;opacity:.8}@media(min-width:30em){.head .status{clear:none;float:right}}.issues .body{height:1px;left:-9999px;overflow:hidden;position:absolute}.issues .open .body{height:auto;overflow:visible;position:static}.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:.3;max-width:40px;width:12.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;line-height:1.4;font-family:Proxima Nova,sans-serif}.sitehead{width:100%}.logo{margin:0}.logo img{display:block;margin:0 auto;padding:2em 0 .5em;max-width:300px;width:50%}.intro{padding-bottom:1.5em;max-width:920px;margin:0 auto}.intro p{color:#444;font-size:1.1em;font-weight:700;line-height:1.4;padding:0 5%;text-align:center;text-shadow:1px 1px 0 #fff}@media(min-width:45em){.intro p{font-size:1.2em;line-height:1.5}}.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;cursor:pointer;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;font-size:.925em;margin-top:.525em;opacity:.8}@media(min-width:30em){.head .status{clear:none;float:right}}.issues .body{height:1px;left:-9999px;overflow:hidden;position:absolute}.issues .open .body{height:auto;overflow:visible;position:static}.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:.3;max-width:40px;width:12.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{display:block;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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 16c4ff5..7b22630 100755 --- a/_dist/_css/critical.css +++ b/_dist/_css/critical.css @@ -2,7 +2,7 @@ body{ background-image: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00 *{ box-sizing: border-box; } a{ color: rgb(117, 20, 21); font-weight: 700; text-decoration: none; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; } -p{ color: rgb(231, 226, 226); margin-top: 1em; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; font-family: 'Proxima Nova', sans-serif; } +p{ color: rgb(231, 226, 226); margin-top: 1em; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; line-height: 1.4; font-family: 'Proxima Nova', sans-serif; } .sitehead{ width: 100%; } .logo{ margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .logo img{ display: block; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 2em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; max-width: 300px; width: 50%; } @@ -57,12 +57,10 @@ p{ color: rgb(231, 226, 226); margin-top: 1em; margin-right: 0px; margin-bottom: .docs{ clear: both; margin-left: -6px; float: left; margin-bottom: 1.5em; width: 100%; } .docs dt{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(235, 235, 236); border-left-width: 6px; border-left-style: solid; border-left-color: rgb(25, 24, 24); border-right-width: 1px; border-right-style: solid; border-right-color: rgba(200, 200, 200, 0.496094); clear: left; color: rgb(25, 24, 24); float: left; font-weight: 700; margin-right: 0.5em; min-width: 8em; background-position: initial initial; background-repeat: initial initial; } .docs dd{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(239, 239, 239); border-left-width: 6px; border-left-style: solid; border-left-color: rgb(25, 24, 24); clear: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; min-width: 70%; width: 100%; background-position: initial initial; background-repeat: initial initial; } -.docs dd a{ font-weight: 400; text-indent: 1em; } +.docs dd a{ display: block; font-weight: 400; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs dt, .docs dd{ display: block; padding-top: 0.25em; padding-right: 0.5em; padding-bottom: 0.2em; padding-left: 0.5em; } dt.published{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(206, 230, 184); background-position: initial initial; background-repeat: initial initial; } -dd.published, dt.published{ border-left-color: rgb(51, 75, 17); color: rgb(51, 75, 17); } -dt.draft{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(239, 218, 221); background-position: initial initial; background-repeat: initial initial; } -dd.draft, dt.draft{ border-left-color: rgb(118, 23, 24); color: rgb(118, 23, 24); } + dt.published{ border-left-color: rgb(51, 75, 17); color: rgb(51, 75, 17); } @media (min-width: 50em){ .docs dt, .docs dd{ clear: none; width: auto; } } \ No newline at end of file diff --git a/_dist/_js/initial.js b/_dist/_js/initial.js index 73ab11b..c7acf2a 100755 --- a/_dist/_js/initial.js +++ b/_dist/_js/initial.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-30 +/*! Project Name - v - 2014-10-31 * 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 40e82cf..307efa0 100755 --- a/_dist/_js/main.js +++ b/_dist/_js/main.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-30 +/*! Project Name - v - 2014-10-31 * 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 3012b5d..564d9ce 100755 --- a/_dist/_js/respond.js +++ b/_dist/_js/respond.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-30 +/*! Project Name - v - 2014-10-31 * 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 18f461c..aef7abe 100755 --- a/_dist/index.php +++ b/_dist/index.php @@ -34,7 +34,7 @@
-

The RICG is a group of independent designers and developers working toward standards that will help build fast, accessible, responsive websites.

+

The RICG is a group of independent designers and developers working toward new web standards that will build fast, accessible, responsive websites.

@@ -42,8 +42,8 @@
-

Basic srcset attribute

-

Active Development

+

Element Queries

+

Initial Planning
@@ -52,47 +52,35 @@

Implementation Status

- chrome + chrome: not supported - firefox + firefox: not supported - opera + opera: not supported - safari + safari: not supported - ie + ie: not supported
-

The srcset attribute allows developers to supply user agents with alternate versions of an image, intended for display at different pixel densities.

In its most basic and well-supported form, srcset lets developers use x descriptors to specify the intended pixel-density of each source.

+

Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. Element queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.

Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!

-

Usage

-
- 
<img src="standard-definition.jpg" srcset="high-definition.jpg 2x">
 -
+

Documentation

-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://responsiveimagescg.github.io/eq-usecases/
+ +
Repo
+
https://github.com/ResponsiveImagesCG/eq-usecases
+ +
Use Cases
+
https://responsiveimagescg.github.io/eq-usecases/
+
-

Resources

-
-
Draft
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Published
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://responsiveimagescg.github.io/eq-usecases/
-
@@ -100,7 +88,7 @@
-

Advanced srcset and sizes attributes

+

picture element

Active Development
@@ -110,47 +98,46 @@

Implementation Status

- chrome + chrome: supported - firefox + firefox: not supported - opera + opera: supported - safari + safari: not supported - ie + ie: not supported
-

srcset’s w descriptor and the sizes attribute allow developers to supply a range of alternate sources for images whose sizes vary within a responsive layout. Optionally working in conjunction with server-side resizing, these syntaxes allow for a fully automated “responsive images” solution.

+

The picture element contains any number of child source elements and one img.

When this pattern is used with the media attribute on source elements, it allows developers to mandate that user agents must load specific sources when certain media conditions are met. This allows developers to specify alternate aspect ratios to align with layoutchanges, or alternate framing of image content for optimally highlighting the subject of the image at different sizes.

When picture and source are used with the type attribute, authors may supply the same image in alternate formats to be requested only by browsers that support said format.

+

Usage

- 

+        
<picture>
+  <source srcset="large.jpg" media="(min-width: 800px)">
+  <img src="small.jpg" alt="…">
+<picture>

       

+      
 
       
Documentation

 
       

-        
Use Cases

-        
http://responsiveimagescg.github.io/eq-usecases/

-
+        
+        
Repo

+        
https://github.com/ResponsiveImagesCG/picture-element

+        
+        
Use Cases

+        
http://usecases.responsiveimages.org/

+        
         
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

+        
https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:art-direction-3

+        
       

 
-      
Resources

-      

-        
Draft

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Published

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

-      

     

   
 
@@ -158,7 +145,7 @@
 

   

     
-      
picture element

+      
Advanced srcset and sizes attributes

       
Active Development

     
   

@@ -168,47 +155,40 @@
       
Implementation Status

       

         
-          chrome
+          chrome: supported
         
-          firefox
+          firefox: not supported
         
-          opera
+          opera: supported
         
-          safari
+          safari: not supported
         
-          ie
+          ie: not supported
         
       

     

     

-      
The picture element contains any number of child source elements and one img.
When this pattern is used with the media attribute on source elements, it allows developers to mandate that user agents must load specific  sources when certain media conditions are met. This allows developers to specify alternate aspect ratios to align with layoutchanges, or alternate framing of image content for optimally highlighting the subject of the image at different sizes.
When picture and source are used with the type attribute, authors may supply the same image in alternate formats to be requested only by browsers that support said format.

+      
srcset’s w descriptor and the sizes attribute allow developers to supply a range of alternate sources for images whose sizes vary within a responsive layout. Optionally working in conjunction with server-side resizing, these syntaxes allow for a fully automated “responsive images” solution.

 
+      
       
Usage

       

-        

+        
<img src="fallbk.jpg" sizes="100vw" srcset="small.jpg 400w, large.jpg 1200w" alt="…">

       

+      
 
       
Documentation

 
       

-        
Use Cases

-        
http://responsiveimagescg.github.io/eq-usecases/

-
+        
+        
Use Cases

+        
http://usecases.responsiveimages.org/

+        
         
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

+        
https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:device-pixel-ratio-2/

+        
       

 
-      
Resources

-      

-        
Draft

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Published

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

-      

     

   
 
@@ -216,8 +196,8 @@
 

   

     
-      
Element Queries

-      
Initial Planning

+      
Basic srcset attribute

+      
Active Development

     
   

   

@@ -226,37 +206,40 @@
       
Implementation Status

       

         
+          chrome: supported
+        
+          firefox: not supported
+        
+          opera: supported
+        
+          safari: supported
+        
+          ie: not supported
+        
       

     

     

-      
Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. Element queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.
Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!

+      
The srcset attribute allows developers to supply user agents with alternate versions of an image, intended for display at different pixel densities.
In its most basic and well-supported form, srcset lets developers use x descriptors to specify the intended pixel-density of each source.

 
+      
       
Usage

       

-        

+        
<img src="standard-definition.jpg" srcset="high-definition.jpg 2x" alt="…">

       

+      
 
       
Documentation

 
       

-        
Use Cases

-        
http://responsiveimagescg.github.io/eq-usecases/

-
+        
+        
Use Cases

+        
http://usecases.responsiveimages.org/

+        
         
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

+        
https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2

+        
       

 
-      
Resources

-      

-        
Draft

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Published

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

-      

     

   

 
diff --git a/_tmpl/_css/all.css b/_tmpl/_css/all.css
index b2b4b9a..cf09d5e 100644
--- a/_tmpl/_css/all.css
+++ b/_tmpl/_css/all.css
@@ -32,6 +32,7 @@ img {
 p {
   color: #e7e2e2;
   margin: 1em 0;
+  line-height: 1.4;
   font-family: Proxima Nova, sans-serif;
 }
 .sitehead {
@@ -323,8 +324,11 @@ p {
   width: 100%;
 }
 .docs dd a {
+  display: block;
   font-weight: normal;
-  text-indent: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .docs dt,
 .docs dd {
diff --git a/_tmpl/_data/efforts.json b/_tmpl/_data/efforts.json
index d8fc4be..1bd27cc 100644
--- a/_tmpl/_data/efforts.json
+++ b/_tmpl/_data/efforts.json
@@ -1,13 +1,13 @@
 {
   "efforts": [
-    {
-      "title": "Basic srcset attribute",
-      "status": "Active Development",
-      "desc": "
The srcset attribute allows developers to supply user agents with alternate versions of an image, intended for display at different pixel densities.
In its most basic and well-supported form, srcset lets developers use x descriptors to specify the intended pixel-density of each source.
",
-      "snippet": "",
+      {
+      "title": "Element Queries",
+      "status": "Initial Planning",
+      "hascode": false,
+      "desc": "
Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. Element queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.
Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!
",
       "support": [{
           "name": "chrome",
-          "supported": true
+          "supported": false
         },
         {
           "name": "firefox",
@@ -15,23 +15,33 @@
         },
         {
           "name": "opera",
-          "supported": true
+          "supported": false
         },
         {
           "name": "safari",
-          "supported": true
+          "supported": false
         },
         {
           "name": "ie",
           "supported": false
+        }],
+        "docs": [{
+          "title" : "Repo",
+          "formal": false,
+          "url": "https://github.com/ResponsiveImagesCG/eq-usecases"
+        },
+        {
+          "title" : "Use Cases",
+          "formal": false,
+          "url": "https://responsiveimagescg.github.io/eq-usecases/"
         }]
     },
     {
-      "title": "Advanced srcset and sizes attributes",
+      "title": "picture Element",
       "status": "Active Development",
-      "desc":
-        "
srcset’s w descriptor and the sizes attribute allow developers to supply a range of alternate sources for images whose sizes vary within a responsive layout. Optionally working in conjunction with server-side resizing, these syntaxes allow for a fully automated “responsive images” solution.
",
-      "snippet": "",
+      "desc": "
The picture element contains any number of child source elements and one img.
When this pattern is used with the media attribute on source elements, it allows developers to mandate that user agents must load specific  sources when certain media conditions are met. This allows developers to specify alternate aspect ratios to align with layoutchanges, or alternate framing of image content for optimally highlighting the subject of the image at different sizes.
When picture and source are used with the type attribute, authors may supply the same image in alternate formats to be requested only by browsers that support said format.
",
+      "hascode": true,
+      "snippet": "\n  \n  \"…\"\n",
       "support": [{
           "name": "chrome",
           "supported": true
@@ -46,18 +56,35 @@
         },
         {
           "name": "safari",
-          "supported": true
+          "supported": false
         },
         {
           "name": "ie",
           "supported": false
+        }],
+        "docs": [{
+          "title": "Repo",
+          "formal": false,
+          "url": "https://github.com/ResponsiveImagesCG/picture-element"
+        },
+        {
+          "title" : "Use Cases",
+          "formal": false,
+          "url": "http://usecases.responsiveimages.org/"
+        },
+        {
+          "title" : "Specification",
+          "formal": true,
+          "url": "https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:art-direction-3"
         }]
     },
     {
-      "title": "picture element",
+      "title": "Advanced srcset and sizes Attributes",
       "status": "Active Development",
-      "desc": "
The picture element contains any number of child source elements and one img.
When this pattern is used with the media attribute on source elements, it allows developers to mandate that user agents must load specific  sources when certain media conditions are met. This allows developers to specify alternate aspect ratios to align with layoutchanges, or alternate framing of image content for optimally highlighting the subject of the image at different sizes.
When picture and source are used with the type attribute, authors may supply the same image in alternate formats to be requested only by browsers that support said format.
",
-      "snippet": "",
+      "desc":
+        "
srcset’s w descriptor and the sizes attribute allow developers to supply a range of alternate sources for images whose sizes vary within a responsive layout. Optionally working in conjunction with server-side resizing, these syntaxes allow for a fully automated “responsive images” solution.
",
+      "hascode": true,
+      "snippet": "\"…\"",
       "support": [{
           "name": "chrome",
           "supported": true
@@ -72,17 +99,59 @@
         },
         {
           "name": "safari",
-          "supported": true
+          "supported": false
         },
         {
           "name": "ie",
           "supported": false
+        }],
+        "docs": [{
+          "title" : "Use Cases",
+          "formal": false,
+          "url": "http://usecases.responsiveimages.org/"
+        },
+        {
+          "title" : "Specification",
+          "formal": true,
+          "url": "https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:device-pixel-ratio-2/"
         }]
     },
     {
-      "title": "Element Queries",
-      "status": "Initial Planning",
-      "desc": "
Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. Element queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.
Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!
"
+      "title": "Basic srcset Attribute",
+      "status": "Active Development",
+      "desc": "
The srcset attribute allows developers to supply user agents with alternate versions of an image, intended for display at different pixel densities.
In its most basic and well-supported form, srcset lets developers use x descriptors to specify the intended pixel-density of each source.
",
+      "hascode": true,
+      "snippet": "\"…\"",
+      "support": [{
+        "name": "chrome",
+        "supported": true
+      },
+      {
+        "name": "firefox",
+        "supported": false
+      },
+      {
+        "name": "opera",
+        "supported": true
+      },
+      {
+        "name": "safari",
+        "supported": true
+      },
+      {
+        "name": "ie",
+        "supported": false
+      }],
+      "docs": [{
+        "title" : "Use Cases",
+        "formal": true,
+        "url": "http://usecases.responsiveimages.org/"
+      },
+      {
+        "title" : "Specification",
+        "formal": true,
+        "url": "https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2"
+      }]
     }
   ]
 }
\ No newline at end of file
diff --git a/_tmpl/_partials/issues.hbs b/_tmpl/_partials/issues.hbs
index 0b3fcbc..1a9bed8 100644
--- a/_tmpl/_partials/issues.hbs
+++ b/_tmpl/_partials/issues.hbs
@@ -12,39 +12,29 @@
       
Implementation Status

       

         {{#each support}}
-          {{name}}
+          {{name}}: {{^supported}}not {{/supported}}supported
         {{/each}}
       

     
     

       
{{{desc}}}

 
+      {{#hascode}}
       
Usage

       

         
{{snippet}}

       

+      {{/hascode}}
 
       
Documentation

 
       

-        
Use Cases

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

+        {{#each docs}}
+        
{{title}}

+        
{{url}}

+        {{/each}}
       

 
-      
Resources

-      

-        
Draft

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Published

-        
http://responsiveimagescg.github.io/eq-usecases/

-
-        
Specification

-        
http://responsiveimagescg.github.io/eq-usecases/

-      

     

   
 
diff --git a/_tmpl/index.hbs b/_tmpl/index.hbs
index 7b7f167..b09531e 100644
--- a/_tmpl/index.hbs
+++ b/_tmpl/index.hbs
@@ -8,7 +8,7 @@
     
 
 	

-	    
The RICG is a group of independent designers and developers working toward standards that will help build fast, accessible, responsive websites.

+	    
The RICG is a group of independent designers and developers working toward new web standards that will build fast, accessible, responsive websites.