ร่าวคร่าวๆ

week05/windowapp/assets/css/ie8.css

+/*
+	Directive by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	hr {
+		border-top: solid 1px #cccccc;
+	}
+
+	blockquote {
+		border-left: solid 0.5em #cccccc;
+	}
+
+/* Section/Article */
+
+	header.major {
+		border-color: #cccccc;
+	}
+
+		header.major p {
+			border-top: solid 1px #cccccc;
+		}
+
+	footer.major {
+		border-color: #cccccc;
+	}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	.button {
+		position: relative;
+		-ms-behavior: url("assets/js/ie/PIE.htc");
+	}
+
+		input[type="submit"].alt,
+		input[type="reset"].alt,
+		input[type="button"].alt,
+		.button.alt {
+			border: solid 1px #cccccc;
+		}
+
+/* Form */
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		position: relative;
+		border: solid 1px #cccccc;
+		-ms-behavior: url("assets/js/ie/PIE.htc");
+	}
+
+/* Image */
+
+	.image {
+		border: 0;
+		display: inline-block;
+		position: relative;
+	}
+
+		.image:after {
+			display: none;
+		}
+
+/* Box */
+
+	.box {
+		border: solid 1px #cccccc;
+	}
+
+/* Header */
+
+	#header {
+		background-image: url("../../images/header.jpg") !important;
+		background-size: cover !important;
+		background-position: scroll !important;
+		-ms-behavior: url("assets/js/ie/backgroundsize.min.htc");
+		padding: 8em 0 !important;
+		color: #ffffff;
+	}
+
+		#header a {
+			color: inherit;
+		}
+
+		#header:before {
+			content: '';
+			background-image: url("images/overlay.png");
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			display: block;
+			z-index: 0;
+		}
+
+		#header > * {
+			position: relative;
+			z-index: 1;
+		}
+
+		#header .logo {
+			-ms-behavior: url("assets/js/ie/PIE.htc");
+		}
+
+/* Footer */
+
+	#footer {
+		background-image: none !important;
+		margin-top: 0 !important;
+		padding: 4em 0 !important;
+		color: #ffffff;
+	}
+
+/* Main */
+
+	#main {
+		padding: 4em 0;
+	}
\ No newline at end of file

