diff --git a/Gruntfile.js b/Gruntfile.js index 4f5020c..45afb81 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -31,9 +31,8 @@ module.exports = function(grunt) { js_main: { src: [ // keep this globalenhance file last! - '_tmpl/_js/_lib/jquery.js', '_tmpl/_js/_lib/*', - '_tmpl/_js/globalenhance.js' + '_tmpl/_js/main.js' ], dest: '_dist/_js/main.js' }, @@ -120,7 +119,7 @@ module.exports = function(grunt) { criticalcss: { custom_options: { options: { - url: "http://ricg.io.dev", + url: "http://ricg.io.dev?nocrit", filename : 'all.css', outputfile: "_dist/_css/critical.css" } @@ -190,7 +189,10 @@ module.exports = function(grunt) { 'chmod:writeable', 'clean', 'qunit', + 'concat', 'copy', + 'cssmin', + 'uglify', 'assemble', 'criticalcss', 'chmod:readonly' @@ -200,8 +202,10 @@ module.exports = function(grunt) { 'chmod:writeable', 'clean', 'copy', - 'criticalcss', + 'assemble', 'concat:css_main', + 'cssmin', + 'criticalcss', 'chmod:readonly' ]); diff --git a/_dist/_css/all.css b/_dist/_css/all.css index 2e754c4..bfce441 100755 --- a/_dist/_css/all.css +++ b/_dist/_css/all.css @@ -1,3 +1,3 @@ -/*! Project Name - v - 2014-10-23 +/*! Project Name - v - 2014-10-24 * Copyright (c) 2014 Mat Marquis - mat@matmarquis.com */ -body{background-image:url(_img/bg.png);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAADhCAYAAABbV7VpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA8tJREFUeJzt18FJQ0EYRlGVNCC8lOAiLQipwLJTgJDNW6SEN0XYQhbKMN5zKvgY+LnM6/f9/vUCv2zfH7MnLONy+Zg9gX/IDT7vbfYAAJhJCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIOx1jzN6wjPO2zZ6wjDGO2ROWcbt5q2ddr5+zJyxjO7/PnrAMP0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgLTT7AEr2ffH7AnL2Lbz7AnLGOOYPWEZbpC/4EcIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApD2A6c/G0GCVp/9AAAAAElFTkSuQmCC);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlnaHQ9IjIyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIG9wYWNpdHk9Ii4zIj4KICA8dGl0bGU+QkcgUGF0dGVybjwvdGl0bGU+CiAgPHJlY3QgaWQ9InN2Z18xIiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iMCIgeD0iMCIgZmlsbD0iI2QxZDJkNCIvPgogIDxyZWN0IGlkPSJzdmdfMiIgaGVpZ2h0PSIxNTAiIHdpZHRoPSI3NSIgeT0iNzUiIHg9IjAiIGZpbGw9IiNiY2JkYzAiLz4KICA8cmVjdCBpZD0ic3ZnXzMiIGhlaWdodD0iNzUiIHdpZHRoPSI3NSIgeT0iMCIgeD0iMTUwIiBmaWxsPSIjYTdhOWFjIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iMCIgeD0iMjI1IiBmaWxsPSIjZDFkMmQ0Ii8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iNzUiIHg9IjE1MCIgZmlsbD0iIzkzOTU5OCIvPgogIDxyZWN0IGlkPSJzdmdfNyIgaGVpZ2h0PSI3NSIgd2lkdGg9IjE1MCIgeT0iMTUwIiB4PSI3NSIgZmlsbD0iI2E3YTlhYyIvPgogIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI3NSIgd2lkdGg9Ijc1IiB5PSIwIiB4PSIzNzUiIGZpbGw9IiNhN2E5YWMiLz4KICA8cmVjdCBpZD0ic3ZnXzkiIGhlaWdodD0iNzUiIHdpZHRoPSI3NSIgeT0iNzUiIHg9IjM3NSIgZmlsbD0iI2JjYmRjMCIvPgogIDxyZWN0IGlkPSJzdmdfMTAiIGhlaWdodD0iNzUiIHdpZHRoPSIxNTAiIHk9IjE1MCIgeD0iMzAwIiBmaWxsPSIjYTdhOWFjIi8+CiA8L2c+Cjwvc3ZnPg==);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}.logo{margin:0;padding:1em 0}.sitehead{width:100%;height:215px}.sitehead img{display:block;margin:.5em auto 0;width:340px}.issues{background:#2a2a2a;clear:both}.feat{clear:both;width:100%}.feat:after{clear:both;content:"";display:block}.head{background:#d6342d;border-left:.3125em solid #000;clear:both;float:left;display:block;padding:.3em 1.2em .3em .8875em;position:relative;width:100%}.head .feat-hed{float:left}.head .status{clear:both;opacity:.8;font-size:.925em}@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:2em}.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;max-width:1040px}.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:.65em 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{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;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}}.body{padding:.5em 1.2em}.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{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 diff --git a/_dist/_css/critical.css b/_dist/_css/critical.css index 7c5171c..865d9a4 100755 --- a/_dist/_css/critical.css +++ b/_dist/_css/critical.css @@ -1,39 +1,45 @@ -body{ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlnaHQ9IjIyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIG9wYWNpdHk9Ii4zIj4KICA8dGl0bGU+QkcgUGF0dGVybjwvdGl0bGU+CiAgPHJlY3QgaWQ9InN2Z18xIiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iMCIgeD0iMCIgZmlsbD0iI2QxZDJkNCIvPgogIDxyZWN0IGlkPSJzdmdfMiIgaGVpZ2h0PSIxNTAiIHdpZHRoPSI3NSIgeT0iNzUiIHg9IjAiIGZpbGw9IiNiY2JkYzAiLz4KICA8cmVjdCBpZD0ic3ZnXzMiIGhlaWdodD0iNzUiIHdpZHRoPSI3NSIgeT0iMCIgeD0iMTUwIiBmaWxsPSIjYTdhOWFjIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iMCIgeD0iMjI1IiBmaWxsPSIjZDFkMmQ0Ii8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iNzUiIHg9IjE1MCIgZmlsbD0iIzkzOTU5OCIvPgogIDxyZWN0IGlkPSJzdmdfNyIgaGVpZ2h0PSI3NSIgd2lkdGg9IjE1MCIgeT0iMTUwIiB4PSI3NSIgZmlsbD0iI2E3YTlhYyIvPgogIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI3NSIgd2lkdGg9Ijc1IiB5PSIwIiB4PSIzNzUiIGZpbGw9IiNhN2E5YWMiLz4KICA8cmVjdCBpZD0ic3ZnXzkiIGhlaWdodD0iNzUiIHdpZHRoPSI3NSIgeT0iNzUiIHg9IjM3NSIgZmlsbD0iI2JjYmRjMCIvPgogIDxyZWN0IGlkPSJzdmdfMTAiIGhlaWdodD0iNzUiIHdpZHRoPSIxNTAiIHk9IjE1MCIgeD0iMzAwIiBmaWxsPSIjYTdhOWFjIi8+CiA8L2c+Cjwvc3ZnPg==); font-family: 'Proxima Nova', sans-serif; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } +body{ 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-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } *{ 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; } -.logo{ margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 1em; padding-right: 0px; padding-bottom: 1em; padding-left: 0px; } -.sitehead{ width: 100%; height: 215px; } -.sitehead img{ display: block; margin-top: 0.5em; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 340px; } -.issues{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(42, 42, 42); clear: both; background-position: initial initial; background-repeat: initial initial; } +.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: 1.75em; padding-right: 0px; padding-bottom: 1.5em; padding-left: 0px; max-width: 340px; width: 60%; } +.issues{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(42, 42, 42); border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); margin-bottom: 5em; clear: both; background-position: initial initial; background-repeat: initial initial; } .feat{ clear: both; width: 100%; } -.head{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(214, 52, 45); border-left-width: 0.3125em; border-left-style: solid; border-left-color: rgb(0, 0, 0); clear: both; float: left; display: block; padding-top: 0.3em; padding-right: 1.2em; padding-bottom: 0.3em; padding-left: 0.8875em; position: relative; width: 100%; background-position: initial initial; background-repeat: initial initial; } +.head{ border-left-width: 0.3125em; border-left-style: solid; border-left-color: rgb(0, 0, 0); clear: both; float: left; display: block; padding-top: 0.3em; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; position: relative; width: 100%; } +.heading0 .head{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(226, 14, 3); background-position: initial initial; background-repeat: initial initial; } +.heading1 .head{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(230, 45, 35); background-position: initial initial; background-repeat: initial initial; } +.heading2 .head{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(231, 59, 51); background-position: initial initial; background-repeat: initial initial; } +.heading3 .head{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(231, 72, 64); background-position: initial initial; background-repeat: initial initial; } +.feat + .feat .head{ border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.246094); } .head .feat-hed{ float: left; } -.head .status{ clear: both; opacity: 0.8; font-size: 0.925em; } +.head .status{ clear: both; opacity: 0.8; font-size: 0.925em; margin-top: 0.525em; } @media (min-width: 30em){ .head .status{ clear: none; float: right; } } -.open .body{ display: block !important; } -.open .head{ background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial; } +.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{ display: block; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; max-width: 1040px; } +.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; } .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.65em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; } +.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{ 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{ 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; 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; } +.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; } } diff --git a/_dist/_img/bg.png b/_dist/_img/bg.png new file mode 100755 index 0000000..9bfdd4c Binary files /dev/null and b/_dist/_img/bg.png differ diff --git a/_dist/_img/icon-chrome.png b/_dist/_img/icon-chrome.png index f241a3a..3b37ec1 100755 Binary files a/_dist/_img/icon-chrome.png and b/_dist/_img/icon-chrome.png differ diff --git a/_dist/_img/icon-firefox.png b/_dist/_img/icon-firefox.png index 8f2c465..03e3cf2 100755 Binary files a/_dist/_img/icon-firefox.png and b/_dist/_img/icon-firefox.png differ diff --git a/_dist/_img/icon-ie.png b/_dist/_img/icon-ie.png index cf9752e..6371523 100755 Binary files a/_dist/_img/icon-ie.png and b/_dist/_img/icon-ie.png differ diff --git a/_dist/_img/icon-opera.png b/_dist/_img/icon-opera.png index 0a4a142..210c66d 100755 Binary files a/_dist/_img/icon-opera.png and b/_dist/_img/icon-opera.png differ diff --git a/_dist/_img/icon-safari.png b/_dist/_img/icon-safari.png index b7fef48..a4e5845 100755 Binary files a/_dist/_img/icon-safari.png and b/_dist/_img/icon-safari.png differ diff --git a/_dist/_img/ricg-logo.png b/_dist/_img/ricg-logo.png index 43506e9..2173038 100755 Binary files a/_dist/_img/ricg-logo.png and b/_dist/_img/ricg-logo.png differ diff --git a/_dist/_js/initial.js b/_dist/_js/initial.js index ec60cb7..b7be39a 100755 --- a/_dist/_js/initial.js +++ b/_dist/_js/initial.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-23 -* 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(" "),f)){var h=f.getAttribute("data-fulljs");h&&c(h)}}(this); \ No newline at end of file +/*! Project Name - v - 2014-10-24 +* 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 c8b2829..3692e80 100755 --- a/_dist/_js/main.js +++ b/_dist/_js/main.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-23 -* Copyright (c) 2014 Mat Marquis - mat@matmarquis.com */ \ No newline at end of file +/*! Project Name - v - 2014-10-24 +* 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 c8b2829..6071d56 100755 --- a/_dist/_js/respond.js +++ b/_dist/_js/respond.js @@ -1,2 +1,2 @@ -/*! Project Name - v - 2014-10-23 +/*! Project Name - v - 2014-10-24 * 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 251a181..0879fb9 100755 --- a/_dist/index.php +++ b/_dist/index.php @@ -7,12 +7,20 @@ + - + "; + include( "_css/critical.css" ); + echo ""; + } else { + echo ''; + } ?> - + @@ -26,180 +34,223 @@
+ +
+
+ +

The basic srcset attribute

+

Active Development

+ +
+
+
+

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.

-
-
- -

The picture Element

-

Active Development

- -
-
-
-

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

-
- 
<picture>
-    <source srcset="thing.png" media="(min-width: 600px)">
-    <img src="smallthing.png">
-  </picture>
 -
- -

Documentation

- -
-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://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/
-
-
-
+

Usage

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

Documentation

+ +
+
Use Cases
+
http://responsiveimagescg.github.io/eq-usecases/
+ +
Specification
+
http://responsiveimagescg.github.io/eq-usecases/
+
+ +

Resources

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

The srcset and sizes Attributes

-

Active Development

- -
-
-
-

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

- -
- 
<picture>
-    <source srcset="thing.png" media="(min-width: 600px)">
-    <img src="smallthing.png">
-  </picture>
 -
- -

Documentation

- -
-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://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/
-
-
-
+
Published
+
http://responsiveimagescg.github.io/eq-usecases/
+ +
Specification
+
http://responsiveimagescg.github.io/eq-usecases/
+
+
+
+
+ +
+
+ +

Advanced srcset and sizes attributes

+

Active Development

+ +
+
+
+

Implementation Status

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

Element Queries

-

Proposed

- -
-
-
-

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

-
- 
<picture>
-  <source srcset="thing.png" media="(min-width: 600px)">
-  <img src="smallthing.png">
-</picture>
 -
- -

Documentation

- -
-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://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/
-
- -
+

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

+ +
+
Use Cases
+
http://responsiveimagescg.github.io/eq-usecases/
+ +
Specification
+
http://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/
+
+
+
+
+ +
+
+ +

The picture element

+

Active Development

+ +
+
+
+

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

+ +
+
Use Cases
+
http://responsiveimagescg.github.io/eq-usecases/
+ +
Specification
+
http://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/
+
+
+
+
+ +
+
+ +

Element Queries

+

Proposal

+ +
+
+
+

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

+ +
+
Use Cases
+
http://responsiveimagescg.github.io/eq-usecases/
+ +
Specification
+
http://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/
+
+
+
+
+
\ No newline at end of file diff --git a/_tmpl/_css/all.css b/_tmpl/_css/all.css index 90b241d..5373d00 100644 --- a/_tmpl/_css/all.css +++ b/_tmpl/_css/all.css @@ -1,7 +1,6 @@ body { background-image: url(_img/bg.png); - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAADhCAYAAABbV7VpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA8tJREFUeJzt18FJQ0EYRlGVNCC8lOAiLQipwLJTgJDNW6SEN0XYQhbKMN5zKvgY+LnM6/f9/vUCv2zfH7MnLONy+Zg9gX/IDT7vbfYAAJhJCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIOx1jzN6wjPO2zZ6wjDGO2ROWcbt5q2ddr5+zJyxjO7/PnrAMP0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgDQhBCBNCAFIE0IA0oQQgLTT7AEr2ffH7AnL2Lbz7AnLGOOYPWEZbpC/4EcIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApAmhACkCSEAaUIIQJoQApD2A6c/G0GCVp/9AAAAAElFTkSuQmCC); - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlnaHQ9IjIyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIG9wYWNpdHk9Ii4zIj4KICA8dGl0bGU+QkcgUGF0dGVybjwvdGl0bGU+CiAgPHJlY3QgaWQ9InN2Z18xIiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iMCIgeD0iMCIgZmlsbD0iI2QxZDJkNCIvPgogIDxyZWN0IGlkPSJzdmdfMiIgaGVpZ2h0PSIxNTAiIHdpZHRoPSI3NSIgeT0iNzUiIHg9IjAiIGZpbGw9IiNiY2JkYzAiLz4KICA8cmVjdCBpZD0ic3ZnXzMiIGhlaWdodD0iNzUiIHdpZHRoPSI3NSIgeT0iMCIgeD0iMTUwIiBmaWxsPSIjYTdhOWFjIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iMCIgeD0iMjI1IiBmaWxsPSIjZDFkMmQ0Ii8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeT0iNzUiIHg9IjE1MCIgZmlsbD0iIzkzOTU5OCIvPgogIDxyZWN0IGlkPSJzdmdfNyIgaGVpZ2h0PSI3NSIgd2lkdGg9IjE1MCIgeT0iMTUwIiB4PSI3NSIgZmlsbD0iI2E3YTlhYyIvPgogIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI3NSIgd2lkdGg9Ijc1IiB5PSIwIiB4PSIzNzUiIGZpbGw9IiNhN2E5YWMiLz4KICA8cmVjdCBpZD0ic3ZnXzkiIGhlaWdodD0iNzUiIHdpZHRoPSI3NSIgeT0iNzUiIHg9IjM3NSIgZmlsbD0iI2JjYmRjMCIvPgogIDxyZWN0IGlkPSJzdmdfMTAiIGhlaWdodD0iNzUiIHdpZHRoPSIxNTAiIHk9IjE1MCIgeD0iMzAwIiBmaWxsPSIjYTdhOWFjIi8+CiA8L2c+Cjwvc3ZnPg==); + 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; @@ -24,7 +23,6 @@ a { height: 1px; overflow: hidden; position: absolute; - } img { @@ -36,24 +34,25 @@ p { margin: 1em 0; font-family: Proxima Nova, sans-serif; } +.sitehead { + width: 100%; +} .logo { margin: 0; - padding: 1em 0; -} - -.sitehead { - width: 100%; - height: 215px; } -.sitehead img { +.logo img { display: block; - margin: .5em auto 0 auto; - width: 340px; + margin: 0 auto; + padding: 1.75em 0 1.5em 0; + max-width: 340px; + width: 60%; } .issues { background: #2a2a2a; + border-bottom: 5px solid #000; + margin-bottom: 5em; clear: both; } @@ -67,15 +66,24 @@ p { display: block; } .head { - background: #d6342d; border-left: .3125em solid #000; clear: both; float: left; display: block; - padding: .3em 1.2em .3em .8875em; + 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; @@ -84,6 +92,7 @@ p { clear: both; opacity: .8; font-size: .925em; + margin-top: .525em; } @media( min-width: 30em ) { .head .status { @@ -108,7 +117,13 @@ p { .body { clear: both; padding-top: 1em; - padding-bottom: 2em; + padding-bottom: 4em; + width: 100%; +} +.body:after { + content: ""; + clear: both; + display: block; } .body p { text-shadow: 1px 1px 0 #000; @@ -129,8 +144,12 @@ p { .body { display: block; margin: 0 auto; + padding: .5em 1.2em 0 1.2em; max-width: 1040px; } +.body { + padding-bottom: 2em; +} .usage { background: #eeeff0; border-left: 6px solid #191818; @@ -155,7 +174,7 @@ p { font: normal 1.3125em/1.2 DIN Condensed, sans-serif; font-weight: normal; margin: 0; - padding: .65em 0 .5em 0; + padding: .25em 0 .5em 0; } .col-b { @@ -173,6 +192,7 @@ p { } .support { + border-bottom: 3px solid #111; display: block; text-align: justify; max-height: 4em; @@ -208,6 +228,7 @@ p { .support { background: rgba(225, 225, 225, .95); border-radius: .25em; + border-width: 0; display: block; float: right; margin: 0; @@ -240,10 +261,6 @@ p { } } -.body { - padding: .5em 1.2em; -} - .subhed { background: #000; color: #f9f9f9; diff --git a/_tmpl/_data/efforts.json b/_tmpl/_data/efforts.json index a13eb2a..8e9c42a 100644 --- a/_tmpl/_data/efforts.json +++ b/_tmpl/_data/efforts.json @@ -1,4 +1,25 @@ { - - + "efforts": [ + { + "title": "The basic srcset attribute", + "status": "Active Development", + "": "", + "snippet": "" + }, + { + "title": "Advanced srcset and sizes attributes", + "status": "Active Development", + "snippet": "" + }, + { + "title": "The picture element", + "status": "Active Development", + "snippet": "" + }, + { + "title": "Element Queries", + "status": "Proposal", + "snippet": "" + } + ] } \ No newline at end of file diff --git a/_tmpl/_img/bg.png b/_tmpl/_img/bg.png new file mode 100644 index 0000000..9bfdd4c Binary files /dev/null and b/_tmpl/_img/bg.png differ diff --git a/_tmpl/_img/icon-chrome.png b/_tmpl/_img/icon-chrome.png index f241a3a..3b37ec1 100644 Binary files a/_tmpl/_img/icon-chrome.png and b/_tmpl/_img/icon-chrome.png differ diff --git a/_tmpl/_img/icon-firefox.png b/_tmpl/_img/icon-firefox.png index 8f2c465..03e3cf2 100644 Binary files a/_tmpl/_img/icon-firefox.png and b/_tmpl/_img/icon-firefox.png differ diff --git a/_tmpl/_img/icon-ie.png b/_tmpl/_img/icon-ie.png index cf9752e..6371523 100644 Binary files a/_tmpl/_img/icon-ie.png and b/_tmpl/_img/icon-ie.png differ diff --git a/_tmpl/_img/icon-opera.png b/_tmpl/_img/icon-opera.png index 0a4a142..210c66d 100644 Binary files a/_tmpl/_img/icon-opera.png and b/_tmpl/_img/icon-opera.png differ diff --git a/_tmpl/_img/icon-safari.png b/_tmpl/_img/icon-safari.png index b7fef48..a4e5845 100644 Binary files a/_tmpl/_img/icon-safari.png and b/_tmpl/_img/icon-safari.png differ diff --git a/_tmpl/_img/ricg-logo.png b/_tmpl/_img/ricg-logo.png index 43506e9..2173038 100644 Binary files a/_tmpl/_img/ricg-logo.png and b/_tmpl/_img/ricg-logo.png differ diff --git a/_tmpl/_js/initial.config.js b/_tmpl/_js/initial.config.js index aff58fd..025e6f5 100644 --- a/_tmpl/_js/initial.config.js +++ b/_tmpl/_js/initial.config.js @@ -64,6 +64,11 @@ // Add scoping classes to HTML element win.document.documentElement.className += " " + docClasses.join(" "); + var enhancedCss = win.document.getElementsByName( "fullcss" )[ 0 ].content; + if( enhancedCss ){ + loadCSS( enhancedCss ); + } + // Get scripts to load, if defined if( initialJS ){ var enhancedScripting = initialJS.getAttribute( "data-fulljs" ); diff --git a/_tmpl/_js/main.js b/_tmpl/_js/main.js new file mode 100644 index 0000000..b4ed3b8 --- /dev/null +++ b/_tmpl/_js/main.js @@ -0,0 +1,17 @@ +(function( window ) { + var trigger = document.querySelectorAll( ".head" ), + toggle = function( e ) { + var collapse = this.parentNode, + body = collapse.querySelector( ".body" ), + curr = collapse.className.indexOf( "open") > -1; + + collapse.setAttribute( "class", curr ? collapse.className.replace( "open", "" ) : collapse.className + " open" ); + }; + + for( i = 0, l = trigger.length; i < l; i++ ) { + var el = trigger[ i ]; + el.addEventListener( "click", toggle ); + + el.parentNode.setAttribute( "class", el.parentNode.className + " heading" + i ); + } +}()); \ No newline at end of file diff --git a/_tmpl/_partials/head.hbs b/_tmpl/_partials/head.hbs index 63410df..5072bed 100644 --- a/_tmpl/_partials/head.hbs +++ b/_tmpl/_partials/head.hbs @@ -5,12 +5,20 @@ + - + "; + include( "_css/critical.css" ); + echo ""; + } else { + echo ''; + } ?> - + diff --git a/_tmpl/_partials/issues.hbs b/_tmpl/_partials/issues.hbs new file mode 100644 index 0000000..9fb7f76 --- /dev/null +++ b/_tmpl/_partials/issues.hbs @@ -0,0 +1,55 @@ +{{#each efforts}} +
+
+ +

{{{title}}}

+

{{status}}

+ +
+
+
+

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

+
+ 
{{snippet}}
 +
+ +

Documentation

+ +
+
Use Cases
+
http://responsiveimagescg.github.io/eq-usecases/
+ +
Specification
+
http://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/
+
+
+
+
+{{/each}} \ No newline at end of file diff --git a/_tmpl/index.hbs b/_tmpl/index.hbs index a37129f..0629eb0 100644 --- a/_tmpl/index.hbs +++ b/_tmpl/index.hbs @@ -8,180 +8,7 @@
- -
-
- -

The picture Element

-

Active Development

- -
-
-
-

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

-
- 
<picture>
-    <source srcset="thing.png" media="(min-width: 600px)">
-    <img src="smallthing.png">
-  </picture>
 -
- -

Documentation

- -
-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://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/
-
-
-
-
- - -
-
- -

The srcset and sizes Attributes

-

Active Development

- -
-
-
-

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

- -
- 
<picture>
-    <source srcset="thing.png" media="(min-width: 600px)">
-    <img src="smallthing.png">
-  </picture>
 -
- -

Documentation

- -
-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://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/
-
-
-
-
- -
-
- -

Element Queries

-

Proposed

- -
-
-
-

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

-
- 
<picture>
-  <source srcset="thing.png" media="(min-width: 600px)">
-  <img src="smallthing.png">
-</picture>
 -
- -

Documentation

- -
-
Use Cases
-
http://responsiveimagescg.github.io/eq-usecases/
- -
Specification
-
http://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/
-
- -
-
- + {{> issues }}
\ No newline at end of file