diff --git a/_includes/demo-list.html b/_includes/demo-list.html index b26801b..4b0cea5 100644 --- a/_includes/demo-list.html +++ b/_includes/demo-list.html @@ -3,7 +3,7 @@
-
+
{{ post.label }} diff --git a/_posts/2013-05-02-adaptive.html b/_posts/2013-05-02-adaptive.html index edba9f1..cb06fa8 100644 --- a/_posts/2013-05-02-adaptive.html +++ b/_posts/2013-05-02-adaptive.html @@ -50,7 +50,7 @@ extraCSS: [ "/css/gallery.css" ]
{% for shape in site.shapes %}
-
+
diff --git a/_posts/2013-05-03-images.html b/_posts/2013-05-03-images.html index af1726c..11a684f 100644 --- a/_posts/2013-05-03-images.html +++ b/_posts/2013-05-03-images.html @@ -1,62 +1,50 @@ --- layout: default -title: Using images with imagesloaded.js -description: A Shuffle.js demo using Desandro's imagesLoaded plugin. This comes in very handy when using shuffle with images affect the layout of shuffle items +title: Using images with Shuffle +description: A Shuffle.js demo using aspect ratios to set the size of images. image: /demos/images.jpg -extraJS: [ "imagesloaded.pkgd.js", "demos/images.js"] +extraJS: ["demos/images.js"] prism: true ---
-

Images!

+

Using images with Shuffle

You can encounter problems when shuffle item dimensions depend on images. Like this demo. There are three good solutions to this.

  1. Set an explicit height on .shuffle-items like the basic demo.
    2. -
  2. Similar to number 1, make the height of the image container a percentage of the width. This can be seen in the nav images above with the div.keep-ratio.
    3. -
  3. Get notified when images load (this page). In this case, I'm using Desandro's images loaded plugin. Please note that imagesloaded does not support IE7.
    4. +
  4. Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses this technique.
    5. +
  5. Get notified when images load and call myShuffleInstance.layout(). I recommend using Desandro's images loaded plugin to know when your images have finished loading.
- Loading... -
+
{% for item in site.items %}
- {{item.title}} +
+
+ {{item.title}} +
+
{{ item.groups }}
{% endfor %} @@ -65,12 +53,70 @@ prism: true
-
-
-

Shuffle.js

-

{{ site.longDescription }}

+
+
+
+

Setup

+
+
+

Maintaining aspect ratios

+

With two elements, you can create a box which will scale with the page. Here's an example:

+
+
+
+
+
A 2:1 box
+
+
+
+
+

With this knowledge, you can force an image to fit inside this box and, when the image loads, it will not change the size of the box.

+
+ 
.aspect {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  overflow: hidden;
+}
+
+.aspect__inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* Add more aspect ratios here */
+.aspect--16x9 {
+  padding-bottom: 56.25%;
+}
+
+
+
+

Markup for each item

+

The most important thing here is that the images are wrapped in two other elements which define its size. This means that the size of the <figure> does not depend on the image.

+
+ 
<figure class="js-item img-item col-3@sm col-3@xs">
+  <div class="aspect aspect--16x9">
+    <div class="aspect__inner">
+      <img src="/img/tennis-ball.png" alt="3D render of a tennis ball">
+    </div>
+  </div>
+  <figcaption>wallpaper3d</figcaption>
+</figure>
+
+
+
+

JavaScript used for this demo

+

Link to demo source

+
+ 

+      

+    

   

-

+

 
 
 {% include credit-jake.html %}
diff --git a/_posts/2013-06-29-image-problems.html b/_posts/2013-06-29-image-problems.html
index 747ad91..d440edb 100644
--- a/_posts/2013-06-29-image-problems.html
+++ b/_posts/2013-06-29-image-problems.html
@@ -2,34 +2,35 @@
 layout: default
 title: Image based items
 description: A demo of how NOT to use images with shuffle
-extraJS: [ "demos/images-broken.js"]
+extraJS: [ "demos/images.js"]
 ---
 
 

   
