var app=function(){"use strict";function e(){}function t(e,t){for(const n in t)e[n]=t[n];return e}function n(e){return e()}function s(){return Object.create(null)}function a(e){e.forEach(n)}function l(e){return"function"==typeof e}function r(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function o(t){return t&&l(t.destroy)?t.destroy:e}function i(e,t){e.appendChild(t)}function c(e,t,n){e.insertBefore(t,n||null)}function u(e){e.parentNode.removeChild(e)}function g(e,t){for(let n=0;n<e.length;n+=1)e[n]&&e[n].d(t)}function m(e){return document.createElement(e)}function d(e){return document.createElementNS("http://www.w3.org/2000/svg",e)}function f(e){return document.createTextNode(e)}function p(){return f(" ")}function h(){return f("")}function v(e,t,n,s){return e.addEventListener(t,n,s),()=>e.removeEventListener(t,n,s)}function $(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function b(e,t,n){t in e?e[t]=n:$(e,t,n)}function w(e,t,n){e.setAttributeNS("http://www.w3.org/1999/xlink",t,n)}function y(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function x(e,t,n){e.classList[n?"add":"remove"](t)}class k{constructor(e=null){this.a=e,this.e=this.n=null}m(e,t,n=null){this.e||(this.e=m(t.nodeName),this.t=t,this.h(e)),this.i(n)}h(e){this.e.innerHTML=e,this.n=Array.from(this.e.childNodes)}i(e){for(let t=0;t<this.n.length;t+=1)c(this.t,this.n[t],e)}p(e){this.d(),this.h(e),this.i(this.a)}d(){this.n.forEach(u)}}let S;function j(e){S=e}function C(){if(!S)throw new Error("Function called outside component initialization");return S}function T(e){C().$$.on_mount.push(e)}function z(){const e=C();return(t,n)=>{const s=e.$$.callbacks[t];if(s){const a=function(e,t){const n=document.createEvent("CustomEvent");return n.initCustomEvent(e,!1,!1,t),n}(t,n);s.slice().forEach((t=>{t.call(e,a)}))}}}function L(e,t){const n=e.$$.callbacks[t.type];n&&n.slice().forEach((e=>e(t)))}const A=[],q=[],F=[],M=[],H=Promise.resolve();let I=!1;function E(){I||(I=!0,H.then(D))}function P(){return E(),H}function _(e){F.push(e)}let N=!1;const O=new Set;function D(){if(!N){N=!0;do{for(let e=0;e<A.length;e+=1){const t=A[e];j(t),W(t.$$)}for(j(null),A.length=0;q.length;)q.pop()();for(let e=0;e<F.length;e+=1){const t=F[e];O.has(t)||(O.add(t),t())}F.length=0}while(A.length);for(;M.length;)M.pop()();I=!1,N=!1,O.clear()}}function W(e){if(null!==e.fragment){e.update(),a(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(_)}}const G=new Set;let U;function R(){U={r:0,c:[],p:U}}function B(){U.r||a(U.c),U=U.p}function Y(e,t){e&&e.i&&(G.delete(e),e.i(t))}function Z(e,t,n,s){if(e&&e.o){if(G.has(e))return;G.add(e),U.c.push((()=>{G.delete(e),s&&(n&&e.d(1),s())})),e.o(t)}}function V(e,t){const n={},s={},a={$$scope:1};let l=e.length;for(;l--;){const r=e[l],o=t[l];if(o){for(const e in r)e in o||(s[e]=1);for(const e in o)a[e]||(n[e]=o[e],a[e]=1);e[l]=o}else for(const e in r)a[e]=1}for(const e in s)e in n||(n[e]=void 0);return n}function X(e){return"object"==typeof e&&null!==e?e:{}}function J(e){e&&e.c()}function K(e,t,s){const{fragment:r,on_mount:o,on_destroy:i,after_update:c}=e.$$;r&&r.m(t,s),_((()=>{const t=o.map(n).filter(l);i?i.push(...t):a(t),e.$$.on_mount=[]})),c.forEach(_)}function Q(e,t){const n=e.$$;null!==n.fragment&&(a(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function ee(t,n,l,r,o,i,c=[-1]){const g=S;j(t);const m=n.props||{},d=t.$$={fragment:null,ctx:null,props:i,update:e,not_equal:o,bound:s(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(g?g.$$.context:[]),callbacks:s(),dirty:c,skip_bound:!1};let f=!1;if(d.ctx=l?l(t,m,((e,n,...s)=>{const a=s.length?s[0]:n;return d.ctx&&o(d.ctx[e],d.ctx[e]=a)&&(!d.skip_bound&&d.bound[e]&&d.bound[e](a),f&&function(e,t){-1===e.$$.dirty[0]&&(A.push(e),E(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}(t,e)),n})):[],d.update(),f=!0,a(d.before_update),d.fragment=!!r&&r(d.ctx),n.target){if(n.hydrate){const e=function(e){return Array.from(e.childNodes)}(n.target);d.fragment&&d.fragment.l(e),e.forEach(u)}else d.fragment&&d.fragment.c();n.intro&&Y(t.$$.fragment),K(t,n.target,n.anchor),D()}j(g)}class te{$destroy(){Q(this,1),this.$destroy=e}$on(e,t){const n=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}const ne=[];function se(e,t){return{subscribe:ae(e,t).subscribe}}function ae(t,n=e){let s;const a=[];function l(e){if(r(t,e)&&(t=e,s)){const e=!ne.length;for(let e=0;e<a.length;e+=1){const n=a[e];n[1](),ne.push(n,t)}if(e){for(let e=0;e<ne.length;e+=2)ne[e][0](ne[e+1]);ne.length=0}}}return{set:l,update:function(e){l(e(t))},subscribe:function(r,o=e){const i=[r,o];return a.push(i),1===a.length&&(s=n(l)||e),r(t),()=>{const e=a.indexOf(i);-1!==e&&a.splice(e,1),0===a.length&&(s(),s=null)}}}}function le(t,n,s){const r=!Array.isArray(t),o=r?[t]:t,i=n.length<2;return se(s,(t=>{let s=!1;const c=[];let u=0,g=e;const m=()=>{if(u)return;g();const s=n(r?c[0]:c,t);i?t(s):g=l(s)?s:e},d=o.map(((t,n)=>function(t,...n){if(null==t)return e;const s=t.subscribe(...n);return s.unsubscribe?()=>s.unsubscribe():s}(t,(e=>{c[n]=e,u&=~(1<<n),s&&m()}),(()=>{u|=1<<n}))));return s=!0,m(),function(){a(d),g()}}))}function re(e){let n,s,a;const l=[e[2]];var r=e[0];function o(e){let n={};for(let e=0;e<l.length;e+=1)n=t(n,l[e]);return{props:n}}return r&&(n=new r(o()),n.$on("routeEvent",e[7])),{c(){n&&J(n.$$.fragment),s=h()},m(e,t){n&&K(n,e,t),c(e,s,t),a=!0},p(e,t){const a=4&t?V(l,[X(e[2])]):{};if(r!==(r=e[0])){if(n){R();const e=n;Z(e.$$.fragment,1,0,(()=>{Q(e,1)})),B()}r?(n=new r(o()),n.$on("routeEvent",e[7]),J(n.$$.fragment),Y(n.$$.fragment,1),K(n,s.parentNode,s)):n=null}else r&&n.$set(a)},i(e){a||(n&&Y(n.$$.fragment,e),a=!0)},o(e){n&&Z(n.$$.fragment,e),a=!1},d(e){e&&u(s),n&&Q(n,e)}}}function oe(e){let n,s,a;const l=[{params:e[1]},e[2]];var r=e[0];function o(e){let n={};for(let e=0;e<l.length;e+=1)n=t(n,l[e]);return{props:n}}return r&&(n=new r(o()),n.$on("routeEvent",e[6])),{c(){n&&J(n.$$.fragment),s=h()},m(e,t){n&&K(n,e,t),c(e,s,t),a=!0},p(e,t){const a=6&t?V(l,[2&t&&{params:e[1]},4&t&&X(e[2])]):{};if(r!==(r=e[0])){if(n){R();const e=n;Z(e.$$.fragment,1,0,(()=>{Q(e,1)})),B()}r?(n=new r(o()),n.$on("routeEvent",e[6]),J(n.$$.fragment),Y(n.$$.fragment,1),K(n,s.parentNode,s)):n=null}else r&&n.$set(a)},i(e){a||(n&&Y(n.$$.fragment,e),a=!0)},o(e){n&&Z(n.$$.fragment,e),a=!1},d(e){e&&u(s),n&&Q(n,e)}}}function ie(e){let t,n,s,a;const l=[oe,re],r=[];function o(e,t){return e[1]?0:1}return t=o(e),n=r[t]=l[t](e),{c(){n.c(),s=h()},m(e,n){r[t].m(e,n),c(e,s,n),a=!0},p(e,[a]){let i=t;t=o(e),t===i?r[t].p(e,a):(R(),Z(r[i],1,1,(()=>{r[i]=null})),B(),n=r[t],n?n.p(e,a):(n=r[t]=l[t](e),n.c()),Y(n,1),n.m(s.parentNode,s))},i(e){a||(Y(n),a=!0)},o(e){Z(n),a=!1},d(e){r[t].d(e),e&&u(s)}}}function ce(){const e=window.location.href.indexOf("#/");let t=e>-1?window.location.href.substr(e+1):"/";const n=t.indexOf("?");let s="";return n>-1&&(s=t.substr(n+1),t=t.substr(0,n)),{location:t,querystring:s}}const ue=se(null,(function(e){e(ce());const t=()=>{e(ce())};return window.addEventListener("hashchange",t,!1),function(){window.removeEventListener("hashchange",t,!1)}}));le(ue,(e=>e.location)),le(ue,(e=>e.querystring));async function ge(e){if(!e||e.length<1||"/"!=e.charAt(0)&&0!==e.indexOf("#/"))throw Error("Invalid parameter location");await P(),history.replaceState({scrollX:window.scrollX,scrollY:window.scrollY},void 0,void 0),window.location.hash=("#"==e.charAt(0)?"":"#")+e}function me(e,t){if(!e||!e.tagName||"a"!=e.tagName.toLowerCase())throw Error('Action "link" can only be used with <a> tags');return de(e,t||e.getAttribute("href")),{update(t){de(e,t)}}}function de(e,t){if(!t||t.length<1||"/"!=t.charAt(0))throw Error('Invalid value for "href" attribute: '+t);e.setAttribute("href","#"+t),e.addEventListener("click",fe)}function fe(e){e.preventDefault();const t=e.currentTarget.getAttribute("href");history.replaceState({scrollX:window.scrollX,scrollY:window.scrollY},void 0,void 0),window.location.hash=t}function pe(e,t,n){let{routes:s={}}=t,{prefix:a=""}=t,{restoreScrollState:l=!1}=t;class r{constructor(e,t){if(!t||"function"!=typeof t&&("object"!=typeof t||!0!==t._sveltesparouter))throw Error("Invalid component object");if(!e||"string"==typeof e&&(e.length<1||"/"!=e.charAt(0)&&"*"!=e.charAt(0))||"object"==typeof e&&!(e instanceof RegExp))throw Error('Invalid value for "path" argument');const{pattern:n,keys:s}=function(e,t){if(e instanceof RegExp)return{keys:!1,pattern:e};var n,s,a,l,r=[],o="",i=e.split("/");for(i[0]||i.shift();a=i.shift();)"*"===(n=a[0])?(r.push("wild"),o+="/(.*)"):":"===n?(s=a.indexOf("?",1),l=a.indexOf(".",1),r.push(a.substring(1,~s?s:~l?l:a.length)),o+=~s&&!~l?"(?:/([^/]+?))?":"/([^/]+?)",~l&&(o+=(~s?"?":"")+"\\"+a.substring(l))):o+="/"+a;return{keys:r,pattern:new RegExp("^"+o+(t?"(?=$|/)":"/?$"),"i")}}(e);this.path=e,"object"==typeof t&&!0===t._sveltesparouter?(this.component=t.component,this.conditions=t.conditions||[],this.userData=t.userData,this.props=t.props||{}):(this.component=()=>Promise.resolve(t),this.conditions=[],this.props={}),this._pattern=n,this._keys=s}match(e){if(a)if("string"==typeof a&&e.startsWith(a))e=e.substr(a.length)||"/";else if(a instanceof RegExp){const t=e.match(a);t&&t[0]&&(e=e.substr(t[0].length)||"/")}const t=this._pattern.exec(e);if(null===t)return null;if(!1===this._keys)return t;const n={};let s=0;for(;s<this._keys.length;){try{n[this._keys[s]]=decodeURIComponent(t[s+1]||"")||null}catch(e){n[this._keys[s]]=null}s++}return n}async checkConditions(e){for(let t=0;t<this.conditions.length;t++)if(!await this.conditions[t](e))return!1;return!0}}const o=[];s instanceof Map?s.forEach(((e,t)=>{o.push(new r(t,e))})):Object.keys(s).forEach((e=>{o.push(new r(e,s[e]))}));let i=null,c=null,u={};const g=z();async function m(e,t){await P(),g(e,t)}let d=null;var f;l&&(window.addEventListener("popstate",(e=>{d=e.state&&e.state.scrollY?e.state:null})),f=()=>{d?window.scrollTo(d.scrollX,d.scrollY):window.scrollTo(0,0)},C().$$.after_update.push(f));let p=null,h=null;return ue.subscribe((async e=>{p=e;let t=0;for(;t<o.length;){const s=o[t].match(e.location);if(!s){t++;continue}const a={route:o[t].path,location:e.location,querystring:e.querystring,userData:o[t].userData};if(!await o[t].checkConditions(a))return n(0,i=null),h=null,void m("conditionsFailed",a);m("routeLoading",Object.assign({},a));const l=o[t].component;if(h!=l){l.loading?(n(0,i=l.loading),h=l,n(1,c=l.loadingParams),n(2,u={}),m("routeLoaded",Object.assign({},a,{component:i,name:i.name}))):(n(0,i=null),h=null);const t=await l();if(e!=p)return;n(0,i=t&&t.default||t),h=l}return s&&"object"==typeof s&&Object.keys(s).length?n(1,c=s):n(1,c=null),n(2,u=o[t].props),void m("routeLoaded",Object.assign({},a,{component:i,name:i.name}))}n(0,i=null),h=null})),e.$$set=e=>{"routes"in e&&n(3,s=e.routes),"prefix"in e&&n(4,a=e.prefix),"restoreScrollState"in e&&n(5,l=e.restoreScrollState)},e.$$.update=()=>{32&e.$$.dirty&&(history.scrollRestoration=l?"manual":"auto")},[i,c,u,s,a,l,function(t){L(e,t)},function(t){L(e,t)}]}class he extends te{constructor(e){super(),ee(this,e,pe,ie,r,{routes:3,prefix:4,restoreScrollState:5})}}function ve(t){let n,s,a,l,r,o;return{c(){n=m("span"),s=d("svg"),a=d("use"),w(a,"xlink:href",l="/icons/feather-sprite.svg#"+t[7]),$(s,"class",r="icon-"+t[7]+" svelte-1iby9by"),$(s,"width",t[0]),$(s,"height",t[0]),$(s,"fill",t[1]),$(s,"stroke",o=t[3]?t[9]:t[2]),$(s,"stroke-width",t[4]),$(s,"stroke-linecap",t[5]),$(s,"stroke-linejoin",t[6]),x(s,"inactive",t[8])},m(e,t){c(e,n,t),i(n,s),i(s,a)},p(e,[t]){128&t&&l!==(l="/icons/feather-sprite.svg#"+e[7])&&w(a,"xlink:href",l),128&t&&r!==(r="icon-"+e[7]+" svelte-1iby9by")&&$(s,"class",r),1&t&&$(s,"width",e[0]),1&t&&$(s,"height",e[0]),2&t&&$(s,"fill",e[1]),524&t&&o!==(o=e[3]?e[9]:e[2])&&$(s,"stroke",o),16&t&&$(s,"stroke-width",e[4]),32&t&&$(s,"stroke-linecap",e[5]),64&t&&$(s,"stroke-linejoin",e[6]),384&t&&x(s,"inactive",e[8])},i:e,o:e,d(e){e&&u(n)}}}function $e(e,t,n){let{size:s="24"}=t,{fill:a="none"}=t,{color:l="var(--color)"}=t,{light:r=!1}=t,{width:o="2"}=t,{linecap:i="round"}=t,{linejoin:c="round"}=t,{name:u}=t,{inactive:g=!1}=t,{light_color:m="var(--color)"}=t;return e.$$set=e=>{"size"in e&&n(0,s=e.size),"fill"in e&&n(1,a=e.fill),"color"in e&&n(2,l=e.color),"light"in e&&n(3,r=e.light),"width"in e&&n(4,o=e.width),"linecap"in e&&n(5,i=e.linecap),"linejoin"in e&&n(6,c=e.linejoin),"name"in e&&n(7,u=e.name),"inactive"in e&&n(8,g=e.inactive),"light_color"in e&&n(9,m=e.light_color)},[s,a,l,r,o,i,c,u,g,m]}class be extends te{constructor(e){super(),ee(this,e,$e,ve,r,{size:0,fill:1,color:2,light:3,width:4,linecap:5,linejoin:6,name:7,inactive:8,light_color:9})}}function we(t){let n,s,a,l,r,g,d,f,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,R,B,V,X,ee,te,ne,se,ae,le,re,oe,ie,ce,ue,ge,de;return h=new be({props:{name:"code",size:"64"}}),S=new be({props:{name:"box",size:"64"}}),q=new be({props:{name:"sliders",size:"64"}}),{c(){n=m("hero"),n.innerHTML='<h1 class="svelte-1r7k7pk">fsck CSS</h1> \n<p>An experiment in cleaning up CSS and HTML with modern tools like <b>flexbox</b> and <b>grids</b>.</p>',s=p(),a=m("hr"),l=p(),r=m("section"),g=m("aside"),d=m("h3"),d.textContent="Remove Classes",f=p(),J(h.$$.fragment),v=p(),b=m("p"),b.innerHTML='Using a classless style like <a href="https://andybrewer.github.io/mvp/" class="svelte-1r7k7pk">MVP.css</a>, you\n      bring back CSS specificity to its original intent.',w=p(),y=m("aside"),x=m("h3"),x.textContent="Add Flexbox + Grids",k=p(),J(S.$$.fragment),j=p(),C=m("p"),C.innerHTML='Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" class="svelte-1r7k7pk">flexbox</a> and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" class="svelte-1r7k7pk">CSS grids</a> you can layout anything you want without structure divs.',T=p(),z=m("aside"),L=m("h3"),L.textContent="Modify with Variables",A=p(),J(q.$$.fragment),F=p(),M=m("p"),M.textContent="Using CSS variables you can replace many uses of classes and ids, avoiding most specificity\n      issues. Try the dark mode button below.",H=p(),I=m("rationale"),E=m("section"),E.innerHTML="<h1>Cleaner CSS</h1>",P=p(),_=m("p"),_.innerHTML="This website is nothing more than a set of small demos for the idea of\n  using flexbox and grids to clean up and simplify CSS. Most everything else\n  about CSS stays.  Filters, transforms, attributes, and everything that\n  applies to the visual display of the components of a design.  What gets\n  removed is <b>div</b> heavy, class heavy, not-semantic-at-all layout\n  systems cluttering the real information available through simple HTML\n  tags.",N=p(),O=m("p"),O.textContent="In short, if you're writing this:",D=p(),W=m("section"),W.innerHTML="<aside><pre>&lt;div class=&quot;grid col-1&quot;&gt;\n  &lt;div class=&quot;card&quot;&gt;\n  ...\n  &lt;/div&gt;\n&lt;/div&gt;</pre></aside>",G=p(),U=m("p"),U.textContent="You could write this if you use flexbox, grids, and variables:",R=p(),B=m("section"),B.innerHTML="<aside><pre>&lt;card&gt;\n  ...\n&lt;/card&gt;</pre></aside>",V=p(),X=m("hr"),ee=p(),te=m("section"),ne=m("p"),ne.innerHTML='I demonstrate the idea with a series of copies of existing websites and other layout problems \n    people frequently encounter.  If you have a suggested layout challenge for me, then tell me on Twitter <a href="https://twitter.com/lzsthw">@lzsthw</a> and I&#39;ll give it a shot.',se=p(),ae=m("a"),ae.innerHTML='<button id="demo-link" class="svelte-1r7k7pk">View The Demos</button>',re=p(),oe=m("hr"),ie=p(),ce=m("section"),ce.innerHTML='<h2>Version 0.1 Notice</h2> \n\n<quote class="svelte-1r7k7pk">This website is a learning project by Zed A. Shaw, the author of many courses at <a href="https://learncodethehardway.org">Learn Code the Hard Way</a> and will hopefully result in a good CSS component to <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a>.  If you find flaws in the reasoning or have suggestions for how to do it better, contact me <a href="https://twitter.com/lzsthw">@lzsthw on Twitter</a> and get a special thank you in the credits of this site and the course.</quote>',$(n,"class","svelte-1r7k7pk"),$(g,"class","svelte-1r7k7pk"),$(y,"class","svelte-1r7k7pk"),$(ae,"href","/demos"),$(I,"class","svelte-1r7k7pk")},m(e,t){c(e,n,t),c(e,s,t),c(e,a,t),c(e,l,t),c(e,r,t),i(r,g),i(g,d),i(g,f),K(h,g,null),i(g,v),i(g,b),i(r,w),i(r,y),i(y,x),i(y,k),K(S,y,null),i(y,j),i(y,C),i(r,T),i(r,z),i(z,L),i(z,A),K(q,z,null),i(z,F),i(z,M),c(e,H,t),c(e,I,t),i(I,E),i(I,P),i(I,_),i(I,N),i(I,O),i(I,D),i(I,W),i(I,G),i(I,U),i(I,R),i(I,B),i(I,V),i(I,X),i(I,ee),i(I,te),i(te,ne),i(te,se),i(te,ae),i(I,re),i(I,oe),i(I,ie),i(I,ce),ue=!0,ge||(de=o(le=me.call(null,ae)),ge=!0)},p:e,i(e){ue||(Y(h.$$.fragment,e),Y(S.$$.fragment,e),Y(q.$$.fragment,e),ue=!0)},o(e){Z(h.$$.fragment,e),Z(S.$$.fragment,e),Z(q.$$.fragment,e),ue=!1},d(e){e&&u(n),e&&u(s),e&&u(a),e&&u(l),e&&u(r),Q(h),Q(S),Q(q),e&&u(H),e&&u(I),ge=!1,de()}}}var ye=function({width:e=300,height:t=150,text:n=`${e}×${t}`,fontFamily:s="sans-serif",fontWeight:a="bold",fontSize:l=Math.floor(.2*Math.min(e,t)),dy:r=.35*l,bgColor:o="#ddd",textColor:i="rgba(0,0,0,0.5)",dataUri:c=!0,charset:u="UTF-8"}={}){const g=`<svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${t}" viewBox="0 0 ${e} ${t}">\n    <rect fill="${o}" width="${e}" height="${t}"/>\n    <text fill="${i}" font-family="${s}" font-size="${l}" dy="${r}" font-weight="${a}" x="50%" y="50%" text-anchor="middle">${n}</text>\n  </svg>`.replace(/[\t\n\r]/gim,"").replace(/\s\s+/g," ").replace(/'/gim,"\\i");if(c){return`data:image/svg+xml;charset=${u},${encodeURIComponent(g).replace(/\(/g,"%28").replace(/\)/g,"%29")}`}return g};const xe={bgColor:"#ccc",textColor:"#888"},ke=(e,t)=>ye({...xe,width:e,height:t});function Se(t){let n,s,a,l,r,g,d,f,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M;return w=new be({props:{name:"grid",color:"#000"}}),{c(){n=m("content"),s=m("header"),a=m("nav"),l=m("nav-left"),l.innerHTML='<a class="svelte-1xw0xeo">About</a> \n        <a class="svelte-1xw0xeo">Store</a>',r=p(),g=m("ul"),d=m("li"),d.textContent="Gmail",f=p(),h=m("li"),h.textContent="Image",v=p(),b=m("li"),J(w.$$.fragment),y=p(),x=m("li"),x.innerHTML='<button class="svelte-1xw0xeo">Sign In</button>',k=p(),S=m("figure"),j=m("a"),C=m("img"),L=p(),A=m("search"),A.innerHTML='<input type="text" class="svelte-1xw0xeo"/> \n    <buttons class="svelte-1xw0xeo"><button class="svelte-1xw0xeo">Google Search</button> \n      <button class="svelte-1xw0xeo">I&#39;m Feeling Lucky</button></buttons>',$(a,"class","svelte-1xw0xeo"),$(s,"class","svelte-1xw0xeo"),C.src!==(T=ke(500,200))&&$(C,"src",T),$(j,"href","/demos/google"),$(j,"class","svelte-1xw0xeo"),$(S,"class","svelte-1xw0xeo"),$(A,"class","svelte-1xw0xeo"),$(n,"class","svelte-1xw0xeo")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(a,r),i(a,g),i(g,d),i(g,f),i(g,h),i(g,v),i(g,b),K(w,b,null),i(g,y),i(g,x),i(n,k),i(n,S),i(S,j),i(j,C),i(n,L),i(n,A),q=!0,F||(M=o(z=me.call(null,j)),F=!0)},p:e,i(e){q||(Y(w.$$.fragment,e),q=!0)},o(e){Z(w.$$.fragment,e),q=!1},d(e){e&&u(n),Q(w),F=!1,M()}}}class je extends te{constructor(e){super(),ee(this,e,null,Se,r,{})}}function Ce(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_;return o=new be({props:{name:"arrow-left"}}),z=new be({props:{name:"map",size:"24",color:"var(--color-bg-secondary)"}}),A=new be({props:{name:"link",size:"24",color:"var(--color-bg-secondary)"}}),H=new be({props:{name:"calendar",size:"24",color:"var(--color-bg-secondary)"}}),{c(){n=m("content"),s=m("middle"),a=m("header"),l=m("nav"),r=m("back"),J(o.$$.fragment),g=p(),d=m("name"),d.innerHTML='<h4 class="svelte-1prpjq7">Zed A. Shaw, Writer</h4> \n          <span class="svelte-1prpjq7">7,754 Tweets</span>',h=p(),v=m("images"),v.innerHTML='<figure id="background" class="svelte-1prpjq7"><img alt="Profile background" src="/header_pic.jpg" class="svelte-1prpjq7"/></figure> \n\n      <figure id="avatar" class="svelte-1prpjq7"><img alt="Profile picture" src="/profile_pic.jpg" class="svelte-1prpjq7"/> \n        <button id="follow" class="svelte-1prpjq7">Follow</button></figure>',b=p(),w=m("profile"),y=m("h3"),y.textContent="Zed A. Shaw, Writer",x=p(),k=m("p"),k.textContent="@lzsthw",S=p(),j=m("p"),j.textContent="The author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.",C=p(),T=m("p"),J(z.$$.fragment),L=f(" Some Place, KY "),J(A.$$.fragment),q=p(),F=m("a"),F.textContent="learnjsthehardway.org",M=p(),J(H.$$.fragment),I=f(" Joined Jan, 1999."),E=p(),P=m("p"),P.innerHTML="<b>167</b> Following <b>10.4k</b> Followers",$(r,"class","svelte-1prpjq7"),$(l,"class","svelte-1prpjq7"),$(a,"class","svelte-1prpjq7"),$(v,"class","svelte-1prpjq7"),$(w,"class","svelte-1prpjq7"),$(s,"class","svelte-1prpjq7"),$(n,"class","svelte-1prpjq7")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(l,r),K(o,r,null),i(l,g),i(l,d),i(s,h),i(s,v),i(s,b),i(s,w),i(w,y),i(w,x),i(w,k),i(w,S),i(w,j),i(w,C),i(w,T),K(z,T,null),i(T,L),K(A,T,null),i(T,q),i(T,F),i(T,M),K(H,T,null),i(T,I),i(w,E),i(w,P),_=!0},p:e,i(e){_||(Y(o.$$.fragment,e),Y(z.$$.fragment,e),Y(A.$$.fragment,e),Y(H.$$.fragment,e),_=!0)},o(e){Z(o.$$.fragment,e),Z(z.$$.fragment,e),Z(A.$$.fragment,e),Z(H.$$.fragment,e),_=!1},d(e){e&&u(n),Q(o),Q(z),Q(A),Q(H)}}}class Te extends te{constructor(e){super(),ee(this,e,null,Ce,r,{})}}function ze(t){let n,s,a,l,r,o,g,d,h,v,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,R,B,V,X,ee,te,ne,se,ae,le,re,oe,ie,ce,ue,ge,me,de,fe,pe;return o=new be({props:{name:"menu"}}),d=new be({props:{name:"youtube"}}),j=new be({props:{name:"camera",color:"#000"}}),z=new be({props:{name:"more-vertical",color:"#000"}}),q=new be({props:{name:"grid",color:"#000"}}),I=new be({props:{name:"user"}}),re=new be({props:{name:"thumbs-up",color:"#999"}}),ie=new be({props:{name:"thumbs-down",color:"#999"}}),ue=new be({props:{name:"corner-up-right",color:"#999"}}),me=new be({props:{name:"menu",color:"#999"}}),fe=new be({props:{name:"vertical-more"}}),{c(){n=m("content"),s=m("header"),a=m("nav"),l=m("nav-left"),r=m("a"),J(o.$$.fragment),g=p(),J(d.$$.fragment),h=p(),v=m("logo"),v.textContent="Youtube",w=p(),y=m("input"),x=p(),k=m("ul"),S=m("li"),J(j.$$.fragment),C=p(),T=m("li"),J(z.$$.fragment),L=p(),A=m("li"),J(q.$$.fragment),F=p(),M=m("li"),H=m("button"),J(I.$$.fragment),E=f(" Sign In"),P=p(),_=m("main"),N=m("left"),O=m("figure"),D=m("img"),G=p(),U=m("figcaption"),R=m("a"),R.textContent="#tag",B=p(),V=m("a"),V.textContent="#anothertag",X=p(),ee=m("p"),ee.textContent="Title And Stuff",te=p(),ne=m("video-actions"),se=m("likes"),se.textContent="Stats Stats",ae=p(),le=m("video-buttons"),J(re.$$.fragment),oe=f(" 1.1K\n              "),J(ie.$$.fragment),ce=f(" 22\n              "),J(ue.$$.fragment),ge=f(" SHARE\n              "),J(me.$$.fragment),de=f(" SAVE\n              "),J(fe.$$.fragment),$(v,"class","svelte-oxwxiv"),$(y,"id","search"),$(y,"placeholder","Search"),$(y,"name","search"),$(y,"class","svelte-oxwxiv"),$(H,"class","svelte-oxwxiv"),$(a,"class","svelte-oxwxiv"),$(s,"class","svelte-oxwxiv"),D.src!==(W=ke(800,450))&&$(D,"src",W),$(R,"class","svelte-oxwxiv"),$(V,"class","svelte-oxwxiv"),$(ee,"class","svelte-oxwxiv"),b(ne,"class","svelte-oxwxiv"),$(U,"class","svelte-oxwxiv"),$(_,"class","svelte-oxwxiv"),$(n,"class","svelte-oxwxiv")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(l,r),K(o,r,null),i(r,g),K(d,r,null),i(r,h),i(r,v),i(a,w),i(a,y),i(a,x),i(a,k),i(k,S),K(j,S,null),i(k,C),i(k,T),K(z,T,null),i(k,L),i(k,A),K(q,A,null),i(k,F),i(k,M),i(M,H),K(I,H,null),i(H,E),i(n,P),i(n,_),i(_,N),i(N,O),i(O,D),i(O,G),i(O,U),i(U,R),i(U,B),i(U,V),i(U,X),i(U,ee),i(U,te),i(U,ne),i(ne,se),i(ne,ae),i(ne,le),K(re,le,null),i(le,oe),K(ie,le,null),i(le,ce),K(ue,le,null),i(le,ge),K(me,le,null),i(le,de),K(fe,le,null),pe=!0},p:e,i(e){pe||(Y(o.$$.fragment,e),Y(d.$$.fragment,e),Y(j.$$.fragment,e),Y(z.$$.fragment,e),Y(q.$$.fragment,e),Y(I.$$.fragment,e),Y(re.$$.fragment,e),Y(ie.$$.fragment,e),Y(ue.$$.fragment,e),Y(me.$$.fragment,e),Y(fe.$$.fragment,e),pe=!0)},o(e){Z(o.$$.fragment,e),Z(d.$$.fragment,e),Z(j.$$.fragment,e),Z(z.$$.fragment,e),Z(q.$$.fragment,e),Z(I.$$.fragment,e),Z(re.$$.fragment,e),Z(ie.$$.fragment,e),Z(ue.$$.fragment,e),Z(me.$$.fragment,e),Z(fe.$$.fragment,e),pe=!1},d(e){e&&u(n),Q(o),Q(d),Q(j),Q(z),Q(q),Q(I),Q(re),Q(ie),Q(ue),Q(me),Q(fe)}}}function Le(e){return[]}class Ae extends te{constructor(e){super(),ee(this,e,Le,ze,r,{})}}function qe(e,t,n){const s=e.slice();return s[1]=t[n],s}function Fe(t){let n,s,a,l;return{c(){n=m("figure"),s=m("img"),l=p(),$(s,"alt","Stock photo"),s.src!==(a=ke(82,82))&&$(s,"src",a)},m(e,t){c(e,n,t),i(n,s),i(n,l)},p:e,d(e){e&&u(n)}}}function Me(e){let t,n,s,a,l,r,o,d,h,v,b,w,y,x,k,S,j,C,T,z;l=new be({props:{name:"instagram",color:"var(--color-text)"}});let L=e[0],A=[];for(let t=0;t<L.length;t+=1)A[t]=Fe(qe(e,L,t));return{c(){t=m("content"),n=m("header"),s=m("nav"),a=m("b"),J(l.$$.fragment),r=f(" Instagram"),o=p(),d=m("input"),h=p(),v=m("ul"),v.innerHTML='<li><button class="svelte-oov5yx">Log In</button></li> \n        <li><a class="svelte-oov5yx">Sign Up</a></li>',b=p(),w=m("profile"),y=m("figure"),x=m("img"),S=p(),j=m("info"),j.innerHTML='<p class="svelte-oov5yx"><b>zedshaw</b>  <button class="svelte-oov5yx">follow</button></p> \n\n      <p class="svelte-oov5yx"><b>280</b> posts <b>4,695 followers</b>  <b>1,778 following</b></p> \n\n      <p class="svelte-oov5yx"><b>Zed A. Shaw</b></p> \n      <p class="svelte-oov5yx">Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:<br/> \n        <a href="www.twitch.tv/zedashaw" class="svelte-oov5yx">www.twitch.tv/zedashaw</a></p>',C=p(),T=m("pins");for(let e=0;e<A.length;e+=1)A[e].c();$(d,"placeholder","Search"),$(s,"class","svelte-oov5yx"),$(n,"class","svelte-oov5yx"),$(x,"alt","Zed's Face"),x.src!==(k=ke(256,256))&&$(x,"src",k),$(y,"class","svelte-oov5yx"),$(j,"class","svelte-oov5yx"),$(w,"class","svelte-oov5yx"),$(T,"class","svelte-oov5yx"),$(t,"class","svelte-oov5yx")},m(e,u){c(e,t,u),i(t,n),i(n,s),i(s,a),K(l,a,null),i(a,r),i(s,o),i(s,d),i(s,h),i(s,v),i(t,b),i(t,w),i(w,y),i(y,x),i(w,S),i(w,j),i(t,C),i(t,T);for(let e=0;e<A.length;e+=1)A[e].m(T,null);z=!0},p(e,[t]){if(0&t){let n;for(L=e[0],n=0;n<L.length;n+=1){const s=qe(e,L,n);A[n]?A[n].p(s,t):(A[n]=Fe(),A[n].c(),A[n].m(T,null))}for(;n<A.length;n+=1)A[n].d(1);A.length=L.length}},i(e){z||(Y(l.$$.fragment,e),z=!0)},o(e){Z(l.$$.fragment,e),z=!1},d(e){e&&u(t),Q(l),g(A,e)}}}function He(e){return[[1,2,3,4]]}class Ie extends te{constructor(e){super(),ee(this,e,He,Me,r,{})}}function Ee(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q;return o=new be({props:{name:"pinterest",color:"var(--color)"}}),{c(){n=m("content"),s=m("header"),a=m("nav"),l=m("left"),r=m("logo"),J(o.$$.fragment),g=f(" Pinterest"),d=p(),h=m("a"),h.textContent="Today",v=p(),b=m("a"),b.textContent="Explore",w=p(),y=m("input"),x=p(),k=m("ul"),k.innerHTML='<li class="svelte-1w7ltga"><button class="svelte-1w7ltga">Log In</button></li> \n        <li class="svelte-1w7ltga"><button id="signup" class="svelte-1w7ltga">Sign Up</button></li>',S=p(),j=m("profile"),C=m("info"),C.innerHTML='<h1 class="svelte-1w7ltga">Vincent van Gogh</h1> \n  <p class="svelte-1w7ltga">Collection by A Person</p> \n  <p class="svelte-1w7ltga"><b class="svelte-1w7ltga">420</b> Pins • <b class="svelte-1w7ltga">3.59k</b> Followers</p> \n  <p class="svelte-1w7ltga">&quot;I dream my painting and I paint my dream.&quot; ~ Vincent van Gogh</p>',T=p(),z=m("figure"),L=m("img"),$(r,"class","svelte-1w7ltga"),$(h,"class","svelte-1w7ltga"),$(b,"class","svelte-1w7ltga"),$(l,"class","svelte-1w7ltga"),$(y,"placeholder","Search"),$(y,"class","svelte-1w7ltga"),$(k,"class","svelte-1w7ltga"),$(a,"class","svelte-1w7ltga"),$(s,"class","svelte-1w7ltga"),$(C,"class","svelte-1w7ltga"),$(L,"alt","Zed's Face"),L.src!==(A=ke(128,128))&&$(L,"src",A),$(L,"class","svelte-1w7ltga"),$(z,"class","svelte-1w7ltga"),$(j,"class","svelte-1w7ltga"),$(n,"class","svelte-1w7ltga")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(l,r),K(o,r,null),i(r,g),i(l,d),i(l,h),i(l,v),i(l,b),i(a,w),i(a,y),i(a,x),i(a,k),i(n,S),i(n,j),i(j,C),i(j,T),i(j,z),i(z,L),q=!0},p:e,i(e){q||(Y(o.$$.fragment,e),q=!0)},o(e){Z(o.$$.fragment,e),q=!1},d(e){e&&u(n),Q(o)}}}class Pe extends te{constructor(e){super(),ee(this,e,null,Ee,r,{})}}function _e(t){let n;return{c(){n=m("content"),n.innerHTML='<spacer></spacer> \n  <form><header>Login</header> \n    <label for="username">Username</label> \n    <input type="text" id="username" name="username" size="32" placeholder="Username"/> \n    <label for="password">Password</label> \n    <input type="password" id="password" name="password" size="32" placeholder="Password"/> \n    <br/> \n    <button type="submit">Login</button></form> \n  <spacer></spacer>',$(n,"class","svelte-t7gl8c")},m(e,t){c(e,n,t)},p:e,i:e,o:e,d(e){e&&u(n)}}}class Ne extends te{constructor(e){super(),ee(this,e,null,_e,r,{})}}function Oe(t){let n,s,a,l,r,o,g,d,f,h,v,b,w,y,x;return v=new be({props:{name:"check-circle",color:"var(--color-bg)",size:"24"}}),y=new be({props:{name:"x-circle",color:"var(--color-bg)",size:"24"}}),{c(){n=m("content"),s=m("tile"),a=m("left"),l=m("img"),o=p(),g=m("middle"),g.innerHTML='<h4 class="svelte-fwzpwr">Tile Example</h4> \n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',d=p(),f=m("right"),h=m("button"),J(v.$$.fragment),b=p(),w=m("button"),J(y.$$.fragment),l.src!==(r=ke(48,48))&&$(l,"src",r),$(g,"class","svelte-fwzpwr"),$(h,"class","svelte-fwzpwr"),$(w,"class","svelte-fwzpwr"),$(f,"class","svelte-fwzpwr"),$(s,"class","svelte-fwzpwr"),$(n,"class","svelte-fwzpwr")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(s,o),i(s,g),i(s,d),i(s,f),i(f,h),K(v,h,null),i(f,b),i(f,w),K(y,w,null),x=!0},p:e,i(e){x||(Y(v.$$.fragment,e),Y(y.$$.fragment,e),x=!0)},o(e){Z(v.$$.fragment,e),Z(y.$$.fragment,e),x=!1},d(e){e&&u(n),Q(v),Q(y)}}}class De extends te{constructor(e){super(),ee(this,e,null,Oe,r,{})}}var We="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var Ge,Ue,Re=(function(e){var t=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,n=0,s={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function e(t,n){var a,l;switch(n=n||{},s.util.type(t)){case"Object":if(l=s.util.objId(t),n[l])return n[l];for(var r in a={},n[l]=a,t)t.hasOwnProperty(r)&&(a[r]=e(t[r],n));return a;case"Array":return l=s.util.objId(t),n[l]?n[l]:(a=[],n[l]=a,t.forEach((function(t,s){a[s]=e(t,n)})),a);default:return t}},getLanguage:function(e){for(;e&&!t.test(e.className);)e=e.parentElement;return e?(e.className.match(t)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(s){var e=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(s.stack)||[])[1];if(e){var t=document.getElementsByTagName("script");for(var n in t)if(t[n].src==e)return t[n]}return null}},isActive:function(e,t,n){for(var s="no-"+t;e;){var a=e.classList;if(a.contains(t))return!0;if(a.contains(s))return!1;e=e.parentElement}return!!n}},languages:{extend:function(e,t){var n=s.util.clone(s.languages[e]);for(var a in t)n[a]=t[a];return n},insertBefore:function(e,t,n,a){var l=(a=a||s.languages)[e],r={};for(var o in l)if(l.hasOwnProperty(o)){if(o==t)for(var i in n)n.hasOwnProperty(i)&&(r[i]=n[i]);n.hasOwnProperty(o)||(r[o]=l[o])}var c=a[e];return a[e]=r,s.languages.DFS(s.languages,(function(t,n){n===c&&t!=e&&(this[t]=r)})),r},DFS:function e(t,n,a,l){l=l||{};var r=s.util.objId;for(var o in t)if(t.hasOwnProperty(o)){n.call(t,o,t[o],a||o);var i=t[o],c=s.util.type(i);"Object"!==c||l[r(i)]?"Array"!==c||l[r(i)]||(l[r(i)]=!0,e(i,n,o,l)):(l[r(i)]=!0,e(i,n,null,l))}}},plugins:{},highlightAll:function(e,t){s.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,n){var a={callback:n,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};s.hooks.run("before-highlightall",a),a.elements=Array.prototype.slice.apply(a.container.querySelectorAll(a.selector)),s.hooks.run("before-all-elements-highlight",a);for(var l,r=0;l=a.elements[r++];)s.highlightElement(l,!0===t,a.callback)},highlightElement:function(n,a,l){var r=s.util.getLanguage(n),o=s.languages[r];n.className=n.className.replace(t,"").replace(/\s+/g," ")+" language-"+r;var i=n.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(t,"").replace(/\s+/g," ")+" language-"+r);var c={element:n,language:r,grammar:o,code:n.textContent};function u(e){c.highlightedCode=e,s.hooks.run("before-insert",c),c.element.innerHTML=c.highlightedCode,s.hooks.run("after-highlight",c),s.hooks.run("complete",c),l&&l.call(c.element)}if(s.hooks.run("before-sanity-check",c),!c.code)return s.hooks.run("complete",c),void(l&&l.call(c.element));if(s.hooks.run("before-highlight",c),c.grammar)if(a&&e.Worker){var g=new Worker(s.filename);g.onmessage=function(e){u(e.data)},g.postMessage(JSON.stringify({language:c.language,code:c.code,immediateClose:!0}))}else u(s.highlight(c.code,c.grammar,c.language));else u(s.util.encode(c.code))},highlight:function(e,t,n){var l={code:e,grammar:t,language:n};return s.hooks.run("before-tokenize",l),l.tokens=s.tokenize(l.code,l.grammar),s.hooks.run("after-tokenize",l),a.stringify(s.util.encode(l.tokens),l.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var s in n)t[s]=n[s];delete t.rest}var a=new r;return o(a,a.head,e),l(e,a,t,a.head,0),function(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}(a)},hooks:{all:{},add:function(e,t){var n=s.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=s.hooks.all[e];if(n&&n.length)for(var a,l=0;a=n[l++];)a(t)}},Token:a};function a(e,t,n,s){this.type=e,this.content=t,this.alias=n,this.length=0|(s||"").length}function l(e,t,n,r,c,u){for(var g in n)if(n.hasOwnProperty(g)&&n[g]){var m=n[g];m=Array.isArray(m)?m:[m];for(var d=0;d<m.length;++d){if(u&&u.cause==g+","+d)return;var f=m[d],p=f.inside,h=!!f.lookbehind,v=!!f.greedy,$=0,b=f.alias;if(v&&!f.pattern.global){var w=f.pattern.toString().match(/[imsuy]*$/)[0];f.pattern=RegExp(f.pattern.source,w+"g")}for(var y=f.pattern||f,x=r.next,k=c;x!==t.tail&&!(u&&k>=u.reach);k+=x.value.length,x=x.next){var S=x.value;if(t.length>e.length)return;if(!(S instanceof a)){var j=1;if(v&&x!=t.tail.prev){if(y.lastIndex=k,!(A=y.exec(e)))break;var C=A.index+(h&&A[1]?A[1].length:0),T=A.index+A[0].length,z=k;for(z+=x.value.length;C>=z;)z+=(x=x.next).value.length;if(k=z-=x.value.length,x.value instanceof a)continue;for(var L=x;L!==t.tail&&(z<T||"string"==typeof L.value);L=L.next)j++,z+=L.value.length;j--,S=e.slice(k,z),A.index-=k}else{y.lastIndex=0;var A=y.exec(S)}if(A){h&&($=A[1]?A[1].length:0),C=A.index+$;var q=A[0].slice($),F=(T=C+q.length,S.slice(0,C)),M=S.slice(T),H=k+S.length;u&&H>u.reach&&(u.reach=H);var I=x.prev;F&&(I=o(t,I,F),k+=F.length),i(t,I,j),x=o(t,I,new a(g,p?s.tokenize(q,p):q,b,q)),M&&o(t,x,M),j>1&&l(e,t,n,x.prev,k,{cause:g+","+d,reach:H})}}}}}}function r(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function o(e,t,n){var s=t.next,a={value:n,prev:t,next:s};return t.next=a,s.prev=a,e.length++,a}function i(e,t,n){for(var s=t.next,a=0;a<n&&s!==e.tail;a++)s=s.next;t.next=s,s.prev=t,e.length-=a}if(e.Prism=s,a.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var a="";return t.forEach((function(t){a+=e(t,n)})),a}var l={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},r=t.alias;r&&(Array.isArray(r)?Array.prototype.push.apply(l.classes,r):l.classes.push(r)),s.hooks.run("wrap",l);var o="";for(var i in l.attributes)o+=" "+i+'="'+(l.attributes[i]||"").replace(/"/g,"&quot;")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+o+">"+l.content+"</"+l.tag+">"},!e.document)return e.addEventListener?(s.disableWorkerMessageHandler||e.addEventListener("message",(function(t){var n=JSON.parse(t.data),a=n.language,l=n.code,r=n.immediateClose;e.postMessage(s.highlight(l,s.languages[a],a)),r&&e.close()}),!1),s):s;var c=s.util.currentScript();function u(){s.manual||s.highlightAll()}if(c&&(s.filename=c.src,c.hasAttribute("data-manual")&&(s.manual=!0)),!s.manual){var g=document.readyState;"loading"===g||"interactive"===g&&c&&c.defer?document.addEventListener("DOMContentLoaded",u):window.requestAnimationFrame?window.requestAnimationFrame(u):window.setTimeout(u,16)}return s}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});
/**
     * Prism: Lightweight, robust, elegant syntax highlighting
     *
     * @license MIT <https://opensource.org/licenses/MIT>
     * @author Lea Verou <https://lea.verou.me>
     * @namespace
     * @public
     */e.exports&&(e.exports=t),void 0!==We&&(We.Prism=t),t.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},t.languages.markup.tag.inside["attr-value"].inside.entity=t.languages.markup.entity,t.languages.markup.doctype.inside["internal-subset"].inside=t.languages.markup,t.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(t.languages.markup.tag,"addInlined",{value:function(e,n){var s={};s["language-"+n]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:t.languages[n]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var a={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};a["language-"+n]={pattern:/[\s\S]+/,inside:t.languages[n]};var l={};l[e]={pattern:RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:a},t.languages.insertBefore("markup","cdata",l)}}),t.languages.html=t.languages.markup,t.languages.mathml=t.languages.markup,t.languages.svg=t.languages.markup,t.languages.xml=t.languages.extend("markup",{}),t.languages.ssml=t.languages.xml,t.languages.atom=t.languages.xml,t.languages.rss=t.languages.xml,function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+t.source+")*?(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:n.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:e.languages.css}},alias:"language-css"}},n.tag))}(t),t.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},t.languages.javascript=t.languages.extend("clike",{"class-name":[t.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),t.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,t.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:t.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:t.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:t.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:t.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:t.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),t.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:t.languages.javascript}},string:/[\s\S]+/}}}),t.languages.markup&&t.languages.markup.tag.addInlined("script","javascript"),t.languages.js=t.languages.javascript,function(){if("undefined"!=typeof self&&self.Prism&&self.document){var e=window.Prism,t={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},n="data-src-status",s="loading",a="loaded",l='pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])',r=/\blang(?:uage)?-([\w-]+)\b/i;e.hooks.add("before-highlightall",(function(e){e.selector+=", "+l})),e.hooks.add("before-sanity-check",(function(r){var o=r.element;if(o.matches(l)){r.code="",o.setAttribute(n,s);var c=o.appendChild(document.createElement("CODE"));c.textContent="Loading…";var u=o.getAttribute("data-src"),g=r.language;if("none"===g){var m=(/\.(\w+)$/.exec(u)||[,"none"])[1];g=t[m]||m}i(c,g),i(o,g);var d=e.plugins.autoloader;d&&d.loadLanguages(g);var f=new XMLHttpRequest;f.open("GET",u,!0),f.onreadystatechange=function(){var t,s;4==f.readyState&&(f.status<400&&f.responseText?(o.setAttribute(n,a),c.textContent=f.responseText,e.highlightElement(c)):(o.setAttribute(n,"failed"),f.status>=400?c.textContent=(t=f.status,s=f.statusText,"✖ Error "+t+" while fetching file: "+s):c.textContent="✖ Error: File does not exist or is empty"))},f.send(null)}})),e.plugins.fileHighlight={highlight:function(t){for(var n,s=(t||document).querySelectorAll(l),a=0;n=s[a++];)e.highlightElement(n)}};var o=!1;e.fileHighlight=function(){o||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),o=!0),e.plugins.fileHighlight.highlight.apply(this,arguments)}}function i(e,t){var n=e.className;n=n.replace(r," ")+" language-"+t,e.className=n.replace(/\s+/g," ").trim()}}()}(Ue={path:Ge,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&Ue.path)}},Ue.exports),Ue.exports);const Be="(if|else if|await|then|catch|each|html|debug)";function Ye(e){let t,n,s,a,l,r;return{c(){t=m("hr"),n=p(),s=m("h2"),s.textContent="Notes",a=p(),r=h(),l=new k(r)},m(o,i){c(o,t,i),c(o,n,i),c(o,s,i),c(o,a,i),l.m(e[3],o,i),c(o,r,i)},p(e,t){8&t&&l.p(e[3])},d(e){e&&u(t),e&&u(n),e&&u(s),e&&u(a),e&&u(r),e&&l.d()}}}function Ze(t){let n,s,a,l,r,o,g,d,v,w,x,k,S,j,C,T,z=t[0]&&Ye(t);return{c(){n=m("code-view"),s=m("css-view"),a=m("h1"),a.textContent="CSS",l=p(),r=m("pre"),o=m("code"),g=f(t[1]),d=p(),v=m("html-view"),w=m("h1"),w.textContent="HTML",x=p(),k=m("pre"),S=m("code"),j=f(t[2]),C=p(),z&&z.c(),T=h(),$(o,"class","language-svelte"),b(s,"class","svelte-1job9fs"),$(S,"class","language-svelte"),b(v,"class","svelte-1job9fs"),b(n,"class","svelte-1job9fs")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(s,l),i(s,r),i(r,o),i(o,g),i(n,d),i(n,v),i(v,w),i(v,x),i(v,k),i(k,S),i(S,j),c(e,C,t),z&&z.m(e,t),c(e,T,t)},p(e,[t]){2&t&&y(g,e[1]),4&t&&y(j,e[2]),e[0]?z?z.p(e,t):(z=Ye(e),z.c(),z.m(T.parentNode,T)):z&&(z.d(1),z=null)},i:e,o:e,d(e){e&&u(n),e&&u(C),z&&z.d(e),e&&u(T)}}}function Ve(e,t,n){let{source:s=""}=t,a="",l="",r="",{notes:o=""}=t;return T((()=>{fetch(`${s}.css`).then((e=>e.text())).then((e=>n(1,a=e))),fetch(`${s}.html`).then((e=>e.text())).then((e=>n(2,l=e))).then((()=>Re.highlightAll())),o&&fetch(`${s}.notes.html`).then((e=>e.text())).then((e=>n(3,r=e))).then((()=>Re.highlightAll()))})),e.$$set=e=>{"source"in e&&n(4,s=e.source),"notes"in e&&n(0,o=e.notes)},[o,a,l,r,s]}Prism.languages.svelte=Prism.languages.extend("markup",{each:{pattern:new RegExp("{[#/]each(?:(?:\\{(?:(?:\\{(?:[^{}])*\\})|(?:[^{}]))*\\})|(?:[^{}]))*}"),inside:{"language-javascript":[{pattern:/(as[\s\S]*)\([\s\S]*\)(?=\s*\})/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(as[\s]*)[\s\S]*(?=\s*)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(#each[\s]*)[\s\S]*(?=as)/,lookbehind:!0,inside:Prism.languages.javascript}],keyword:/[#/]each|as/,punctuation:/{|}/}},block:{pattern:new RegExp("{[#:/@]/s"+Be+"(?:(?:\\{(?:(?:\\{(?:[^{}])*\\})|(?:[^{}]))*\\})|(?:[^{}]))*}"),inside:{punctuation:/^{|}$/,keyword:[new RegExp("[#:/@]"+Be+"( )*"),/as/,/then/],"language-javascript":{pattern:/[\s\S]*/,inside:Prism.languages.javascript}}},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?:"[^"]*"|'[^']*'|{[\s\S]+?}(?=[\s/>])))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"language-javascript":{pattern:/\{(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/,inside:Prism.languages.javascript},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}],"language-javascript":{pattern:/{[\s\S]+}/,inside:Prism.languages.javascript}}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},"language-javascript":{pattern:/\{(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/,lookbehind:!0,inside:Prism.languages.javascript}}),Prism.languages.svelte.tag.inside["attr-value"].inside.entity=Prism.languages.svelte.entity,Prism.hooks.add("wrap",(e=>{"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.svelte.tag,"addInlined",{value:function(e,t){const n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;const s={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};s["language-"+t]={pattern:/[\s\S]+/,inside:Prism.languages[t]};const a={};a[e]={pattern:RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g,e),"i"),lookbehind:!0,greedy:!0,inside:s},Prism.languages.insertBefore("svelte","cdata",a)}}),Prism.languages.svelte.tag.addInlined("style","css"),Prism.languages.svelte.tag.addInlined("script","javascript");class Xe extends te{constructor(e){super(),ee(this,e,Ve,Ze,r,{source:4,notes:0})}}function Je(t){let n,s,a,l,r,o,g,d,f,h,v,b,w,y,x;return v=new be({props:{name:"check-circle",color:"var(--color-bg)",size:"24"}}),y=new be({props:{name:"x-circle",color:"var(--color-bg)",size:"24"}}),{c(){n=m("content"),s=m("card"),a=m("top"),l=m("img"),o=p(),g=m("middle"),g.innerHTML='<h4 class="svelte-1rd3ni4">Card Example</h4> \n      <p>Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',d=p(),f=m("bottom"),h=m("button"),J(v.$$.fragment),b=p(),w=m("button"),J(y.$$.fragment),l.src!==(r=ke(480,270))&&$(l,"src",r),$(l,"class","svelte-1rd3ni4"),$(g,"class","svelte-1rd3ni4"),$(h,"class","svelte-1rd3ni4"),$(w,"class","svelte-1rd3ni4"),$(f,"class","svelte-1rd3ni4"),$(s,"class","svelte-1rd3ni4"),$(n,"class","svelte-1rd3ni4")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(s,o),i(s,g),i(s,d),i(s,f),i(f,h),K(v,h,null),i(f,b),i(f,w),K(y,w,null),x=!0},p:e,i(e){x||(Y(v.$$.fragment,e),Y(y.$$.fragment,e),x=!0)},o(e){Z(v.$$.fragment,e),Z(y.$$.fragment,e),x=!1},d(e){e&&u(n),Q(v),Q(y)}}}class Ke extends te{constructor(e){super(),ee(this,e,null,Je,r,{})}}function Qe(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k;return h=new be({props:{name:"x-circle",color:"var(--color-text)",size:"24"}}),y=new be({props:{name:"check-circle",color:"var(--color-bg)",size:"24"}}),{c(){n=m("content"),s=m("panel"),a=m("top"),a.innerHTML="<h1>Panel is a Card</h1>",l=p(),r=m("middle"),r.innerHTML="<h4>Panel Example</h4> \n      <p>Not sure what the big deal is with the difference between panels and cards\n        but I&#39;m doing all the things so here&#39;s a panel. Let&#39;s say, buttons on a panel\n        are different to demonstrate how to make a button strip.</p>",o=p(),g=m("bottom"),d=m("button"),J(h.$$.fragment),v=f(" CANCEL"),b=p(),w=m("button"),J(y.$$.fragment),x=f(" OK"),$(a,"class","svelte-1lajyim"),$(r,"class","svelte-1lajyim"),$(d,"id","cancel"),$(d,"class","svelte-1lajyim"),$(w,"class","svelte-1lajyim"),$(g,"class","svelte-1lajyim"),$(s,"class","svelte-1lajyim"),$(n,"class","svelte-1lajyim")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(s,l),i(s,r),i(s,o),i(s,g),i(g,d),K(h,d,null),i(d,v),i(g,b),i(g,w),K(y,w,null),i(w,x),k=!0},p:e,i(e){k||(Y(h.$$.fragment,e),Y(y.$$.fragment,e),k=!0)},o(e){Z(h.$$.fragment,e),Z(y.$$.fragment,e),k=!1},d(e){e&&u(n),Q(h),Q(y)}}}class et extends te{constructor(e){super(),ee(this,e,null,Qe,r,{})}}function tt(e,t,n){const s=e.slice();return s[3]=t[n],s[5]=n,s}function nt(e,t,n){const s=e.slice();return s[3]=t[n],s[5]=n,s}function st(e){let t,n,s,a,l=e[3].title+"";function r(){return e[2](e[5])}return{c(){t=m("a"),n=f(l),$(t,"class","svelte-j1ijok"),x(t,"active",e[3].active)},m(e,l){c(e,t,l),i(t,n),s||(a=v(t,"click",r),s=!0)},p(s,a){e=s,1&a&&l!==(l=e[3].title+"")&&y(n,l),1&a&&x(t,"active",e[3].active)},d(e){e&&u(t),s=!1,a()}}}function at(e){let t,n,s,a,l,r,o=e[3].title+"";return{c(){t=m("panel"),n=m("h1"),s=f(o),a=p(),l=m("p"),l.textContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.",r=p(),$(t,"class","svelte-j1ijok"),x(t,"active",e[3].active)},m(e,o){c(e,t,o),i(t,n),i(n,s),i(t,a),i(t,l),i(t,r)},p(e,n){1&n&&o!==(o=e[3].title+"")&&y(s,o),1&n&&x(t,"active",e[3].active)},d(e){e&&u(t)}}}function lt(t){let n,s,a,l,r,o,d,f,h,v,b=t[0],w=[];for(let e=0;e<b.length;e+=1)w[e]=st(nt(t,b,e));let y=t[0],x=[];for(let e=0;e<y.length;e+=1)x[e]=at(tt(t,y,e));return{c(){n=m("content"),s=m("h1"),s.textContent="Basic Tabs",a=p(),l=m("tabs"),l.innerHTML='<a class="active svelte-j1ijok">Tab1</a> \n    <a class="svelte-j1ijok">Tab2</a> \n    <a class="svelte-j1ijok">Tab3</a>',r=p(),o=m("h1"),o.textContent="Interactive Demo",d=p(),f=m("tabs");for(let e=0;e<w.length;e+=1)w[e].c();h=p(),v=m("panels");for(let e=0;e<x.length;e+=1)x[e].c();$(l,"class","svelte-j1ijok"),$(f,"class","svelte-j1ijok"),$(n,"class","svelte-j1ijok")},m(e,t){c(e,n,t),i(n,s),i(n,a),i(n,l),i(n,r),i(n,o),i(n,d),i(n,f);for(let e=0;e<w.length;e+=1)w[e].m(f,null);i(n,h),i(n,v);for(let e=0;e<x.length;e+=1)x[e].m(v,null)},p(e,[t]){if(3&t){let n;for(b=e[0],n=0;n<b.length;n+=1){const s=nt(e,b,n);w[n]?w[n].p(s,t):(w[n]=st(s),w[n].c(),w[n].m(f,null))}for(;n<w.length;n+=1)w[n].d(1);w.length=b.length}if(1&t){let n;for(y=e[0],n=0;n<y.length;n+=1){const s=tt(e,y,n);x[n]?x[n].p(s,t):(x[n]=at(s),x[n].c(),x[n].m(v,null))}for(;n<x.length;n+=1)x[n].d(1);x.length=y.length}},i:e,o:e,d(e){e&&u(n),g(w,e),g(x,e)}}}function rt(e,t,n){let s=[{title:"Panel 1",active:!0},{title:"Panel 2",active:!1},{title:"Panel 3",active:!1}];const a=e=>{s.forEach(((t,n)=>t.active=e==n)),n(0,s)};return[s,a,e=>a(e)]}class ot extends te{constructor(e){super(),ee(this,e,rt,lt,r,{})}}function it(t){let n;return{c(){n=m("content"),n.innerHTML='<h1>Grid Over Graphic</h1> \n\n  <icecream class="svelte-1n9y415"><background class="svelte-1n9y415"><img src="/ice_cream_graphic.svg" class="svelte-1n9y415"/></background> \n\n    <overlay class="svelte-1n9y415"><one class="svelte-1n9y415"><h1>Do You Like Icecream?</h1> \n        <p>This square is placed over this image using a\n          CSS Grid.</p></one> \n      <two class="svelte-1n9y415"><h1>Icecream Rules</h1> \n      <p>Sometimes you want to put a graphic behind some creatively\n        organize text and panels.  You can dot that with CSS grids.</p></two> \n      <three class="svelte-1n9y415"><h1>Bottom Left</h1> \n      <p>I don&#39;t know why I put that sphere there.</p></three></overlay></icecream>',$(n,"class","svelte-1n9y415")},m(e,t){c(e,n,t)},p:e,i:e,o:e,d(e){e&&u(n)}}}class ct extends te{constructor(e){super(),ee(this,e,null,it,r,{})}}function ut(e,t,n){const s=e.slice();return s[1]=t[n],s}function gt(t){let n,s,a=t[1]+"";return{c(){n=m("date"),s=f(a),$(n,"class","svelte-1gt8gt4")},m(e,t){c(e,n,t),i(n,s)},p:e,d(e){e&&u(n)}}}function mt(t){let n,s,a,l,r,o,d,f,h,v,b,w,y=t[0](),x=[];for(let e=0;e<y.length;e+=1)x[e]=gt(ut(t,y,e));return{c(){n=m("content"),s=m("calendar"),a=m("month"),a.textContent="December",l=p(),r=m("day"),r.textContent="Sun",o=m("day"),o.textContent="Mon",d=m("day"),d.textContent="Tue",f=m("day"),f.textContent="Wed",h=m("day"),h.textContent="Thu",v=m("day"),v.textContent="Fri",b=m("day"),b.textContent="Sat",w=p();for(let e=0;e<x.length;e+=1)x[e].c();$(a,"class","svelte-1gt8gt4"),$(r,"class","svelte-1gt8gt4"),$(o,"class","svelte-1gt8gt4"),$(d,"class","svelte-1gt8gt4"),$(f,"class","svelte-1gt8gt4"),$(h,"class","svelte-1gt8gt4"),$(v,"class","svelte-1gt8gt4"),$(b,"class","svelte-1gt8gt4"),$(s,"class","svelte-1gt8gt4"),$(n,"class","svelte-1gt8gt4")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(s,l),i(s,r),i(s,o),i(s,d),i(s,f),i(s,h),i(s,v),i(s,b),i(s,w);for(let e=0;e<x.length;e+=1)x[e].m(s,null)},p(e,[t]){if(1&t){let n;for(y=e[0](),n=0;n<y.length;n+=1){const a=ut(e,y,n);x[n]?x[n].p(a,t):(x[n]=gt(a),x[n].c(),x[n].m(s,null))}for(;n<x.length;n+=1)x[n].d(1);x.length=y.length}},i:e,o:e,d(e){e&&u(n),g(x,e)}}}function dt(e){return[()=>{let e=[];for(let t=0;t<31;t++)e.push(t);return e}]}class ft extends te{constructor(e){super(),ee(this,e,dt,mt,r,{})}}function pt(t){let n,s,a,l,r,o,g,d,f,h,v,b,w,y,x,k,S,j,C,T,z,L;return j=new be({props:{name:"arrow-left",size:"48"}}),z=new be({props:{name:"arrow-right",size:"48"}}),{c(){n=m("content"),s=m("h1"),s.textContent="Carousel",a=p(),l=m("carousel"),r=m("figure"),o=m("img"),d=p(),f=m("figcaption"),f.textContent="Image 1",h=p(),v=m("figure"),b=m("img"),y=p(),x=m("figcaption"),x.textContent="Image 2",k=p(),S=m("prev"),J(j.$$.fragment),C=p(),T=m("next"),J(z.$$.fragment),$(o,"alt","Stock photo"),o.src!==(g=ke(640,360))&&$(o,"src",g),$(o,"class","svelte-15us2jh"),$(f,"class","svelte-15us2jh"),$(r,"class","active svelte-15us2jh"),$(b,"alt","Stock photo"),b.src!==(w=ke(640,360))&&$(b,"src",w),$(b,"class","svelte-15us2jh"),$(x,"class","svelte-15us2jh"),$(v,"class","svelte-15us2jh"),$(S,"class","svelte-15us2jh"),$(T,"class","svelte-15us2jh"),$(l,"class","svelte-15us2jh"),$(n,"class","svelte-15us2jh")},m(e,t){c(e,n,t),i(n,s),i(n,a),i(n,l),i(l,r),i(r,o),i(r,d),i(r,f),i(l,h),i(l,v),i(v,b),i(v,y),i(v,x),i(l,k),i(l,S),K(j,S,null),i(l,C),i(l,T),K(z,T,null),L=!0},p:e,i(e){L||(Y(j.$$.fragment,e),Y(z.$$.fragment,e),L=!0)},o(e){Z(j.$$.fragment,e),Z(z.$$.fragment,e),L=!1},d(e){e&&u(n),Q(j),Q(z)}}}class ht extends te{constructor(e){super(),ee(this,e,null,pt,r,{})}}function vt(t){let n,s,l,r,o,g,d,f,h,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,R,B,V,X,ee,te,ne,se,ae,le,re,oe,ie,ce,ue,ge,me,de,fe,pe,he,ve,$e,be,we,ye,xe,ke,Se,Ce,ze,Le,qe,Fe,Me,He,Ee,_e,Oe,We;return o=new je({}),b=new Te({}),S=new Ae({}),L=new Ie({}),H=new Pe({}),U=new Ne({}),ee=new De({}),le=new Ke({}),ue=new et({}),pe=new ot({}),we=new ct({}),Ce=new ft({}),Me=new ht({}),{c(){n=m("h1"),n.textContent="Full Websites",s=p(),l=m("images"),r=m("figure"),J(o.$$.fragment),g=p(),d=m("figcaption"),d.textContent="Google",f=p(),h=m("figure"),J(b.$$.fragment),w=p(),y=m("figcaption"),y.textContent="Twitter",x=p(),k=m("figure"),J(S.$$.fragment),j=p(),C=m("figcaption"),C.textContent="Youtube",T=p(),z=m("figure"),J(L.$$.fragment),A=p(),q=m("figcaption"),q.textContent="Instagram",F=p(),M=m("figure"),J(H.$$.fragment),I=p(),E=m("figcaption"),E.textContent="Pinterest",P=p(),_=m("hr"),N=p(),O=m("h1"),O.textContent="Common UI Patterns",D=p(),W=m("images"),G=m("figure"),J(U.$$.fragment),R=p(),B=m("figcaption"),B.textContent="Basic Login",V=p(),X=m("figure"),J(ee.$$.fragment),te=p(),ne=m("figcaption"),ne.textContent="Tiles",se=p(),ae=m("figure"),J(le.$$.fragment),re=p(),oe=m("figcaption"),oe.textContent="Cards",ie=p(),ce=m("figure"),J(ue.$$.fragment),ge=p(),me=m("figcaption"),me.textContent="Panels",de=p(),fe=m("figure"),J(pe.$$.fragment),he=p(),ve=m("figcaption"),ve.textContent="Tabs",$e=p(),be=m("figure"),J(we.$$.fragment),ye=p(),xe=m("figcaption"),xe.textContent="Grid Over Graphic",ke=p(),Se=m("figure"),J(Ce.$$.fragment),ze=p(),Le=m("figcaption"),Le.textContent="Calendar",qe=p(),Fe=m("figure"),J(Me.$$.fragment),He=p(),Ee=m("figcaption"),Ee.textContent="Carousel",$(d,"class","svelte-1bny7ze"),$(r,"class","svelte-1bny7ze"),$(y,"class","svelte-1bny7ze"),$(h,"class","svelte-1bny7ze"),$(C,"class","svelte-1bny7ze"),$(k,"class","svelte-1bny7ze"),$(q,"class","svelte-1bny7ze"),$(z,"class","svelte-1bny7ze"),$(E,"class","svelte-1bny7ze"),$(M,"class","svelte-1bny7ze"),$(l,"class","svelte-1bny7ze"),$(B,"class","svelte-1bny7ze"),$(G,"class","svelte-1bny7ze"),$(ne,"class","svelte-1bny7ze"),$(X,"class","svelte-1bny7ze"),$(oe,"class","svelte-1bny7ze"),$(ae,"class","svelte-1bny7ze"),$(me,"class","svelte-1bny7ze"),$(ce,"class","svelte-1bny7ze"),$(ve,"class","svelte-1bny7ze"),$(fe,"class","svelte-1bny7ze"),$(xe,"class","svelte-1bny7ze"),$(be,"class","svelte-1bny7ze"),$(Le,"class","svelte-1bny7ze"),$(Se,"class","svelte-1bny7ze"),$(Ee,"class","svelte-1bny7ze"),$(Fe,"class","svelte-1bny7ze"),$(W,"class","svelte-1bny7ze")},m(e,a){c(e,n,a),c(e,s,a),c(e,l,a),i(l,r),K(o,r,null),i(r,g),i(r,d),i(l,f),i(l,h),K(b,h,null),i(h,w),i(h,y),i(l,x),i(l,k),K(S,k,null),i(k,j),i(k,C),i(l,T),i(l,z),K(L,z,null),i(z,A),i(z,q),i(l,F),i(l,M),K(H,M,null),i(M,I),i(M,E),c(e,P,a),c(e,_,a),c(e,N,a),c(e,O,a),c(e,D,a),c(e,W,a),i(W,G),K(U,G,null),i(G,R),i(G,B),i(W,V),i(W,X),K(ee,X,null),i(X,te),i(X,ne),i(W,se),i(W,ae),K(le,ae,null),i(ae,re),i(ae,oe),i(W,ie),i(W,ce),K(ue,ce,null),i(ce,ge),i(ce,me),i(W,de),i(W,fe),K(pe,fe,null),i(fe,he),i(fe,ve),i(W,$e),i(W,be),K(we,be,null),i(be,ye),i(be,xe),i(W,ke),i(W,Se),K(Ce,Se,null),i(Se,ze),i(Se,Le),i(W,qe),i(W,Fe),K(Me,Fe,null),i(Fe,He),i(Fe,Ee),_e=!0,Oe||(We=[v(r,"click",t[0]),v(h,"click",t[1]),v(k,"click",t[2]),v(z,"click",t[3]),v(M,"click",t[4]),v(G,"click",t[5]),v(X,"click",t[6]),v(ae,"click",t[7]),v(ce,"click",t[8]),v(fe,"click",t[9]),v(be,"click",t[10]),v(Se,"click",t[11]),v(Fe,"click",t[12])],Oe=!0)},p:e,i(e){_e||(Y(o.$$.fragment,e),Y(b.$$.fragment,e),Y(S.$$.fragment,e),Y(L.$$.fragment,e),Y(H.$$.fragment,e),Y(U.$$.fragment,e),Y(ee.$$.fragment,e),Y(le.$$.fragment,e),Y(ue.$$.fragment,e),Y(pe.$$.fragment,e),Y(we.$$.fragment,e),Y(Ce.$$.fragment,e),Y(Me.$$.fragment,e),_e=!0)},o(e){Z(o.$$.fragment,e),Z(b.$$.fragment,e),Z(S.$$.fragment,e),Z(L.$$.fragment,e),Z(H.$$.fragment,e),Z(U.$$.fragment,e),Z(ee.$$.fragment,e),Z(le.$$.fragment,e),Z(ue.$$.fragment,e),Z(pe.$$.fragment,e),Z(we.$$.fragment,e),Z(Ce.$$.fragment,e),Z(Me.$$.fragment,e),_e=!1},d(e){e&&u(n),e&&u(s),e&&u(l),Q(o),Q(b),Q(S),Q(L),Q(H),e&&u(P),e&&u(_),e&&u(N),e&&u(O),e&&u(D),e&&u(W),Q(U),Q(ee),Q(le),Q(ue),Q(pe),Q(we),Q(Ce),Q(Me),Oe=!1,a(We)}}}function $t(e){return[()=>ge("/demos/google"),()=>ge("/demos/twitter"),()=>ge("/demos/youtube"),()=>ge("/demos/instagram"),()=>ge("/demos/pinterest"),()=>ge("/demos/login"),()=>ge("/demos/tiles"),()=>ge("/demos/cards"),()=>ge("/demos/panels"),()=>ge("/demos/tabs"),()=>ge("/demos/gridovergraphic"),()=>ge("/demos/calendar"),()=>ge("/demos/carousel")]}function bt(t){let n;return{c(){n=m("h1"),n.textContent="Not found"},m(e,t){c(e,n,t)},p:e,i:e,o:e,d(e){e&&u(n)}}}function wt(t){let n,s,a,l,r,g,d,f,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I;return w=new be({props:{name:"grid",color:"#000"}}),F=new Xe({props:{source:"/code/Google",notes:"/code/Google.notes.html"}}),{c(){n=m("content"),s=m("header"),a=m("nav"),l=m("nav-left"),l.innerHTML="<a>About</a> \n        <a>Store</a>",r=p(),g=m("ul"),d=m("li"),d.textContent="Gmail",f=p(),h=m("li"),h.textContent="Image",v=p(),b=m("li"),J(w.$$.fragment),y=p(),x=m("li"),x.innerHTML='<button class="svelte-yyzz8b">Sign In</button>',k=p(),S=m("figure"),j=m("a"),C=m("img"),L=p(),A=m("search"),A.innerHTML='<input type="text" class="svelte-yyzz8b"/> \n    <buttons class="svelte-yyzz8b"><button class="svelte-yyzz8b">Google Search</button> \n      <button class="svelte-yyzz8b">I&#39;m Feeling Lucky</button></buttons>',q=p(),J(F.$$.fragment),$(a,"class","svelte-yyzz8b"),$(s,"class","svelte-yyzz8b"),C.src!==(T=ke(500,200))&&$(C,"src",T),$(j,"href","/demos/google"),$(S,"class","svelte-yyzz8b"),$(A,"class","svelte-yyzz8b"),$(n,"class","svelte-yyzz8b")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(a,r),i(a,g),i(g,d),i(g,f),i(g,h),i(g,v),i(g,b),K(w,b,null),i(g,y),i(g,x),i(n,k),i(n,S),i(S,j),i(j,C),i(n,L),i(n,A),c(e,q,t),K(F,e,t),M=!0,H||(I=o(z=me.call(null,j)),H=!0)},p:e,i(e){M||(Y(w.$$.fragment,e),Y(F.$$.fragment,e),M=!0)},o(e){Z(w.$$.fragment,e),Z(F.$$.fragment,e),M=!1},d(e){e&&u(n),Q(w),e&&u(q),Q(F,e),H=!1,I()}}}function yt(t){let n;return{c(){n=m("phone-warn"),n.innerHTML="<section><aside><h2>Not Ready For Phones</h2> \n      <p>If you want to view this layout use a real computer, and don&#39;t complain if your real computer has some insane 16:9 aspect ratio gaming screen owned by only 1% of the world&#39;s population.  Use a normal monitor or just suck it up weirdo.</p></aside></section>",b(n,"class","svelte-b88acd")},m(e,t){c(e,n,t)},p:e,i:e,o:e,d(e){e&&u(n)}}}class xt extends te{constructor(e){super(),ee(this,e,null,yt,r,{})}}function kt(e,t,n){const s=e.slice();return s[1]=t[n],s}function St(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j,C,T,z;return v=new be({props:{size:"16",name:"message-circle",color:"var(--color-inactive)"}}),w=new be({props:{size:"16",name:"repeat",color:"var(--color-inactive)"}}),x=new be({props:{size:"16",name:"heart",color:"var(--color-inactive)"}}),S=new be({props:{size:"16",name:"upload",color:"var(--color-inactive)"}}),C=new be({props:{name:"more-horizontal"}}),{c(){n=m("tweet"),s=m("figure"),s.innerHTML='<img alt="Stock photo" src="/profile_pic.jpg" class="svelte-bnvc6y"/>',a=p(),l=m("post"),r=m("h4"),r.textContent="Zed A. Shaw, Writer",o=p(),g=m("p"),g.innerHTML="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam: <br/> \n\n            <a>quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",d=p(),h=m("actions"),J(v.$$.fragment),b=f(" 2\n              "),J(w.$$.fragment),y=f(" 1\n              "),J(x.$$.fragment),k=f(" 12\n              "),J(S.$$.fragment),j=p(),J(C.$$.fragment),T=p(),$(s,"id","avatar"),$(s,"class","svelte-bnvc6y"),$(r,"class","svelte-bnvc6y"),$(g,"class","svelte-bnvc6y"),$(h,"class","svelte-bnvc6y"),$(l,"class","svelte-bnvc6y"),$(n,"class","svelte-bnvc6y")},m(e,t){c(e,n,t),i(n,s),i(n,a),i(n,l),i(l,r),i(l,o),i(l,g),i(l,d),i(l,h),K(v,h,null),i(h,b),K(w,h,null),i(h,y),K(x,h,null),i(h,k),K(S,h,null),i(n,j),K(C,n,null),i(n,T),z=!0},p:e,i(e){z||(Y(v.$$.fragment,e),Y(w.$$.fragment,e),Y(x.$$.fragment,e),Y(S.$$.fragment,e),Y(C.$$.fragment,e),z=!0)},o(e){Z(v.$$.fragment,e),Z(w.$$.fragment,e),Z(x.$$.fragment,e),Z(S.$$.fragment,e),Z(C.$$.fragment,e),z=!1},d(e){e&&u(n),Q(v),Q(w),Q(x),Q(S),Q(C)}}}function jt(t){let n,s,a,l,r,o,d,h,v,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,R,B,V,X,ee,te,ne,se,ae,le,re,oe,ie,ce,ue,ge,me,de,fe,pe,he,ve,$e,we,ye,xe,Se,je,Ce,Te,ze,Le,Ae,qe,Fe,Me,He,Ie,Ee,Pe,_e,Ne,Oe,De,We,Ge,Ue,Re,Be;n=new xt({}),r=new be({props:{name:"twitter",color:"var(--color)"}}),w=new be({props:{name:"settings",color:"var(--color-text)"}}),T=new be({props:{name:"arrow-left"}}),D=new be({props:{name:"map",size:"24",color:"var(--color-bg-secondary)"}}),G=new be({props:{name:"link",size:"24",color:"var(--color-bg-secondary)"}}),V=new be({props:{name:"calendar",size:"24",color:"var(--color-bg-secondary)"}});let Ye=t[0],Ze=[];for(let e=0;e<Ye.length;e+=1)Ze[e]=St(kt(t,Ye,e));return Re=new Xe({props:{source:"/code/Twitter",notes:"/code/Twitter.notes.html"}}),{c(){J(n.$$.fragment),s=p(),a=m("content"),l=m("left"),J(r.$$.fragment),o=p(),d=m("h4"),d.textContent="# Explore",h=p(),v=m("h4"),J(w.$$.fragment),y=f(" Settings"),x=p(),k=m("middle"),S=m("header"),j=m("nav"),C=m("back"),J(T.$$.fragment),z=p(),L=m("name"),L.innerHTML='<h4 class="svelte-bnvc6y">Zed A. Shaw, Writer</h4> \n          <span class="svelte-bnvc6y">7,754 Tweets</span>',A=p(),q=m("images"),q.innerHTML='<figure id="background" class="svelte-bnvc6y"><img src="/header_pic.jpg" class="svelte-bnvc6y"/></figure> \n\n      <figure id="avatar" class="svelte-bnvc6y"><img src="/profile_pic.jpg" class="svelte-bnvc6y"/> \n        <button id="follow" class="svelte-bnvc6y">Follow</button></figure>',F=p(),M=m("profile"),H=m("h3"),H.textContent="Zed A. Shaw, Writer",I=p(),E=m("p"),E.textContent="@lzsthw",P=p(),_=m("p"),_.textContent="The author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.",N=p(),O=m("p"),J(D.$$.fragment),W=f(" Some Place, KY "),J(G.$$.fragment),U=p(),R=m("a"),R.textContent="learnjsthehardway.org",B=p(),J(V.$$.fragment),X=f(" Joined Jan, 1999."),ee=p(),te=m("p"),te.innerHTML="<b>167</b> Following <b>10.4k</b> Followers",ne=p(),se=m("hr"),ae=p(),le=m("tweets");for(let e=0;e<Ze.length;e+=1)Ze[e].c();re=p(),oe=m("right"),ie=m("input"),ce=p(),ue=m("section"),ge=m("aside"),ge.innerHTML='<h3>New to Twitter?</h3> \n      <p class="svelte-bnvc6y">Sign up now to get your own personalized hate stream!</p> \n      <button id="signup" class="svelte-bnvc6y">Sign Up</button>',me=p(),de=m("aside"),fe=m("recent-media"),pe=m("figure"),he=m("img"),$e=p(),we=m("figure"),ye=m("img"),Se=p(),je=m("figure"),Ce=m("img"),ze=p(),Le=m("figure"),Ae=m("img"),Fe=p(),Me=m("figure"),He=m("img"),Ee=p(),Pe=m("figure"),_e=m("img"),Oe=p(),De=m("aside"),De.innerHTML='<h3 class="svelte-bnvc6y">You Might Like</h3> \n        <ul class="svelte-bnvc6y"><li class="svelte-bnvc6y">Card Person</li> \n          <li class="svelte-bnvc6y">Card Person</li> \n          <li class="svelte-bnvc6y">Card Person</li></ul> \n        <a class="svelte-bnvc6y">Show More</a>',We=p(),Ge=m("aside"),Ge.innerHTML='<h3 class="svelte-bnvc6y">What&#39;s Happening</h3> \n        <ul class="svelte-bnvc6y"><li class="svelte-bnvc6y">News news news.</li> \n          <li class="svelte-bnvc6y">News news news.</li> \n          <li class="svelte-bnvc6y">News news news.</li> \n          <li class="svelte-bnvc6y">News news news.</li> \n          <li class="svelte-bnvc6y">News news news.</li></ul>',Ue=p(),J(Re.$$.fragment),$(l,"class","svelte-bnvc6y"),$(C,"class","svelte-bnvc6y"),$(j,"class","svelte-bnvc6y"),$(S,"class","svelte-bnvc6y"),$(q,"class","svelte-bnvc6y"),$(M,"class","svelte-bnvc6y"),$(se,"class","svelte-bnvc6y"),$(k,"class","svelte-bnvc6y"),$(ie,"placeholder","Search Twitter"),$(ge,"id","newperson"),$(ge,"class","svelte-bnvc6y"),$(he,"alt","Stock photo"),he.src!==(ve=ke(82,82))&&$(he,"src",ve),$(ye,"alt","Stock photo"),ye.src!==(xe=ke(82,82))&&$(ye,"src",xe),$(Ce,"alt","Stock photo"),Ce.src!==(Te=ke(82,82))&&$(Ce,"src",Te),$(Ae,"alt","Stock photo"),Ae.src!==(qe=ke(82,82))&&$(Ae,"src",qe),$(He,"alt","Stock photo"),He.src!==(Ie=ke(82,82))&&$(He,"src",Ie),$(_e,"alt","Stock photo"),_e.src!==(Ne=ke(82,82))&&$(_e,"src",Ne),b(fe,"class","svelte-bnvc6y"),$(De,"id","trending"),$(De,"class","svelte-bnvc6y"),$(Ge,"id","trending"),$(Ge,"class","svelte-bnvc6y"),$(oe,"class","svelte-bnvc6y"),$(a,"class","svelte-bnvc6y")},m(e,t){K(n,e,t),c(e,s,t),c(e,a,t),i(a,l),K(r,l,null),i(l,o),i(l,d),i(l,h),i(l,v),K(w,v,null),i(v,y),i(a,x),i(a,k),i(k,S),i(S,j),i(j,C),K(T,C,null),i(j,z),i(j,L),i(k,A),i(k,q),i(k,F),i(k,M),i(M,H),i(M,I),i(M,E),i(M,P),i(M,_),i(M,N),i(M,O),K(D,O,null),i(O,W),K(G,O,null),i(O,U),i(O,R),i(O,B),K(V,O,null),i(O,X),i(M,ee),i(M,te),i(k,ne),i(k,se),i(k,ae),i(k,le);for(let e=0;e<Ze.length;e+=1)Ze[e].m(le,null);i(a,re),i(a,oe),i(oe,ie),i(oe,ce),i(oe,ue),i(ue,ge),i(ue,me),i(ue,de),i(de,fe),i(fe,pe),i(pe,he),i(fe,$e),i(fe,we),i(we,ye),i(fe,Se),i(fe,je),i(je,Ce),i(fe,ze),i(fe,Le),i(Le,Ae),i(fe,Fe),i(fe,Me),i(Me,He),i(fe,Ee),i(fe,Pe),i(Pe,_e),i(ue,Oe),i(ue,De),i(ue,We),i(ue,Ge),c(e,Ue,t),K(Re,e,t),Be=!0},p:e,i(e){if(!Be){Y(n.$$.fragment,e),Y(r.$$.fragment,e),Y(w.$$.fragment,e),Y(T.$$.fragment,e),Y(D.$$.fragment,e),Y(G.$$.fragment,e),Y(V.$$.fragment,e);for(let e=0;e<Ye.length;e+=1)Y(Ze[e]);Y(Re.$$.fragment,e),Be=!0}},o(e){Z(n.$$.fragment,e),Z(r.$$.fragment,e),Z(w.$$.fragment,e),Z(T.$$.fragment,e),Z(D.$$.fragment,e),Z(G.$$.fragment,e),Z(V.$$.fragment,e),Ze=Ze.filter(Boolean);for(let e=0;e<Ze.length;e+=1)Z(Ze[e]);Z(Re.$$.fragment,e),Be=!1},d(e){Q(n,e),e&&u(s),e&&u(a),Q(r),Q(w),Q(T),Q(D),Q(G),Q(V),g(Ze,e),e&&u(Ue),Q(Re,e)}}}function Ct(e){return[[1,2,3,4,5]]}function Tt(e,t,n){const s=e.slice();return s[2]=t[n],s}function zt(e,t,n){const s=e.slice();return s[2]=t[n],s}function Lt(e,t,n){const s=e.slice();return s[2]=t[n],s}function At(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j,C,T,z;return b=new be({props:{name:"thumbs-up",color:"var(--sub-color)"}}),y=new be({props:{name:"thumbs-down",color:"var(--sub-color)"}}),j=new be({props:{name:"chevron-down"}}),{c(){n=m("card"),s=m("img"),l=p(),r=m("info"),o=m("h4"),o.textContent="Guys",g=p(),d=m("p"),d.textContent="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque",h=p(),v=m("nav"),J(b.$$.fragment),w=f(" 233\n              "),J(y.$$.fragment),x=f(" 1"),k=p(),S=m("reply"),J(j.$$.fragment),C=f(" View replies"),T=p(),s.src!==(a=ke(64,64))&&$(s,"src",a),$(s,"class","svelte-87j0be"),$(o,"class","svelte-87j0be"),$(d,"class","svelte-87j0be"),$(v,"class","svelte-87j0be"),$(S,"class","svelte-87j0be"),$(r,"class","svelte-87j0be"),$(n,"class","svelte-87j0be")},m(e,t){c(e,n,t),i(n,s),i(n,l),i(n,r),i(r,o),i(r,g),i(r,d),i(r,h),i(r,v),K(b,v,null),i(v,w),K(y,v,null),i(v,x),i(r,k),i(r,S),K(j,S,null),i(S,C),i(n,T),z=!0},p:e,i(e){z||(Y(b.$$.fragment,e),Y(y.$$.fragment,e),Y(j.$$.fragment,e),z=!0)},o(e){Z(b.$$.fragment,e),Z(y.$$.fragment,e),Z(j.$$.fragment,e),z=!1},d(e){e&&u(n),Q(b),Q(y),Q(j)}}}function qt(t){let n,s,a,l,r;return{c(){n=m("card"),s=m("img"),l=p(),r=m("info"),r.innerHTML='<h4 class="svelte-87j0be">Video Thumb Title</h4> \n          <author>Zed</author> \n          <views>1.1M views</views> \n          <date>2 years ago</date>',s.src!==(a=ke(120,80))&&$(s,"src",a),$(s,"class","svelte-87j0be"),$(r,"class","svelte-87j0be"),$(n,"class","small svelte-87j0be")},m(e,t){c(e,n,t),i(n,s),i(n,l),i(n,r)},p:e,d(e){e&&u(n)}}}function Ft(t){let n,s,a,l,r,o;return{c(){n=m("card"),s=m("img"),l=p(),r=m("info"),r.innerHTML='<h4 class="svelte-87j0be">Video Thumb Title</h4> \n          <author>Zed</author> \n          <views>1.1M views</views> \n          <date>2 years ago</date>',o=p(),s.src!==(a=ke(120,80))&&$(s,"src",a),$(s,"class","svelte-87j0be"),$(r,"class","svelte-87j0be"),$(n,"class","svelte-87j0be")},m(e,t){c(e,n,t),i(n,s),i(n,l),i(n,r),i(n,o)},p:e,d(e){e&&u(n)}}}function Mt(e){let t,n,s,l,r,d,h,v,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,V,X,ee,te,ne,se,ae,le,re,oe,ie,ce,ue,ge,de,fe,pe,he,ve,$e,we,ye,xe,Se,je,Ce,Te,ze,Le,Ae,qe,Fe,Me,He,Ie,Ee,Pe,_e,Ne,Oe,De,We,Ge,Ue,Re,Be,Ye,Ze,Ve,Je,Ke,Qe,et,tt,nt,st,at,lt,rt,ot,it,ct;d=new be({props:{name:"menu"}}),v=new be({props:{name:"youtube"}}),T=new be({props:{name:"camera",color:"#000"}}),A=new be({props:{name:"more-vertical",color:"#000"}}),M=new be({props:{name:"grid",color:"#000"}}),P=new be({props:{name:"user"}}),de=new be({props:{name:"thumbs-up",color:"#999"}}),pe=new be({props:{name:"thumbs-down",color:"#999"}}),ve=new be({props:{name:"corner-up-right",color:"#999"}}),we=new be({props:{name:"menu",color:"#999"}}),xe=new be({props:{name:"vertical-more"}}),Be=new be({props:{name:"bar-chart",color:"var(--sub-color)"}});let ut=e[0],gt=[];for(let t=0;t<ut.length;t+=1)gt[t]=At(Lt(e,ut,t));const mt=e=>Z(gt[e],1,1,(()=>{gt[e]=null}));let dt=e[0],ft=[];for(let t=0;t<dt.length;t+=1)ft[t]=qt(zt(e,dt,t));let pt=e[0],ht=[];for(let t=0;t<pt.length;t+=1)ht[t]=Ft(Tt(e,pt,t));return rt=new Xe({props:{source:"/code/Youtube",notes:"/code/Youtube.notes.html"}}),{c(){t=m("content"),n=m("header"),s=m("nav"),l=m("nav-left"),r=m("a"),J(d.$$.fragment),h=p(),J(v.$$.fragment),w=p(),y=m("logo"),y.textContent="Youtube",x=p(),k=m("input"),S=p(),j=m("ul"),C=m("li"),J(T.$$.fragment),z=p(),L=m("li"),J(A.$$.fragment),q=p(),F=m("li"),J(M.$$.fragment),H=p(),I=m("li"),E=m("button"),J(P.$$.fragment),_=f(" Sign In"),N=p(),O=m("main"),D=m("left"),W=m("figure"),G=m("a"),U=m("img"),ee=p(),te=m("figcaption"),ne=m("a"),ne.textContent="#tag",se=p(),ae=m("a"),ae.textContent="#anothertag",le=p(),re=m("p"),re.textContent="Title And Stuff",oe=p(),ie=m("video-actions"),ce=m("likes"),ce.textContent="Stats Stats",ue=p(),ge=m("video-buttons"),J(de.$$.fragment),fe=f(" 1.1K\n              "),J(pe.$$.fragment),he=f(" 22\n              "),J(ve.$$.fragment),$e=f(" SHARE\n              "),J(we.$$.fragment),ye=f(" SAVE\n              "),J(xe.$$.fragment),Se=p(),je=m("hr"),Ce=p(),Te=m("promotion"),ze=m("nav"),Le=m("card"),Ae=m("img"),Fe=p(),Me=m("info"),Me.innerHTML='<h4 class="svelte-87j0be">Zed A. Shaw</h4> \n            <subs>1 subscriber</subs>',He=p(),Ie=m("button"),Ie.textContent="SUBSCRIBE",Ee=p(),Pe=m("content"),Pe.textContent="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",_e=p(),Ne=m("hr"),Oe=p(),De=m("comments"),We=m("nav"),Ge=m("span"),Ge.textContent="125 Comments",Ue=p(),Re=m("sort"),J(Be.$$.fragment),Ye=f(" SORT BY"),Ze=p();for(let e=0;e<gt.length;e+=1)gt[e].c();Ve=p(),Je=m("right");for(let e=0;e<ft.length;e+=1)ft[e].c();Ke=p(),Qe=m("figure"),et=m("a"),tt=m("img"),at=p();for(let e=0;e<ht.length;e+=1)ht[e].c();lt=p(),J(rt.$$.fragment),$(y,"class","svelte-87j0be"),$(k,"id","search"),$(k,"placeholder","Search"),$(k,"name","search"),$(k,"class","svelte-87j0be"),$(E,"class","svelte-87j0be"),$(s,"class","svelte-87j0be"),$(n,"class","svelte-87j0be"),U.src!==(V=ke(800,450))&&$(U,"src",V),$(G,"href","/demos/google"),$(ne,"class","svelte-87j0be"),$(ae,"class","svelte-87j0be"),$(re,"class","svelte-87j0be"),b(ie,"class","svelte-87j0be"),$(te,"class","svelte-87j0be"),$(je,"class","svelte-87j0be"),Ae.src!==(qe=ke(64,64))&&$(Ae,"src",qe),$(Ae,"class","svelte-87j0be"),$(Me,"class","svelte-87j0be"),$(Le,"class","svelte-87j0be"),$(Ie,"id","subscribe"),$(Ie,"class","svelte-87j0be"),$(ze,"class","svelte-87j0be"),$(Pe,"class","svelte-87j0be"),$(Te,"class","svelte-87j0be"),$(Ne,"class","svelte-87j0be"),$(Re,"class","svelte-87j0be"),$(We,"class","svelte-87j0be"),$(De,"class","svelte-87j0be"),$(D,"class","svelte-87j0be"),tt.src!==(nt=ke(300,150))&&$(tt,"src",nt),$(et,"href","/demos/google"),$(Je,"class","svelte-87j0be"),$(O,"class","svelte-87j0be"),$(t,"class","svelte-87j0be")},m(e,a){c(e,t,a),i(t,n),i(n,s),i(s,l),i(l,r),K(d,r,null),i(r,h),K(v,r,null),i(r,w),i(r,y),i(s,x),i(s,k),i(s,S),i(s,j),i(j,C),K(T,C,null),i(j,z),i(j,L),K(A,L,null),i(j,q),i(j,F),K(M,F,null),i(j,H),i(j,I),i(I,E),K(P,E,null),i(E,_),i(t,N),i(t,O),i(O,D),i(D,W),i(W,G),i(G,U),i(W,ee),i(W,te),i(te,ne),i(te,se),i(te,ae),i(te,le),i(te,re),i(te,oe),i(te,ie),i(ie,ce),i(ie,ue),i(ie,ge),K(de,ge,null),i(ge,fe),K(pe,ge,null),i(ge,he),K(ve,ge,null),i(ge,$e),K(we,ge,null),i(ge,ye),K(xe,ge,null),i(D,Se),i(D,je),i(D,Ce),i(D,Te),i(Te,ze),i(ze,Le),i(Le,Ae),i(Le,Fe),i(Le,Me),i(ze,He),i(ze,Ie),i(Te,Ee),i(Te,Pe),i(D,_e),i(D,Ne),i(D,Oe),i(D,De),i(De,We),i(We,Ge),i(We,Ue),i(We,Re),K(Be,Re,null),i(Re,Ye),i(De,Ze);for(let e=0;e<gt.length;e+=1)gt[e].m(De,null);i(O,Ve),i(O,Je);for(let e=0;e<ft.length;e+=1)ft[e].m(Je,null);i(Je,Ke),i(Je,Qe),i(Qe,et),i(et,tt),i(Je,at);for(let e=0;e<ht.length;e+=1)ht[e].m(Je,null);c(e,lt,a),K(rt,e,a),ot=!0,it||(ct=[o(X=me.call(null,G)),o(st=me.call(null,et))],it=!0)},p(e,[t]){if(0&t){let n;for(ut=e[0],n=0;n<ut.length;n+=1){const s=Lt(e,ut,n);gt[n]?(gt[n].p(s,t),Y(gt[n],1)):(gt[n]=At(),gt[n].c(),Y(gt[n],1),gt[n].m(De,null))}for(R(),n=ut.length;n<gt.length;n+=1)mt(n);B()}if(0&t){let n;for(dt=e[0],n=0;n<dt.length;n+=1){const s=zt(e,dt,n);ft[n]?ft[n].p(s,t):(ft[n]=qt(),ft[n].c(),ft[n].m(Je,Ke))}for(;n<ft.length;n+=1)ft[n].d(1);ft.length=dt.length}if(0&t){let n;for(pt=e[0],n=0;n<pt.length;n+=1){const s=Tt(e,pt,n);ht[n]?ht[n].p(s,t):(ht[n]=Ft(),ht[n].c(),ht[n].m(Je,null))}for(;n<ht.length;n+=1)ht[n].d(1);ht.length=pt.length}},i(e){if(!ot){Y(d.$$.fragment,e),Y(v.$$.fragment,e),Y(T.$$.fragment,e),Y(A.$$.fragment,e),Y(M.$$.fragment,e),Y(P.$$.fragment,e),Y(de.$$.fragment,e),Y(pe.$$.fragment,e),Y(ve.$$.fragment,e),Y(we.$$.fragment,e),Y(xe.$$.fragment,e),Y(Be.$$.fragment,e);for(let e=0;e<ut.length;e+=1)Y(gt[e]);Y(rt.$$.fragment,e),ot=!0}},o(e){Z(d.$$.fragment,e),Z(v.$$.fragment,e),Z(T.$$.fragment,e),Z(A.$$.fragment,e),Z(M.$$.fragment,e),Z(P.$$.fragment,e),Z(de.$$.fragment,e),Z(pe.$$.fragment,e),Z(ve.$$.fragment,e),Z(we.$$.fragment,e),Z(xe.$$.fragment,e),Z(Be.$$.fragment,e),gt=gt.filter(Boolean);for(let e=0;e<gt.length;e+=1)Z(gt[e]);Z(rt.$$.fragment,e),ot=!1},d(e){e&&u(t),Q(d),Q(v),Q(T),Q(A),Q(M),Q(P),Q(de),Q(pe),Q(ve),Q(we),Q(xe),Q(Be),g(gt,e),g(ft,e),g(ht,e),e&&u(lt),Q(rt,e),it=!1,a(ct)}}}function Ht(e,t,n){let{thumbnail:s=!1}=t;return e.$$set=e=>{"thumbnail"in e&&n(1,s=e.thumbnail)},[[1,2,3,4],s]}function It(e,t,n){const s=e.slice();return s[2]=t[n],s}function Et(e,t,n){const s=e.slice();return s[5]=t[n],s}function Pt(t){let n,s,a,l;return{c(){n=m("figure"),s=m("img"),l=p(),$(s,"alt","Stock photo"),s.src!==(a=ke(82,82))&&$(s,"src",a)},m(e,t){c(e,n,t),i(n,s),i(n,l)},p:e,d(e){e&&u(n)}}}function _t(t){let n,s,a,l;return{c(){n=m("figure"),s=m("img"),l=p(),$(s,"alt","Stock photo"),s.src!==(a=ke(300,300))&&$(s,"src",a)},m(e,t){c(e,n,t),i(n,s),i(n,l)},p:e,d(e){e&&u(n)}}}function Nt(e){let t,n,s,a,l,r,o,d,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,R,B,V,X,ee,te,ne;l=new be({props:{name:"instagram",color:"var(--color-text)"}});let se=e[1],ae=[];for(let t=0;t<se.length;t+=1)ae[t]=Pt(Et(e,se,t));M=new be({props:{name:"grid",color:"var(--color-text)"}}),P=new be({props:{name:"movie",color:"var(--color-text)"}}),D=new be({props:{name:"tv",color:"var(--color-text)"}}),R=new be({props:{name:"user",color:"var(--color-text)"}});let le=e[0],re=[];for(let t=0;t<le.length;t+=1)re[t]=_t(It(e,le,t));return te=new Xe({props:{source:"/code/Instagram",notes:"/code/Instagram.notes.html"}}),{c(){t=m("content"),n=m("header"),s=m("nav"),a=m("b"),J(l.$$.fragment),r=f(" Instagram"),o=p(),d=m("input"),h=p(),v=m("ul"),v.innerHTML='<li><button class="svelte-cr3eg9">Log In</button></li> \n        <li><a class="svelte-cr3eg9">Sign Up</a></li>',b=p(),w=m("profile"),y=m("figure"),x=m("img"),S=p(),j=m("info"),j.innerHTML='<p class="svelte-cr3eg9"><b>zedshaw</b>  <button class="svelte-cr3eg9">follow</button></p> \n\n      <p class="svelte-cr3eg9"><b>280</b> posts <b>4,695 followers</b>  <b>1,778 following</b></p> \n\n      <p class="svelte-cr3eg9"><b>Zed A. Shaw</b></p> \n      <p class="svelte-cr3eg9">Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:<br/> \n        <a href="www.twitch.tv/zedashaw" class="svelte-cr3eg9">www.twitch.tv/zedashaw</a></p>',C=p(),T=m("pins");for(let e=0;e<ae.length;e+=1)ae[e].c();z=p(),L=m("tabs"),A=m("nav"),q=m("ul"),F=m("li"),J(M.$$.fragment),H=f(" POSTS"),I=p(),E=m("li"),J(P.$$.fragment),_=f(" REELS"),N=p(),O=m("li"),J(D.$$.fragment),W=f(" TV"),G=p(),U=m("li"),J(R.$$.fragment),B=f(" TAGGED"),V=p(),X=m("posts");for(let e=0;e<re.length;e+=1)re[e].c();ee=p(),J(te.$$.fragment),$(d,"placeholder","Search"),$(s,"class","svelte-cr3eg9"),$(n,"class","svelte-cr3eg9"),$(x,"alt","Zed's Face"),x.src!==(k=ke(256,256))&&$(x,"src",k),$(y,"class","svelte-cr3eg9"),$(j,"class","svelte-cr3eg9"),$(w,"class","svelte-cr3eg9"),$(T,"class","svelte-cr3eg9"),$(A,"class","svelte-cr3eg9"),$(L,"class","svelte-cr3eg9"),$(X,"class","svelte-cr3eg9"),$(t,"class","svelte-cr3eg9")},m(e,u){c(e,t,u),i(t,n),i(n,s),i(s,a),K(l,a,null),i(a,r),i(s,o),i(s,d),i(s,h),i(s,v),i(t,b),i(t,w),i(w,y),i(y,x),i(w,S),i(w,j),i(t,C),i(t,T);for(let e=0;e<ae.length;e+=1)ae[e].m(T,null);i(t,z),i(t,L),i(L,A),i(A,q),i(q,F),K(M,F,null),i(F,H),i(q,I),i(q,E),K(P,E,null),i(E,_),i(q,N),i(q,O),K(D,O,null),i(O,W),i(q,G),i(q,U),K(R,U,null),i(U,B),i(t,V),i(t,X);for(let e=0;e<re.length;e+=1)re[e].m(X,null);c(e,ee,u),K(te,e,u),ne=!0},p(e,[t]){if(0&t){let n;for(se=e[1],n=0;n<se.length;n+=1){const s=Et(e,se,n);ae[n]?ae[n].p(s,t):(ae[n]=Pt(),ae[n].c(),ae[n].m(T,null))}for(;n<ae.length;n+=1)ae[n].d(1);ae.length=se.length}if(0&t){let n;for(le=e[0],n=0;n<le.length;n+=1){const s=It(e,le,n);re[n]?re[n].p(s,t):(re[n]=_t(),re[n].c(),re[n].m(X,null))}for(;n<re.length;n+=1)re[n].d(1);re.length=le.length}},i(e){ne||(Y(l.$$.fragment,e),Y(M.$$.fragment,e),Y(P.$$.fragment,e),Y(D.$$.fragment,e),Y(R.$$.fragment,e),Y(te.$$.fragment,e),ne=!0)},o(e){Z(l.$$.fragment,e),Z(M.$$.fragment,e),Z(P.$$.fragment,e),Z(D.$$.fragment,e),Z(R.$$.fragment,e),Z(te.$$.fragment,e),ne=!1},d(e){e&&u(t),Q(l),g(ae,e),Q(M),Q(P),Q(D),Q(R),g(re,e),e&&u(ee),Q(te,e)}}}function Ot(e){return[[1,2,3,4,5,6,7,8,9,10],[1,2,3,4]]}function Dt(e,t,n){const s=e.slice();return s[6]=t[n],s}function Wt(e,t,n){const s=e.slice();return s[9]=t[n],s}function Gt(e){let t,n,s,a,l,r,o,d,f=e[1],h=[];for(let t=0;t<f.length;t+=1)h[t]=Rt(Dt(e,f,t));return{c(){t=m("profile"),n=m("info"),n.innerHTML='<h1 class="svelte-8rhjm4">Vincent van Gogh</h1> \n        <p class="svelte-8rhjm4">Collection by A Person</p> \n        <p class="svelte-8rhjm4"><b class="svelte-8rhjm4">420</b> Pins • <b class="svelte-8rhjm4">3.59k</b> Followers</p> \n        <p class="svelte-8rhjm4">&quot;I dream my painting and I paint my dream.&quot; ~ Vincent van Gogh</p>',s=p(),a=m("figure"),l=m("img"),o=p(),d=m("pins");for(let e=0;e<h.length;e+=1)h[e].c();$(n,"class","svelte-8rhjm4"),$(l,"alt","Zed's Face"),l.src!==(r=ke(128,128))&&$(l,"src",r),$(l,"class","svelte-8rhjm4"),$(a,"class","svelte-8rhjm4"),$(t,"class","svelte-8rhjm4"),$(d,"class","svelte-8rhjm4")},m(e,r){c(e,t,r),i(t,n),i(t,s),i(t,a),i(a,l),c(e,o,r),c(e,d,r);for(let e=0;e<h.length;e+=1)h[e].m(d,null)},p(e,t){if(12&t){let n;for(f=e[1],n=0;n<f.length;n+=1){const s=Dt(e,f,n);h[n]?h[n].p(s,t):(h[n]=Rt(s),h[n].c(),h[n].m(d,null))}for(;n<h.length;n+=1)h[n].d(1);h.length=f.length}},d(e){e&&u(t),e&&u(o),e&&u(d),g(h,e)}}}function Ut(t){let n,s,a,l,r,o,g,d,h=t[9]+"";return{c(){n=m("figure"),s=m("img"),l=p(),r=m("figcaption"),o=f("Something about Van Gogh "),g=f(h),d=f(" high."),$(s,"alt","Van Gogh Art"),s.src!==(a=ke(240,t[9]))&&$(s,"src",a),$(s,"class","svelte-8rhjm4"),$(r,"class","svelte-8rhjm4"),$(n,"class","svelte-8rhjm4")},m(e,t){c(e,n,t),i(n,s),i(n,l),i(n,r),i(r,o),i(r,g),i(r,d)},p:e,d(e){e&&u(n)}}}function Rt(e){let t,n,s=e[3](e[2],10),a=[];for(let t=0;t<s.length;t+=1)a[t]=Ut(Wt(e,s,t));return{c(){t=m("lane");for(let e=0;e<a.length;e+=1)a[e].c();n=p(),$(t,"class","svelte-8rhjm4")},m(e,s){c(e,t,s);for(let e=0;e<a.length;e+=1)a[e].m(t,null);i(t,n)},p(e,l){if(12&l){let r;for(s=e[3](e[2],10),r=0;r<s.length;r+=1){const o=Wt(e,s,r);a[r]?a[r].p(o,l):(a[r]=Ut(o),a[r].c(),a[r].m(t,n))}for(;r<a.length;r+=1)a[r].d(1);a.length=s.length}},d(e){e&&u(t),g(a,e)}}}function Bt(e){let t,n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j,C;r=new be({props:{name:"pinterest",color:"var(--color)"}});let T=!e[0]&&Gt(e);return j=new Xe({props:{source:"/code/Pinterest",notes:"/code/Pinterest.notes.html"}}),{c(){t=m("content"),n=m("header"),s=m("nav"),a=m("left"),l=m("logo"),J(r.$$.fragment),o=f(" Pinterest"),g=p(),d=m("a"),d.textContent="Today",h=p(),v=m("a"),v.textContent="Explore",b=p(),w=m("input"),y=p(),x=m("ul"),x.innerHTML='<li class="svelte-8rhjm4"><button class="svelte-8rhjm4">Log In</button></li> \n        <li class="svelte-8rhjm4"><button id="signup" class="svelte-8rhjm4">Sign Up</button></li>',k=p(),T&&T.c(),S=p(),J(j.$$.fragment),$(l,"class","svelte-8rhjm4"),$(d,"class","svelte-8rhjm4"),$(v,"class","svelte-8rhjm4"),$(a,"class","svelte-8rhjm4"),$(w,"placeholder","Search"),$(w,"class","svelte-8rhjm4"),$(x,"class","svelte-8rhjm4"),$(s,"class","svelte-8rhjm4"),$(n,"class","svelte-8rhjm4"),$(t,"class","svelte-8rhjm4")},m(e,u){c(e,t,u),i(t,n),i(n,s),i(s,a),i(a,l),K(r,l,null),i(l,o),i(a,g),i(a,d),i(a,h),i(a,v),i(s,b),i(s,w),i(s,y),i(s,x),i(t,k),T&&T.m(t,null),c(e,S,u),K(j,e,u),C=!0},p(e,[n]){e[0]?T&&(T.d(1),T=null):T?T.p(e,n):(T=Gt(e),T.c(),T.m(t,null))},i(e){C||(Y(r.$$.fragment,e),Y(j.$$.fragment,e),C=!0)},o(e){Z(r.$$.fragment,e),Z(j.$$.fragment,e),C=!1},d(e){e&&u(t),Q(r),T&&T.d(),e&&u(S),Q(j,e)}}}function Yt(e,t,n){let{thumbnail:s=!1}=t;const a=e=>{let t=Math.ceil(0),n=Math.floor(e.length);return e[Math.floor(Math.random()*(n-t)+t)]};return e.$$set=e=>{"thumbnail"in e&&n(0,s=e.thumbnail)},[s,[1,2,3,4,5],[240,180,250,580],(e,t)=>{let n=[];for(let s=0;s<t;s++)n.push(a(e));return n}]}function Zt(e,t,n){const s=e.slice();return s[2]=t[n],s}function Vt(e,t,n){const s=e.slice();return s[5]=t[n],s}function Xt(t){let n,s,a,l;return{c(){n=m("figure"),s=m("img"),l=p(),$(s,"alt","Stock photo"),s.src!==(a=ke(82,82))&&$(s,"src",a)},m(e,t){c(e,n,t),i(n,s),i(n,l)},p:e,d(e){e&&u(n)}}}function Jt(t){let n,s,a,l,r,g,d,f;return{c(){n=m("figure"),s=m("a"),a=m("img"),g=p(),$(a,"alt","Placeholder"),a.src!==(l=ke(300,300))&&$(a,"src",l),$(s,"href","/demos/xoracademy/watch"),$(s,"class","svelte-i1di9h"),$(n,"class","svelte-i1di9h")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(n,g),d||(f=o(r=me.call(null,s)),d=!0)},p:e,d(e){e&&u(n),d=!1,f()}}}function Kt(e){let t,n,s,l,r,d,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G;d=new be({props:{name:"edit-3",color:"var(--color-text)"}});let U=e[1],R=[];for(let t=0;t<U.length;t+=1)R[t]=Xt(Vt(e,U,t));let B=e[0],V=[];for(let t=0;t<B.length;t+=1)V[t]=Jt(Zt(e,B,t));return O=new Xe({props:{source:"/code/XorAcademy"}}),{c(){t=m("content"),n=m("header"),s=m("nav"),l=m("b"),r=m("a"),J(d.$$.fragment),h=f(" Xor.Academy"),b=p(),w=m("input"),y=p(),x=m("ul"),k=m("li"),S=m("a"),S.innerHTML='<button class="svelte-i1di9h">Log In</button>',C=p(),T=m("li"),T.innerHTML='<a class="svelte-i1di9h">Sign Up</a>',z=p(),L=m("profile"),A=m("figure"),q=m("img"),M=p(),H=m("info"),H.innerHTML='<p class="svelte-i1di9h"><button>Follow</button></p> \n\n      <p class="svelte-i1di9h"><b>10</b> videos <b>4,695 followers</b></p> \n\n      <h3>Drawing Level 1</h3> \n      <p class="svelte-i1di9h">The first module you should take.  It covers the basics of drawing and how to get started\n        making drawing a habit.</p>',I=p(),E=m("related");for(let e=0;e<R.length;e+=1)R[e].c();P=p(),_=m("posts");for(let e=0;e<V.length;e+=1)V[e].c();N=p(),J(O.$$.fragment),$(r,"id","logo-link"),$(r,"href","/demos/xoracademy"),$(r,"class","svelte-i1di9h"),$(w,"placeholder","Search"),$(w,"class","svelte-i1di9h"),$(S,"href","/demos/login"),$(S,"class","svelte-i1di9h"),$(s,"class","svelte-i1di9h"),$(n,"class","svelte-i1di9h"),$(q,"alt","Module Thumb"),q.src!==(F=ke(256,256))&&$(q,"src",F),$(A,"class","svelte-i1di9h"),$(H,"class","svelte-i1di9h"),$(L,"class","svelte-i1di9h"),$(E,"class","svelte-i1di9h"),$(_,"class","svelte-i1di9h"),$(t,"class","svelte-i1di9h")},m(e,a){c(e,t,a),i(t,n),i(n,s),i(s,l),i(l,r),K(d,r,null),i(r,h),i(s,b),i(s,w),i(s,y),i(s,x),i(x,k),i(k,S),i(x,C),i(x,T),i(t,z),i(t,L),i(L,A),i(A,q),i(L,M),i(L,H),i(t,I),i(t,E);for(let e=0;e<R.length;e+=1)R[e].m(E,null);i(t,P),i(t,_);for(let e=0;e<V.length;e+=1)V[e].m(_,null);c(e,N,a),K(O,e,a),D=!0,W||(G=[o(v=me.call(null,r)),o(j=me.call(null,S))],W=!0)},p(e,[t]){if(0&t){let n;for(U=e[1],n=0;n<U.length;n+=1){const s=Vt(e,U,n);R[n]?R[n].p(s,t):(R[n]=Xt(),R[n].c(),R[n].m(E,null))}for(;n<R.length;n+=1)R[n].d(1);R.length=U.length}if(0&t){let n;for(B=e[0],n=0;n<B.length;n+=1){const s=Zt(e,B,n);V[n]?V[n].p(s,t):(V[n]=Jt(),V[n].c(),V[n].m(_,null))}for(;n<V.length;n+=1)V[n].d(1);V.length=B.length}},i(e){D||(Y(d.$$.fragment,e),Y(O.$$.fragment,e),D=!0)},o(e){Z(d.$$.fragment,e),Z(O.$$.fragment,e),D=!1},d(e){e&&u(t),Q(d),g(R,e),g(V,e),e&&u(N),Q(O,e),W=!1,a(G)}}}function Qt(e){return[[1,2,3,4,5,6,7,8,9],[1,2,3,4]]}function en(e,t,n){const s=e.slice();return s[1]=t[n],s}function tn(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j,C;return b=new be({props:{name:"thumbs-up",color:"var(--sub-color)"}}),k=new be({props:{name:"chevron-down"}}),{c(){n=m("card"),s=m("img"),l=p(),r=m("info"),o=m("h4"),o.textContent="Guys",g=p(),d=m("p"),d.textContent="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque",h=p(),v=m("nav"),J(b.$$.fragment),w=f(" 233"),y=p(),x=m("reply"),J(k.$$.fragment),S=f(" View replies"),j=p(),s.src!==(a=ke(64,64))&&$(s,"src",a),$(s,"class","svelte-9c6eed"),$(o,"class","svelte-9c6eed"),$(d,"class","svelte-9c6eed"),$(v,"id","vote-nav"),$(v,"class","svelte-9c6eed"),$(x,"class","svelte-9c6eed"),$(r,"class","svelte-9c6eed"),$(n,"class","svelte-9c6eed")},m(e,t){c(e,n,t),i(n,s),i(n,l),i(n,r),i(r,o),i(r,g),i(r,d),i(r,h),i(r,v),K(b,v,null),i(v,w),i(r,y),i(r,x),K(k,x,null),i(x,S),i(n,j),C=!0},p:e,i(e){C||(Y(b.$$.fragment,e),Y(k.$$.fragment,e),C=!0)},o(e){Z(b.$$.fragment,e),Z(k.$$.fragment,e),C=!1},d(e){e&&u(n),Q(b),Q(k)}}}function nn(e){let t,n,s,l,r,d,h,v,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,V,X,ee,te,ne,se,ae,le,re,oe,ie,ce,ue,ge,de,fe,pe,he,ve,$e,we,ye,xe,Se,je,Ce,Te,ze,Le,Ae,qe,Fe,Me,He,Ie,Ee,Pe,_e,Ne;d=new be({props:{name:"edit-3",color:"var(--color-text)"}}),X=new be({props:{name:"thumbs-up",color:"#999"}}),te=new be({props:{name:"thumbs-down",color:"#999"}}),se=new be({props:{name:"corner-up-right",color:"#999"}}),le=new be({props:{name:"menu",color:"#999"}}),oe=new be({props:{name:"vertical-more"}}),Fe=new be({props:{name:"bar-chart",color:"var(--sub-color)"}});let Oe=e[0],De=[];for(let t=0;t<Oe.length;t+=1)De[t]=tn(en(e,Oe,t));const We=e=>Z(De[e],1,1,(()=>{De[e]=null}));return Ee=new Xe({props:{source:"/code/XorAcademyWatch"}}),{c(){t=m("content"),n=m("header"),s=m("nav"),l=m("b"),r=m("a"),J(d.$$.fragment),h=f(" Xor.Academy"),w=p(),y=m("input"),x=p(),k=m("ul"),S=m("li"),j=m("a"),j.innerHTML='<button class="svelte-9c6eed">Log In</button>',T=p(),z=m("li"),z.innerHTML='<a class="svelte-9c6eed">Sign Up</a>',L=p(),A=m("main"),q=m("figure"),F=m("img"),H=p(),I=m("figcaption"),E=m("a"),E.textContent="#tag",P=p(),_=m("a"),_.textContent="#anothertag",N=p(),O=m("p"),O.textContent="Title And Stuff",D=p(),W=m("video-actions"),G=m("likes"),G.textContent="Likes Other Stats",U=p(),V=m("video-buttons"),J(X.$$.fragment),ee=f(" 1.1K\n              "),J(te.$$.fragment),ne=f(" 22\n                "),J(se.$$.fragment),ae=f(" SHARE\n                "),J(le.$$.fragment),re=f(" SAVE\n                  "),J(oe.$$.fragment),ie=p(),ce=m("lower"),ue=m("promotion"),ge=m("nav"),de=m("card"),fe=m("img"),he=p(),ve=m("info"),ve.innerHTML='<h4 class="svelte-9c6eed">Zed A. Shaw</h4> \n        <subs>1 subscriber</subs>',$e=p(),we=m("button"),we.textContent="SUBSCRIBE",ye=p(),xe=m("content"),xe.textContent="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",Se=p(),je=m("hr"),Ce=p(),Te=m("comments"),ze=m("nav"),Le=m("span"),Le.textContent="125 Comments",Ae=p(),qe=m("sort"),J(Fe.$$.fragment),Me=f(" SORT BY"),He=p();for(let e=0;e<De.length;e+=1)De[e].c();Ie=p(),J(Ee.$$.fragment),$(r,"href","/demos/xoracademy"),$(r,"class","svelte-9c6eed"),$(y,"placeholder","Search"),$(y,"class","svelte-9c6eed"),$(j,"href","/demos/login"),$(j,"class","svelte-9c6eed"),$(s,"class","svelte-9c6eed"),$(n,"class","svelte-9c6eed"),F.src!==(M=ke(1280,720))&&$(F,"src",M),$(E,"class","svelte-9c6eed"),$(_,"class","svelte-9c6eed"),$(O,"class","svelte-9c6eed"),b(W,"class","svelte-9c6eed"),$(I,"class","svelte-9c6eed"),fe.src!==(pe=ke(64,64))&&$(fe,"src",pe),$(fe,"class","svelte-9c6eed"),$(ve,"class","svelte-9c6eed"),$(de,"class","svelte-9c6eed"),$(we,"id","subscribe"),$(we,"class","svelte-9c6eed"),$(ge,"class","svelte-9c6eed"),$(xe,"class","svelte-9c6eed"),$(ue,"class","svelte-9c6eed"),$(je,"class","svelte-9c6eed"),$(qe,"class","svelte-9c6eed"),$(ze,"class","svelte-9c6eed"),$(Te,"class","svelte-9c6eed"),$(ce,"class","svelte-9c6eed"),$(A,"class","svelte-9c6eed"),$(t,"class","svelte-9c6eed")},m(e,a){c(e,t,a),i(t,n),i(n,s),i(s,l),i(l,r),K(d,r,null),i(r,h),i(s,w),i(s,y),i(s,x),i(s,k),i(k,S),i(S,j),i(k,T),i(k,z),i(t,L),i(t,A),i(A,q),i(q,F),i(q,H),i(q,I),i(I,E),i(I,P),i(I,_),i(I,N),i(I,O),i(I,D),i(I,W),i(W,G),i(W,U),i(W,V),K(X,V,null),i(V,ee),K(te,V,null),i(V,ne),K(se,V,null),i(V,ae),K(le,V,null),i(V,re),K(oe,V,null),i(A,ie),i(A,ce),i(ce,ue),i(ue,ge),i(ge,de),i(de,fe),i(de,he),i(de,ve),i(ge,$e),i(ge,we),i(ue,ye),i(ue,xe),i(ce,Se),i(ce,je),i(ce,Ce),i(ce,Te),i(Te,ze),i(ze,Le),i(ze,Ae),i(ze,qe),K(Fe,qe,null),i(qe,Me),i(Te,He);for(let e=0;e<De.length;e+=1)De[e].m(Te,null);c(e,Ie,a),K(Ee,e,a),Pe=!0,_e||(Ne=[o(v=me.call(null,r)),o(C=me.call(null,j))],_e=!0)},p(e,[t]){if(0&t){let n;for(Oe=e[0],n=0;n<Oe.length;n+=1){const s=en(e,Oe,n);De[n]?(De[n].p(s,t),Y(De[n],1)):(De[n]=tn(),De[n].c(),Y(De[n],1),De[n].m(Te,null))}for(R(),n=Oe.length;n<De.length;n+=1)We(n);B()}},i(e){if(!Pe){Y(d.$$.fragment,e),Y(X.$$.fragment,e),Y(te.$$.fragment,e),Y(se.$$.fragment,e),Y(le.$$.fragment,e),Y(oe.$$.fragment,e),Y(Fe.$$.fragment,e);for(let e=0;e<Oe.length;e+=1)Y(De[e]);Y(Ee.$$.fragment,e),Pe=!0}},o(e){Z(d.$$.fragment,e),Z(X.$$.fragment,e),Z(te.$$.fragment,e),Z(se.$$.fragment,e),Z(le.$$.fragment,e),Z(oe.$$.fragment,e),Z(Fe.$$.fragment,e),De=De.filter(Boolean);for(let e=0;e<De.length;e+=1)Z(De[e]);Z(Ee.$$.fragment,e),Pe=!1},d(e){e&&u(t),Q(d),Q(X),Q(te),Q(se),Q(le),Q(oe),Q(Fe),g(De,e),e&&u(Ie),Q(Ee,e),_e=!1,a(Ne)}}}function sn(e){return[[1,2,3,4]]}function an(t){let n,s,a,l;return a=new Xe({props:{source:"/code/Login",notes:"/code/Login.notes.html"}}),{c(){n=m("content"),n.innerHTML='<spacer></spacer> \n  <form><header>Login</header> \n    <label for="username">Username</label> \n    <input type="text" id="username" name="username" size="32" placeholder="Username"/> \n    <label for="password">Password</label> \n    <input type="password" id="password" name="password" size="32" placeholder="Password"/> \n    <br/> \n    <button type="submit">Login</button></form> \n  <spacer></spacer>',s=p(),J(a.$$.fragment),$(n,"class","svelte-t7gl8c")},m(e,t){c(e,n,t),c(e,s,t),K(a,e,t),l=!0},p:e,i(e){l||(Y(a.$$.fragment,e),l=!0)},o(e){Z(a.$$.fragment,e),l=!1},d(e){e&&u(n),e&&u(s),Q(a,e)}}}function ln(t){let n,s,a,l,r,o,g,d,f,h,v,b,w,y,x,k,S;return v=new be({props:{name:"check-circle",color:"var(--color-bg)",size:"24"}}),y=new be({props:{name:"x-circle",color:"var(--color-bg)",size:"24"}}),k=new Xe({props:{source:"/code/Tiles",notes:"/cdoe/Tiles.notes.html"}}),{c(){n=m("content"),s=m("tile"),a=m("left"),l=m("img"),o=p(),g=m("middle"),g.innerHTML='<h4 class="svelte-fwzpwr">Tile Example</h4> \n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',d=p(),f=m("right"),h=m("button"),J(v.$$.fragment),b=p(),w=m("button"),J(y.$$.fragment),x=p(),J(k.$$.fragment),l.src!==(r=ke(48,48))&&$(l,"src",r),$(g,"class","svelte-fwzpwr"),$(h,"class","svelte-fwzpwr"),$(w,"class","svelte-fwzpwr"),$(f,"class","svelte-fwzpwr"),$(s,"class","svelte-fwzpwr"),$(n,"class","svelte-fwzpwr")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(s,o),i(s,g),i(s,d),i(s,f),i(f,h),K(v,h,null),i(f,b),i(f,w),K(y,w,null),c(e,x,t),K(k,e,t),S=!0},p:e,i(e){S||(Y(v.$$.fragment,e),Y(y.$$.fragment,e),Y(k.$$.fragment,e),S=!0)},o(e){Z(v.$$.fragment,e),Z(y.$$.fragment,e),Z(k.$$.fragment,e),S=!1},d(e){e&&u(n),Q(v),Q(y),e&&u(x),Q(k,e)}}}function rn(t){let n,s,a,l,r,o,g,d,f,h,v,b,w,y,x,k,S;return v=new be({props:{name:"check-circle",color:"var(--color-bg)",size:"24"}}),y=new be({props:{name:"x-circle",color:"var(--color-bg)",size:"24"}}),k=new Xe({props:{source:"/code/Cards",notes:"/code/Cards.notes.html"}}),{c(){n=m("content"),s=m("card"),a=m("top"),l=m("img"),o=p(),g=m("middle"),g.innerHTML='<h4 class="svelte-12f1gxf">Card Example</h4> \n      <p>Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',d=p(),f=m("bottom"),h=m("button"),J(v.$$.fragment),b=p(),w=m("button"),J(y.$$.fragment),x=p(),J(k.$$.fragment),l.src!==(r=ke(480,270))&&$(l,"src",r),$(l,"class","svelte-12f1gxf"),$(g,"class","svelte-12f1gxf"),$(h,"class","svelte-12f1gxf"),$(w,"class","svelte-12f1gxf"),$(f,"class","svelte-12f1gxf"),$(s,"class","svelte-12f1gxf"),$(n,"class","svelte-12f1gxf")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),i(s,o),i(s,g),i(s,d),i(s,f),i(f,h),K(v,h,null),i(f,b),i(f,w),K(y,w,null),c(e,x,t),K(k,e,t),S=!0},p:e,i(e){S||(Y(v.$$.fragment,e),Y(y.$$.fragment,e),Y(k.$$.fragment,e),S=!0)},o(e){Z(v.$$.fragment,e),Z(y.$$.fragment,e),Z(k.$$.fragment,e),S=!1},d(e){e&&u(n),Q(v),Q(y),e&&u(x),Q(k,e)}}}function on(t){let n,s,a,l,r,o,g,d,h,v,b,w,y,x,k,S,j;return h=new be({props:{name:"x-circle",color:"var(--color-text)",size:"24"}}),y=new be({props:{name:"check-circle",color:"var(--color-bg)",size:"24"}}),S=new Xe({props:{source:"/code/Panels",notes:"/code/Panels.notes.html"}}),{c(){n=m("content"),s=m("panel"),a=m("top"),a.innerHTML="<h1>Panel is a Card</h1>",l=p(),r=m("middle"),r.innerHTML="<h4>Panel Example</h4> \n      <p>Not sure what the big deal is with the difference between panels and cards\n        but I&#39;m doing all the things so here&#39;s a panel. Let&#39;s say, buttons on a panel\n        are different to demonstrate how to make a button strip.</p>",o=p(),g=m("bottom"),d=m("button"),J(h.$$.fragment),v=f(" CANCEL"),b=p(),w=m("button"),J(y.$$.fragment),x=f(" OK"),k=p(),J(S.$$.fragment),$(a,"class","svelte-1lajyim"),$(r,"class","svelte-1lajyim"),$(d,"id","cancel"),$(d,"class","svelte-1lajyim"),$(w,"class","svelte-1lajyim"),$(g,"class","svelte-1lajyim"),$(s,"class","svelte-1lajyim"),$(n,"class","svelte-1lajyim")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(s,l),i(s,r),i(s,o),i(s,g),i(g,d),K(h,d,null),i(d,v),i(g,b),i(g,w),K(y,w,null),i(w,x),c(e,k,t),K(S,e,t),j=!0},p:e,i(e){j||(Y(h.$$.fragment,e),Y(y.$$.fragment,e),Y(S.$$.fragment,e),j=!0)},o(e){Z(h.$$.fragment,e),Z(y.$$.fragment,e),Z(S.$$.fragment,e),j=!1},d(e){e&&u(n),Q(h),Q(y),e&&u(k),Q(S,e)}}}function cn(t){let n,s,a;return{c(){n=m("modal"),n.innerHTML='<modal-content class="svelte-cwnhgy"><h1>This Is A Modal</h1> \n    <p>Designers love modals. Click anywhere to close this.</p></modal-content>',$(n,"class","svelte-cwnhgy")},m(e,l){c(e,n,l),s||(a=v(n,"click",t[2]),s=!0)},p:e,d(e){e&&u(n),s=!1,a()}}}function un(e){let t,n,s,a,l,r,o,g,d=e[0]&&cn(e);return l=new Xe({props:{source:"/code/Modal"}}),{c(){t=m("content"),n=m("button"),n.textContent="Click Me!",s=p(),d&&d.c(),a=p(),J(l.$$.fragment),$(n,"class","svelte-cwnhgy"),$(t,"class","svelte-cwnhgy")},m(u,m){c(u,t,m),i(t,n),c(u,s,m),d&&d.m(u,m),c(u,a,m),K(l,u,m),r=!0,o||(g=v(n,"click",e[1]),o=!0)},p(e,[t]){e[0]?d?d.p(e,t):(d=cn(e),d.c(),d.m(a.parentNode,a)):d&&(d.d(1),d=null)},i(e){r||(Y(l.$$.fragment,e),r=!0)},o(e){Z(l.$$.fragment,e),r=!1},d(e){e&&u(t),e&&u(s),d&&d.d(e),e&&u(a),Q(l,e),o=!1,g()}}}function gn(e,t,n){let{visible:s=!1}=t;return e.$$set=e=>{"visible"in e&&n(0,s=e.visible)},[s,()=>n(0,s=!0),()=>n(0,s=!1)]}function mn(t){let n,s,a,l,r,o,g,d,h,v,w,y,x,k,S,j,C,T,z,L,A,q,F;return r=new be({props:{name:"trash",color:"var(--color-text)"}}),S=new be({props:{name:"trash",color:"var(--color-text)"}}),q=new Xe({props:{source:"/code/NavBar"}}),{c(){n=m("content"),s=m("nav-bar"),a=m("left"),l=m("b"),J(r.$$.fragment),o=f(" fsck CSS"),g=p(),d=m("middle"),d.innerHTML='<input placeholder="Search" class="svelte-1ofkzoq"/>',h=p(),v=m("right"),v.innerHTML="<button>Log In</button> \n      <a>Sign Up</a>",w=p(),y=m("nav-bar"),x=m("left"),k=m("b"),J(S.$$.fragment),j=f(" fsck CSS"),C=p(),T=m("middle"),z=p(),L=m("right"),L.innerHTML='<button>Log In</button> \n      <button id="signup">Sign Up</button>',A=p(),J(q.$$.fragment),$(d,"class","svelte-1ofkzoq"),b(s,"class","svelte-1ofkzoq"),$(T,"class","svelte-1ofkzoq"),b(y,"class","alternate svelte-1ofkzoq"),$(n,"class","svelte-1ofkzoq")},m(e,t){c(e,n,t),i(n,s),i(s,a),i(a,l),K(r,l,null),i(l,o),i(s,g),i(s,d),i(s,h),i(s,v),i(n,w),i(n,y),i(y,x),i(x,k),K(S,k,null),i(k,j),i(y,C),i(y,T),i(y,z),i(y,L),c(e,A,t),K(q,e,t),F=!0},p:e,i(e){F||(Y(r.$$.fragment,e),Y(S.$$.fragment,e),Y(q.$$.fragment,e),F=!0)},o(e){Z(r.$$.fragment,e),Z(S.$$.fragment,e),Z(q.$$.fragment,e),F=!1},d(e){e&&u(n),Q(r),Q(S),e&&u(A),Q(q,e)}}}function dn(e,t,n){const s=e.slice();return s[3]=t[n],s[5]=n,s}function fn(e,t,n){const s=e.slice();return s[3]=t[n],s[5]=n,s}function pn(e){let t,n,s,a,l=e[3].title+"";function r(){return e[2](e[5])}return{c(){t=m("a"),n=f(l),$(t,"class","svelte-j1ijok"),x(t,"active",e[3].active)},m(e,l){c(e,t,l),i(t,n),s||(a=v(t,"click",r),s=!0)},p(s,a){e=s,1&a&&l!==(l=e[3].title+"")&&y(n,l),1&a&&x(t,"active",e[3].active)},d(e){e&&u(t),s=!1,a()}}}function hn(e){let t,n,s,a,l,r,o=e[3].title+"";return{c(){t=m("panel"),n=m("h1"),s=f(o),a=p(),l=m("p"),l.textContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.",r=p(),$(t,"class","svelte-j1ijok"),x(t,"active",e[3].active)},m(e,o){c(e,t,o),i(t,n),i(n,s),i(t,a),i(t,l),i(t,r)},p(e,n){1&n&&o!==(o=e[3].title+"")&&y(s,o),1&n&&x(t,"active",e[3].active)},d(e){e&&u(t)}}}function vn(e){let t,n,s,a,l,r,o,d,f,h,v,b,w,y=e[0],x=[];for(let t=0;t<y.length;t+=1)x[t]=pn(fn(e,y,t));let k=e[0],S=[];for(let t=0;t<k.length;t+=1)S[t]=hn(dn(e,k,t));return b=new Xe({props:{source:"/code/Tabs",notes:"code/Tabs.notes.html"}}),{c(){t=m("content"),n=m("h1"),n.textContent="Basic Tabs",s=p(),a=m("tabs"),a.innerHTML='<a class="active svelte-j1ijok">Tab1</a> \n    <a class="svelte-j1ijok">Tab2</a> \n    <a class="svelte-j1ijok">Tab3</a>',l=p(),r=m("h2"),r.textContent="Interactive Demo",o=p(),d=m("tabs");for(let e=0;e<x.length;e+=1)x[e].c();f=p(),h=m("panels");for(let e=0;e<S.length;e+=1)S[e].c();v=p(),J(b.$$.fragment),$(a,"class","svelte-j1ijok"),$(d,"class","svelte-j1ijok"),$(t,"class","svelte-j1ijok")},m(e,u){c(e,t,u),i(t,n),i(t,s),i(t,a),i(t,l),i(t,r),i(t,o),i(t,d);for(let e=0;e<x.length;e+=1)x[e].m(d,null);i(t,f),i(t,h);for(let e=0;e<S.length;e+=1)S[e].m(h,null);c(e,v,u),K(b,e,u),w=!0},p(e,[t]){if(3&t){let n;for(y=e[0],n=0;n<y.length;n+=1){const s=fn(e,y,n);x[n]?x[n].p(s,t):(x[n]=pn(s),x[n].c(),x[n].m(d,null))}for(;n<x.length;n+=1)x[n].d(1);x.length=y.length}if(1&t){let n;for(k=e[0],n=0;n<k.length;n+=1){const s=dn(e,k,n);S[n]?S[n].p(s,t):(S[n]=hn(s),S[n].c(),S[n].m(h,null))}for(;n<S.length;n+=1)S[n].d(1);S.length=k.length}},i(e){w||(Y(b.$$.fragment,e),w=!0)},o(e){Z(b.$$.fragment,e),w=!1},d(e){e&&u(t),g(x,e),g(S,e),e&&u(v),Q(b,e)}}}function $n(e,t,n){let s=[{title:"Panel 1",active:!0},{title:"Panel 2",active:!1},{title:"Panel 3",active:!1}];const a=e=>{s.forEach(((t,n)=>t.active=e==n)),n(0,s)};return[s,a,e=>a(e)]}function bn(e,t,n){const s=e.slice();return s[1]=t[n],s}function wn(t){let n,s,a=t[1]+"";return{c(){n=m("date"),s=f(a),$(n,"class","svelte-1gt8gt4")},m(e,t){c(e,n,t),i(n,s)},p:e,d(e){e&&u(n)}}}function yn(e){let t,n,s,a,l,r,o,d,f,h,v,b,w,y,x,k=e[0](),S=[];for(let t=0;t<k.length;t+=1)S[t]=wn(bn(e,k,t));return y=new Xe({props:{source:"/code/Calendar",notes:"/code/Calendar.notes.html"}}),{c(){t=m("content"),n=m("calendar"),s=m("month"),s.textContent="December",a=p(),l=m("day"),l.textContent="Sun",r=m("day"),r.textContent="Mon",o=m("day"),o.textContent="Tue",d=m("day"),d.textContent="Wed",f=m("day"),f.textContent="Thu",h=m("day"),h.textContent="Fri",v=m("day"),v.textContent="Sat",b=p();for(let e=0;e<S.length;e+=1)S[e].c();w=p(),J(y.$$.fragment),$(s,"class","svelte-1gt8gt4"),$(l,"class","svelte-1gt8gt4"),$(r,"class","svelte-1gt8gt4"),$(o,"class","svelte-1gt8gt4"),$(d,"class","svelte-1gt8gt4"),$(f,"class","svelte-1gt8gt4"),$(h,"class","svelte-1gt8gt4"),$(v,"class","svelte-1gt8gt4"),$(n,"class","svelte-1gt8gt4"),$(t,"class","svelte-1gt8gt4")},m(e,u){c(e,t,u),i(t,n),i(n,s),i(n,a),i(n,l),i(n,r),i(n,o),i(n,d),i(n,f),i(n,h),i(n,v),i(n,b);for(let e=0;e<S.length;e+=1)S[e].m(n,null);c(e,w,u),K(y,e,u),x=!0},p(e,[t]){if(1&t){let s;for(k=e[0](),s=0;s<k.length;s+=1){const a=bn(e,k,s);S[s]?S[s].p(a,t):(S[s]=wn(a),S[s].c(),S[s].m(n,null))}for(;s<S.length;s+=1)S[s].d(1);S.length=k.length}},i(e){x||(Y(y.$$.fragment,e),x=!0)},o(e){Z(y.$$.fragment,e),x=!1},d(e){e&&u(t),g(S,e),e&&u(w),Q(y,e)}}}function xn(e){return[()=>{let e=[];for(let t=0;t<31;t++)e.push(t);return e}]}function kn(e,t,n){const s=e.slice();return s[1]=t[n],s}function Sn(e){let t,n,s,a,l,r,o,g=e[1]+"";return{c(){t=m("figure"),n=m("img"),a=p(),l=m("figcaption"),r=f("Image #"),o=f(g),$(n,"alt","Stock photo"),n.src!==(s=ke(640,360))&&$(n,"src",s),$(n,"class","svelte-15us2jh"),$(l,"class","svelte-15us2jh"),$(t,"class","svelte-15us2jh"),x(t,"active",1===e[1])},m(e,s){c(e,t,s),i(t,n),i(t,a),i(t,l),i(l,r),i(l,o)},p(e,n){1&n&&x(t,"active",1===e[1])},d(e){e&&u(t)}}}function jn(e){let t,n,s,a,l,r,o,d,f,h,v,b,w,y=e[0],x=[];for(let t=0;t<y.length;t+=1)x[t]=Sn(kn(e,y,t));return o=new be({props:{name:"arrow-left",size:"48"}}),h=new be({props:{name:"arrow-right",size:"48"}}),b=new Xe({props:{source:"/code/Carousel",notes:"/code/Carousel.notes.html"}}),{c(){t=m("content"),n=m("h1"),n.textContent="Carousel",s=p(),a=m("carousel");for(let e=0;e<x.length;e+=1)x[e].c();l=p(),r=m("prev"),J(o.$$.fragment),d=p(),f=m("next"),J(h.$$.fragment),v=p(),J(b.$$.fragment),$(r,"class","svelte-15us2jh"),$(f,"class","svelte-15us2jh"),$(a,"class","svelte-15us2jh"),$(t,"class","svelte-15us2jh")},m(e,u){c(e,t,u),i(t,n),i(t,s),i(t,a);for(let e=0;e<x.length;e+=1)x[e].m(a,null);i(a,l),i(a,r),K(o,r,null),i(a,d),i(a,f),K(h,f,null),c(e,v,u),K(b,e,u),w=!0},p(e,[t]){if(1&t){let n;for(y=e[0],n=0;n<y.length;n+=1){const s=kn(e,y,n);x[n]?x[n].p(s,t):(x[n]=Sn(s),x[n].c(),x[n].m(a,l))}for(;n<x.length;n+=1)x[n].d(1);x.length=y.length}},i(e){w||(Y(o.$$.fragment,e),Y(h.$$.fragment,e),Y(b.$$.fragment,e),w=!0)},o(e){Z(o.$$.fragment,e),Z(h.$$.fragment,e),Z(b.$$.fragment,e),w=!1},d(e){e&&u(t),g(x,e),Q(o),Q(h),e&&u(v),Q(b,e)}}}function Cn(e){return[[1,2,3,4,5,6,7]]}function Tn(t){let n,s,a,l;return a=new Xe({props:{source:"/code/GridOverGraphic",notes:"/code/GridOverGraphic.notes.html"}}),{c(){n=m("content"),n.innerHTML='<h1>Grid Over Graphic</h1> \n\n  <icecream class="svelte-1c5ml3s"><background class="svelte-1c5ml3s"><img src="/ice_cream_graphic.svg" class="svelte-1c5ml3s"/></background> \n\n    <overlay class="svelte-1c5ml3s"><one class="svelte-1c5ml3s"><h1>Do You Like Icecream?</h1> \n        <p>This square is placed over this image using a\n          CSS Grid.</p></one> \n      <two class="svelte-1c5ml3s"><h1>Icecream Rules</h1> \n      <p>Sometimes you want to put a graphic behind some creatively\n        organize text and panels.  You can do that with CSS grids.</p></two> \n      <three class="svelte-1c5ml3s"><h1>Bottom Left</h1> \n      <p>I don&#39;t know why I put that sphere there.</p></three></overlay></icecream>',s=p(),J(a.$$.fragment),$(n,"class","svelte-1c5ml3s")},m(e,t){c(e,n,t),c(e,s,t),K(a,e,t),l=!0},p:e,i(e){l||(Y(a.$$.fragment,e),l=!0)},o(e){Z(a.$$.fragment,e),l=!1},d(e){e&&u(n),e&&u(s),Q(a,e)}}}function zn(t){let n,s,a,l,r,o,i,g,d,f,h,v,$,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U;return{c(){n=m("section"),n.innerHTML='<h1 class="svelte-c8ddwn">FAQ</h1>',s=p(),a=m("h2"),a.textContent="Why did you do this?",l=p(),r=m("p"),r.innerHTML="It started as an attempt to relearn modern CSS for myself so I can teach others.  As I did this I realized that most of the things I learned have been completely replaced with flexbox and grids, and if I just use those then CSS becomes much easier to understand. Specificity works as expected.  When I change a component with <b>class</b> or <b>id</b> it actually changes.  The layout flows correctly and is easier to create.  Nearly everything works better and is easier to understand.",o=p(),i=m("p"),i.innerHTML="This website became a demonstration to others that <b>layout</b> doesn&#39;t need <b>div.class</b> structure, subverting <b>ul/li</b> tags, and other CSS hacks.  You can use simple <b>truly semantic</b> HTML and simple CSS to accomplish 90% of what you&#39;re doing today with more reliable results faster.",g=p(),d=m("h2"),d.textContent="Why is this site in black and white?",f=p(),h=m("p"),h.textContent="I used an entirely monochrome simplified design because I'm not a designer, and I want people to focus on the visual structure of each demo, not whether my use of Cornflower Blue was appropriate for a button.",v=p(),$=m("p"),$.textContent="I'm also an experienced oil painter and a fundamental teaching in realist art is that color does not matter for visual comprehension. What matters most is the \"drawing\", or monochrome aspects of visual experience.  If you can't make something work in monochrome then no amount of color will help.  Make it visually understandable in monochrome and any color scheme you choose should work (barring a few rules about color perception's relationship to monochrome values).",b=p(),w=m("h2"),w.textContent="What's wrong with classes?",y=p(),x=m("p"),x.innerHTML="There&#39;s nothing wrong with classes in CSS. How they&#39;re used in recent CSS frameworks subverts the normal specificity rules making CSS unnecessarily difficult.  The original specificity rules put the base design of a component at the tag level, then a <b>class</b> can be used to modify and extend the design, and an <b>id</b> can make this even more specific.  In today&#39;s use of <b>div.class</b> heavy markup you lose this ability to alter the design as needed where its used, and instead you have to resort to <b>!important</b> and specificity hacking to change how something looks, or add more <b>div</b> with more <b>class</b>.",k=p(),S=m("p"),S.innerHTML="The other problem with <b>div.class</b> is it&#39;s more difficult to debug problems with the layout. There&#39;s the obvious problem of debugging failures in layout through a forest of divs, but you&#39;re also relying on specificity that can come from anywhere in the cascade.  It&#39;s much more difficult to find exactly <b>what</b> bit of CSS is overriding your local decisions.  If you&#39;ve ever had to open the inspector in your browser to troll through CSS locations looking for the culprit then that&#39;s why.  If the base design decisions are at the tag level, then your local <b>class</b> and <b>id</b> specifics will work as expected.  You can also replace many uses of class as design modifiers with scoped CSS variables and reduce the use of <b>div.class</b> even further.",j=p(),C=m("p"),C.innerHTML="Finally, using <b>div.class</b> heavy layout systems pollutes your markup with structure that&#39;s difficult to analyze and maintain.  When you focus on using <b>truly</b> semantic named tags and follow specificity as intended then your HTML is lighter and easier to understand because it isn&#39;t full of <b>div.grid.col-1.col-mx-auto</b> class rules that really have nothing to do with the actual meaning of that particular visual element.  With <b>flexbox</b> and <b>CSS grids</b> you don&#39;t need any layout divs, and can keep the HTML clean and semantic.  This also ends up being more flexible with less or the same effort as using a pre-made grid system full of divs.",T=p(),z=m("h2"),z.textContent="Should we ban div.class?",L=p(),A=m("p"),A.innerHTML="Hell no.  The current problem of <b>too much</b> class based CSS is because of trends in recent years calling for everyone to irrationally ban some practice.  Remember when everyone decided tables were evil?  So then we banned tables and <b>grids</b> completely?  Then nobody could do a layout without crazy tricks and JavaScript?  Nobody wants a repeat of the anti-tables &quot;semantic markup&quot; war, so please don&#39;t ban <b>div.class</b>.",q=p(),F=m("p"),F.innerHTML="All this website does is demonstrate that you don&#39;t need <b>so much div.class</b>.  You can scrap a lot of what you&#39;re using now to do layout and go with clean HTML with flatter structure, then judiciously use <b>div.class</b> as needed.  Treat <b>div.class</b> like salt. Right now you&#39;re pouring a whole box of it on your HTML when a little bit makes it taste better.",M=p(),H=m("h2"),H.textContent="Do these demos work on phones?",I=p(),E=m("p"),E.textContent="I haven't done the work needed to adapt this to phones yet.  That may come in a later release.  Try it anyway\nas you may be surprised how well the layouts still work on smaller screens.",P=p(),_=m("h2"),_.textContent="Can I suggest a challenge?",N=p(),O=m("p"),O.innerHTML='Yes please.  If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on <a href="https://twitter.com/lzsthw">Twitter at @lzsthw</a> and I&#39;ll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using.  This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks.  Also keep in mind that I am not invested in &quot;winning&quot; and only curious about the limits of flexbox and CSS grids.  If you find something I can&#39;t do, that means I found a useful limit to avoid.  It doesn&#39;t mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s.',D=p(),W=m("h2"),W.textContent="How did you make this site?",G=p(),U=m("p"),U.innerHTML='It&#39;s actually all hand coded HTML, CSS, and JavaScript, with the only technology being <a href="https://svelte.dev">Svelte</a> to make things easier.  You could do all of this without Svelte and it wouldn&#39;t be much harder.  Svelte is why if you do &quot;view source&quot; it&#39;s a mostly empty HTML page that just loads some JavaScript, and if you inspect the results it&#39;s full of <b>svelte-</b> classes.  If you want to see the real HTML then each demo has the source given.'},m(e,t){c(e,n,t),c(e,s,t),c(e,a,t),c(e,l,t),c(e,r,t),c(e,o,t),c(e,i,t),c(e,g,t),c(e,d,t),c(e,f,t),c(e,h,t),c(e,v,t),c(e,$,t),c(e,b,t),c(e,w,t),c(e,y,t),c(e,x,t),c(e,k,t),c(e,S,t),c(e,j,t),c(e,C,t),c(e,T,t),c(e,z,t),c(e,L,t),c(e,A,t),c(e,q,t),c(e,F,t),c(e,M,t),c(e,H,t),c(e,I,t),c(e,E,t),c(e,P,t),c(e,_,t),c(e,N,t),c(e,O,t),c(e,D,t),c(e,W,t),c(e,G,t),c(e,U,t)},p:e,i:e,o:e,d(e){e&&u(n),e&&u(s),e&&u(a),e&&u(l),e&&u(r),e&&u(o),e&&u(i),e&&u(g),e&&u(d),e&&u(f),e&&u(h),e&&u(v),e&&u($),e&&u(b),e&&u(w),e&&u(y),e&&u(x),e&&u(k),e&&u(S),e&&u(j),e&&u(C),e&&u(T),e&&u(z),e&&u(L),e&&u(A),e&&u(q),e&&u(F),e&&u(M),e&&u(H),e&&u(I),e&&u(E),e&&u(P),e&&u(_),e&&u(N),e&&u(O),e&&u(D),e&&u(W),e&&u(G),e&&u(U)}}}var Ln={"/":class extends te{constructor(e){super(),ee(this,e,null,we,r,{})}},"/demos":class extends te{constructor(e){super(),ee(this,e,$t,vt,r,{})}},"/faq":class extends te{constructor(e){super(),ee(this,e,null,zn,r,{})}},"/demos/login":class extends te{constructor(e){super(),ee(this,e,null,an,r,{})}},"/demos/tiles":class extends te{constructor(e){super(),ee(this,e,null,ln,r,{})}},"/demos/modal":class extends te{constructor(e){super(),ee(this,e,gn,un,r,{visible:0})}},"/demos/cards":class extends te{constructor(e){super(),ee(this,e,null,rn,r,{})}},"/demos/panels":class extends te{constructor(e){super(),ee(this,e,null,on,r,{})}},"/demos/google":class extends te{constructor(e){super(),ee(this,e,null,wt,r,{})}},"/demos/twitter":class extends te{constructor(e){super(),ee(this,e,Ct,jt,r,{})}},"/demos/youtube":class extends te{constructor(e){super(),ee(this,e,Ht,Mt,r,{thumbnail:1})}},"/demos/instagram":class extends te{constructor(e){super(),ee(this,e,Ot,Nt,r,{})}},"/demos/pinterest":class extends te{constructor(e){super(),ee(this,e,Yt,Bt,r,{thumbnail:0})}},"/demos/navbar":class extends te{constructor(e){super(),ee(this,e,null,mn,r,{})}},"/demos/tabs":class extends te{constructor(e){super(),ee(this,e,$n,vn,r,{})}},"/demos/calendar":class extends te{constructor(e){super(),ee(this,e,xn,yn,r,{})}},"/demos/carousel":class extends te{constructor(e){super(),ee(this,e,Cn,jn,r,{})}},"/demos/gridovergraphic":class extends te{constructor(e){super(),ee(this,e,null,Tn,r,{})}},"/demos/xoracademy":class extends te{constructor(e){super(),ee(this,e,Qt,Kt,r,{})}},"/demos/xoracademy/watch":class extends te{constructor(e){super(),ee(this,e,sn,nn,r,{})}},"*":class extends te{constructor(e){super(),ee(this,e,null,bt,r,{})}}};function An(t){let n,s,a,l,r;return s=new be({props:{name:"sunset",size:"32"}}),{c(){n=m("span"),J(s.$$.fragment)},m(e,o){c(e,n,o),K(s,n,null),a=!0,l||(r=v(n,"click",t[3]),l=!0)},p:e,i(e){a||(Y(s.$$.fragment,e),a=!0)},o(e){Z(s.$$.fragment,e),a=!1},d(e){e&&u(n),Q(s),l=!1,r()}}}function qn(t){let n,s,a,l,r;return s=new be({props:{name:"sunrise",size:"32"}}),{c(){n=m("span"),J(s.$$.fragment)},m(e,o){c(e,n,o),K(s,n,null),a=!0,l||(r=v(n,"click",t[2]),l=!0)},p:e,i(e){a||(Y(s.$$.fragment,e),a=!0)},o(e){Z(s.$$.fragment,e),a=!1},d(e){e&&u(n),Q(s),l=!1,r()}}}function Fn(e){let t,n,s,a;const l=[qn,An],r=[];function o(e,t){return"dark"==e[0]?0:1}return t=o(e),n=r[t]=l[t](e),{c(){n.c(),s=h()},m(e,n){r[t].m(e,n),c(e,s,n),a=!0},p(e,[a]){let i=t;t=o(e),t===i?r[t].p(e,a):(R(),Z(r[i],1,1,(()=>{r[i]=null})),B(),n=r[t],n?n.p(e,a):(n=r[t]=l[t](e),n.c()),Y(n,1),n.m(s.parentNode,s))},i(e){a||(Y(n),a=!0)},o(e){Z(n),a=!1},d(e){r[t].d(e),e&&u(s)}}}function Mn(e,t,n){let{theme:s=(localStorage.getItem("theme")?localStorage.getItem("theme"):"light")}=t;const a=()=>{document.documentElement.setAttribute("data-theme",s),localStorage.setItem("theme",s)},l=()=>{n(0,s="light"==s?"dark":"light"),a()};T((()=>{a()}));return e.$$set=e=>{"theme"in e&&n(0,s=e.theme)},[s,l,()=>l(),()=>l()]}class Hn extends te{constructor(e){super(),ee(this,e,Mn,Fn,r,{theme:0})}}function In(t){let n,s,l,r,g,d,f,h,v,b,w,y,x,k,S,j,C,T,z,L,A,q,F,M,H,I,E,P,_,N,O,D,W,G,U,R,B,V,X;return r=new be({props:{name:"trash-2",size:"64"}}),C=new he({props:{routes:Ln,restoreScrollState:!0}}),_=new be({props:{name:"twitter",size:"32"}}),W=new be({props:{name:"instagram",size:"32"}}),R=new Hn({}),{c(){n=m("header"),s=m("nav"),l=m("a"),J(r.$$.fragment),d=p(),f=m("ul"),h=m("li"),v=m("a"),v.textContent="Demos",w=p(),y=m("li"),x=m("a"),x.textContent="FAQ",S=p(),j=m("main"),J(C.$$.fragment),T=p(),z=m("hr"),L=p(),A=m("footer"),q=m("nav"),F=m("a"),F.innerHTML="<p>Copyright (C) Zed A. Shaw. All rights reserved.</p>",H=p(),I=m("ul"),E=m("li"),P=m("a"),J(_.$$.fragment),N=p(),O=m("li"),D=m("a"),J(W.$$.fragment),G=p(),U=m("li"),J(R.$$.fragment),$(l,"href","/"),$(v,"href","/demos"),$(x,"href","/faq"),$(n,"class","svelte-khlxmc"),$(j,"class","svelte-khlxmc"),$(F,"href","/"),$(P,"href","https://twitter.com/lzsthw"),$(D,"href","https://instagram.com/zedshaw"),$(q,"class","svelte-khlxmc"),$(A,"class","svelte-khlxmc")},m(e,t){c(e,n,t),i(n,s),i(s,l),K(r,l,null),i(s,d),i(s,f),i(f,h),i(h,v),i(f,w),i(f,y),i(y,x),c(e,S,t),c(e,j,t),K(C,j,null),c(e,T,t),c(e,z,t),c(e,L,t),c(e,A,t),i(A,q),i(q,F),i(q,H),i(q,I),i(I,E),i(E,P),K(_,P,null),i(I,N),i(I,O),i(O,D),K(W,D,null),i(I,G),i(I,U),K(R,U,null),B=!0,V||(X=[o(g=me.call(null,l)),o(b=me.call(null,v)),o(k=me.call(null,x)),o(M=me.call(null,F))],V=!0)},p:e,i(e){B||(Y(r.$$.fragment,e),Y(C.$$.fragment,e),Y(_.$$.fragment,e),Y(W.$$.fragment,e),Y(R.$$.fragment,e),B=!0)},o(e){Z(r.$$.fragment,e),Z(C.$$.fragment,e),Z(_.$$.fragment,e),Z(W.$$.fragment,e),Z(R.$$.fragment,e),B=!1},d(e){e&&u(n),Q(r),e&&u(S),e&&u(j),Q(C),e&&u(T),e&&u(z),e&&u(L),e&&u(A),Q(_),Q(W),Q(R),V=!1,a(X)}}}return new class extends te{constructor(e){super(),ee(this,e,null,In,r,{})}}({target:document.body,props:{name:"world"}})}();
//# sourceMappingURL=bundle.js.map