├── README.md ├── .settings ├── org.eclipse.wst.jsdt.ui.superType.name ├── org.eclipse.wst.jsdt.ui.superType.container └── .jsdtscope ├── TODO.txt ├── .project ├── index.html ├── css └── style.css └── js └── libs └── modernizr-2.0.6.min.js /README.md: -------------------------------------------------------------------------------- 1 | License: Public Domain 2 | -------------------------------------------------------------------------------- /.settings/org.eclipse.wst.jsdt.ui.superType.name: -------------------------------------------------------------------------------- 1 | Global -------------------------------------------------------------------------------- /TODO.txt: -------------------------------------------------------------------------------- 1 | == IE7 == 2 | Offset in the 480+ menu 3 | Offset in the footer -------------------------------------------------------------------------------- /.settings/org.eclipse.wst.jsdt.ui.superType.container: -------------------------------------------------------------------------------- 1 | org.eclipse.wst.jsdt.launching.JRE_CONTAINER -------------------------------------------------------------------------------- /.settings/.jsdtscope: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | initializr-template 4 | 5 | 6 | 7 | 8 | 9 | org.eclipse.wst.jsdt.core.javascriptValidator 10 | 11 | 12 | 13 | 14 | 15 | org.eclipse.wst.jsdt.core.jsNature 16 | 17 | 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 34 |

35 |

36 | 37 |

38 |

39 |

article header h1

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

41 |

42 |

43 |

article section h2

44 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

45 |

46 |

47 |

article section h2

48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

49 |

50 | 54 |

55 | 56 | 60 | 61 |

62 |