This probably looks broken.

-  
Demo in which shuffle item dimensions are based on images without a fix. See here for a solution.

+  
In this demo, the height of each item in the grid depends on the image. If Shuffle is initialized before the images load, the heights it calculates will be incorrect. See here for a solution.

   
Resize the window and it'll fix itself.

 

 
 
 
 
 

-  

+  

     {% for item in site.items %}
     

       {{item.title}}
diff --git a/_posts/2014-04-09-requirejs.html b/_posts/2014-04-09-requirejs.html
index a7e290c..a9006bd 100644
--- a/_posts/2014-04-09-requirejs.html
+++ b/_posts/2014-04-09-requirejs.html
@@ -37,8 +37,8 @@ pagejs: false
   

     {% for item in site.items %}
     

-      

-        

+      

+        

           {{item.title}}
         

       

diff --git a/_scss/_grid.scss b/_scss/_grid.scss
index e9f796e..6f5a21e 100644
--- a/_scss/_grid.scss
+++ b/_scss/_grid.scss
@@ -25,6 +25,11 @@
   }
 }
 
+// .aspect
+.#{$grid-ratio-name} {
+  @include keep-aspect();
+}
+
 // .aspect--16x9 etc.
 @include grid-ratios();
 
diff --git a/_scss/_helpers.scss b/_scss/_helpers.scss
index 6999d51..42e377e 100644
--- a/_scss/_helpers.scss
+++ b/_scss/_helpers.scss
@@ -4,27 +4,6 @@
   display: inline-block;
 }
 
-.aspect,
-.keep-ratio {
-  position: relative;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  padding-bottom: 100%;
-
-  &.four-three {
-    padding-bottom: 75%;
-  }
-}
-
-.aspect--4x3 {
-  padding-bottom: 75%;
-}
-
-.aspect--16x9 {
-  padding-bottom: 56.25%;
-}
-
 // Hide from both screenreaders and browsers.
 .hidden {
   display: none !important;
@@ -58,6 +37,9 @@
   float: right;
 }
 