week05/windowapp/assets/css/images/bottom-1280.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200px" height="460px" viewBox="0 0 3200 460" zoomAndPan="disable">
+
+    <style type="text/css"><![CDATA[
+		line { stroke-width: 2.5px; }
+		line.upper { stroke: rgba(224,224,224,0.75); }
+		line.lower { stroke: rgba(224,224,224,0.75); }
+		polygon.one { fill: #f8f8f8; }
+		polygon.two { fill: #ffffff; }
+    ]]></style>	
+    
+	<!-- Backgrounds -->
+		<polygon points="0,50 1600,410 3200,50 3200,0 0,0" class="one" />
+		<polygon points="0,0 1600,360 3200,0 3200,0 0,0" class="two" />
+
+	<!-- Lower lines -->
+		<line x1="0" y1="0" x2="1600" y2="360" class="upper" />
+		<line x1="1600" y1="360" x2="3200" y2="0" class="upper" />
+
+	<!-- Upper Lines -->
+		<line x1="0" y1="100" x2="1600" y2="460" class="lower" />
+		<line x1="1600" y1="460" x2="3200" y2="100" class="lower" />
+
+</svg>
\ No newline at end of file

week05/windowapp/assets/css/images/bottom-1600.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200px" height="460px" viewBox="0 0 3200 460" zoomAndPan="disable">
+
+    <style type="text/css"><![CDATA[
+		line { stroke-width: 2px; }
+		line.upper { stroke: rgba(224,224,224,0.75); }
+		line.lower { stroke: rgba(224,224,224,0.75); }
+		polygon.one { fill: #f8f8f8; }
+		polygon.two { fill: #ffffff; }
+    ]]></style>	
+    
+	<!-- Backgrounds -->
+		<polygon points="0,50 1600,410 3200,50 3200,0 0,0" class="one" />
+		<polygon points="0,0 1600,360 3200,0 3200,0 0,0" class="two" />
+
+	<!-- Lower lines -->
+		<line x1="0" y1="0" x2="1600" y2="360" class="upper" />
+		<line x1="1600" y1="360" x2="3200" y2="0" class="upper" />
+
+	<!-- Upper Lines -->
+		<line x1="0" y1="100" x2="1600" y2="460" class="lower" />
+		<line x1="1600" y1="460" x2="3200" y2="100" class="lower" />
+
+</svg>
\ No newline at end of file

week05/windowapp/assets/css/images/bottom-3200.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200px" height="460px" viewBox="0 0 3200 460" zoomAndPan="disable">
+
+    <style type="text/css"><![CDATA[
+		line { stroke-width: 1px; }
+		line.upper { stroke: rgba(224,224,224,0.75); }
+		line.lower { stroke: rgba(224,224,224,0.75); }
+		polygon.one { fill: #f8f8f8; }
+		polygon.two { fill: #ffffff; }
+    ]]></style>	
+    
+	<!-- Backgrounds -->
+		<polygon points="0,50 1600,410 3200,50 3200,0 0,0" class="one" />
+		<polygon points="0,0 1600,360 3200,0 3200,0 0,0" class="two" />
+
+	<!-- Lower lines -->
+		<line x1="0" y1="0" x2="1600" y2="360" class="upper" />
+		<line x1="1600" y1="360" x2="3200" y2="0" class="upper" />
+
+	<!-- Upper Lines -->
+		<line x1="0" y1="100" x2="1600" y2="460" class="lower" />
+		<line x1="1600" y1="460" x2="3200" y2="100" class="lower" />
+
+</svg>
\ No newline at end of file

week05/windowapp/assets/css/images/top-1280.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200px" height="460px" viewBox="0 0 3200 460" zoomAndPan="disable">
+
+    <style type="text/css"><![CDATA[
+		line { stroke-width: 2.5px; }
+		line.upper { stroke: rgba(224,224,224,0.15); }
+		line.lower { stroke: rgba(224,224,224,0.75); }
+		polygon.one { fill: #f8f8f8; }
+		polygon.two { fill: #ffffff; }
+    ]]></style>	
+
+	<!-- Backgrounds -->
+		<polygon points="0,50 1600,410 3200,50 3200,460 0,460" class="one" />
+		<polygon points="0,100 1600,460 3200,100 3200,460 0,460" class="two" />
+
+	<!-- Upper lines -->
+		<line x1="0" y1="0" x2="1600" y2="360" class="upper" />
+		<line x1="1600" y1="360" x2="3200" y2="0" class="upper" />
+
+	<!-- Lower Lines -->
+		<line x1="0" y1="100" x2="1600" y2="460" class="lower" />
+		<line x1="1600" y1="460" x2="3200" y2="100" class="lower" />
+
+</svg>
\ No newline at end of file

week05/windowapp/assets/css/images/top-1600.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200px" height="460px" viewBox="0 0 3200 460" zoomAndPan="disable">
+
+    <style type="text/css"><![CDATA[
+		line { stroke-width: 2px; }
+		line.upper { stroke: rgba(224,224,224,0.15); }
+		line.lower { stroke: rgba(224,224,224,0.75); }
+		polygon.one { fill: #f8f8f8; }
+		polygon.two { fill: #ffffff; }
+    ]]></style>	
+
+	<!-- Backgrounds -->
+		<polygon points="0,50 1600,410 3200,50 3200,460 0,460" class="one" />
+		<polygon points="0,100 1600,460 3200,100 3200,460 0,460" class="two" />
+
+	<!-- Upper lines -->
+		<line x1="0" y1="0" x2="1600" y2="360" class="upper" />
+		<line x1="1600" y1="360" x2="3200" y2="0" class="upper" />
+
+	<!-- Lower Lines -->
+		<line x1="0" y1="100" x2="1600" y2="460" class="lower" />
+		<line x1="1600" y1="460" x2="3200" y2="100" class="lower" />
+
+</svg>
\ No newline at end of file

week05/windowapp/assets/css/images/top-3200.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200px" height="460px" viewBox="0 0 3200 460" zoomAndPan="disable">
+
+    <style type="text/css"><![CDATA[
+		line { stroke-width: 1px; }
+		line.upper { stroke: rgba(224,224,224,0.15); }
+		line.lower { stroke: rgba(224,224,224,0.75); }
+		polygon.one { fill: #f8f8f8; }
+		polygon.two { fill: #ffffff; }
+    ]]></style>	
+
+	<!-- Backgrounds -->
+		<polygon points="0,50 1600,410 3200,50 3200,460 0,460" class="one" />
+		<polygon points="0,100 1600,460 3200,100 3200,460 0,460" class="two" />
+
+	<!-- Upper lines -->
+		<line x1="0" y1="0" x2="1600" y2="360" class="upper" />
+		<line x1="1600" y1="360" x2="3200" y2="0" class="upper" />
+
+	<!-- Lower Lines -->
+		<line x1="0" y1="100" x2="1600" y2="460" class="lower" />
+		<line x1="1600" y1="460" x2="3200" y2="100" class="lower" />
+
+</svg>
\ No newline at end of file

week05/windowapp/assets/js/ie/backgroundsize.min.htc

+<component lightWeight="true">
+<attach event="onpropertychange" onevent="handlePropertychange()" />
+<attach event="ondetach" onevent="restore()" />
+<attach event="onresize" for="window" onevent="handleResize()" />
+<script type="text/javascript">
+var rsrc=/url\(["']?(.*?)["']?\)/,positions={top:0,left:0,bottom:1,right:1,center:0.5},doc=element.document;init(); function init(){var b=doc.createElement("div"),a=doc.createElement("img"),c,d;b.style.position="absolute";b.style.zIndex=-1;b.style.top=0;b.style.right=0;b.style.left=0;b.style.bottom=0;b.style.overflow="hidden";a.style.position="absolute";a.style.width=a.style.width="auto";b.appendChild(a);element.insertBefore(b,element.firstChild);d=[element.currentStyle.backgroundPositionX,element.currentStyle.backgroundPositionY];element.bgsExpando=c={wrapper:b,img:a,backgroundSize:element.currentStyle["background-size"], backgroundPositionX:positions[d[0]]||parseFloat(d[0])/100,backgroundPositionY:positions[d[1]]||parseFloat(d[1])/100};"auto"==element.currentStyle.zIndex&&(element.style.zIndex=0);"static"==element.currentStyle.position&&(element.style.position="relative");refreshDisplay(element,c)&&(refreshDimensions(element,c),refreshBackgroundImage(element,c,function(){updateBackground(element,c)}))} function refreshDisplay(b,a){var c=b.currentStyle.display;c!=a.display&&(a.display=c,a.somethingChanged=!0);return"none"!=c}function refreshDimensions(b,a){var c=b.offsetWidth-(parseFloat(b.currentStyle.borderLeftWidth)||0)-(parseFloat(b.currentStyle.borderRightWidth)||0),d=b.offsetHeight-(parseFloat(b.currentStyle.borderTopWidth)||0)-(parseFloat(b.currentStyle.borderBottomWidth)||0);if(c!=a.innerWidth||d!=a.innerHeight)a.innerWidth=c,a.innerHeight=d,a.somethingChanged=!0} function refreshBackgroundImage(b,a,c){var d=a.img,e=(rsrc.exec(b.currentStyle.backgroundImage)||[])[1];if(e&&e!=a.backgroundSrc){a.backgroundSrc=e;a.somethingChanged=!0;d.onload=function(){var b=d.width,e=d.height;1==b&&1==e||(a.imgWidth=b,a.imgHeight=e,a.constrain=!1,c(),d.style.visibility="visible",d.onload=null)};d.style.visibility="hidden";d.src=a.backgroundSrc;if(d.readyState||d.complete)d.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",d.src=a.backgroundSrc;a.ignoreNextPropertyChange= !0;b.style.backgroundImage="none"}else c()} function updateBackground(b,a){if(a.somethingChanged){var c=a.img,d=a.innerWidth/a.innerHeight,e=a.imgWidth/a.imgHeight,f=a.constrain;"contain"==a.backgroundSize?e>d?(a.constrain=d="width",e=Math.floor((a.innerHeight-a.innerWidth/e)*a.backgroundPositionY),c.style.top=e+"px",d!=f&&(c.style.width="100%",c.style.height="auto",c.style.left=0)):(a.constrain=d="height",e=Math.floor((a.innerWidth-a.innerHeight*e)*a.backgroundPositionX),c.style.left=e+"px",d!=f&&(c.style.width="auto",c.style.height="100%", c.style.top=0)):"cover"==a.backgroundSize&&(e>d?(a.constrain=d="height",e=Math.floor((a.innerHeight*e-a.innerWidth)*a.backgroundPositionX),c.style.left=-e+"px",d!=f&&(c.style.width="auto",c.style.height="100%",c.style.top=0)):(a.constrain=d="width",e=Math.floor((a.innerWidth/e-a.innerHeight)*a.backgroundPositionY),c.style.top=-e+"px",d!=f&&(c.style.width="100%",c.style.height="auto",c.style.left=0)));a.somethingChanged=!1}} function handlePropertychange(){var b=element.bgsExpando;b.ignoreNextPropertyChange?b.ignoreNextPropertyChange=!1:refreshDisplay(element,b)&&(refreshDimensions(element,b),refreshBackgroundImage(element,b,function(){updateBackground(element,b)}))}function handleResize(){var b=element.bgsExpando;"none"!=b.display&&(refreshDimensions(element,b),updateBackground(element,b))} function restore(){var b=element.bgsExpando;try{element.style.backgroundImage="url('"+b.backgroundSrc+"')",element.removeChild(b.wrapper),element.bgsExpando=null}catch(a){}};
+</script>
\ No newline at end of file

week05/windowapp/assets/js/ie/html5shiv.js

+/*
+ HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
+"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
+for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

week05/windowapp/assets/js/ie/respond.min.js

+/*! Respond.js v1.4.2: min/max-width media query polyfill
+ * Copyright 2014 Scott Jehl
+ * Licensed under MIT
+ * http://j.mp/respondjs */
+
+!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
\ No newline at end of file

week05/windowapp/assets/js/main.js

+/*
+	Directive by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function($) {
+
+	skel.breakpoints({
+		wide: '(max-width: 1680px)',
+		normal: '(max-width: 1280px)',
+		narrow: '(max-width: 980px)',
+		narrower: '(max-width: 840px)',
+		mobile: '(max-width: 736px)',
+		mobilep: '(max-width: 480px)'
+	});
+
+	$(function() {
+
+		var	$window = $(window),
+			$body = $('body');
+
+		// Disable animations/transitions until the page has loaded.
+			$body.addClass('is-loading');
+
+			$window.on('load', function() {
+				$body.removeClass('is-loading');
+			});
+
+		// Fix: Placeholder polyfill.
+			$('form').placeholder();
+
+		// Prioritize "important" elements on narrower.
+			skel.on('+narrower -narrower', function() {
+				$.prioritize(
+					'.important\\28 narrower\\29',
+					skel.breakpoint('narrower').active
+				);
+			});
+
+	});
+
+})(jQuery);
\ No newline at end of file

week05/windowapp/assets/js/skel.min.js

+/* skel.js v3.0.1 | (c) skel.io | MIT licensed */
+var skel=function(){"use strict";var t={breakpointIds:null,events:{},isInit:!1,obj:{attachments:{},breakpoints:{},head:null,states:{}},sd:"/",state:null,stateHandlers:{},stateId:"",vars:{},DOMReady:null,indexOf:null,isArray:null,iterate:null,matchesMedia:null,extend:function(e,n){t.iterate(n,function(i){t.isArray(n[i])?(t.isArray(e[i])||(e[i]=[]),t.extend(e[i],n[i])):"object"==typeof n[i]?("object"!=typeof e[i]&&(e[i]={}),t.extend(e[i],n[i])):e[i]=n[i]})},newStyle:function(t){var e=document.createElement("style");return e.type="text/css",e.innerHTML=t,e},_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,i=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+i in n||"Webkit"+i in n||"O"+i in n||"ms"+i in n},on:function(e,n){var i=e.split(/[\s]+/);return t.iterate(i,function(e){var a=i[e];if(t.isInit){if("init"==a)return void n();if("change"==a)n();else{var r=a.charAt(0);if("+"==r||"!"==r){var o=a.substring(1);if(o in t.obj.breakpoints)if("+"==r&&t.obj.breakpoints[o].active)n();else if("!"==r&&!t.obj.breakpoints[o].active)return void n()}}}t.events[a]||(t.events[a]=[]),t.events[a].push(n)}),t},trigger:function(e){return t.events[e]&&0!=t.events[e].length?(t.iterate(t.events[e],function(n){t.events[e][n]()}),t):void 0},breakpoint:function(e){return t.obj.breakpoints[e]},breakpoints:function(e){function n(t,e){this.name=this.id=t,this.media=e,this.active=!1,this.wasActive=!1}return n.prototype.matches=function(){return t.matchesMedia(this.media)},n.prototype.sync=function(){this.wasActive=this.active,this.active=this.matches()},t.iterate(e,function(i){t.obj.breakpoints[i]=new n(i,e[i])}),window.setTimeout(function(){t.poll()},0),t},addStateHandler:function(e,n){t.stateHandlers[e]=n},callStateHandler:function(e){var n=t.stateHandlers[e]();t.iterate(n,function(e){t.state.attachments.push(n[e])})},changeState:function(e){t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].sync()}),t.vars.lastStateId=t.stateId,t.stateId=e,t.breakpointIds=t.stateId===t.sd?[]:t.stateId.substring(1).split(t.sd),t.obj.states[t.stateId]?t.state=t.obj.states[t.stateId]:(t.obj.states[t.stateId]={attachments:[]},t.state=t.obj.states[t.stateId],t.iterate(t.stateHandlers,t.callStateHandler)),t.detachAll(t.state.attachments),t.attachAll(t.state.attachments),t.vars.stateId=t.stateId,t.vars.state=t.state,t.trigger("change"),t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].active?t.obj.breakpoints[e].wasActive||t.trigger("+"+e):t.obj.breakpoints[e].wasActive&&t.trigger("-"+e)})},generateStateConfig:function(e,n){var i={};return t.extend(i,e),t.iterate(t.breakpointIds,function(e){t.extend(i,n[t.breakpointIds[e]])}),i},getStateId:function(){var e="";return t.iterate(t.obj.breakpoints,function(n){var i=t.obj.breakpoints[n];i.matches()&&(e+=t.sd+i.id)}),e},poll:function(){var e="";e=t.getStateId(),""===e&&(e=t.sd),e!==t.stateId&&t.changeState(e)},_attach:null,attach:function(e){var n=t.obj.head,i=e.element;return i.parentNode&&i.parentNode.tagName?!1:(t._attach||(t._attach=n.firstChild),n.insertBefore(i,t._attach.nextSibling),e.permanent&&(t._attach=i),!0)},attachAll:function(e){var n=[];t.iterate(e,function(t){n[e[t].priority]||(n[e[t].priority]=[]),n[e[t].priority].push(e[t])}),n.reverse(),t.iterate(n,function(e){t.iterate(n[e],function(i){t.attach(n[e][i])})})},detach:function(t){var e=t.element;return t.permanent||!e.parentNode||e.parentNode&&!e.parentNode.tagName?!1:(e.parentNode.removeChild(e),!0)},detachAll:function(e){var n={};t.iterate(e,function(t){n[e[t].id]=!0}),t.iterate(t.obj.attachments,function(e){e in n||t.detach(t.obj.attachments[e])})},attachment:function(e){return e in t.obj.attachments?t.obj.attachments[e]:null},newAttachment:function(e,n,i,a){return t.obj.attachments[e]={id:e,element:n,priority:i,permanent:a}},init:function(){t.initMethods(),t.initVars(),t.initEvents(),t.obj.head=document.getElementsByTagName("head")[0],t.isInit=!0,t.trigger("init")},initEvents:function(){t.on("resize",function(){t.poll()}),t.on("orientationChange",function(){t.poll()}),t.DOMReady(function(){t.trigger("ready")}),window.onload&&t.on("load",window.onload),window.onload=function(){t.trigger("load")},window.onresize&&t.on("resize",window.onresize),window.onresize=function(){t.trigger("resize")},window.onorientationchange&&t.on("orientationChange",window.onorientationchange),window.onorientationchange=function(){t.trigger("orientationChange")}},initMethods:function(){document.addEventListener?!function(e,n){t.DOMReady=n()}("domready",function(){function t(t){for(r=1;t=n.shift();)t()}var e,n=[],i=document,a="DOMContentLoaded",r=/^loaded|^c/.test(i.readyState);return i.addEventListener(a,e=function(){i.removeEventListener(a,e),t()}),function(t){r?t():n.push(t)}}):!function(e,n){t.DOMReady=n()}("domready",function(t){function e(t){for(h=1;t=i.shift();)t()}var n,i=[],a=!1,r=document,o=r.documentElement,s=o.doScroll,c="DOMContentLoaded",d="addEventListener",u="onreadystatechange",l="readyState",f=s?/^loaded|^c/:/^loaded|c/,h=f.test(r[l]);return r[d]&&r[d](c,n=function(){r.removeEventListener(c,n,a),e()},a),s&&r.attachEvent(u,n=function(){/^c/.test(r[l])&&(r.detachEvent(u,n),e())}),t=s?function(e){self!=top?h?e():i.push(e):function(){try{o.doScroll("left")}catch(n){return setTimeout(function(){t(e)},50)}e()}()}:function(t){h?t():i.push(t)}}),Array.prototype.indexOf?t.indexOf=function(t,e){return t.indexOf(e)}:t.indexOf=function(t,e){if("string"==typeof t)return t.indexOf(e);var n,i,a=e?e:0;if(!this)throw new TypeError;if(i=this.length,0===i||a>=i)return-1;for(0>a&&(a=i-Math.abs(a)),n=a;i>n;n++)if(this[n]===t)return n;return-1},Array.isArray?t.isArray=function(t){return Array.isArray(t)}:t.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},Object.keys?t.iterate=function(t,e){if(!t)return[];var n,i=Object.keys(t);for(n=0;i[n]&&e(i[n],t[i[n]])!==!1;n++);}:t.iterate=function(t,e){if(!t)return[];var n;for(n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(n,t[n])===!1)break},window.matchMedia?t.matchesMedia=function(t){return""==t?!0:window.matchMedia(t).matches}:window.styleMedia||window.media?t.matchesMedia=function(t){if(""==t)return!0;var e=window.styleMedia||window.media;return e.matchMedium(t||"all")}:window.getComputedStyle?t.matchesMedia=function(t){if(""==t)return!0;var e=document.createElement("style"),n=document.getElementsByTagName("script")[0],i=null;e.type="text/css",e.id="matchmediajs-test",n.parentNode.insertBefore(e,n),i="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle;var a="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=a:e.textContent=a,"1px"===i.width}:t.matchesMedia=function(t){if(""==t)return!0;var e,n,i,a,r={"min-width":null,"max-width":null},o=!1;for(i=t.split(/\s+and\s+/),e=0;e<i.length;e++)n=i[e],"("==n.charAt(0)&&(n=n.substring(1,n.length-1),a=n.split(/:\s+/),2==a.length&&(r[a[0].replace(/^\s+|\s+$/g,"")]=parseInt(a[1]),o=!0));if(!o)return!1;var s=document.documentElement.clientWidth,c=document.documentElement.clientHeight;return null!==r["min-width"]&&s<r["min-width"]||null!==r["max-width"]&&s>r["max-width"]||null!==r["min-height"]&&c<r["min-height"]||null!==r["max-height"]&&c>r["max-height"]?!1:!0},navigator.userAgent.match(/MSIE ([0-9]+)/)&&RegExp.$1<9&&(t.newStyle=function(t){var e=document.createElement("span");return e.innerHTML='&nbsp;<style type="text/css">'+t+"</style>",e})},initVars:function(){var e,n,i,a=navigator.userAgent;e="other",n=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(RegExp.$1),!1):void 0}),t.vars.browser=e,t.vars.browserVersion=n,e="other",n=0,i=[["ios",/([0-9_]+) like Mac OS X/,function(t){return t.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(t){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(t){return t.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(i[2]?i[2](RegExp.$1):RegExp.$1),!1):void 0}),t.vars.os=e,t.vars.osVersion=n,t.vars.IEVersion="ie"==t.vars.browser?t.vars.browserVersion:99,t.vars.touch="wp"==t.vars.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),t.vars.mobile="wp"==t.vars.os||"android"==t.vars.os||"ios"==t.vars.os||"bb"==t.vars.os}};return t.init(),t}();!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.skel=e()}(this,function(){return skel});

week05/windowapp/assets/sass/ie8.scss

+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/skel';
+
+/*
+	Directive by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+$color-border-ie: #cccccc;
+
+/* Basic */
+
+	hr {
+		border-top: solid 1px $color-border-ie;
+	}
+
+	blockquote {
+		border-left: solid 0.5em $color-border-ie;
+	}
+
+/* Section/Article */
+
+	header {
+		&.major {
+			border-color: $color-border-ie;
+
+			p {
+				border-top: solid 1px $color-border-ie;
+			}
+		}
+	}
+
+	footer {
+		&.major {
+			border-color: $color-border-ie;
+		}
+	}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	.button {
+		position: relative;
+		-ms-behavior: url('assets/js/ie/PIE.htc');
+
+		&.alt {
+			border: solid 1px $color-border-ie;
+		}
+	}
+
+/* Form */
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		position: relative;
+		border: solid 1px $color-border-ie;
+		-ms-behavior: url('assets/js/ie/PIE.htc');
+	}
+
+/* Image */
+
+	.image {
+		border: 0;
+		display: inline-block;
+		position: relative;
+
+		&:after {
+			display: none;
+		}
+	}
+
+/* Box */
+
+	.box {
+		border: solid 1px $color-border-ie;
+	}
+
+/* Header */
+
+	#header {
+		background-image: url('../../images/header.jpg') !important;
+		background-size: cover !important;
+		background-position: scroll !important;
+		-ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
+		padding: 8em 0 !important;
+		color: _palette(accent2, fg-bold);
+
+		a {
+			color: inherit;
+		}
+
+		&:before {
+			content: '';
+			background-image: url('images/overlay.png');
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			display: block;
+			z-index: 0;
+		}
+
+		> * {
+			position: relative;
+			z-index: 1;
+		}
+
+		.logo {
+			-ms-behavior: url('assets/js/ie/PIE.htc');
+		}
+	}
+
+/* Footer */
+
+	#footer {
+		background-image: none !important;
+		margin-top: 0 !important;
+		padding: 4em 0 !important;
+		color: _palette(accent1, fg-bold);
+	}
+
+/* Main */
+
+	#main {
+		padding: 4em 0;
+	}
\ No newline at end of file