63 | 64 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* HTML5 ✰ Boilerplate 2 | * ==|== normalize ========================================================== 3 | */ 4 | 5 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } 6 | audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } 7 | audio:not([controls]) { display: none; } 8 | [hidden] { display: none; } 9 | 10 | html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 11 | body { margin: 0; font-size: 13px; line-height: 1.231; } 12 | body, button, input, select, textarea { font-family: sans-serif; color: #222; } 13 | 14 | ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } 15 | ::selection { background: #fe57a1; color: #fff; text-shadow: none; } 16 | 17 | a { color: #00e; } 18 | a:visited { color: #551a8b; } 19 | a:hover { color: #06e; } 20 | a:focus { outline: thin dotted; } 21 | a:hover, a:active { outline: 0; } 22 | 23 | abbr[title] { border-bottom: 1px dotted; } 24 | b, strong { font-weight: bold; } 25 | blockquote { margin: 1em 40px; } 26 | dfn { font-style: italic; } 27 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 28 | ins { background: #ff9; color: #000; text-decoration: none; } 29 | mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } 30 | pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } 31 | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } 32 | q { quotes: none; } 33 | q:before, q:after { content: ""; content: none; } 34 | small { font-size: 85%; } 35 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 36 | sup { top: -0.5em; } 37 | sub { bottom: -0.25em; } 38 | ul, ol { margin: 1em 0; padding: 0 0 0 40px; } 39 | dd { margin: 0 0 0 40px; } 40 | nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } 41 | img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } 42 | svg:not(:root) { overflow: hidden; } 43 | figure { margin: 0; } 44 | 45 | form { margin: 0; } 46 | fieldset { border: 0; margin: 0; padding: 0; } 47 | label { cursor: pointer; } 48 | legend { border: 0; *margin-left: -7px; padding: 0; } 49 | button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } 50 | button, input { line-height: normal; *overflow: visible; } 51 | table button, table input { *overflow: auto; } 52 | button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } 53 | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } 54 | input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } 55 | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 56 | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } 57 | textarea { overflow: auto; vertical-align: top; resize: vertical; } 58 | input:valid, textarea:valid { } 59 | input:invalid, textarea:invalid { background-color: #f0dddd; } 60 | 61 | table { border-collapse: collapse; border-spacing: 0; } 62 | td { vertical-align: top; } 63 | 64 | 65 | /* =================================================== 66 | Initializr styles 67 | http://verekia.com/initializr/responsive-template 68 | Author: Jonathan Verrecchia 69 | =================================================== */ 70 | 71 | body{ font:16px/24px Helvetica, Helvetica Neue, Arial, sans-serif; } 72 | 73 | .wrapper{ 74 | width:90%; 75 | margin:0 5%; 76 | } 77 | 78 | /* =================== 79 | ALL: Orange Theme 80 | =================== */ 81 | 82 | #header-container{ border-bottom: 20px solid #e44d26; } 83 | #footer-container{ border-top: 20px solid #e44d26; } 84 | #main aside { border-top: 20px solid #e44d26; } 85 | 86 | #header-container, 87 | #footer-container, 88 | #main aside{ 89 | background:#f16529; 90 | } 91 | 92 | #title{ color:white; } 93 | 94 | ::-moz-selection { background: #f16529; color: #fff; text-shadow: none; } 95 | ::selection { background: #f16529; color: #fff; text-shadow: none; } 96 | 97 | /* ============== 98 | MOBILE: Menu 99 | ============== */ 100 | 101 | nav a{ 102 | display:block; 103 | margin-bottom:10px; 104 | padding:15px 0; 105 | 106 | background:#e44d26; 107 | color:white; 108 | 109 | text-align:center; 110 | text-decoration:none; 111 | font-weight:bold; 112 | } 113 | 114 | nav a:hover, nav a:visited{ 115 | color:white; 116 | } 117 | 118 | nav a:hover{ 119 | text-decoration:underline; 120 | } 121 | 122 | /* ============== 123 | MOBILE: Main 124 | ============== */ 125 | 126 | #main{ 127 | padding:30px 0; 128 | } 129 | 130 | #main article h1{ 131 | font-size:2em; 132 | } 133 | 134 | #main aside{ 135 | color:white; 136 | padding:0px 5% 10px; 137 | } 138 | 139 | #footer-container footer{ 140 | color:white; 141 | padding:20px 0; 142 | } 143 | 144 | /* =============== 145 | ALL: IE Fixes 146 | =============== */ 147 | 148 | .ie7 #title{ padding-top:20px; } 149 | 150 | 151 | /* ==|== non-semantic helper classes ======================================== */ 152 | .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } 153 | .ir br { display: none; } 154 | .hidden { display: none !important; visibility: hidden; } 155 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 156 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } 157 | .invisible { visibility: hidden; } 158 | .clearfix:before, .clearfix:after { content: ""; display: table; } 159 | .clearfix:after { clear: both; } 160 | .clearfix { zoom: 1; } 161 | 162 | 163 | /* ==|== media queries ====================================================== */ 164 | 165 | @media only screen and (min-width: 480px) { 166 | 167 | /* ==================== 168 | INTERMEDIATE: Menu 169 | ==================== */ 170 | 171 | nav a{ 172 | float:left; 173 | width:27%; 174 | margin:0 1.7%; 175 | padding:25px 2%; 176 | margin-bottom:0; 177 | } 178 | 179 | nav li:first-child a{ margin-left:0; } 180 | nav li:last-child a{ margin-right:0; } 181 | 182 | /* ======================== 183 | INTERMEDIATE: IE Fixes 184 | ======================== */ 185 | 186 | nav ul li{ 187 | display:inline; 188 | } 189 | .oldie nav a{ 190 | margin:0 0.7%; 191 | } 192 | } 193 | 194 | @media only screen and (min-width: 768px) { 195 | 196 | /* ==================== 197 | WIDE: CSS3 Effects 198 | ==================== */ 199 | 200 | #header-container, 201 | #main aside{ 202 | -webkit-box-shadow:0 5px 10px #aaa; 203 | -moz-box-shadow:0 5px 10px #aaa; 204 | box-shadow:0 5px 10px #aaa; 205 | } 206 | 207 | /* ============ 208 | WIDE: Menu 209 | ============ */ 210 | 211 | #title{ 212 | float:left; 213 | } 214 | 215 | nav{ 216 | float:right; 217 | width:38%; 218 | } 219 | 220 | /* ============ 221 | WIDE: Main 222 | ============ */ 223 | 224 | #main article{ 225 | float:left; 226 | width:57%; 227 | } 228 | 229 | #main aside{ 230 | float:right; 231 | width:28%; 232 | } 233 | } 234 | 235 | @media only screen and (min-width: 1140px) { 236 | 237 | /* =============== 238 | Maximal Width 239 | =============== */ 240 | 241 | .wrapper{ 242 | width:1026px; /* 1140px - 10% for margins */ 243 | margin:0 auto; 244 | } 245 | } 246 | 247 | /* ==|== print styles ======================================================= */ 248 | 249 | @media print { 250 | * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 251 | a, a:visited { text-decoration: underline; } 252 | a[href]:after { content: " (" attr(href) ")"; } 253 | abbr[title]:after { content: " (" attr(title) ")"; } 254 | .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 255 | pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 256 | thead { display: table-header-group; } 257 | tr, img { page-break-inside: avoid; } 258 | img { max-width: 100% !important; } 259 | @page { margin: 0.5cm; } 260 | p, h2, h3 { orphans: 3; widows: 3; } 261 | h2, h3 { page-break-after: avoid; } 262 | } 263 | -------------------------------------------------------------------------------- /js/libs/modernizr-2.0.6.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.0.6 | MIT & BSD 2 | * Contains: All core tests, html5shiv, yepnope, respond.js. Get your own custom build at www.modernizr.com/download/ 3 | */ 4 | ;window.Modernizr=function(a,b,c){function I(){e.input=function(a){for(var b=0,c=a.length;b",a,""].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},w=function(b){if(a.matchMedia)return matchMedia(b).matches;var c;v("@media "+b+" { #"+i+" { position: absolute; } }",function(b){c=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).position=="absolute"});return c},x=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=D(e[d],"function"),D(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;return f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),y,z={}.hasOwnProperty,A;!D(z,c)&&!D(z.call,c)?A=function(a,b){return z.call(a,b)}:A=function(a,b){return b in a&&D(a.constructor.prototype[b],c)};var H=function(c,d){var f=c.join(""),g=d.length;v(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9,e.csstransforms3d=j.csstransforms3d.offsetLeft===9,e.generatedcontent=j.generatedcontent.offsetHeight>=1,e.fontface=/src/i.test(h)&&h.indexOf(d.split(" ")[0])===0},g,d)}(['@font-face {font-family:"font";src:url("https://")}',["@media (",o.join("touch-enabled),("),i,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",o.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join(""),['#generatedcontent:after{content:"',m,'";visibility:hidden}'].join("")],["fontface","touch","csstransforms3d","generatedcontent"]);r.flexbox=function(){function c(a,b,c,d){a.style.cssText=o.join(b+":"+c+";")+(d||"")}function a(a,b,c,d){b+=":",a.style.cssText=(b+o.join(c+";"+b)).slice(0,-b.length)+(d||"")}var d=b.createElement("div"),e=b.createElement("div");a(d,"display","box","width:42px;padding:0;"),c(e,"box-flex","1","width:10px;"),d.appendChild(e),g.appendChild(d);var f=e.offsetWidth===42;d.removeChild(e),g.removeChild(d);return f},r.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},r.canvastext=function(){return!!e.canvas&&!!D(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){return!!a.WebGLRenderingContext},r.touch=function(){return e.touch},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.websqldatabase=function(){var b=!!a.openDatabase;return b},r.indexedDB=function(){for(var b=-1,c=p.length;++b7)},r.history=function(){return!!a.history&&!!history.pushState},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){for(var b=-1,c=p.length;++b";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var J in r)A(r,J)&&(y=J.toLowerCase(),e[y]=r[J](),u.push((e[y]?"":"no-")+y));e.input||I(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)A(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return;b=typeof b=="boolean"?b:!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b}return e},B(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b=u.minw)&&(!u.maxw||u.maxw&&l<=u.maxw))m[u.media]||(m[u.media]=[]),m[u.media].push(f[u.rules])}for(var t in g)g[t]&&g[t].parentNode===j&&j.removeChild(g[t]);for(var t in m){var v=c.createElement("style"),w=m[t].join("\n");v.type="text/css",v.media=t,v.styleSheet?v.styleSheet.cssText=w:v.appendChild(c.createTextNode(w)),n.appendChild(v),g.push(v)}j.insertBefore(n,o.nextSibling)}},s=function(a,b){var c=t();if(!!c){c.open("GET",a,!0),c.onreadystatechange=function(){c.readyState==4&&(c.status==200||c.status==304)&&b(c.responseText)};if(c.readyState==4)return;c.send()}},t=function(){var a=!1,b=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new XMLHttpRequest}],c=b.length;while(c--){try{a=b[c]()}catch(d){continue}break}return function(){return a}}();m(),respond.update=m,a.addEventListener?a.addEventListener("resize",u,!1):a.attachEvent&&a.attachEvent("onresize",u)}}(this,Modernizr.mq("only all")),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h