+.full-width { width: 100%; }
+.full-height { height: 100%; }
+
 .hide-text {
   font: 0/0 a;
   color: transparent;
diff --git a/_scss/gallery.scss b/_scss/gallery.scss
index d008ba1..11e4534 100644
--- a/_scss/gallery.scss
+++ b/_scss/gallery.scss
@@ -105,7 +105,7 @@
 
 // IE8 filter alpha wasn't working with the positioning stuff
 .lt-ie9 .shape {
-  .keep-ratio {
+  .aspect {
     position: static;
     width: 100%;
     height: 250px;
diff --git a/css/gallery.css b/css/gallery.css
index cf24cc1..b3f1b54 100644
--- a/css/gallery.css
+++ b/css/gallery.css
@@ -65,7 +65,7 @@
   border-width: 0 110px 191px 110px;
   background-color: transparent; }
 
-.lt-ie9 .shape .keep-ratio {
+.lt-ie9 .shape .aspect {
   position: static;
   width: 100%;
   height: 250px;
diff --git a/css/prism.css b/css/prism.css
index 93ab4ae..57ba41d 100644
--- a/css/prism.css
+++ b/css/prism.css
@@ -1,4 +1,4 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss */
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss&plugins=line-highlight+file-highlight */
 /**
  * prism.js default theme for JavaScript, CSS and HTML
  * Based on dabblet (http://dabblet.com)
@@ -136,3 +136,51 @@ pre[class*="language-"] {
 .token.entity {
 	cursor: help;
 }
+
+pre[data-line] {
+	position: relative;
+	padding: 1em 0 1em 3em;
+}
+
+.line-highlight {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: inherit 0;
+	margin-top: 1em; /* Same as .prism’s padding-top */
+
+	background: hsla(24, 20%, 50%,.08);
+	background: -moz-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+	background: -webkit-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+	background: -o-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+
+	pointer-events: none;
+
+	line-height: inherit;
+	white-space: pre;
+}
+
+	.line-highlight:before,
+	.line-highlight[data-end]:after {
+		content: attr(data-start);
+		position: absolute;
+		top: .4em;
+		left: .6em;
+		min-width: 1em;
+		padding: 0 .5em;
+		background-color: hsla(24, 20%, 50%,.4);
+		color: hsl(24, 20%, 95%);
+		font: bold 65%/1.5 sans-serif;
+		text-align: center;
+		vertical-align: .3em;
+		border-radius: 999px;
+		text-shadow: none;
+		box-shadow: 0 1px white;
+	}
+
+	.line-highlight[data-end]:after {
+		content: attr(data-end);
+		top: auto;
+		bottom: .4em;
+	}
diff --git a/css/style.css b/css/style.css
index 3ca6fa5..c7a9ef3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -538,6 +538,13 @@ h3:hover > a {
         -ms-flex-pack: center;
             justify-content: center; }
 
+.aspect {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 100%; }
+
 .aspect--16x9 {
   padding-bottom: 56.25%; }
 
@@ -1171,23 +1178,6 @@ button {
 .ib {
   display: inline-block; }
 
-.aspect,
-.keep-ratio {
-  position: relative;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  padding-bottom: 100%; }
-  .aspect.four-three,
-  .keep-ratio.four-three {
-    padding-bottom: 75%; }
-
-.aspect--4x3 {
-  padding-bottom: 75%; }
-
-.aspect--16x9 {
-  padding-bottom: 56.25%; }
-
 .hidden {
   display: none !important;
   visibility: hidden; }
@@ -1214,6 +1204,12 @@ button {
 .pull-right {
   float: right; }
 
+.full-width {
+  width: 100%; }
+
+.full-height {
+  height: 100%; }
+
 .hide-text {
   font: 0/0 a;
   color: transparent;
diff --git a/js/demos/images.js b/js/demos/images.js
index a551345..a47f0eb 100644
--- a/js/demos/images.js
+++ b/js/demos/images.js
@@ -1,54 +1,6 @@
+var Shuffle = window.shuffle;
 
-// For this demo, shuffle won't be initialized until
-// all the images have finished loading.
-
-// Another approach would be to initialize shuffle on document
-// ready and as imagesLoaded reports back progress, call shuffle.layout()
-
-// imagesLoaded: https://github.com/desandro/imagesloaded
-
-var ImageDemo = (function( $, imagesLoaded ) {
-
-  var $shuffle = $('.shuffle--images'),
-      $imgs = $shuffle.find('img'),
-      $loader = $('#loader'),
-      sizer = document.getElementById('js-sizer'),
-      imgLoad,
-
-  init = function() {
-
-    // Create a new imagesLoaded instance
-    imgLoad = new imagesLoaded( $imgs.get() );
-
-    // Listen for when all images are done
-    // will be executed even if some images fail
-    imgLoad.on( 'always', onAllImagesFinished );
-  },
-
-  onAllImagesFinished = function( instance ) {
-
-    if ( window.console && window.console.log ) {
-      console.log( instance );
-    }
-
-    // Hide loader
-    $loader.addClass('hidden');
-
-    // Adds visibility: visible;
-    $shuffle.addClass('images-loaded');
-
-    // Initialize shuffle
-    $shuffle.shuffle({
-      sizer: sizer,
-      itemSelector: '.js-item'
-    });
-  };
-
-  return {
-    init: init
-  };
-}( jQuery, window.imagesLoaded ));
-
-$(document).ready(function() {
-  ImageDemo.init();
+window.myShuffle = new Shuffle(document.querySelector('.my-grid-with-images'), {
+  itemSelector: '.js-item',
+  sizer: '.shuffle__sizer',
 });
diff --git a/js/prism.js b/js/prism.js
index bc726b1..0037318 100644
--- a/js/prism.js
+++ b/js/prism.js
@@ -1,8 +1,9 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss&plugins=file-highlight */
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss&plugins=line-highlight+file-highlight */
 var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(m instanceof a)){u.lastIndex=0;var y=u.exec(m),v=1;if(!y&&h&&p!=r.length-1){var b=r[p+1].matchedStr||r[p+1],k=m+b;if(p=m.length)continue;var _=y.index+y[0].length,P=m.length+b.length;if(v=3,P>=_){if(r[p+1].greedy)continue;v=2,k=k.slice(0,P)}m=k}if(y){g&&(f=y[1].length);var w=y.index+f,y=y[0].slice(f),_=w+y.length,S=m.slice(0,w),O=m.slice(_),j=[p,v];S&&j.push(S);var A=new a(i,c?n.tokenize(y,c):y,d,y,h);j.push(A),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",n.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
 Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
 Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
 Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!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+)|(?:catch\s+\())[a-z0-9_\.\\]+/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":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
 Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(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|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
 Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,inside:{placeholder:/%[-_\w]+/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","property",{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-_\w]+/,alias:"selector"},statement:/\B!(?:default|optional)\b/i,"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.util.clone(Prism.languages.scss);
+!function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function t(e,t){return t=" "+t+" ",(" "+e.className+" ").replace(/[\n\t]/g," ").indexOf(t)>-1}function n(e,n,i){for(var o,a=n.replace(/\s+/g,"").split(","),l=+e.getAttribute("data-line-offset")||0,d=r()?parseInt:parseFloat,c=d(getComputedStyle(e).lineHeight),s=0;o=a[s++];){o=o.split("-");var u=+o[0],m=+o[1]||u,h=document.createElement("div");h.textContent=Array(m-u+2).join(" \n"),h.className=(i||"")+" line-highlight",t(e,"line-numbers")||(h.setAttribute("data-start",u),m>u&&h.setAttribute("data-end",m)),h.style.top=(u-l-1)*c+"px",t(e,"line-numbers")?e.appendChild(h):(e.querySelector("code")||e).appendChild(h)}}function i(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var i=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(i&&!document.getElementById(t)){var r=t.slice(0,t.lastIndexOf(".")),o=document.getElementById(r);o&&(o.hasAttribute("data-line")||o.setAttribute("data-line",""),n(o,i,"temporary "),document.querySelector(".temporary.line-highlight").scrollIntoView())}}if("undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector){var r=function(){var e;return function(){if("undefined"==typeof e){var t=document.createElement("div");t.style.fontSize="13px",t.style.lineHeight="1.5",t.style.padding=0,t.style.border=0,t.innerHTML=" 
 ",document.body.appendChild(t),e=38===t.offsetHeight,document.body.removeChild(t)}return e}}(),o=0;Prism.hooks.add("complete",function(t){var r=t.element.parentNode,a=r&&r.getAttribute("data-line");r&&a&&/pre/i.test(r.nodeName)&&(clearTimeout(o),e(".line-highlight",r).forEach(function(e){e.parentNode.removeChild(e)}),n(r,a),o=setTimeout(i,1))}),window.addEventListener&&window.addEventListener("hashchange",i)}}();
 !function(){"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.forEach&&Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var a,s=t.getAttribute("data-src"),n=t,r=/\blang(?:uage)?-(?!\*)(\w+)\b/i;n&&!r.test(n.className);)n=n.parentNode;if(n&&(a=(t.className.match(r)||[,""])[1]),!a){var o=(s.match(/\.(\w+)$/)||[,""])[1];a=e[o]||o}var l=document.createElement("code");l.className="language-"+a,t.textContent="",l.textContent="Loading…",t.appendChild(l);var i=new XMLHttpRequest;i.open("GET",s,!0),i.onreadystatechange=function(){4==i.readyState&&(i.status<400&&i.responseText?(l.textContent=i.responseText,Prism.highlightElement(l)):l.textContent=i.status>=400?"✖ Error "+i.status+" while fetching file: "+i.statusText:"✖ Error: File does not exist or is empty")},i.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight))}();