week05/windowapp/assets/sass/libs/_functions.scss

+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _duration($keys...) {
+	@return val($duration, $keys...);
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+	@return val($font, $keys...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _misc($keys...) {
+	@return val($misc, $keys...);
+}
+
+/// Gets a palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette($keys...) {
+	@return val($palette, $keys...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+	@return val($size, $keys...);
+}
\ No newline at end of file

week05/windowapp/assets/sass/libs/_mixins.scss

+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $where Optional pseudoelement to target (before or after).
+@mixin icon($content: false, $where: before) {
+
+	text-decoration: none;
+
+	&:#{$where} {
+
+		@if $content {
+			content: $content;
+		}
+
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		font-family: FontAwesome;
+		font-style: normal;
+		font-weight: normal;
+		text-transform: none !important;
+
+	}
+
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+
+	@if $important {
+		$important: '!important';
+	}
+
+	$x: 0.1em;
+
+	@if unit(_size(element-margin)) == 'rem' {
+		$x: 0.1rem;
+	}
+
+	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+
+}
+
+/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
+/// @param {string} $svg SVG data URL.
+/// @return {string} Encoded SVG data URL.
+@function svg-url($svg) {
+
+	$svg: str-replace($svg, '"', '\'');
+	$svg: str-replace($svg, '%', '%25');
+	$svg: str-replace($svg, '<', '%3C');
+	$svg: str-replace($svg, '>', '%3E');
+	$svg: str-replace($svg, '&', '%26');
+	$svg: str-replace($svg, '#', '%23');
+	$svg: str-replace($svg, '{', '%7B');
+	$svg: str-replace($svg, '}', '%7D');
+	$svg: str-replace($svg, ';', '%3B');
+
+	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
+
+}
+
+/// Initializes base flexgrid classes.
+/// @param {string} $vertical-align Vertical alignment of cells.
+/// @param {string} $horizontal-align Horizontal alignment of cells.
+@mixin flexgrid-base($vertical-align: null, $horizontal-align: null) {
+
+	// Grid.
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+
+		// Vertical alignment.
+			@if ($vertical-align == top) {
+				@include vendor('align-items', 'flex-start');
+			}
+			@else if ($vertical-align == bottom) {
+				@include vendor('align-items', 'flex-end');
+			}
+			@else if ($vertical-align == center) {
+				@include vendor('align-items', 'center');
+			}
+			@else {
+				@include vendor('align-items', 'stretch');
+			}
+
+		// Horizontal alignment.
+			@if ($horizontal-align != null) {
+				text-align: $horizontal-align;
+			}
+
+	// Cells.
+		> * {
+			@include vendor('flex-shrink', '1');
+			@include vendor('flex-grow', '0');
+		}
+
+}
+
+/// Sets up flexgrid columns.
+/// @param {integer} $columns Columns.
+@mixin flexgrid-columns($columns) {
+
+	> * {
+		$cell-width: 100% / $columns;
+		width: #{$cell-width};
+	}
+
+}
+
+/// Sets up flexgrid gutters.
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters.
+@mixin flexgrid-gutters($columns, $gutters) {
+
+	// Apply padding.
+		> * {
+			$cell-width: 100% / $columns;
+
+			padding: ($gutters * 0.5);
+			width: $cell-width;
+		}
+
+}
+
+/// Sets up flexgrid gutters (flush).
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters.
+@mixin flexgrid-gutters-flush($columns, $gutters) {
+
+	// Apply padding.
+		> * {
+			$cell-width: 100% / $columns;
+			$cell-width-pad: $gutters / $columns;
+
+			padding: ($gutters * 0.5);
+			width: calc(#{$cell-width} + #{$cell-width-pad});
+		}
+
+	// Clear top/bottom gutters.
+		> :nth-child(-n + #{$columns}) {
+			padding-top: 0;
+		}
+
+		> :nth-last-child(-n + #{$columns}) {
+			padding-bottom: 0;
+		}
+
+	// Clear left/right gutters.
+		> :nth-child(#{$columns}n + 1) {
+			padding-left: 0;
+		}
+
+		> :nth-child(#{$columns}n) {
+			padding-right: 0;
+		}
+
+	// Adjust widths of leftmost and rightmost cells.
+		> :nth-child(#{$columns}n + 1),
+		> :nth-child(#{$columns}n) {
+			$cell-width: 100% / $columns;
+			$cell-width-pad: ($gutters / $columns) - ($gutters / 2);
+
+			width: calc(#{$cell-width} + #{$cell-width-pad});
+		}
+
+}
+
+/// Reset flexgrid gutters (flush only).
+/// Used to override a previous set of flexgrid gutter classes.
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters.
+/// @param {integer} $prev-columns Previous columns.
+@mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) {
+
+	// Apply padding.
+		> * {
+			$cell-width: 100% / $prev-columns;
+			$cell-width-pad: $gutters / $prev-columns;
+
+			padding: ($gutters * 0.5);
+			width: calc(#{$cell-width} + #{$cell-width-pad});
+		}
+
+	// Clear top/bottom gutters.
+		> :nth-child(-n + #{$prev-columns}) {
+			padding-top: ($gutters * 0.5);
+		}
+
+		> :nth-last-child(-n + #{$prev-columns}) {
+			padding-bottom: ($gutters * 0.5);
+		}
+
+	// Clear left/right gutters.
+		> :nth-child(#{$prev-columns}n + 1) {
+			padding-left: ($gutters * 0.5);
+		}
+
+		> :nth-child(#{$prev-columns}n) {
+			padding-right: ($gutters * 0.5);
+		}
+
+	// Adjust widths of leftmost and rightmost cells.
+		> :nth-child(#{$prev-columns}n + 1),
+		> :nth-child(#{$prev-columns}n) {
+			$cell-width: 100% / $columns;
+			$cell-width-pad: $gutters / $columns;
+
+			padding: ($gutters * 0.5);
+			width: calc(#{$cell-width} + #{$cell-width-pad});
+		}
+
+}
+
+/// Adds debug styles to current flexgrid element.
+@mixin flexgrid-debug() {
+
+	box-shadow: 0 0 0 1px red;
+
+	> * {
+		box-shadow: inset 0 0 0 1px blue;
+		position: relative;
+
+		> * {
+			position: relative;
+			box-shadow: inset 0 0 0 1px green;
+		}
+	}
+
+}
+
+/// Initializes the current element as a flexgrid.
+/// @param {integer} $columns Columns (optional).
+/// @param {number} $gutters Gutters (optional).
+/// @param {bool} $flush If true, clears padding around the very edge of the grid.
+@mixin flexgrid($settings: ()) {
+
+	// Settings.
+
+		// Debug.
+			$debug: false;
+
+			@if (map-has-key($settings, 'debug')) {
+				$debug: map-get($settings, 'debug');
+			}
+
+		// Vertical align.
+			$vertical-align: null;
+
+			@if (map-has-key($settings, 'vertical-align')) {
+				$vertical-align: map-get($settings, 'vertical-align');
+			}
+
+		// Horizontal align.
+			$horizontal-align: null;
+
+			@if (map-has-key($settings, 'horizontal-align')) {
+				$horizontal-align: map-get($settings, 'horizontal-align');
+			}
+
+		// Columns.
+			$columns: null;
+
+			@if (map-has-key($settings, 'columns')) {
+				$columns: map-get($settings, 'columns');
+			}
+
+		// Gutters.
+			$gutters: 0;
+
+			@if (map-has-key($settings, 'gutters')) {
+				$gutters: map-get($settings, 'gutters');
+			}
+
+		// Flush.
+			$flush: true;
+
+			@if (map-has-key($settings, 'flush')) {
+				$flush: map-get($settings, 'flush');
+			}
+
+	// Initialize base grid.
+		@include flexgrid-base($vertical-align, $horizontal-align);
+
+	// Debug?
+		@if ($debug) {
+			@include flexgrid-debug;
+		}
+
+	// Columns specified?
+		@if ($columns != null) {
+
+			// Initialize columns.
+				@include flexgrid-columns($columns);
+
+			// Gutters specified?
+				@if ($gutters > 0) {
+
+					// Flush gutters?
+						@if ($flush) {
+
+							// Initialize gutters (flush).
+								@include flexgrid-gutters-flush($columns, $gutters);
+
+						}
+
+					// Otherwise ...
+						@else {
+
+							// Initialize gutters.
+								@include flexgrid-gutters($columns, $gutters);
+
+						}
+
+				}
+
+		}
+
+}
+
+/// Resizes a previously-initialized grid.
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters (optional).
+/// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).
+/// @param {bool} $flush If true, clears padding around the very edge of the grid.
+@mixin flexgrid-resize($settings: ()) {
+
+	// Settings.
+
+		// Columns.
+			$columns: 1;
+
+			@if (map-has-key($settings, 'columns')) {
+				$columns: map-get($settings, 'columns');
+			}
+
+		// Gutters.
+			$gutters: 0;
+
+			@if (map-has-key($settings, 'gutters')) {
+				$gutters: map-get($settings, 'gutters');
+			}
+
+		// Previous columns.
+			$prev-columns: false;
+
+			@if (map-has-key($settings, 'prev-columns')) {
+				$prev-columns: map-get($settings, 'prev-columns');
+			}
+
+		// Flush.
+			$flush: true;
+
+			@if (map-has-key($settings, 'flush')) {
+				$flush: map-get($settings, 'flush');
+			}
+
+	// Resize columns.
+		@include flexgrid-columns($columns);
+
+	// Gutters specified?
+		@if ($gutters > 0) {
+
+			// Flush gutters?
+				@if ($flush) {
+
+					// Previous columns specified?
+						@if ($prev-columns) {
+
+							// Convert to list if it isn't one already.
+								@if (type-of($prev-columns) != list) {
+									$prev-columns: ($prev-columns);
+								}
+
+							// Step through list of previous columns and reset them.
+								@each $x in $prev-columns {
+									@include flexgrid-gutters-flush-reset($columns, $gutters, $x);
+								}
+
+						}
+
+					// Resize gutters (flush).
+						@include flexgrid-gutters-flush($columns, $gutters);
+
+				}
+
+			// Otherwise ...
+				@else {
+
+					// Resize gutters.
+						@include flexgrid-gutters($columns, $gutters);
+
+				}
+
+		}
+
+}
\ No newline at end of file

week05/windowapp/assets/sass/libs/_vars.scss

+// Misc.
+	$misc: (
+	);
+
+// Duration.
+	$duration: (
+	);
+
+// Size.
+	$size: (
+		border-radius:	4px
+	);
+
+// Font.
+	$font: (
+	);
+
+// Palette.
+	$palette: (
+		bg:				#ffffff,
+		fg:				#6e6e6e,
+		fg-light:		#888888,
+		fg-bold:		#5b5b5b,
+		border:			rgba(224,224,224,0.75),
+		border-bg:		rgba(224,224,224,0.15),
+		border-bg2:		rgba(224,224,224,0.35),
+
+		accent1: (
+			bg:			#4eb980,
+			fg:			rgba(255,255,255,0.8),
+			fg-light:	rgba(255,255,255,0.5),
+			fg-bold:	#ffffff
+		),
+
+		accent2: (
+			bg:			#544d55,
+			fg:			rgba(255,255,255,0.8),
+			fg-light:	rgba(255,255,255,0.35),
+			fg-bold:	#ffffff
+		)
+	);
\ No newline at end of file

week05/windowapp/index.html

-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title>สวัสดีวันแห่งความรัก</title>
-  </head>
-  <body>
-    <h1> สวัสดีชาวโลก Hello World!</h1>
-    เราใช้
-    <ol>
-      <li>node vertion <script>document.write(process.versions.node)</script>,</li>
-      <li>Chrome vertion <script>document.write(process.versions.chrome)</script>,</li>
-      <li>and Electron vertion <script>document.write(process.versions.electron)</script>.</li>
-    </ol>
-
-  </body>
-</html>
+	<head>
+		<title>Computer Science</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" href="assets/css/main.css" />
+	</head>
+	<body>
+
+		<!-- Header -->
+			<div id="header">
+				<h1>Computer Science</h1>
+			<p>ติดตามข่าวสาร:<a href="https://www.facebook.com/groups/562180920602681/?fref=nf">Facebook</a>
+				<br />
+				และทาง:<a href="http://projectcs.sci.ubu.ac.th/users/sign_in">projectcs</a></p>
+			</div>
+
+		<!-- Main -->
+			<div id="main">
+
+				<header class="major container 75%">
+					<h2>
+						วิชาก็เหมือนกับดาบที่สามมารถใช้ต่อสู้ได้อย่างดี
+					<br />
+						แต่ถ้ารู้ใช้ไม่รู้ฝน ก็จะกลายเป็นเพียงแค่
+					<br />
+						ท่อนไม้ธรรมดาที่ทำอะไรแทบไม่ได้เลย
+					</h2>
+				</header>
+
+				<div class="box alt container">
+					<section class="feature left">
+						<a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" class="image"><img src="images/pic01.jpg" alt="" /></a>
+						<div class="content">
+							<h3>ปีแรก</h3>
+							<p>เริ่มต้นด้วยการเรียน พื้นฐานการเขียนโปรแกรม อัลกอลิทึม และภาษาแรกที่ได้เรียนคือ java </p>
+						</div>
+					</section>
+					<section class="feature right">
+						<a href="https://www.visualstudio.com/downloads/" class="image"><img src="images/pic02.jpg" alt="" /></a>
+						<div class="content">
+							<h3>ปีสอง</h3>
+							<p>ต่ออัลกอลิทึมภาคสอง ตามด้วย ภาษา C and C++</p>
+						</div>
+					</section>
+					<section class="feature left">
+						<a href="https://www.python.org/" class="image"><img src="images/pic03.jpg" alt="" /></a>
+						<div class="content">
+							<h3>ปีสาม</h3>
+							<p>เรียนรู้โลกแห่งความเป็นจริง ได้เริ่มทำ Android Database[mySQL] Ai[python] API[Node Js] and WEB[html + Javascript + Mongodb]</p>
+						</div>
+					</section>
+				</div>
+
+				<footer class="major container 75%">
+					<h3>แล้ววันนี้ นายได้เรียนรู้อะไรไปบ้างละ?</h3>
+					<p>ถ้ากลัวที่จะลืมละก็ จดบันทึกซะสิ</p>
+					<ul class="actions">
+						<li><a href="#" class="button">บันทึก</a></li>
+					</ul>
+				</footer>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/skel.min.js"></script>
+			<script src="assets/js/util.js"></script>
+			<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>
\ No newline at end of file

week05/windowapp/node_modules/.bin/asar

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../asar/bin/asar.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../asar/bin/asar.js" "$@"
+  ret=$?
+fi
+exit $ret

week05/windowapp/node_modules/.bin/asar.cmd

+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\asar\bin\asar.js" %*
+) ELSE (
+  @SETLOCAL
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\asar\bin\asar.js" %*
+)
\ No newline at end of file

week05/windowapp/node_modules/.bin/decompress-zip

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../decompress-zip/bin/decompress-zip" "$@"
+  ret=$?
+else 
+  node  "$basedir/../decompress-zip/bin/decompress-zip" "$@"
+  ret=$?
+fi
+exit $ret

week05/windowapp/node_modules/.bin/decompress-zip.cmd

+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\decompress-zip\bin\decompress-zip" %*
+) ELSE (
+  @SETLOCAL
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\decompress-zip\bin\decompress-zip" %*
+)
\ No newline at end of file

week05/windowapp/node_modules/.bin/electron-osx-flat

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../electron-osx-sign/bin/electron-osx-flat.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../electron-osx-sign/bin/electron-osx-flat.js" "$@"
+  ret=$?
+fi
+exit $ret

week05/windowapp/node_modules/.bin/electron-osx-flat.cmd

+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\electron-osx-sign\bin\electron-osx-flat.js" %*
+) ELSE (
+  @SETLOCAL
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\electron-osx-sign\bin\electron-osx-flat.js" %*
+)
\ No newline at end of file

week05/windowapp/node_modules/.bin/electron-osx-sign

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../electron-osx-sign/bin/electron-osx-sign.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../electron-osx-sign/bin/electron-osx-sign.js" "$@"
+  ret=$?
+fi
+exit $ret

week05/windowapp/node_modules/.bin/electron-osx-sign.cmd

+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\electron-osx-sign\bin\electron-osx-sign.js" %*
+) ELSE (
+  @SETLOCAL
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\electron-osx-sign\bin\electron-osx-sign.js" %*
+)
\ No newline at end of file

week05/windowapp/node_modules/.bin/electron-packager

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../electron-packager/cli.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../electron-packager/cli.js" "$@"
+  ret=$?
+fi
+exit $ret

week05/windowapp/node_modules/.bin/electron-packager.cmd

+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\electron-packager\cli.js" %*
+) ELSE (
+  @SETLOCAL
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\electron-packager\cli.js" %*
+)
\ No newline at end of file

week05/windowapp/node_modules/any-promise/implementation.d.ts

+declare var implementation: string;
+
+export = implementation;