").append(x.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},x.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){x.fn[t]=function(e){return this.on(t,e)}}),x.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Cn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":x.parseJSON,"text xml":x.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?_n(_n(e,x.ajaxSettings),t):_n(x.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,l,u,c,p=x.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?x(f):x.event,h=x.Deferred(),g=x.Callbacks("once memory"),m=p.statusCode||{},y={},v={},b=0,w="canceled",C={readyState:0,getResponseHeader:function(e){var t;if(2===b){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===b?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return b||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return b||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>b)for(t in e)m[t]=[m[t],e[t]];else C.always(e[C.status]);return this},abort:function(e){var t=e||w;return u&&u.abort(t),k(0,t),this}};if(h.promise(C).complete=g.add,C.success=C.done,C.error=C.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=x.trim(p.dataType||"*").toLowerCase().match(T)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?"80":"443"))===(mn[3]||("http:"===mn[1]?"80":"443")))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=x.param(p.data,p.traditional)),qn(An,p,n,C),2===b)return C;l=p.global,l&&0===x.active++&&x.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Nn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"$1_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(x.lastModified[o]&&C.setRequestHeader("If-Modified-Since",x.lastModified[o]),x.etag[o]&&C.setRequestHeader("If-None-Match",x.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&C.setRequestHeader("Content-Type",p.contentType),C.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)C.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,C,p)===!1||2===b))return C.abort();w="abort";for(i in{success:1,error:1,complete:1})C[i](p[i]);if(u=qn(jn,p,n,C)){C.readyState=1,l&&d.trigger("ajaxSend",[C,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){C.abort("timeout")},p.timeout));try{b=1,u.send(y,k)}catch(N){if(!(2>b))throw N;k(-1,N)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,N=n;2!==b&&(b=2,s&&clearTimeout(s),u=t,a=i||"",C.readyState=e>0?4:0,c=e>=200&&300>e||304===e,r&&(w=Mn(p,C,r)),w=On(p,w,C,c),c?(p.ifModified&&(T=C.getResponseHeader("Last-Modified"),T&&(x.lastModified[o]=T),T=C.getResponseHeader("etag"),T&&(x.etag[o]=T)),204===e||"HEAD"===p.type?N="nocontent":304===e?N="notmodified":(N=w.state,y=w.data,v=w.error,c=!v)):(v=N,(e||!N)&&(N="error",0>e&&(e=0))),C.status=e,C.statusText=(n||N)+"",c?h.resolveWith(f,[y,N,C]):h.rejectWith(f,[C,N,v]),C.statusCode(m),m=t,l&&d.trigger(c?"ajaxSuccess":"ajaxError",[C,p,c?y:v]),g.fireWith(f,[C,N]),l&&(d.trigger("ajaxComplete",[C,p]),--x.active||x.event.trigger("ajaxStop")))}return C},getJSON:function(e,t,n){return x.get(e,t,n,"json")},getScript:function(e,n){return x.get(e,t,n,"script")}}),x.each(["get","post"],function(e,n){x[n]=function(e,r,i,o){return x.isFunction(r)&&(o=o||i,i=r,r=t),x.ajax({url:e,type:n,dataType:o,data:r,success:i})}});function Mn(e,n,r){var i,o,a,s,l=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in l)if(l[s]&&l[s].test(o)){u.unshift(s);break}if(u[0]in r)a=u[0];else{for(s in r){if(!u[0]||e.converters[s+" "+u[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==u[0]&&u.unshift(a),r[a]):t}function On(e,t,n,r){var i,o,a,s,l,u={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)u[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!l&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),l=o,o=c.shift())if("*"===o)o=l;else if("*"!==l&&l!==o){if(a=u[l+" "+o]||u["* "+o],!a)for(i in u)if(s=i.split(" "),s[1]===o&&(a=u[l+" "+s[0]]||u["* "+s[0]])){a===!0?a=u[i]:u[i]!==!0&&(o=s[0],c.unshift(s[1]));break}if(a!==!0)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(p){return{state:"parsererror",error:a?p:"No conversion from "+l+" to "+o}}}return{state:"success",data:t}}x.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return x.globalEval(e),e}}}),x.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),x.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=a.head||x("head")[0]||a.documentElement;return{send:function(t,i){n=a.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var Fn=[],Bn=/(=)\?(?=&|$)|\?\?/;x.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Fn.pop()||x.expando+"_"+vn++;return this[e]=!0,e}}),x.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,l=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return l||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=x.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,l?n[l]=n[l].replace(Bn,"$1"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||x.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,Fn.push(o)),s&&x.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}x.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=x.ajaxSettings.xhr(),x.support.cors=!!Rn&&"withCredentials"in Rn,Rn=x.support.ajax=!!Rn,Rn&&x.ajaxTransport(function(n){if(!n.crossDomain||x.support.cors){var r;return{send:function(i,o){var a,s,l=n.xhr();if(n.username?l.open(n.type,n.url,n.async,n.username,n.password):l.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)l[s]=n.xhrFields[s];n.mimeType&&l.overrideMimeType&&l.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)l.setRequestHeader(s,i[s])}catch(u){}l.send(n.hasContent&&n.data||null),r=function(e,i){var s,u,c,p;try{if(r&&(i||4===l.readyState))if(r=t,a&&(l.onreadystatechange=x.noop,$n&&delete Pn[a]),i)4!==l.readyState&&l.abort();else{p={},s=l.status,u=l.getAllResponseHeaders(),"string"==typeof l.responseText&&(p.text=l.responseText);try{c=l.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,u)},n.async?4===l.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},x(e).unload($n)),Pn[a]=r),l.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+w+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n=this.createTween(e,t),r=n.cur(),i=Yn.exec(t),o=i&&i[3]||(x.cssNumber[e]?"":"px"),a=(x.cssNumber[e]||"px"!==o&&+r)&&Yn.exec(x.css(n.elem,e)),s=1,l=20;if(a&&a[3]!==o){o=o||a[3],i=i||[],a=+r||1;do s=s||".5",a/=s,x.style(n.elem,e,a+o);while(s!==(s=n.cur()/r)&&1!==s&&--l)}return i&&(a=n.start=+a||+r||0,n.unit=o,n.end=i[1]?a+(i[1]+1)*i[2]:+i[2]),n}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=x.now()}function Zn(e,t,n){var r,i=(Qn[t]||[]).concat(Qn["*"]),o=0,a=i.length;for(;a>o;o++)if(r=i[o].call(n,t,e))return r}function er(e,t,n){var r,i,o=0,a=Gn.length,s=x.Deferred().always(function(){delete l.elem}),l=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,u.startTime+u.duration-t),r=n/u.duration||0,o=1-r,a=0,l=u.tweens.length;for(;l>a;a++)u.tweens[a].run(o);return s.notifyWith(e,[u,o,n]),1>o&&l?n:(s.resolveWith(e,[u]),!1)},u=s.promise({elem:e,props:x.extend({},t),opts:x.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=x.Tween(e,u.opts,t,n,u.opts.specialEasing[t]||u.opts.easing);return u.tweens.push(r),r},stop:function(t){var n=0,r=t?u.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)u.tweens[n].run(1);return t?s.resolveWith(e,[u,t]):s.rejectWith(e,[u,t]),this}}),c=u.props;for(tr(c,u.opts.specialEasing);a>o;o++)if(r=Gn[o].call(u,e,c,u.opts))return r;return x.map(c,Zn,u),x.isFunction(u.opts.start)&&u.opts.start.call(e,u),x.fx.timer(x.extend(l,{elem:e,anim:u,queue:u.opts.queue})),u.progress(u.opts.progress).done(u.opts.done,u.opts.complete).fail(u.opts.fail).always(u.opts.always)}function tr(e,t){var n,r,i,o,a;for(n in e)if(r=x.camelCase(n),i=t[r],o=e[n],x.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),a=x.cssHooks[r],a&&"expand"in a){o=a.expand(o),delete e[r];for(n in o)n in e||(e[n]=o[n],t[n]=i)}else t[r]=i}x.Animation=x.extend(er,{tweener:function(e,t){x.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,l,u=this,c={},p=e.style,f=e.nodeType&&nn(e),d=x._data(e,"fxshow");n.queue||(s=x._queueHooks(e,"fx"),null==s.unqueued&&(s.unqueued=0,l=s.empty.fire,s.empty.fire=function(){s.unqueued||l()}),s.unqueued++,u.always(function(){u.always(function(){s.unqueued--,x.queue(e,"fx").length||s.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[p.overflow,p.overflowX,p.overflowY],"inline"===x.css(e,"display")&&"none"===x.css(e,"float")&&(x.support.inlineBlockNeedsLayout&&"inline"!==ln(e.nodeName)?p.zoom=1:p.display="inline-block")),n.overflow&&(p.overflow="hidden",x.support.shrinkWrapBlocks||u.always(function(){p.overflow=n.overflow[0],p.overflowX=n.overflow[1],p.overflowY=n.overflow[2]}));for(r in t)if(i=t[r],Vn.exec(i)){if(delete t[r],o=o||"toggle"===i,i===(f?"hide":"show"))continue;c[r]=d&&d[r]||x.style(e,r)}if(!x.isEmptyObject(c)){d?"hidden"in d&&(f=d.hidden):d=x._data(e,"fxshow",{}),o&&(d.hidden=!f),f?x(e).show():u.done(function(){x(e).hide()}),u.done(function(){var t;x._removeData(e,"fxshow");for(t in c)x.style(e,t,c[t])});for(r in c)a=Zn(f?d[r]:0,r,u),r in d||(d[r]=a.start,f&&(a.end=a.start,a.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}x.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(x.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?x.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=x.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){x.fx.step[e.prop]?x.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[x.cssProps[e.prop]]||x.cssHooks[e.prop])?x.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},x.each(["toggle","show","hide"],function(e,t){var n=x.fn[t];x.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),x.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=x.isEmptyObject(e),o=x.speed(t,n,r),a=function(){var t=er(this,x.extend({},e),o);(i||x._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=x.timers,a=x._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&x.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=x._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=x.timers,a=r?r.length:0;for(n.finish=!0,x.queue(this,e,[]),i&&i.stop&&i.stop.call(this,!0),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}x.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){x.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),x.speed=function(e,t,n){var r=e&&"object"==typeof e?x.extend({},e):{complete:n||!n&&t||x.isFunction(e)&&e,duration:e,easing:n&&t||t&&!x.isFunction(t)&&t};return r.duration=x.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in x.fx.speeds?x.fx.speeds[r.duration]:x.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){x.isFunction(r.old)&&r.old.call(this),r.queue&&x.dequeue(this,r.queue)},r},x.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},x.timers=[],x.fx=rr.prototype.init,x.fx.tick=function(){var e,n=x.timers,r=0;for(Xn=x.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||x.fx.stop(),Xn=t},x.fx.timer=function(e){e()&&x.timers.push(e)&&x.fx.start()},x.fx.interval=13,x.fx.start=function(){Un||(Un=setInterval(x.fx.tick,x.fx.interval))},x.fx.stop=function(){clearInterval(Un),Un=null},x.fx.speeds={slow:600,fast:200,_default:400},x.fx.step={},x.expr&&x.expr.filters&&(x.expr.filters.animated=function(e){return x.grep(x.timers,function(t){return e===t.elem}).length}),x.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){x.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,x.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},x.offset={setOffset:function(e,t,n){var r=x.css(e,"position");"static"===r&&(e.style.position="relative");var i=x(e),o=i.offset(),a=x.css(e,"top"),s=x.css(e,"left"),l=("absolute"===r||"fixed"===r)&&x.inArray("auto",[a,s])>-1,u={},c={},p,f;l?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),x.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(u.top=t.top-o.top+p),null!=t.left&&(u.left=t.left-o.left+f),"using"in t?t.using.call(e,u):i.css(u)}},x.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===x.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),x.nodeName(e[0],"html")||(n=e.offset()),n.top+=x.css(e[0],"borderTopWidth",!0),n.left+=x.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-x.css(r,"marginTop",!0),left:t.left-n.left-x.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||s;while(e&&!x.nodeName(e,"html")&&"static"===x.css(e,"position"))e=e.offsetParent;return e||s})}}),x.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);x.fn[e]=function(i){return x.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?x(a).scrollLeft():o,r?o:x(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return x.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}x.each({Height:"height",Width:"width"},function(e,n){x.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){x.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return x.access(this,function(n,r,i){var o;return x.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?x.css(n,r,s):x.style(n,r,i,s)},n,a?i:t,a,null)}})}),x.fn.size=function(){return this.length},x.fn.andSelf=x.fn.addBack,"object"==typeof module&&module&&"object"==typeof module.exports?module.exports=x:(e.jQuery=e.$=x,"function"==typeof define&&define.amd&&define("jquery",[],function(){return x}))})(window);
--------------------------------------------------------------------------------
/js/libs/scrollSystem.js:
--------------------------------------------------------------------------------
1 | function ScrollSystem() {
2 |
3 | var indexMap = {};
4 |
5 | var _this = this;
6 |
7 | var windowHeight;
8 |
9 | var elements, wrappers;
10 | var heights = [];
11 |
12 | var scrollPosition = 0;
13 |
14 | var scrollDelayDelta = 200; //ms
15 |
16 | var animationTimeout, scrollTimeout;
17 |
18 | var $body, $navUp, $navDown, $navRandom;
19 |
20 | var upDisabled = true;
21 | var downDisabled = false;
22 | var totalItems;
23 |
24 | this.transitioning = false;
25 |
26 | this.init = function() {
27 |
28 | windowHeight = window.innerHeight;
29 |
30 | $body = $( document.body );
31 |
32 | elements = $( '.letter' );
33 | elements.height( windowHeight );
34 |
35 | wrappers = $( '.wrapper' );
36 | wrappers.height( windowHeight );
37 |
38 | totalItems = wrappers.length - 1;
39 |
40 | for( var i = 0; i < elements.length; i++ ) {
41 |
42 | // Prepare letters
43 | var letter = elements[i].className.split( ' ' )[1];
44 | indexMap[ letter ] = i;
45 |
46 | $( wrappers[i] ).css({
47 | 'z-index': elements.length - i
48 | })
49 |
50 | heights.push( windowHeight );
51 | }
52 |
53 | // $( '.panes' ).bind( 'mousewheel MozMousePixelScroll wheel', function( event ) {
54 |
55 | $( '.panes' ).bind( 'mousewheel MozMousePixelScroll', function( event ) {
56 |
57 | // -event.originalEvent.deltaY, if using the wheel event... I don't want to trust this, since mouse wheels
58 | // may deliver strange things!
59 |
60 | // Manage mouse deltas on different browsers/OS
61 | event.preventDefault();
62 |
63 | if ( _this.transitioning === true ) {
64 | return;
65 | }
66 |
67 | var delta = ( event.originalEvent.wheelDelta / 3 ) || -event.originalEvent.detail;
68 |
69 | // Activate when the user stops scrolling.
70 | clearTimeout( scrollTimeout )
71 | scrollTimeout = setTimeout( function() {
72 | _this.finishScroll();
73 | }, 500 );
74 |
75 | _this.parseScroll( event, delta );
76 | });
77 |
78 | $( document ).keydown( function( e ){
79 |
80 | // UP
81 | if ( e.which == 38 ) {
82 |
83 | _this.scrollUp();
84 | return false;
85 |
86 | // DOWN
87 | } else if (e.which == 40) {
88 |
89 | _this.scrollDown();
90 | return false;
91 | }
92 | });
93 |
94 | $navUp = $( 'nav .up' );
95 | $navDown = $( 'nav .down' );
96 | $navRandom = $( 'nav .random' );
97 |
98 | $navUp.click( function() { _this.scrollUp(); })
99 | $navDown.click( function() { _this.scrollDown(); })
100 | $navRandom.click( function() { _this.scrollRandom(); })
101 |
102 | }
103 |
104 | this.finishScroll = function() {
105 | _this.scrollTo( Math.round( scrollPosition / windowHeight ), 1 );
106 | }
107 |
108 | this.parseScroll = function( event, delta ) {
109 |
110 | // Sort out scroll deltas here!
111 | scrollPosition -= delta;
112 |
113 | // Top scroll position
114 | if ( scrollPosition < 0 ) {
115 |
116 | scrollPosition = 0;
117 |
118 | } else if ( scrollPosition > ( ( wrappers.length - 1 ) * windowHeight ) ) {
119 |
120 | scrollPosition = ( ( wrappers.length - 1 ) * windowHeight );
121 |
122 | }
123 |
124 | var scrollLevel = Math.floor( scrollPosition / windowHeight );
125 | var scrollDepth = scrollPosition % windowHeight;
126 |
127 | if ( scrollLevel === ( wrappers.length - 1 ) ) {
128 |
129 | $( wrappers[ scrollLevel - 1 ] ).height( 0 );
130 | return;
131 | }
132 |
133 | if ( scrollLevel > 0 ) {
134 | $( wrappers[ scrollLevel - 1 ] ).height( 0 );
135 | }
136 |
137 | if ( scrollLevel < wrappers.length ) {
138 | $( wrappers[ scrollLevel + 1 ] ).height( windowHeight );
139 | }
140 |
141 | $( wrappers[ scrollLevel ] ).height( windowHeight - scrollDepth );
142 | }
143 |
144 | // Updates ALL wrappers scroll positions
145 | this.updateScroll = function() {
146 |
147 | // Animate scrolling as well.
148 |
149 | var scrollLevel = Math.floor( scrollPosition / windowHeight );
150 | var scrollDepth = windowHeight - ( scrollPosition % windowHeight );
151 |
152 | for ( var i = 0; i < wrappers.length; i++ ) {
153 |
154 | // Item is less than the scroll level
155 | if ( i < scrollLevel ) {
156 | $( wrappers[ i ] ).height( 0 );
157 | continue;
158 | }
159 |
160 | if ( i === scrollLevel ) {
161 | $( wrappers[ i ] ).height( scrollDepth );
162 | continue;
163 | }
164 |
165 | if ( i > scrollLevel ) {
166 | $( wrappers[ i ] ).height( windowHeight );
167 | continue;
168 | }
169 | }
170 | }
171 |
172 | this.resize = function() {
173 |
174 | var oldWindowHeight = windowHeight;
175 | windowHeight = window.innerHeight;
176 |
177 | elements = $( '.letter' );
178 | elements.height( windowHeight );
179 | elements.width( window.innerWidth );
180 |
181 | wrappers = $( '.wrapper' );
182 | wrappers.height( windowHeight );
183 |
184 | var ratio = windowHeight / oldWindowHeight;
185 | scrollPosition = scrollPosition * ratio;
186 |
187 | for( var i = 0; i < heights.length; i++ ) {
188 |
189 | heights[ i ] = heights[ i ] * ratio;
190 | $( wrappers[i] ).height( heights[ i ] );
191 | }
192 |
193 | this.updateScroll();
194 | }
195 |
196 | this.getScrollLetter = function() {
197 | return elements[ getScrollLevel() ].className.split( ' ' )[1];
198 | }
199 |
200 | var getScrollLevel = function() {
201 | return Math.floor( scrollPosition / windowHeight );
202 | }
203 |
204 | this.scrollUp = function() {
205 |
206 | var scrollLevel = getScrollLevel();
207 | if ( (scrollLevel - 1) >= 0 ) {
208 |
209 | _this.scrollTo( scrollLevel - 1, 1 );
210 | }
211 | }
212 |
213 | this.scrollDown = function() {
214 |
215 | var scrollLevel = getScrollLevel();
216 | if ( (scrollLevel + 1) < elements.length ) {
217 |
218 | _this.scrollTo( scrollLevel + 1, 1 );
219 | }
220 | }
221 |
222 | this.scrollRandom = function() {
223 |
224 | var scrollLevel = getScrollLevel();
225 | var options = [];
226 |
227 | // Create list of options.
228 | for ( var i = 0; i < elements.length; i++ ) {
229 | options.push( i );
230 | }
231 |
232 | // Remove the current pattern.
233 | options.splice( scrollLevel, 1 );
234 |
235 | var randomItem = options[ Math.floor( Math.random() * options.length ) ];
236 | _this.scrollTo( randomItem, 2 );
237 | }
238 |
239 | // Scroll to specific letter...
240 | // index: letter to scroll to
241 | // transition: snap, or transition to the letter
242 | this.scrollTo = function( index, transitionType ) {
243 |
244 |
245 | // Scrolling to X
246 | var scrollToItem = index;
247 | if ( typeof( index ) == 'string' ) {
248 | scrollToItem = indexMap[ index.toLowerCase() ];
249 | }
250 |
251 | // Scrolling from Y
252 | var currentItem = Math.floor( scrollPosition / windowHeight );
253 |
254 | if ( transitionType === 1 || transitionType === 2 ) {
255 |
256 | $( document.body ).addClass( 'transitioning' );
257 |
258 | // Scrolling down
259 | if ( scrollToItem > currentItem ) {
260 |
261 | for( var i = currentItem; i < scrollToItem; i++ ) {
262 |
263 | if ( transitionType === 1 ) {
264 | addDelay( wrappers[i], ( i - currentItem ) );
265 | } else {
266 | addDelay( wrappers[i], ( 1 ) );
267 | }
268 | }
269 |
270 | // Scrolling up!
271 | } else if ( currentItem > scrollToItem ){
272 | // Look into how this works, understanding is fun.
273 | for( var i = currentItem - 1; i >= scrollToItem; i-- ) {
274 |
275 | if ( transitionType === 1 ) {
276 | addDelay( wrappers[i], ( currentItem - i - 1) );
277 | } else {
278 | addDelay( wrappers[i], 1 );
279 | }
280 | }
281 | }
282 |
283 | var scrollDifference = Math.abs( scrollToItem - currentItem );
284 | clearTimeout( animationTimeout );
285 |
286 | // 500 is the total animation time
287 | _this.transitioning = true;
288 |
289 | if ( transitionType === 1 ) {
290 | animationTimeout = setTimeout( bind( this, _this.removeDelays ), (scrollDifference * scrollDelayDelta + 500) )
291 | } else {
292 | animationTimeout = setTimeout( bind( this, _this.removeDelays ), 500 )
293 | }
294 |
295 | }
296 |
297 | scrollPosition = scrollToItem * windowHeight;
298 |
299 | this.updateScroll();
300 | this.manageHash();
301 | this.manageNav();
302 | }
303 |
304 | this.manageHash = function() {
305 |
306 | var scrollItem = getScrollLevel();
307 | location.hash = '#' + $( 'h1', wrappers.eq( scrollItem ) ).text().toLowerCase().trim().split(' ').join('-');
308 | }
309 |
310 | var addDelay = function( element, delay ) {
311 |
312 | delay = Math.abs( delay );
313 | var $element = $( element );
314 |
315 | $element.css({
316 | 'transition-delay': ( delay * scrollDelayDelta ) + 'ms'
317 | })
318 | }
319 |
320 | this.removeDelays = function() {
321 |
322 | _this.transitioning = false;
323 |
324 | $body.removeClass( 'transitioning' );
325 |
326 | wrappers.css({
327 | 'transition-delay': '0ms'
328 | })
329 |
330 | this.manageNav();
331 | }
332 |
333 | this.manageNav = function() {
334 | // Feels like this could have been done a bit better. :(
335 | var scrollLevel = getScrollLevel();
336 | if ( scrollLevel === 0 ) {
337 |
338 | upDisabled = true;
339 | $navUp.addClass( 'disabled' );
340 |
341 | downDisabled = false;
342 | $navDown.removeClass( 'disabled' );
343 |
344 | } else if ( scrollLevel === totalItems ) {
345 |
346 | downDisabled = true;
347 | $navDown.addClass( 'disabled' );
348 |
349 | upDisabled = false;
350 | $navUp.removeClass( 'disabled' );
351 |
352 | } else if ( downDisabled === true || upDisabled === true ){
353 |
354 | downDisabled = false;
355 | $navDown.removeClass( 'disabled' );
356 |
357 | upDisabled = false;
358 | $navUp.removeClass( 'disabled' );
359 | }
360 | }
361 | }
--------------------------------------------------------------------------------
/js/pattern-library.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * MIT licensed
3 | * Copyright (C) 2013 Tim Holman, http://tholman.com
4 | */
5 |
6 | /*********************************************
7 | *
8 | *********************************************/
9 |
10 | function App() {
11 |
12 | var _this = this;
13 |
14 | var pane = false;
15 | var paneElement;
16 | var pageHeight = window.innerHeight; // px
17 | var cardHeight = Math.ceil( window.innerHeight / 4 ); // px
18 | var cardWidth = Math.ceil( window.innerWidth / 8 ); // px
19 |
20 | var nav;
21 |
22 | var nameSlider;
23 | var nameSliderText;
24 |
25 | var paneData =
26 | '
' +
27 | '' +
28 | '
' +
29 | '
' +
30 | ' %name%
' +
31 | '' +
32 | 'BY %creator%' +
34 | '
' +
35 | '' +
44 | '' +
45 | '
' +
46 | 'The pattern Library was made for fun by
Tim Holman & Claudio Guglieri' +
47 | '
' +
48 | '
' +
49 | '
'
51 |
52 | var imageDir = './img/';
53 | var patternData = [
54 | {
55 | letter: 'a',
56 | file: 'a.jpg',
57 | name: 'Kale Salad',
58 | creator: 'Claudio Guglieri',
59 | creatorWeb: 'http://whydontwetry.com',
60 | creatorTwitter: 'claudioguglieri'
61 | },
62 | {
63 | letter: 'b',
64 | file: 'b.jpg',
65 | name: 'Fancy Pants',
66 | creator: 'Anton Repponen',
67 | creatorWeb: 'http://repponen.com',
68 | creatorTwitter: 'repponen'
69 | },
70 | {
71 | letter: 'c',
72 | file: 'c.jpg',
73 | name: 'Ripples',
74 | creator: 'Claudio Guglieri',
75 | creatorWeb: 'http://whydontwetry.com',
76 | creatorTwitter: 'claudioguglieri'
77 | },
78 | {
79 | letter: 'd',
80 | file: 'd.png',
81 | name: 'Leather Nunchuck',
82 | creator: 'Claudio Guglieri',
83 | creatorWeb: 'http://whydontwetry.com',
84 | creatorTwitter: 'claudioguglieri'
85 | },
86 | {
87 | letter: 'h',
88 | file: 'h.jpg',
89 | name: 'Chalkboard',
90 | creator: 'Claudio Guglieri',
91 | creatorWeb: 'http://whydontwetry.com',
92 | creatorTwitter: 'claudioguglieri'
93 | },
94 | {
95 | letter: 'l',
96 | file: 'l.jpg',
97 | name: 'Fiesta',
98 | creator: 'Julien Bailly',
99 | creatorWeb: 'http://julien-bailly.com/',
100 | creatorTwitter: 'julien_bailly'
101 | },
102 | {
103 | letter: 'm',
104 | file: 'm.jpg',
105 | name: 'Knitting',
106 | creator: 'Julien Bailly',
107 | creatorWeb: 'http://julien-bailly.com/',
108 | creatorTwitter: 'julien_bailly'
109 | },
110 | {
111 | letter: 'p',
112 | file: 'p.gif',
113 | name: 'Brijan',
114 | creator: 'Brijan Powel',
115 | creatorWeb: 'http://www.robothate.com',
116 | creatorTwitter: 'brijanp'
117 | },
118 | {
119 | letter: 'q',
120 | file: 'q.png',
121 | name: 'Naranjas',
122 | creator: 'Natalia de Frutos',
123 | creatorWeb: 'http://www.domestika.org/es/natalia_f_ramos/portfolio',
124 | creatorTwitter: 'nataliadfrutos'
125 | },
126 | {
127 | letter: 'r',
128 | file: 'r.png',
129 | name: 'Kiwis',
130 | creator: 'Natalia de Frutos',
131 | creatorWeb: 'http://www.domestika.org/es/natalia_f_ramos/portfolio',
132 | creatorTwitter: 'nataliadfrutos'
133 | },
134 | {
135 | letter: 's',
136 | file: 's.png',
137 | name: 'Cuadros',
138 | creator: 'Natalia de Frutos',
139 | creatorWeb: 'http://www.domestika.org/es/natalia_f_ramos/portfolio',
140 | creatorTwitter: 'nataliadfrutos'
141 | },
142 | {
143 | letter: 'j',
144 | file: 'j.jpg',
145 | name: 'Maze',
146 | creator: 'Julien Bailly',
147 | creatorWeb: 'http://julien-bailly.com/',
148 | creatorTwitter: 'julien_bailly'
149 | },
150 | {
151 | letter: 't',
152 | file: 't.gif',
153 | name: 'Cocina',
154 | creator: 'Natalia de Frutos',
155 | creatorWeb: 'http://www.domestika.org/es/natalia_f_ramos/portfolio',
156 | creatorTwitter: 'nataliadfrutos'
157 | },
158 | {
159 | letter: 'u',
160 | file: 'u.png',
161 | name: 'Wild Sea',
162 | creator: 'Henry Daubrez',
163 | creatorWeb: 'http://www.dogstudio.be',
164 | creatorTwitter: 'upskydown'
165 | },
166 | {
167 | letter: 'v',
168 | file: 'v.png',
169 | name: 'The Illusionist',
170 | creator: 'Henry Daubrez',
171 | creatorWeb: 'http://www.dogstudio.be',
172 | creatorTwitter: 'upskydown'
173 | },
174 | {
175 | letter: 'x',
176 | file: 'x.png',
177 | name: 'Magnus 2050',
178 | creator: 'Kristoffer Brady',
179 | creatorWeb: 'http://www.egosmoke.com',
180 | creatorTwitter: 'egosmoke'
181 | },
182 | {
183 | letter: 'y',
184 | file: 'y.png',
185 | name: 'Magnus 2051',
186 | creator: 'Kristoffer Brady',
187 | creatorWeb: 'http://www.egosmoke.com',
188 | creatorTwitter: 'egosmoke'
189 | },
190 | {
191 | letter: 'z',
192 | file: 'z.png',
193 | name: 'Magnus 2052',
194 | creator: 'Kristoffer Brady',
195 | creatorWeb: 'http://www.egosmoke.com',
196 | creatorTwitter: 'egosmoke'
197 | },
198 | {
199 | letter: 'aa',
200 | file: 'aa.png',
201 | name: 'NYC Candy',
202 | creator: 'Claudio Guglieri',
203 | creatorWeb: 'http://whydontwetry.com',
204 | creatorTwitter: 'claudioguglieri'
205 | },
206 | {
207 | letter: 'af',
208 | file: 'af.png',
209 | name: 'Bunting flag',
210 | creator: 'Raul Varela',
211 | creatorWeb: 'http://shonen.me',
212 | creatorTwitter: 'shonenCMYK'
213 | },
214 | {
215 | letter: 'ag',
216 | file: 'ag.jpg',
217 | name: 'Canvas Orange',
218 | creator: 'Raul Varela',
219 | creatorWeb: 'http://shonen.me',
220 | creatorTwitter: 'shonenCMYK'
221 | },
222 | {
223 | letter: 'ah',
224 | file: 'ah.png',
225 | name: 'Bicycles',
226 | creator: 'Shaun Fox',
227 | creatorWeb: 'http://shaunfox.com',
228 | creatorTwitter: 'shaunrfox'
229 | },
230 | {
231 | letter: 'ai',
232 | file: 'ai.png',
233 | name: 'Hodgepodge',
234 | creator: 'Anatoliy Gromov',
235 | creatorWeb: 'http://agromov.com',
236 | creatorTwitter: 'agromov'
237 | },
238 | {
239 | letter: 'ak',
240 | file: 'ak.png',
241 | name: 'Retro Furnish',
242 | creator: 'Heury & Heury',
243 | creatorWeb: 'http://heuryandheury.eu',
244 | creatorTwitter: 'heuryheury'
245 | },
246 | {
247 | letter: 'ap',
248 | file: 'ap.jpg',
249 | name: 'Jade',
250 | creator: 'Jade Meneguel',
251 | creatorWeb: 'http://portfolio.jademeneguel.com',
252 | creatorTwitter: 'jademeneguel'
253 | },
254 | {
255 | letter: 'aq',
256 | file: 'aq.jpg',
257 | name: 'Plaid',
258 | creator: 'Alexey Tretina',
259 | creatorWeb: 'http://www.tretina.ru',
260 | creatorTwitter: 'squilacci'
261 | },
262 | {
263 | letter: 'ar',
264 | file: 'ar.png',
265 | name: 'Kitty',
266 | creator: 'Penny Yu',
267 | creatorWeb: null,
268 | creatorTwitter: null
269 | },
270 | {
271 | letter: 'az',
272 | file: 'az.png',
273 | name: 'Quake',
274 | creator: 'Nina Geometrieva',
275 | creatorWeb: 'https://www.behance.net/ninageo',
276 | creatorTwitter: 'geometrieva'
277 | },
278 | {
279 | letter: 'ba',
280 | file: 'ba.jpg',
281 | name: 'Flowers',
282 | creator: 'Débora Sayuri',
283 | creatorWeb: 'www.behance.net/deborasayuri',
284 | creatorTwitter: null
285 | },
286 | {
287 | letter: 'bc',
288 | file: 'bc.png',
289 | name: 'Science',
290 | creator: 'Fabricio Marques',
291 | creatorWeb: 'http://fabric8.de',
292 | creatorTwitter: 'fabric_8'
293 | },
294 | ]
295 |
296 | slowPatternData = [
297 | {
298 | letter: 'ay',
299 | file: 'ay.jpg',
300 | name: 'Hotdogs',
301 | creator: 'Román Jusdado',
302 | creatorWeb: 'http://www.romanjusdado.com',
303 | creatorTwitter: 'romanjusdado'
304 | },
305 | {
306 | letter: 'ax',
307 | file: 'ax.jpg',
308 | name: 'Design Tools',
309 | creator: 'Miguel Angel Avila',
310 | creatorWeb: 'http://dribbble.com/geeklangel',
311 | creatorTwitter: 'geeklangel'
312 | },
313 | {
314 | letter: 'aw',
315 | file: 'aw.png',
316 | name: 'Green Goblin',
317 | creator: 'Dmitry Grigorev',
318 | creatorWeb: 'http://dgrigoriev.com/index.php/info',
319 | creatorTwitter: 'alieneye'
320 | },
321 | {
322 | letter: 'av',
323 | file: 'av.gif',
324 | name: 'raspberry lace',
325 | creator: 'Ana Novakovic',
326 | creatorWeb: 'http://ananovakovicdesign.com/',
327 | creatorTwitter: 'Ana_Novakovic_'
328 | },
329 | {
330 | letter: 'au',
331 | file: 'au.jpg',
332 | name: 'Isometropolis',
333 | creator: 'Alan Geraghty',
334 | creatorWeb: 'http://cargocollective.com/tigerpixel',
335 | creatorTwitter: 'tigerpixel'
336 | },
337 | {
338 | letter: 'g',
339 | file: 'g.gif',
340 | name: 'Alchemy',
341 | creator: 'Anton Repponen',
342 | creatorWeb: 'http://repponen.com',
343 | creatorTwitter: 'repponen'
344 | },
345 | {
346 | letter: 'n',
347 | file: 'n.jpg',
348 | name: 'Special Delivery',
349 | creator: 'Matt Delbridge',
350 | creatorWeb: 'http://mattdelbridge.com/',
351 | creatorTwitter: 'matt_delbridge'
352 | },
353 | {
354 | letter: 'i',
355 | file: 'i.jpg',
356 | name: 'White Wood',
357 | creator: 'Claudio Guglieri',
358 | creatorWeb: 'http://whydontwetry.com',
359 | creatorTwitter: 'claudioguglieri'
360 | },
361 | {
362 | letter: 'ab',
363 | file: 'ab.png',
364 | name: 'Sushi',
365 | creator: 'Claudio Guglieri',
366 | creatorWeb: 'http://whydontwetry.com',
367 | creatorTwitter: 'claudioguglieri'
368 | },
369 | {
370 | letter: 'o',
371 | file: 'o.jpg',
372 | name: 'Junk Mail',
373 | creator: 'Matt Delbridge',
374 | creatorWeb: 'http://mattdelbridge.com/',
375 | creatorTwitter: 'matt_delbridge'
376 | },
377 | {
378 | letter: 'e',
379 | file: 'e.png',
380 | name: 'Escape Flight',
381 | creator: 'Claudio Guglieri',
382 | creatorWeb: 'http://whydontwetry.com',
383 | creatorTwitter: 'claudioguglieri'
384 | },
385 | {
386 | letter: 'ac',
387 | file: 'ac.png',
388 | name: 'Subway Lines',
389 | creator: 'Marc Anderson',
390 | creatorWeb: 'http://www.marcbanderson.com/',
391 | creatorTwitter: 'marcbanderson'
392 | },
393 | {
394 | letter: 'w',
395 | file: 'w.png',
396 | name: '輪紋',
397 | creator: 'Daniel Marcos Perujo',
398 | creatorWeb: 'http://www.peruho.com/',
399 | creatorTwitter: 'peruho'
400 | },
401 | {
402 | letter: 'f',
403 | file: 'f.jpg',
404 | name: 'Dark Wood',
405 | creator: 'Claudio Guglieri',
406 | creatorWeb: 'http://whydontwetry.com',
407 | creatorTwitter: 'claudioguglieri'
408 | },
409 | {
410 | letter: 'ae',
411 | file: 'ae.jpg',
412 | name: 'Ocean',
413 | creator: 'Jon Vlasach',
414 | creatorWeb: 'http://colectiv.com/',
415 | creatorTwitter: 'JonVlasach'
416 | },
417 | {
418 | letter: 'am',
419 | file: 'am.jpg',
420 | name: 'Guglieri Speciale',
421 | creator: 'Jon Vlasach',
422 | creatorWeb: 'http://colectiv.com/',
423 | creatorTwitter: 'JonVlasach'
424 | },
425 | {
426 | letter: 'aj',
427 | file: 'aj.png',
428 | name: 'Geometrica',
429 | creator: 'Guy Moorhouse',
430 | creatorWeb: 'http://futurefabric.co.uk',
431 | creatorTwitter: 'futurefabric'
432 | },
433 | {
434 | letter: 'al',
435 | file: 'al.png',
436 | name: 'Glitch',
437 | creator: 'Tim Green',
438 | creatorWeb: 'http://destroywerk.com',
439 | creatorTwitter: 'destroywerk'
440 | },
441 | {
442 | letter: 'an',
443 | file: 'an.jpg',
444 | name: 'Asteroids',
445 | creator: 'Sanja Kusturica',
446 | creatorWeb: 'http://noumevon.com',
447 | creatorTwitter: 'kustkunst'
448 | },
449 | {
450 | letter: 'ao',
451 | file: 'ao.gif',
452 | name: 'Shattered Island',
453 | creator: 'Julien Renvoye',
454 | creatorWeb: 'http://www.julienrenvoye.com/',
455 | creatorTwitter: 'julienrenvoye'
456 | },
457 | {
458 | letter: 'as',
459 | file: 'as.gif',
460 | name: 'Neon Autumn',
461 | creator: 'Dailey Crafton',
462 | creatorWeb: 'http://daileycrafton.com',
463 | creatorTwitter: 'daileycrafton'
464 | },
465 | {
466 | letter: 'at',
467 | file: 'at.png',
468 | name: 'Celebration',
469 | creator: 'Prabhu Kandavelu',
470 | creatorWeb: null,
471 | creatorTwitter: 'prabhuk1986'
472 | },
473 | {
474 | letter: 'bb',
475 | file: 'bb.jpg',
476 | name: 'Ahoy',
477 | creator: 'Lorena G',
478 | creatorWeb: 'http://behance.net/lorena-g',
479 | creatorTwitter: 'Lorena_Disseny'
480 | },
481 | ]
482 |
483 | var loaded = 0;
484 | var totalItems = ( patternData.length - 1 );
485 | // Tiles
486 | var minWidth = 240;
487 | var maxWidth = 300;
488 |
489 | this.scrollSystem;
490 |
491 | this.init = function() {
492 |
493 | paneElement = $( '.panes' );
494 |
495 | // Randomize Pane Order
496 | shuffle( patternData );
497 | shuffle( slowPatternData );
498 |
499 | var firstPattern;
500 | var hash = location.hash.slice(1);
501 | var found = false;
502 | if( hash !== '' ) {
503 |
504 | // Search for in normal patterns
505 | for( var i = 0; i < patternData.length; i++ ) {
506 | if ( patternData[i].name.toLowerCase().split(' ').join('-') === hash ) {
507 |
508 | found = true;
509 | firstPattern = patternData[i];
510 | patternData.splice( i, 1 );
511 | break;
512 | }
513 | }
514 |
515 | // Search for in large patterns
516 | if ( found == false ) {
517 | for( var i = 0; i < slowPatternData.length; i++ ) {
518 | if ( slowPatternData[i].name.toLowerCase().split(' ').join('-') === hash ) {
519 |
520 | found = true;
521 | firstPattern = slowPatternData[i];
522 | slowPatternData.splice( i, 1 );
523 | break;
524 | }
525 | }
526 | }
527 |
528 | // If hash is fake, go back to normal.
529 | if ( found == false ) {
530 | removeHash();
531 | firstPattern = patternData[0]
532 | patternData.splice( i, 1 );
533 | }
534 |
535 | } else {
536 |
537 | // No hash
538 | removeHash();
539 | firstPattern = patternData[0]
540 | patternData.splice( i, 1 );
541 | }
542 |
543 | // Loading first image & exiting preloader
544 | loadImage( firstPattern, function() {
545 |
546 | createPane( firstPattern, 0 );
547 | $( '.panes' ).show();
548 |
549 | // Debounce
550 | setTimeout( function() {
551 | $( '.loading' ).removeClass( 'preload' );
552 | }, 500 )
553 |
554 | loadSmall();
555 | loadSocial();
556 |
557 | });
558 |
559 | $( '.grid' ).click( function() {
560 |
561 | $( document.body ).addClass( 'tile-view' );
562 | removeHash();
563 | });
564 |
565 | // Resize event!
566 | window.onresize = function() {
567 | app.resize();
568 | _this.scrollSystem.resize();
569 | }
570 | }
571 |
572 | var set
573 |
574 | var loadImage = function( data, callback ) {
575 |
576 | var image = new Image();
577 | image.onload = function() {
578 | callback();
579 | };
580 |
581 | image.src = imageDir + data.file;
582 | }
583 |
584 | var loadSmall = function() {
585 |
586 | var i = 0;
587 |
588 | for( var i; i < patternData.length; i++ ) {
589 |
590 | (function( element, index ) {
591 |
592 | loadImage( element , function() {
593 |
594 | checkLoad();
595 | });
596 |
597 | })( patternData[ i ], i );
598 | }
599 | }
600 |
601 | var checkLoad = function() {
602 |
603 | loaded++;
604 |
605 | if ( loaded === totalItems ) {
606 |
607 | // Haha, loaded.
608 | finalizePage();
609 | }
610 | }
611 |
612 | var finalizePage = function() {
613 |
614 | // Create final panes!
615 | var i = 0;
616 | for( var i; i < patternData.length; i++ ) {
617 | createPane( patternData[ i ] );
618 | }
619 |
620 | // Inject and load slower patterns now the first X have loaded.
621 | for( var i = 0; i < slowPatternData.length; i++ ) {
622 | createPane( slowPatternData[ i ] );
623 | }
624 |
625 | _this.scrollSystem = new ScrollSystem();
626 | _this.scrollSystem.init();
627 |
628 | // Trigger mouse events
629 | $( '.trigger' ).mouseenter( function() {
630 |
631 | $( this ).parent().parent().addClass( 'active' );
632 | });
633 |
634 | $( '.trigger' ).mouseleave( function( event ) {
635 |
636 | $( this ).parent().parent().removeClass( 'active' );
637 | });
638 |
639 | // Add Tile Events
640 | $( '.tile' ).click( function() {
641 |
642 | var letter = this.className.split( ' ' )[1];
643 | _this.scrollSystem.scrollTo( letter, 0 );
644 |
645 | // Debounce
646 | setTimeout( function() {
647 | $( document.body ).removeClass( 'tile-view' );
648 | }, 1 )
649 | })
650 |
651 | // Initial screen sizing
652 | _this.resize();
653 |
654 | // Show page
655 | setTimeout( function() {
656 | $( '.loading' ).addClass( 'loaded' );
657 | }, 2000 );
658 |
659 | setTimeout( function() {
660 | $( '.loading' ).hide();
661 | }, 3500 );
662 | }
663 |
664 | var loadSocial = function() {
665 |
666 | // Twitter
667 | !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
668 |
669 | // Facebook
670 | (function(d, s, id) {
671 | var js, fjs = d.getElementsByTagName(s)[0];
672 | if (d.getElementById(id)) return;
673 | js = d.createElement(s); js.id = id;
674 | js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
675 | fjs.parentNode.insertBefore(js, fjs);
676 | }(document, 'script', 'facebook-jssdk'));
677 | }
678 |
679 | var createPane = function( data, index ) {
680 |
681 | // Update template data
682 | var pane = paneData;
683 | pane = pane.replace( /%file%/g, data.file );
684 | pane = pane.replace( /%letter%/g, data.letter );
685 | pane = pane.replace( /%name%/g, data.name );
686 | pane = pane.replace( /%creator%/g, data.creator );
687 | pane = pane.replace( /%creatorWeb%/g, data.creatorWeb );
688 | pane = pane.replace( /%creatorTwitter%/g, data.creatorTwitter );
689 |
690 | pane = pane.replace( /%downloadName%/g, (data.name.toLowerCase().split(' ').join('-') + '.' + data.file.split('.')[1]) );
691 | pane = pane.replace( /%z-index%/g, totalItems - index );
692 |
693 | // Set background image... not the template way :S
694 | pane = $( pane );
695 | $( '.letter', pane ).css({
696 | 'background-image': 'url("' + imageDir + data.file + '")'
697 | })
698 |
699 | // Set tile background
700 | $( '.tile.' + data.letter ).css({
701 | 'background-image': 'url("' + imageDir + data.file + '")'
702 | })
703 |
704 | if ( data.creatorTwitter === null ) {
705 | $( '.twitter', pane ).remove();
706 | }
707 |
708 | if ( data.creatorWeb === null ) {
709 | $( 'h2 a', pane ).eq(0).removeAttr( 'href' ).addClass( 'no-link' );
710 | }
711 |
712 |
713 | paneElement.append( $( pane ) );
714 | }
715 |
716 | this.resize = function() {
717 |
718 | // Letter positioning.
719 | $( '.showcase' ).css({
720 | 'margin-top': ( (window.innerHeight - $( '.showcase' ).height() ) / 2 ) - 50 + 'px'
721 | })
722 |
723 | var element = document.querySelector( '.tiles' );
724 | var width = element.offsetWidth - ( element.offsetWidth - element.clientWidth );
725 |
726 | // Tile Positioning.
727 | var maxTiles = Math.floor( width / minWidth );
728 | var overflow = width % minWidth;
729 | var divvy = overflow / maxTiles;
730 |
731 | $( '.main-tile' ).width( 2 * ( minWidth + divvy ) );
732 | $( '.tile' ).width( minWidth + divvy );
733 | }
734 | }
735 |
736 |
737 |
738 |
--------------------------------------------------------------------------------
/js/utils.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Pattern Library
3 | */
4 |
5 | /*********************************************
6 | * Bind Context
7 | *********************************************/
8 |
9 | function bind( scope, fn ) {
10 | return function () {
11 | fn.apply( scope, arguments );
12 | };
13 | }
14 |
15 | /*********************************************
16 | * Knuth Shuffle ~ https://github.com/coolaj86/knuth-shuffle
17 | *********************************************/
18 |
19 | function shuffle( array ) {
20 | var currentIndex = array.length;
21 | var temporaryValue;
22 | var randomIndex;
23 |
24 | while ( 0 !== currentIndex ) {
25 |
26 | randomIndex = Math.floor( Math.random() * currentIndex );
27 | currentIndex -= 1;
28 |
29 | temporaryValue = array[ currentIndex ];
30 | array[ currentIndex ] = array[ randomIndex ];
31 | array[ randomIndex ] = temporaryValue;
32 | }
33 |
34 | return array;
35 | }
36 |
37 | /*********************************************
38 | * Remove Hash ~ http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh
39 | *********************************************/
40 |
41 | function removeHash () {
42 | var scrollV, scrollH, loc = window.location;
43 | if ("pushState" in history)
44 | history.pushState("", document.title, loc.pathname + loc.search);
45 | else {
46 | // Prevent scrolling by storing the page's current scroll offset
47 | scrollV = document.body.scrollTop;
48 | scrollH = document.body.scrollLeft;
49 |
50 | loc.hash = "";
51 |
52 | // Restore the scroll offset, should be flicker free
53 | document.body.scrollTop = scrollV;
54 | document.body.scrollLeft = scrollH;
55 | }
56 | }
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | ## The Pattern Library
2 | A simple, nicely designed gallery project built to show and share simple patterns and designs from around the world. Built by [Tim Holman](http://tholman.com/ "Thats me!") & [Claudio Guglieri](http://www.whydontwetry.com/ "The man, and awesome designer!").
3 |
4 | 
5 | 
6 | 
7 |
8 | ### Housekeeping
9 | Currently accepting submissions via the mail link included on the site (patterns@thepatternlibrary.com), rather than pull requests.
10 |
--------------------------------------------------------------------------------
/scss/styles.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Pattern Library
3 | *
4 | * MIT licensed
5 | * Copyright (C) 2013 Tim Holman, http://tholman.com
6 | */
7 |
8 | /*********************************************
9 | * VARIABLES + MIXINS
10 | *********************************************/
11 |
12 | $black: #241F20;
13 | $red: #d60000;
14 | $topLevel: 1000;
15 |
16 | @mixin transition( $what: all, $length: 1s, $easing: ease-in-out ) {
17 | -webkit-transition: $what $length $easing;
18 | -moz-transition: $what $length $easing;
19 | -ms-transition: $what $length $easing;
20 | -o-transition: $what $length $easing;
21 | transition: $what $length $easing;
22 | }
23 |
24 | @mixin transform( $params ) {
25 | -webkit-transform: $params;
26 | -moz-transform: $params;
27 | -ms-transform: $params;
28 | -o-transform: $params;
29 | transform: $params;
30 | }
31 |
32 | @mixin animation( $params ) {
33 | -webkit-animation: $params;
34 | -moz-animation: $params;
35 | -ms-animation: $params;
36 | -o-animation: $params;
37 | animation: $params;
38 | }
39 |
40 | /*********************************************
41 | * MAIN
42 | *********************************************/
43 |
44 | * {
45 | -moz-box-sizing: border-box;
46 | box-sizing: border-box;
47 | }
48 |
49 | html, body {
50 | width: 100%;
51 | height: 100%;
52 | padding: 0px;
53 | margin: 0px;
54 |
55 | -webkit-perspective: 600px;
56 | overflow: hidden;
57 | background: #fff;
58 | }
59 |
60 |
61 | body {
62 |
63 | }
64 |
65 | section {
66 | position: absolute;
67 | width: 100%;
68 | height: 100%;
69 | top: 0px;
70 | left: 0px;
71 | }
72 |
73 | .wrapper {
74 | @include transform( translateZ( 0px ) );
75 | overflow: hidden;
76 | }
77 |
78 | .panes {
79 | // @include transform( translateZ( 0px ) );
80 |
81 | @include transition( height, 500ms );
82 | overflow: hidden;
83 |
84 | width: 100%;
85 | height: 100%;
86 | z-index: 2;
87 | position: relative;
88 | display: none;
89 | }
90 |
91 | .loading {
92 |
93 | @include transition( all, 1000ms );
94 | @include transform( translateZ( 0px ) );
95 |
96 | position: fixed;
97 | height: 100%;
98 | width: 100%;
99 | left: 0px;
100 | top: 0px;
101 |
102 | z-index: 10000;
103 |
104 | &.preload {
105 |
106 | .mask {
107 | background-color: #fff !important; // Hide the image!
108 | }
109 |
110 | .circle, .bg-circle {
111 | @include transform( translateZ(0px) rotateY(180deg) translateY( -60px ) );
112 | }
113 |
114 | table {
115 | color: #fff;
116 | }
117 | }
118 |
119 | &.loaded {
120 | @include transform( translateY( -100% ) );
121 | }
122 |
123 | &.hide {
124 | display: none;
125 | }
126 |
127 | table {
128 | @include transition( color, 300ms );
129 | font-family: "mostra-nuova";
130 | height: 100%;
131 | width: 100%;
132 |
133 | text-align: center;
134 | font-weight: 300;
135 | color: #b2b2b2;
136 |
137 | .top {
138 | background: #fff;
139 | border: 0px;
140 | height: 40%;
141 |
142 | .first, .last {
143 | width: 50%;
144 | }
145 |
146 | .middle {
147 | vertical-align: bottom;
148 | padding-bottom: 10px;
149 | letter-spacing: 1px;
150 | font-size: 20px;
151 | }
152 | }
153 |
154 | .center {
155 | height: 63px;
156 |
157 | .first, .last {
158 | background: #fff;
159 | }
160 |
161 | img {
162 | vertical-align: middle;
163 | }
164 |
165 | .mask {
166 | @include transition( background-color, 300ms );
167 | background: url( '../img/title-mask.png' );
168 | width: 680px;
169 | height: 63px;
170 | }
171 | }
172 |
173 | .bottom {
174 | background: #fff;
175 | height: 60%;
176 |
177 | .middle {
178 | vertical-align: top;
179 | }
180 |
181 | .subtitle {
182 | font-family: 'Roboto Condensed', sans-serif;
183 | text-transform: uppercase;
184 | letter-spacing: 2px;
185 | padding-top: 20px;
186 | font-weight: 300;
187 | font-size: 11px;
188 | }
189 | }
190 | }
191 |
192 | // Loading
193 | .circle, .bg-circle {
194 | -webkit-transition: -webkit-transform 300ms;
195 | -moz-transition: -moz-transform 300ms;
196 | -ms-transition: -ms-transform 300ms;
197 | -o-transition: -o-transform 300ms;
198 | transition: transform 300ms;
199 |
200 | @include transform( translateZ(0px) rotateY(180deg) translateY( 60px ) );
201 |
202 | position: absolute;
203 | position: absolute;
204 | margin-left: -40px;
205 | height: 80px;
206 | width: 80px;
207 | left: 50%;
208 | }
209 |
210 | .circle {
211 | @include animation( load 5s linear infinite );
212 | stroke-dashoffset: 320;
213 | stroke-dasharray: 160;
214 | z-index: 2;
215 | }
216 |
217 | .bg-circle {
218 | z-index: 1;
219 | path {
220 | stroke: #eee;
221 | }
222 | }
223 | }
224 |
225 | @-webkit-keyframes load {
226 | to {
227 | stroke-dashoffset: 0;
228 | }
229 | }
230 |
231 | @-moz-keyframes load {
232 | to {
233 | stroke-dashoffset: 0;
234 | }
235 | }
236 |
237 | @-ms-keyframes load {
238 | to {
239 | stroke-dashoffset: 0;
240 | }
241 | }
242 |
243 | @-o-keyframes load {
244 | to {
245 | stroke-dashoffset: 0;
246 | }
247 | }
248 |
249 | @keyframes load {
250 | to {
251 | stroke-dashoffset: 0;
252 | }
253 | }
254 |
255 | nav {
256 | @include transform( translateZ( 0px ) );
257 | position: fixed;
258 | z-index: 1000;
259 | right: 20px;
260 | top: 20px;
261 | display: block;
262 | width: 40px;
263 |
264 | ul {
265 | list-style: none;
266 | padding: 0px;
267 | margin: 0;
268 | }
269 |
270 | li {
271 | @include transition( opacity, 100ms, linear );
272 | margin-bottom: 10px;
273 | height: 40px;
274 |
275 |
276 | &.disabled {
277 | opacity: 0.5;
278 | pointer-events: none;
279 | }
280 | }
281 |
282 | circle, path {
283 | @include transition( fill, 100ms, linear );
284 | }
285 |
286 | svg {
287 | cursor: pointer;
288 |
289 | &:hover {
290 |
291 | circle {
292 | fill: #333;
293 | }
294 |
295 | path {
296 | fill: #fff;
297 | }
298 | }
299 | }
300 | }
301 |
302 | .tile-view {
303 |
304 | .panes {
305 | height: 0px;
306 | }
307 | }
308 |
309 | .tiles {
310 |
311 | @include transform( translateZ( 0px ) );
312 | display: block;
313 | visibility: visible;
314 | overflow: auto;
315 |
316 | background: #fff;
317 | position: absolute;
318 | text-align: center;
319 | z-index: 1000;
320 | height: 100%;
321 | width: 100%;
322 | left: 0px;
323 | top: 0px;
324 |
325 | z-index: 1;
326 |
327 | .main-tile {
328 |
329 | background: #fff;
330 | height: 560px;
331 | width: 475px;
332 | float: left;
333 |
334 | header {
335 | font-family: "mostra-nuova";
336 | color: #b2b2b2;
337 |
338 | a {
339 | color: #b2b2b2;
340 | }
341 |
342 | h1 {
343 | margin-bottom: 10px;
344 | font-weight: 300;
345 | margin-top: 50px;
346 | font-size: 16px;
347 | }
348 |
349 | h2 {
350 | font-family: 'Roboto Condensed', sans-serif;
351 | text-transform: uppercase;
352 | letter-spacing: 2px;
353 | font-weight: 300;
354 | font-size: 12px;
355 | }
356 | }
357 |
358 | .description {
359 | font-family: 'Roboto Condensed', sans-serif;
360 | text-transform: uppercase;
361 | letter-spacing: 1px;
362 | font-weight: 200;
363 | margin-top: 40px;
364 | font-size: 12px;
365 | color: #e47c7c;
366 | }
367 |
368 | .contribute {
369 |
370 | h1 {
371 | font-family: "mostra-nuova";
372 | margin-top: 40px;
373 | font-weight: 800;
374 | font-size: 15px;
375 | color: #333;
376 | }
377 |
378 | .instructions {
379 | margin-top: 20px;
380 | font-family: 'Roboto Condensed', sans-serif;
381 | text-transform: uppercase;
382 | letter-spacing: 1px;
383 | font-weight: 200;
384 | font-size: 12px;
385 | color: #e47c7c;
386 |
387 | span {
388 | color: #333;
389 | }
390 | }
391 |
392 | img {
393 | margin-top: 15px;
394 | }
395 |
396 | .mailto {
397 | font-family: "mostra-nuova";
398 | text-decoration: none;
399 | padding-top: 35px;
400 | font-weight: 800;
401 | font-size: 20px;
402 | color: #e47c7c;
403 | display: block;
404 | }
405 | }
406 | }
407 |
408 | .tile {
409 | @include transform( translateZ(0px) );
410 | background-position: 50% 50%;
411 | text-align: center;
412 | cursor: pointer;
413 | display: block;
414 | height: 280px;
415 | width: 250px;
416 | border: 0px;
417 | color: #fff;
418 | float: left;
419 |
420 | &:hover {
421 | .prompt {
422 | opacity: 0.999;
423 | }
424 | }
425 | }
426 |
427 | .prompt {
428 | @include transition( opacity, 100ms );
429 | font-family: "mostra-nuova";
430 | text-transform: uppercase;
431 | pointer-events: none;
432 | background: #fff;
433 | height: 100%;
434 | width: 100%;
435 | color: #000;
436 | opacity: 0;
437 |
438 | .name {
439 | letter-spacing: 2px;
440 | padding-top: 100px;
441 | font-weight: 800;
442 | font-size: 20px;
443 | }
444 |
445 | .author {
446 | letter-spacing: 1px;
447 | color: #e47c7c;
448 | font-weight: 300;
449 | font-size: 15px;
450 | margin-top: 3px;
451 | }
452 | }
453 | }
454 |
455 | .letter {
456 |
457 | @include transform( translateZ(0px) );
458 |
459 | font-family: "mostra-nuova";
460 | position: absolute;
461 | background: #333;
462 | top: 0px;
463 | left: 0px;
464 | width: 100%;
465 | height: 100%;
466 |
467 | $activeHoverColor: #e37070;
468 |
469 | &.active {
470 |
471 | h1, h2 {
472 | color: #333;
473 | }
474 |
475 | .no-link {
476 | color: #000;
477 | }
478 |
479 | .details {
480 | background: rgba(255, 255, 255, 1);
481 | }
482 |
483 | .download .text, .twitter, .self-promotion {
484 | opacity: 1;
485 | }
486 |
487 | svg, path, circle {
488 | @include transition( all, 100ms );
489 | }
490 |
491 | .trigger {
492 | text-shadow: none;
493 | }
494 |
495 | .download {
496 | @include transition( all, 100ms, linear );
497 | margin-top: 40px;
498 |
499 | path {
500 | fill: $activeHoverColor;
501 | }
502 |
503 | circle {
504 | stroke: $activeHoverColor;
505 | }
506 | }
507 |
508 | a {
509 | // @include transition( all, 300ms );
510 | color: $activeHoverColor;
511 | }
512 | }
513 |
514 | .details {
515 | // @include transition( background-color, 300ms, linear );
516 | height: 100%;
517 | }
518 |
519 | .trigger {
520 | float: left;
521 | padding-left: 20px;
522 | padding-top: 20px;
523 | padding-right: 45px;
524 | padding-bottom: 45px;
525 | min-height: 200px;
526 | text-shadow: -1px -1px rgba(0,0,0,0.1);
527 | }
528 |
529 | h1, h2, a {
530 | // @include transition( color, 300ms, linear );
531 | text-transform: uppercase;
532 | text-decoration: none;
533 | padding: 0px;
534 | color: #fff;
535 | margin: 0px;
536 |
537 | -webkit-touch-callout: none;
538 | -webkit-user-select: none;
539 | -khtml-user-select: none;
540 | -moz-user-select: none;
541 | -ms-user-select: none;
542 | user-select: none;
543 | }
544 |
545 | h1 {
546 | -webkit-font-smoothing: antialiased;
547 | font-size: 30px;
548 | font-weight: 800;
549 | }
550 |
551 | h2 {
552 | letter-spacing: 1px;
553 | font-weight: 300;
554 | font-size: 15px;
555 | margin-top: 5px;
556 | }
557 |
558 | .twitter {
559 | // @include transition( opacity, 300ms, linear );
560 | opacity: 0;
561 | }
562 |
563 | .download {
564 |
565 | .text {
566 |
567 | opacity: 0;
568 | }
569 |
570 | margin-top: 20px;
571 |
572 | path {
573 | fill: #fff;
574 | }
575 |
576 | circle {
577 | stroke: #fff;
578 | }
579 |
580 |
581 | svg {
582 | margin-bottom: -7px;
583 | margin-right: 3px;
584 | height: 35px;
585 | width: 35px;
586 | }
587 |
588 |
589 | font-weight: 800;
590 | font-size: 30px;
591 |
592 | &:hover {
593 |
594 | circle {
595 | fill: $activeHoverColor;
596 | }
597 |
598 | path {
599 | fill: #fff;
600 | }
601 | }
602 | }
603 |
604 | .self-promotion {
605 | text-transform: uppercase;
606 | position: absolute;
607 | line-height: 20px;
608 | font-weight: 300;
609 | bottom: 20px;
610 | color: #333;
611 | left: 20px;
612 |
613 | opacity: 0;
614 | }
615 | }
616 |
617 | // Transitioning state
618 | .transitioning {
619 | .wrapper {
620 | @include transition( all, 500ms, ease-in-out );
621 | }
622 | }
623 |
624 | .sharing {
625 | //@include transform( translateZ( 0px ) );
626 | position: fixed;
627 | z-index: 9999; // One less than the cover
628 | bottom: 20px;
629 | right: 20px;
630 |
631 | .twitter-share-button {
632 | margin-right: 10px;
633 | }
634 |
635 | .fb-like {
636 | overflow: hidden;
637 | height: 20px;
638 | }
639 | }
640 |
641 |
642 | .letter, .tile {
643 |
644 | &.a, &.g, &.l, &.n, &.x, &.y, &.z, &.aj, &.az {
645 | background-position: 50% 50%;
646 | }
647 |
648 | &.b {
649 | background-position: 50% 0%;
650 | }
651 |
652 | &.k {
653 | background-position: 50% 0%;
654 | }
655 |
656 | &.s {
657 | background-position: 0% 0%;
658 | }
659 | }
--------------------------------------------------------------------------------
189 | 
210 |
211 | PATTERNS@THEPATTERNLIBRARY.COM
212 |