From a6cb4b0af37d34ec05357d51c2469c2beabcc1c7 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Thu, 30 Oct 2014 13:54:39 -0400 Subject: [PATCH] More content; some lorem ipsum to get me thinking about intro copy. --- _dist/_css/all.css | 2 +- _dist/_css/critical.css | 6 ++++ _dist/index.php | 42 +++++++++++----------- _tmpl/_css/all.css | 5 +-- _tmpl/_data/efforts.json | 71 +++++++++++++++++++------------------- _tmpl/_partials/issues.hbs | 4 +-- _tmpl/index.hbs | 2 ++ 7 files changed, 70 insertions(+), 62 deletions(-) diff --git a/_dist/_css/all.css b/_dist/_css/all.css index 14a4cf6..a025bb7 100755 --- a/_dist/_css/all.css +++ b/_dist/_css/all.css @@ -1,3 +1,3 @@ /*! Project Name - v - 2014-10-30 * 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{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 +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:.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 diff --git a/_dist/_css/critical.css b/_dist/_css/critical.css index e12c1a1..16aefec 100755 --- a/_dist/_css/critical.css +++ b/_dist/_css/critical.css @@ -34,10 +34,16 @@ p{ color: rgb(231, 226, 226); margin-top: 1em; margin-right: 0px; margin-bottom: .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.3; max-width: 40px; width: 12.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/index.php b/_dist/index.php index 9c2b205..45f0d8b 100755 --- a/_dist/index.php +++ b/_dist/index.php @@ -33,6 +33,8 @@

Responsive Issues Community Group

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, magni dolor cumque fugiat aspernatur excepturi explicabo! Perferendis, libero, autem, magni debitis fugit quibusdam assumenda quas minus adipisci maiores nisi numquam.

+
@@ -48,24 +50,24 @@

Implementation Status

- Chrome: true + chrome - Firefox: + firefox - Opera: true + opera - Safari: true + safari - Internet Explorer: + ie
-

+

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="small.jpg" srcset="small.jpg, big.jpg 2x">
 + 
<img src="standard-definition.jpg" srcset="high-definition.jpg 2x">

Documentation

@@ -106,20 +108,20 @@

Implementation Status

- Chrome: true + chrome - Firefox: + firefox - Opera: true + opera - Safari: + safari - Internet Explorer: + ie
-

+

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

@@ -164,20 +166,20 @@

Implementation Status

- Chrome: true + chrome - Firefox: + firefox - Opera: true + opera - Safari: + safari - Internet Explorer: + ie
-

+

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

@@ -225,7 +227,7 @@
-

+

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

diff --git a/_tmpl/_css/all.css b/_tmpl/_css/all.css index 5373d00..9b2e105 100644 --- a/_tmpl/_css/all.css +++ b/_tmpl/_css/all.css @@ -209,13 +209,10 @@ p { display: inline; margin: 0 1px; padding: .15em 0; - opacity: .15; + opacity: .3; max-width: 40px; width: 12.5%; } -.support img.partial-support { - opacity: .5; -} .support img.full-support { opacity: 1; } diff --git a/_tmpl/_data/efforts.json b/_tmpl/_data/efforts.json index 2793e26..d8fc4be 100644 --- a/_tmpl/_data/efforts.json +++ b/_tmpl/_data/efforts.json @@ -3,85 +3,86 @@ { "title": "Basic srcset attribute", "status": "Active Development", - "desc": "", - "snippet": "", + "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": "", "support": [{ - "name": "Chrome", - "support": true + "name": "chrome", + "supported": true }, { - "name": "Firefox", - "support": false + "name": "firefox", + "supported": false }, { - "name": "Opera", - "support": true + "name": "opera", + "supported": true }, { - "name": "Safari", - "support": true + "name": "safari", + "supported": true }, { - "name": "Internet Explorer", - "support": false + "name": "ie", + "supported": false }] }, { "title": "Advanced srcset and sizes attributes", "status": "Active Development", - "desc": "", + "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": "", "support": [{ - "name": "Chrome", - "support": true + "name": "chrome", + "supported": true }, { - "name": "Firefox", - "support": false + "name": "firefox", + "supported": false }, { - "name": "Opera", - "support": true + "name": "opera", + "supported": true }, { - "name": "Safari", - "support": false + "name": "safari", + "supported": true }, { - "name": "Internet Explorer", - "support": false + "name": "ie", + "supported": false }] }, { "title": "picture element", "status": "Active Development", - "desc": "", + "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": "", "support": [{ - "name": "Chrome", - "support": true + "name": "chrome", + "supported": true }, { - "name": "Firefox", - "support": false + "name": "firefox", + "supported": false }, { - "name": "Opera", - "support": true + "name": "opera", + "supported": true }, { - "name": "Safari", - "support": false + "name": "safari", + "supported": true }, { - "name": "Internet Explorer", - "support": false + "name": "ie", + "supported": false }] }, { "title": "Element Queries", "status": "Initial Planning", - "desc": "" + "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!

" } ] } \ No newline at end of file diff --git a/_tmpl/_partials/issues.hbs b/_tmpl/_partials/issues.hbs index 88ebc89..0b3fcbc 100644 --- a/_tmpl/_partials/issues.hbs +++ b/_tmpl/_partials/issues.hbs @@ -12,12 +12,12 @@

Implementation Status

{{#each support}} - {{name}}: {{support}} + {{name}} {{/each}}
-

{{desc}}

+

{{{desc}}}

Usage

diff --git a/_tmpl/index.hbs b/_tmpl/index.hbs index 0629eb0..7dc6865 100644 --- a/_tmpl/index.hbs +++ b/_tmpl/index.hbs @@ -7,6 +7,8 @@

Responsive Issues Community Group

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, magni dolor cumque fugiat aspernatur excepturi explicabo! Perferendis, libero, autem, magni debitis fugit quibusdam assumenda quas minus adipisci maiores nisi numquam.

+
{{> issues }}