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