Travis build: 126 [FORCED]

docs/js.8bafe4ae.js

@@ -17,16 +17,16 @@ var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSele
 },{}],"Xw/u":[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createEventHub=exports.on=exports.easeOutQuint=exports.scrollY=exports.selectAll=exports.select=void 0;var t=function(t){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector(t)};exports.select=t;var e=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return[].slice.call(e.querySelectorAll(t))};exports.selectAll=e;var r=function(){return window.scrollY||window.pageYOffset};exports.scrollY=r;var n=function(t,e,r,n){return r*((t=t/n-1)*Math.pow(t,4)+1)+e};exports.easeOutQuint=n;var o=function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=function(t){return t.target.matches(n.target)&&r.call(t.target,t)};if(t.addEventListener(e,n.target?o:r,n.options||!1),n.target)return o};exports.on=o;var a=function(){return{hub:Object.create(null),emit:function(t,e){(this.hub[t]||[]).forEach(function(t){return t(e)})},on:function(t,e){this.hub[t]||(this.hub[t]=[]),this.hub[t].push(e)},off:function(t,e){var r=(this.hub[t]||[]).findIndex(function(t){return t===e});r>-1&&this.hub[t].splice(r,1)}}};exports.createEventHub=a,window.EventHub=a(),/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),/Mac/.test(navigator.platform)&&document.documentElement.classList.add("macOS"),function(){var t=navigator.userAgent,e=/Mac/.test(navigator.platform)&&(t.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,r=(t.match(/Chrome\/(\d+)\./)||[])[1]<64||(t.match(/Firefox\/(\d+)\./)||[])[1]<58,n=[].slice.call(document.querySelectorAll("*"));e&&r?(document.documentElement.style.letterSpacing="-0.3px",n.forEach(function(t){parseFloat(getComputedStyle(t).fontSize)>=20&&(t.style.letterSpacing="0.3px")})):e&&!r&&n.forEach(function(t){var e=getComputedStyle(t),r=e.fontSize;"italic"===e.fontStyle&&(t.style.letterSpacing=parseFloat(r)>=20?"0.3px":"-0.3px")})}();
 },{}],"bnBP":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=s(require("jump.js")),t=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var i=(0,t.select)(".hamburger"),n=(0,t.select)(".sidebar__links"),a=(0,t.selectAll)(".sidebar__section"),r="is-active",l=function(){window.innerWidth<=991&&([i,n].forEach(function(e){return e.classList.toggle(r)}),i.setAttribute("aria-expanded",i.classList.contains(r)?"true":"false"))};i.addEventListener("click",l),n.addEventListener("click",function(s){var i=s.target.closest(".sidebar__link");i&&(setTimeout(l,50),(0,e.default)(i.getAttribute("href"),{duration:500,easing:t.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(r)||l()}),EventHub.on("Tag.click",function(e){a.forEach(function(t){t.style.display="block",t.dataset.type!==e.type&&"all"!==e.type&&(t.style.display="none")})});var c={toggle:l};exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=s(require("jump.js")),t=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var i=(0,t.select)(".hamburger"),n=(0,t.select)(".sidebar__links"),a=(0,t.selectAll)(".sidebar__section"),r="is-active",l=function(){window.innerWidth<=991&&([i,n].forEach(function(e){return e.classList.toggle(r)}),i.setAttribute("aria-expanded",i.classList.contains(r)?"true":"false"))};i.addEventListener("click",l),n.addEventListener("click",function(s){var i=s.target.closest(".sidebar__link");i&&(setTimeout(l,50),(0,e.default)(i.getAttribute("href"),{duration:500,easing:t.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(r)||l()}),EventHub.on("Tag.click",function(e){e.type_new=e.type.map(function(e){return e.dataset.type}),a.forEach(function(t){t.style.display="block",e.type_new.includes(t.dataset.type)||e.type_new.includes("all")?t.style.display="":t.style.display="none"})});var c={toggle:l};exports.default=c;
 },{"jump.js":"NVQN","../deps/utils":"Xw/u"}],"/f8x":[function(require,module,exports) {
 "use strict";var e=i(require("jump.js")),t=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var s=(0,t.select)(".back-to-top-button");window.addEventListener("scroll",function(){s.classList[(0,t.scrollY)()>500?"add":"remove"]("is-visible")}),s.onclick=function(){(0,e.default)(".header",{duration:750,easing:t.easeOutQuint})};
 },{"jump.js":"NVQN","../deps/utils":"Xw/u"}],"uI+q":[function(require,module,exports) {
-"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)("button.tags__tag"),i=function(){e.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active"),EventHub.emit("Tag.click",{type:this.dataset.type})};e.forEach(function(e){return(0,t.on)(e,"click",i)});
+"use strict";var t=require("../deps/utils");function i(t){return a(t)||e(t)||s()}function s(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function e(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function a(t){if(Array.isArray(t)){for(var i=0,s=new Array(t.length);i<t.length;i++)s[i]=t[i];return s}}var c=(0,t.selectAll)("button.tags__tag"),n=!1,r=function(){n&&"all"===this.dataset.type?(c.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active")):n?((0,t.select)("button[data-type=all]").classList.remove("is-active"),this.classList.contains("is-active")&&(0,t.selectAll)("button.tags__tag.is-active").length>1?this.classList.remove("is-active"):this.classList.contains("is-active")?(this.classList.remove("is-active"),(0,t.select)("button[data-type=all]").classList.add("is-active")):this.classList.add("is-active")):(c.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active")),EventHub.emit("Tag.click",{type:i((0,t.selectAll)("button.tags__tag.is-active"))})};onkeydown=function(t){t.shiftKey&&(n=!0)},onkeyup=function(t){"Shift"==t.key&&(n=!1)},c.forEach(function(i){return(0,t.on)(i,"click",r)});
 },{"../deps/utils":"Xw/u"}],"7KYq":[function(require,module,exports) {
-"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)(".snippet");EventHub.on("Tag.click",function(l){e.forEach(function(e){(e.style.display="block","all"!==l.type)&&((0,t.selectAll)(".tags__tag",e).some(function(t){return t.dataset.type===l.type})||(e.style.display="none"))})});
+"use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");EventHub.on("Tag.click",function(n){n.type_new=n.type.map(function(e){return e.dataset.type}),t.forEach(function(t){(t.style.display="block",n.type_new.includes("all"))||((0,e.selectAll)(".tags__tag",t).some(function(e){return n.type_new.includes(e.dataset.type)})?t.style.display="":t.style.display="none")})});
 },{"../deps/utils":"Xw/u"}],"JXhB":[function(require,module,exports) {
 "use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");t.forEach(function(e){var t=document.createElement("form");t.action="https://codepen.io/pen/define",t.method="POST",t.target="_blank";var n=document.createElement("input");n.type="hidden",n.name="data";var r=document.createElement("button");r.classList="btn is-large codepen-btn",r.innerHTML='<i data-feather="edit-2"></i>Edit on Codepen';var o=e.querySelector("pre code.lang-css"),a=e.querySelector("pre code.lang-html"),i=e.querySelector("pre code.lang-js"),l={css:o.textContent,title:e.querySelector("h3 > span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)});
 },{"../deps/utils":"Xw/u"}],"mahc":[function(require,module,exports) {
 "use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=n(require("feather-icons"));require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var r=n(require("./components/Sidebar")),s=n(require("./components/BackToTopButton")),i=n(require("./components/Tag")),o=n(require("./components/Snippet")),u=n(require("./components/CodepenCopy"));function n(e){return e&&e.__esModule?e:{default:e}}e.default.replace();
 },{"focus-visible":"PHYi","normalize.css":"9KIJ","prismjs":"HxJM","feather-icons":"2Os9","../css/deps/prism.css":"9KIJ","../css/index.scss":"9KIJ","./deps/polyfills":"C1Ar","./components/Sidebar":"bnBP","./components/BackToTopButton":"/f8x","./components/Tag":"uI+q","./components/Snippet":"7KYq","./components/CodepenCopy":"JXhB"}]},{},["mahc"], null)
-//# sourceMappingURL=js.e471b612.map
+//# sourceMappingURL=js.8bafe4ae.map

index.html

@@ -38,7 +38,7 @@
         </section>
         <section data-type="animation" class="sidebar__section">
           <h4 class="sidebar__section-heading">animation</h4>
-          <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
+          <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
         </section>
         <section data-type="interactivity" class="sidebar__section">
           <h4 class="sidebar__section-heading">interactivity</h4>
@@ -1409,6 +1409,85 @@ el.style.setProperty('--max-height', height + 'px')
 
             <!-- tags: animation -->
           </div>
+          <div class="snippet">
+            <h3 id="hover-shadow-box-animation"><span>Hover Shadow Box Animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
+            <p>Creates a shadow box around the text whern it is hovered.</p>
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class = "hover-shadow-box-animation"&gt; Box it! &lt;/p&gt;
+</code></pre>
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.hover-shadow-box-animation{
+  display: inline-block;
+  vertical-align: middle;
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  margin: 10px;
+  transition-duration: 0.3s;
+  transition-property: box-shadow, transform;
+}
+.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{
+  box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5);
+  transform: scale(1.2); 
+}
+</code></pre>
+            <h4>Demo</h4>
+            <div class="snippet-demo" data-scope="hover-shadow-box-animation.md">
+              <p class="hover-shadow-box-animation"> Box it! </p>
+            </div>
+            <style>[data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation {
+  display: inline-block;
+  vertical-align: middle;
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  margin: 10px;
+  transition-duration: 0.3s;
+  transition-property: box-shadow, transform; }
+[data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation:hover, [data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation:focus, [data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation:active {
+  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
+  transform: scale(1.2); }
+</style>
+            <div class="snippet-demo">
+              <p class="snippet-demo_hover-shadow-box-animation"> Box it!
+              </p>
+            </div>
+            <style>
+              .snippet-demo_hover-shadow-box-animation{
+  display: inline-block;
+  color: #0087ca;
+  margin: 10px;
+  vertical-align: middle;
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  transition-duration: 0.3s;
+  transition-property: box-shadow, transform;
+}
+.snippet-demo_hover-shadow-box-animation:hover, .snippet-demo_hover-shadow-box-animation:focus, .snippet-demo_hover-shadow-box-animation:active{
+  box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.1);
+  transform: scale(1.2); 
+}                                                       
+</style>
+            <h4>Explanation</h4>
+            <ol>
+              <li><code>display: inline-block</code> to set width and length for <code>p</code> element thus making it an <code>inline-block</code>.</li>
+              <li>Set <code>transform: perspective(1px)</code> to give element a 3D space by affecting the distance between the Z plane and the user and <code>translate(0)</code> to reposition the <code>p</code> element along z-axis in 3D space.</li>
+              <li><code>box-shadow:</code> to set up the box.</li>
+              <li><code>transparent</code> to make box transparent.</li>
+              <li><code>transition-property</code> to enable transitions for both <code>box-shadow</code> and <code>transform</code>.</li>
+              <li><code>:hover</code> to activate whole css when hovering is done until <code>active</code>.</li>
+              <li><code>transform: scale(1.2)</code> to change the scale, magnifying the text.</li>
+            </ol>
+            <h4>Browser Support</h4>
+            <div>
+              <div class="snippet__browser-support">
+                93.3%
+              </div>
+            </div>
+            <p><span class="snippet__support-note">✅ No caveats.</span></p>
+            <ul>
+              <li><a href="https://caniuse.com/#feat=transforms3d" target="_blank">https://caniuse.com/#feat=transforms3d</a></li>
+              <li><a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a></li>
+            </ul>
+
+            <!-- tags: animation -->
+          </div>
           <div class="snippet">
             <h3 id="hover-underline-animation"><span>Hover underline animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
             <p>Creates an animated underline effect when the text is hovered over.</p>

snippets/hover-shadow-box-animation.md

@@ -5,13 +5,13 @@ Creates a shadow box around the text whern it is hovered.
 #### HTML
 
 ```html
-<p class = "hover-shadow-box-animation"> Box it! </p>
+<p class="hover-shadow-box-animation">Box it!</p>
 ```
 
 #### CSS
 
 ```css
-.hover-shadow-box-animation{
+.hover-shadow-box-animation {
   display: inline-block;
   vertical-align: middle;
   transform: perspective(1px) translateZ(0);
@@ -20,11 +20,14 @@ Creates a shadow box around the text whern it is hovered.
   transition-duration: 0.3s;
   transition-property: box-shadow, transform;
 }
-.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{
+.hover-shadow-box-animation:hover,
-  box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5);
+.hover-shadow-box-animation:focus,
+.hover-shadow-box-animation:active {
+  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
   transform: scale(1.2);
 }
 ```
+
 #### Demo
 
 <div class = "snippet-demo">
@@ -59,13 +62,11 @@ Creates a shadow box around the text whern it is hovered.
 6. `:hover` to activate whole css when hovering is done until `active`.
 7. `transform: scale(1.2)` to change the scale, magnifying the text.
 
-
 #### Browser Support
 
 <span class="snippet__support-note">✅ No caveats.</span>
 
-* https://caniuse.com/#feat=transforms3d
+- https://caniuse.com/#feat=transforms3d
-* https://caniuse.com/#feat=css-transitions
+- https://caniuse.com/#feat=css-transitions
-
 
 <!-- tags: animation -->

src/js/components/Sidebar.js

@@ -43,10 +43,9 @@ EventHub.on('Tag.click', data => {
   sections.forEach(section => {
     section.style.display = 'block'
     //console.log(data.type_new.includes('all'))
-    if(!data.type_new.includes(section.dataset.type) && !data.type_new.includes('all')) {
+    if (!data.type_new.includes(section.dataset.type) && !data.type_new.includes('all')) {
       section.style.display = 'none'
-    }
+    } else {
-    else{
       section.style.display = ''
     }
   })

src/js/components/Snippet.js

@@ -9,8 +9,7 @@ EventHub.on('Tag.click', data => {
     const tags = selectAll('.tags__tag', snippet)
     if (!tags.some(el => data.type_new.includes(el.dataset.type))) {
       snippet.style.display = 'none'
-    }
+    } else {
-    else {
       snippet.style.display = ''
     }
   })

src/js/components/Tag.js

@@ -1,42 +1,41 @@
 import { select, selectAll, on } from '../deps/utils'
 
 const tagButtons = selectAll('button.tags__tag')
-var isShiftSelected = false;
+var isShiftSelected = false
 const onClick = function() {
-  if(isShiftSelected && this.dataset.type === 'all'){
+  if (isShiftSelected && this.dataset.type === 'all') {
-    tagButtons.forEach(button => button.classList.remove('is-active'));
+    tagButtons.forEach(button => button.classList.remove('is-active'))
-    this.classList.add('is-active');
+    this.classList.add('is-active')
-  }
+  } else if (isShiftSelected) {
-  else if(isShiftSelected) {
+    select('button[data-type=all]').classList.remove('is-active')
-    select('button[data-type=all]').classList.remove('is-active');
+    if (
-    if(this.classList.contains('is-active') && (selectAll('button.tags__tag.is-active').length > 1)){
+      this.classList.contains('is-active') &&
+      selectAll('button.tags__tag.is-active').length > 1
+    ) {
       this.classList.remove('is-active')
-    }
+    } else if (this.classList.contains('is-active')) {
-    else if(this.classList.contains('is-active')){
       this.classList.remove('is-active')
       select('button[data-type=all]').classList.add('is-active')
+    } else {
+      this.classList.add('is-active')
     }
-    else{
+  } else {
-    this.classList.add('is-active');
+    tagButtons.forEach(button => button.classList.remove('is-active'))
-    }
+    this.classList.add('is-active')
-  }
-  else {
-    tagButtons.forEach(button => button.classList.remove('is-active'));
-    this.classList.add('is-active');
   }
   EventHub.emit('Tag.click', {
     type: [...selectAll('button.tags__tag.is-active')]
   })
 }
 onkeydown = e => {
-  if(e.shiftKey){
+  if (e.shiftKey) {
-    isShiftSelected = true;
+    isShiftSelected = true
+  }
 }
-};
 
 onkeyup = e => {
-  if(e.key == 'Shift'){
+  if (e.key == 'Shift') {
-    isShiftSelected = false;
+    isShiftSelected = false
+  }
 }
-};
 tagButtons.forEach(button => on(button, 'click', onClick))