diff --git a/dist/a11y-carousel.min.js b/dist/a11y-carousel.min.js index 95c6a86..324358e 100644 --- a/dist/a11y-carousel.min.js +++ b/dist/a11y-carousel.min.js @@ -1 +1 @@ -"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function debounce(s,n,r){var o;return function(){var t=this,e=arguments,i=r&&!o;clearTimeout(o),o=setTimeout(function(){o=null,r||s.apply(t,e)},n),i&&s.apply(t,e)}}var _extends=Object.assign||function(t){for(var e=1;ethis.thresholdX,this.swipingVertical=n>this.thresholdY,this.swipingDirection=nthis.opts.pressThreshold&&clearTimeout(this.longPressTimer),this.fire("panmove",t)}}},{key:"onTouchEnd",value:function(t){var e=this;if("mouseup"!==t.type||this.touchStartX&&null===this.touchEndX){this.touchEndX="mouseup"===t.type?t.screenX:t.changedTouches[0].screenX,this.touchEndY="mouseup"===t.type?t.screenY:t.changedTouches[0].screenY,this.fire("panend",t),clearTimeout(this.longPressTimer);var i=this.touchEndX-this.touchStartX,s=Math.abs(i),n=this.touchEndY-this.touchStartY,r=Math.abs(n);s>this.thresholdX||r>this.thresholdY?(this.swipedHorizontal=this.opts.diagonalSwipes?Math.abs(i/n)<=this.opts.diagonalLimit:r<=s&&s>this.thresholdX,this.swipedVertical=this.opts.diagonalSwipes?Math.abs(n/i)<=this.opts.diagonalLimit:sthis.thresholdY,this.swipedHorizontal&&(i<0?(this.velocityX<-this.opts.velocityThreshold||i<-this.disregardVelocityThresholdX)&&this.fire("swipeleft",t):(this.velocityX>this.opts.velocityThreshold||i>this.disregardVelocityThresholdX)&&this.fire("swiperight",t)),this.swipedVertical&&(n<0?(this.velocityY<-this.opts.velocityThreshold||n<-this.disregardVelocityThresholdY)&&this.fire("swipeup",t):(this.velocityY>this.opts.velocityThreshold||n>this.disregardVelocityThresholdY)&&this.fire("swipedown",t))):s=s._slides.length&&(t=0),t<0&&(t=s._slides.length-1),s._sliderIndex==t)return null;var e=s._sliderIndex,i=t;(s._sliderIndex=t,s._slides[e].style.opacity=0,s._slides[e].style.zIndex=2,s._slides[i].style.zIndex=1,s._slides[i].style.display="block",s.getSettings().dots)&&Array.from(s.dotsWrapper.children).forEach(function(t){t.getAttribute("data-slider-id")==i?(t.classList.add("active"),t.setAttribute("tabindex",0)):(t.classList.remove("active"),t.setAttribute("tabindex",-1))});setTimeout(function(){s._slides[e].style.zIndex=1,s._slides[i].style.zIndex=2,s._slides[e].style.opacity=null,s._slides[e].style.display="none"},parseInt(s.getSettings().transitionSpeed)+100)},200),this.initSlidesSize=function(){var t=Array.from(s._element.querySelectorAll("img"));0==t.length?s.setSize():(s.setSize(),t[t.length-1].addEventListener("load",function(){s.setSize()}))},this.setSize=debounce(function(){"auto"!==s.getSettings().width&&(s._element.style.width=s.getSettings().width,s._element.style.maxWidth=s.getSettings().width,s._element.style.overflowX="hidden"),"auto"!==s.getSettings().height?(s._element.style.height=s.getSettings().height,s._element.style.maxHeight=s.getSettings().height,s._element.style.overflowY="hidden"):s._element.style.height=s._slides[s._sliderIndex].offsetHeight+"px"},100),this.autoPlay=function(){s._canAutoSlide&&s.setSlider(parseInt(s._sliderIndex)+1)};this.getSettings=function(){return s.settings};if(this.settings=_extends({},{autoplay:!0,autoplaySpeed:7e3,transitionSpeed:300,arrows:!0,dots:!1,sliderIndex:0,width:"auto",height:"auto",gesture:!0,pauseOnHover:!0,className:"a11y-carousel",ariaRoledescriptionCarousel:"carousel",ariaRoledescriptionSlide:"slide",ariaLabel:"Slideshow",playText:"Start slide show",pauseText:"Stop slide show",previousText:"Previous",nextText:"Next",ofText:"of",slideText:"Slide",tablistText:"Choose slide to display"},i),this._selector=e,this._element=document.querySelector(e),this._playId=this._selector.slice(1)+"-play",this._prevId=this._selector.slice(1)+"-prev",this._nextId=this._selector.slice(1)+"-next",this._sliderIndex=this.getSettings().sliderIndex,this._wasPlaying=this.getSettings().autoplay,this._canAutoSlide=!0,(this._autoPlayInterval=null)===this._element)return!1;if(this.getSettings().transitionSpeed>this.getSettings().autoplaySpeed)throw"a11y Carousel: 🤚 transitionSpeed can be greater than autoplaySpeed";var n=document.createElement("div");n.setAttribute("aria-roledescription",this.getSettings().ariaRoledescription),n.setAttribute("aria-label",this.getSettings().ariaLabel),n.classList.add(this.getSettings().className);var r=document.querySelector(this._selector);r.parentNode.insertBefore(n,r),n.appendChild(r),this._slides=n.querySelectorAll(this._selector+" > div"),this._element.style.position="relative",this._element.setAttribute("aria-live",this.getSettings().autoplay?"off":"polite"),this.initSlidesSize(),window.addEventListener("resize",function(){s.setSize()}),this._slides.forEach(function(t,e){t.setAttribute("id",s._selector.slice(1)+"-tabpanel-"+e),t.setAttribute("aria-label",e+1+" "+s.getSettings().ofText+" "+s._slides.length),t.style.transition="all "+s.getSettings().transitionSpeed+"ms",t.style.opacity=1,t.style.position="absolute",t.style.top=0,t.style.left=0,t.style.right=0,t.style.display="none",e===s._sliderIndex&&(t.style.display="block")}),this.getSettings().dots?(this._slides.forEach(function(t,e){t.setAttribute("aria-labelledby",s._selector.slice(1)+"-tab-"+e),t.setAttribute("role","tabpanel")}),this.dotsWrapper=document.createElement("div"),this.dotsWrapper.classList.add("dots"),this.dotsWrapper.setAttribute("role","tablist"),this.dotsWrapper.setAttribute("aria-label",this.getSettings().tablistText),n.insertAdjacentElement("afterbegin",this.dotsWrapper),this._slides.forEach(function(t,e){var i=document.createElement("button");i.setAttribute("aria-controls",s._selector.slice(1)+"-tabpanel-"+e),i.setAttribute("id",s._selector.slice(1)+"-tab-"+e),i.setAttribute("data-slider-id",e),i.setAttribute("role","tab"),i.setAttribute("tabindex",-1),e==s._sliderIndex&&i.classList.add("active"),0==e&&i.setAttribute("tabindex",0),i.textContent=s.getSettings().slideText+" "+(e+1),s.dotsWrapper.insertAdjacentElement("beforeend",i),i.addEventListener("click",function(t){s.setSlider(t.target.getAttribute("data-slider-id"))}),i.addEventListener("keydown",function(t){39==t.which&&(t.preventDefault(),null!==t.currentTarget.nextSibling&&(t.currentTarget.nextSibling.focus(),s.setSlider(t.currentTarget.nextSibling.getAttribute("data-slider-id")))),37==t.which&&(t.preventDefault(),null!==t.currentTarget.previousSibling&&(t.currentTarget.previousSibling.focus(),s.setSlider(t.currentTarget.previousSibling.getAttribute("data-slider-id")))),36==t.which&&(t.preventDefault(),t.currentTarget.parentNode.childNodes[0].focus(),s.setSlider(t.currentTarget.parentNode.childNodes[0].getAttribute("data-slider-id"))),35==t.which&&(t.preventDefault(),t.currentTarget.parentNode.childNodes[t.currentTarget.parentNode.childNodes.length-1].focus(),s.setSlider(t.currentTarget.parentNode.childNodes[t.currentTarget.parentNode.childNodes.length-1].getAttribute("data-slider-id")))})})):this._slides.forEach(function(t,e){t.setAttribute("aria-roledescription","slide"),t.setAttribute("role","group")});var o=document.createElement("button"),a=document.createElement("button");this.getSettings().arrows&&(o.setAttribute("aria-controls",this._selector.slice(1)),o.textContent=this.getSettings().previousText,o.setAttribute("id",this._prevId),o.classList.add("prev"),a.setAttribute("aria-controls",this._selector.slice(1)),a.textContent=this.getSettings().nextText,a.setAttribute("id",this._nextId),a.classList.add("next"),n.insertAdjacentElement("afterbegin",a),n.insertAdjacentElement("afterbegin",o));var l=document.createElement("button");if(this.getSettings().autoplay&&(l.setAttribute("id",this._playId),this._autoPlayInterval=setInterval(this.autoPlay,parseInt(this.getSettings().autoplaySpeed)),this.getSettings().autoplay?(l.textContent=this.getSettings().pauseText,l.classList.add("playing"),n.insertAdjacentElement("afterbegin",l)):(l.textContent=this.getSettings().playText,l.classList.add("paused"))),document.addEventListener("click",debounce(function(t){t.target&&t.target.id==s._playId?(l.classList.toggle("playing"),l.classList.toggle("paused"),s._element.setAttribute("aria-live","polite"==s._element.getAttribute("aria-live")?"off":"polite"),s._wasPlaying?(l.textContent=s.getSettings().playText,s._canAutoSlide=!1):(s._canAutoSlide=!0,l.textContent=s.getSettings().pauseText),s._wasPlaying=!s._wasPlaying):t.target&&t.target.id==s._prevId?s.setSlider(parseInt(s._sliderIndex)-1):t.target&&t.target.id==s._nextId&&s.setSlider(parseInt(s._sliderIndex)+1)},200)),this.getSettings().gesture){var h=new TinyGesture(this._element);h.on("swiperight",debounce(function(){s.setSlider(parseInt(s._sliderIndex)-1)},200)),h.on("swipeleft",debounce(function(){s.setSlider(parseInt(s._sliderIndex)+1)},200))}this.getSettings().pauseOnHover&&(n.addEventListener("mouseenter",function(){s._canAutoSlide=!1,s._element.setAttribute("aria-live","polite")}),n.addEventListener("mouseleave",function(){var t=!1;try{t=!!n.querySelector("#"+document.activeElement.id)}catch(t){}s._wasPlaying&&!t&&(s._canAutoSlide=!0,s._element.setAttribute("aria-live","off"))}),n.querySelectorAll("button").forEach(function(t,e){t.getAttribute("id")!==s._playId&&t.addEventListener("focus",function(){s._canAutoSlide=!1,s._element.setAttribute("aria-live","polite")})}),n.addEventListener("focusout",function(t){n.contains(t.relatedTarget)||s._wasPlaying&&(s._canAutoSlide=!0,s._element.setAttribute("aria-live","off"))}))}; \ No newline at end of file +"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function debounce(s,n,r){var o;return function(){var t=this,e=arguments,i=r&&!o;clearTimeout(o),o=setTimeout(function(){o=null,r||s.apply(t,e)},n),i&&s.apply(t,e)}}var _extends=Object.assign||function(t){for(var e=1;ethis.thresholdX,this.swipingVertical=n>this.thresholdY,this.swipingDirection=nthis.opts.pressThreshold&&clearTimeout(this.longPressTimer),this.fire("panmove",t)}}},{key:"onTouchEnd",value:function(t){var e=this;if("mouseup"!==t.type||this.touchStartX&&null===this.touchEndX){this.touchEndX="mouseup"===t.type?t.screenX:t.changedTouches[0].screenX,this.touchEndY="mouseup"===t.type?t.screenY:t.changedTouches[0].screenY,this.fire("panend",t),clearTimeout(this.longPressTimer);var i=this.touchEndX-this.touchStartX,s=Math.abs(i),n=this.touchEndY-this.touchStartY,r=Math.abs(n);s>this.thresholdX||r>this.thresholdY?(this.swipedHorizontal=this.opts.diagonalSwipes?Math.abs(i/n)<=this.opts.diagonalLimit:r<=s&&s>this.thresholdX,this.swipedVertical=this.opts.diagonalSwipes?Math.abs(n/i)<=this.opts.diagonalLimit:sthis.thresholdY,this.swipedHorizontal&&(i<0?(this.velocityX<-this.opts.velocityThreshold||i<-this.disregardVelocityThresholdX)&&this.fire("swipeleft",t):(this.velocityX>this.opts.velocityThreshold||i>this.disregardVelocityThresholdX)&&this.fire("swiperight",t)),this.swipedVertical&&(n<0?(this.velocityY<-this.opts.velocityThreshold||n<-this.disregardVelocityThresholdY)&&this.fire("swipeup",t):(this.velocityY>this.opts.velocityThreshold||n>this.disregardVelocityThresholdY)&&this.fire("swipedown",t))):s=s._slides.length&&(t=0),t<0&&(t=s._slides.length-1),s._sliderIndex==t)return null;var e=s._sliderIndex,i=t;(s._sliderIndex=t,s._slides[e].style.opacity=0,s._slides[e].style.zIndex=2,s._slides[i].style.zIndex=1,s._slides[i].style.display="block",s.getSettings().dots)&&Array.from(s.dotsWrapper.children).forEach(function(t){t.getAttribute("data-slider-id")==i?(t.classList.add("active"),t.setAttribute("tabindex",0)):(t.classList.remove("active"),t.setAttribute("tabindex",-1))});setTimeout(function(){s._slides[e].style.zIndex=1,s._slides[i].style.zIndex=2,s._slides[e].style.opacity=null,s._slides[e].style.display="none"},parseInt(s.getSettings().transitionSpeed)+100)},200),this.initSlidesSize=function(){var t=Array.from(s._element.querySelectorAll("img"));0==t.length?s.setSize():(s.setSize(),t[t.length-1].addEventListener("load",function(){s.setSize()}))},this.setSize=debounce(function(){"auto"!==s.getSettings().width&&(s._element.style.width=s.getSettings().width,s._element.style.maxWidth=s.getSettings().width,s._element.style.overflowX="hidden"),"auto"!==s.getSettings().height?(s._element.style.height=s.getSettings().height,s._element.style.maxHeight=s.getSettings().height,s._element.style.overflowY="hidden"):s._element.style.height=s._slides[s._sliderIndex].offsetHeight+"px"},100),this.autoPlay=function(){s._canAutoSlide&&s.setSlider(parseInt(s._sliderIndex)+1)};this.getSettings=function(){return s.settings};if(this.settings=_extends({},{autoplay:!0,autoplaySpeed:7e3,transitionSpeed:300,arrows:!0,dots:!1,sliderIndex:0,width:"auto",height:"auto",gesture:!0,pauseOnHover:!0,className:"a11y-carousel",ariaRoledescriptionCarousel:"carousel",ariaRoledescriptionSlide:"slide",ariaLabel:"Slideshow",playText:"Start slide show",pauseText:"Stop slide show",previousText:"Previous",nextText:"Next",ofText:"of",slideText:"Slide",tablistText:"Choose slide to display"},i),this._selector=e,this._element=document.querySelector(e),this._playId=this._selector.slice(1)+"-play",this._prevId=this._selector.slice(1)+"-prev",this._nextId=this._selector.slice(1)+"-next",this._sliderIndex=this.getSettings().sliderIndex,this._wasPlaying=this.getSettings().autoplay,this._canAutoSlide=!0,(this._autoPlayInterval=null)===this._element)return!1;if(this.getSettings().transitionSpeed>this.getSettings().autoplaySpeed)throw"a11y Carousel: 🤚 transitionSpeed can be greater than autoplaySpeed";var n=document.createElement("div");n.setAttribute("aria-roledescription",this.getSettings().ariaRoledescriptionCarousel),n.setAttribute("aria-label",this.getSettings().ariaLabel),n.setAttribute("role","region"),n.classList.add(this.getSettings().className);var r=document.querySelector(this._selector);r.parentNode.insertBefore(n,r),n.appendChild(r),this._slides=n.querySelectorAll(this._selector+" > div"),this._element.style.position="relative",this._element.setAttribute("aria-live",this.getSettings().autoplay?"off":"polite"),this.initSlidesSize(),window.addEventListener("resize",function(){s.setSize()}),this._slides.forEach(function(t,e){t.setAttribute("id",s._selector.slice(1)+"-tabpanel-"+e),t.setAttribute("aria-label",e+1+" "+s.getSettings().ofText+" "+s._slides.length),t.style.transition="all "+s.getSettings().transitionSpeed+"ms",t.style.opacity=1,t.style.position="absolute",t.style.top=0,t.style.left=0,t.style.right=0,t.style.display="none",e===s._sliderIndex&&(t.style.display="block")}),this.getSettings().dots?(this._slides.forEach(function(t,e){t.setAttribute("aria-labelledby",s._selector.slice(1)+"-tab-"+e),t.setAttribute("role","tabpanel")}),this.dotsWrapper=document.createElement("div"),this.dotsWrapper.classList.add("dots"),this.dotsWrapper.setAttribute("role","tablist"),this.dotsWrapper.setAttribute("aria-label",this.getSettings().tablistText),n.insertAdjacentElement("afterbegin",this.dotsWrapper),this._slides.forEach(function(t,e){var i=document.createElement("button");i.setAttribute("aria-controls",s._selector.slice(1)+"-tabpanel-"+e),i.setAttribute("id",s._selector.slice(1)+"-tab-"+e),i.setAttribute("data-slider-id",e),i.setAttribute("role","tab"),i.setAttribute("tabindex",-1),e==s._sliderIndex&&i.classList.add("active"),0==e&&i.setAttribute("tabindex",0),i.textContent=s.getSettings().slideText+" "+(e+1),s.dotsWrapper.insertAdjacentElement("beforeend",i),i.addEventListener("click",function(t){s.setSlider(t.target.getAttribute("data-slider-id"))}),i.addEventListener("keydown",function(t){39==t.which&&(t.preventDefault(),null!==t.currentTarget.nextSibling?(t.currentTarget.nextSibling.focus(),s.setSlider(t.currentTarget.nextSibling.getAttribute("data-slider-id"))):(t.currentTarget.parentNode.childNodes[0].focus(),s.setSlider(t.currentTarget.parentNode.childNodes[0].getAttribute("data-slider-id")))),37==t.which&&(t.preventDefault(),null!==t.currentTarget.previousSibling?(t.currentTarget.previousSibling.focus(),s.setSlider(t.currentTarget.previousSibling.getAttribute("data-slider-id"))):(t.currentTarget.parentNode.childNodes[t.currentTarget.parentNode.childNodes.length-1].focus(),s.setSlider(t.currentTarget.parentNode.childNodes[t.currentTarget.parentNode.childNodes.length-1].getAttribute("data-slider-id")))),36==t.which&&(t.preventDefault(),t.currentTarget.parentNode.childNodes[0].focus(),s.setSlider(t.currentTarget.parentNode.childNodes[0].getAttribute("data-slider-id"))),35==t.which&&(t.preventDefault(),t.currentTarget.parentNode.childNodes[t.currentTarget.parentNode.childNodes.length-1].focus(),s.setSlider(t.currentTarget.parentNode.childNodes[t.currentTarget.parentNode.childNodes.length-1].getAttribute("data-slider-id")))})})):this._slides.forEach(function(t,e){t.setAttribute("aria-roledescription","slide"),t.setAttribute("role","group")});var o=document.createElement("button"),a=document.createElement("button");this.getSettings().arrows&&(o.setAttribute("aria-controls",this._selector.slice(1)),o.textContent=this.getSettings().previousText,o.setAttribute("id",this._prevId),o.classList.add("prev"),a.setAttribute("aria-controls",this._selector.slice(1)),a.textContent=this.getSettings().nextText,a.setAttribute("id",this._nextId),a.classList.add("next"),n.insertAdjacentElement("afterbegin",a),n.insertAdjacentElement("afterbegin",o));var l=document.createElement("button");if(this.getSettings().autoplay&&(l.setAttribute("id",this._playId),this._autoPlayInterval=setInterval(this.autoPlay,parseInt(this.getSettings().autoplaySpeed)),this.getSettings().autoplay?(l.textContent=this.getSettings().pauseText,l.classList.add("playing"),n.insertAdjacentElement("afterbegin",l)):(l.textContent=this.getSettings().playText,l.classList.add("paused"))),document.addEventListener("click",debounce(function(t){t.target&&t.target.id==s._playId?(l.classList.toggle("playing"),l.classList.toggle("paused"),s._element.setAttribute("aria-live","polite"==s._element.getAttribute("aria-live")?"off":"polite"),s._wasPlaying?(l.textContent=s.getSettings().playText,s._canAutoSlide=!1):(s._canAutoSlide=!0,l.textContent=s.getSettings().pauseText),s._wasPlaying=!s._wasPlaying):t.target&&t.target.id==s._prevId?s.setSlider(parseInt(s._sliderIndex)-1):t.target&&t.target.id==s._nextId&&s.setSlider(parseInt(s._sliderIndex)+1)},200)),this.getSettings().gesture){var h=new TinyGesture(this._element);h.on("swiperight",debounce(function(){s.setSlider(parseInt(s._sliderIndex)-1)},200)),h.on("swipeleft",debounce(function(){s.setSlider(parseInt(s._sliderIndex)+1)},200))}this.getSettings().pauseOnHover&&(n.addEventListener("mouseenter",function(){s._canAutoSlide=!1,s._element.setAttribute("aria-live","polite")}),n.addEventListener("mouseleave",function(){var t=!1;try{t=!!n.querySelector("#"+document.activeElement.id)}catch(t){}s._wasPlaying&&!t&&(s._canAutoSlide=!0,s._element.setAttribute("aria-live","off"))}),n.querySelectorAll("button").forEach(function(t,e){t.getAttribute("id")!==s._playId&&t.addEventListener("focus",function(){s._canAutoSlide=!1,s._element.setAttribute("aria-live","polite")})}),n.addEventListener("focusout",function(t){n.contains(t.relatedTarget)||s._wasPlaying&&(s._canAutoSlide=!0,s._element.setAttribute("aria-live","off"))}))}; \ No newline at end of file diff --git a/index.html b/index.html index ace794f..e226d6f 100644 --- a/index.html +++ b/index.html @@ -15,13 +15,12 @@

A11y Carousel

The accessible slideshow / carousel you've always dreamed of (or may be it's just me)

-

Demo :

-

Accessible

+

Accessible

A11y Carousel is fully accessible with the keyboard and has the right aria attributes. The carousel is based on the example provided by the W3C.

@@ -30,7 +29,7 @@

Accessible

-

IE 10 Compatible

+

IE 10 Compatible

A11y Carousel support all browsers even that ugly duck. Because you and me know your clients are still on IE.

@@ -39,7 +38,7 @@

IE 10 Compatible

-

Vanilla JavaScript

+

Vanilla JavaScript

No jQuery here, no dependecie either, just the JS you love <3. Also only 14.5 KB!

diff --git a/src/a11y-carousel.js b/src/a11y-carousel.js index 54ae03c..caf51cb 100644 --- a/src/a11y-carousel.js +++ b/src/a11y-carousel.js @@ -58,9 +58,10 @@ class A11yCarousel { const sliderWrapper = document.createElement(`div`); sliderWrapper.setAttribute( `aria-roledescription`, - this.getSettings().ariaRoledescription + this.getSettings().ariaRoledescriptionCarousel ); sliderWrapper.setAttribute(`aria-label`, this.getSettings().ariaLabel); + sliderWrapper.setAttribute(`role`, `region`); sliderWrapper.classList.add(this.getSettings().className); // Move the current HTML for the slide show in the new wrapper @@ -153,6 +154,12 @@ class A11yCarousel { if (e.currentTarget.nextSibling !== null) { e.currentTarget.nextSibling.focus(); this.setSlider(e.currentTarget.nextSibling.getAttribute(`data-slider-id`)); + } else { + // In case there no previous sibling we focus the first dot (tab) + e.currentTarget.parentNode.childNodes[0].focus(); + this.setSlider( + e.currentTarget.parentNode.childNodes[0].getAttribute(`data-slider-id`) + ); } } // <- @@ -161,6 +168,16 @@ class A11yCarousel { if (e.currentTarget.previousSibling !== null) { e.currentTarget.previousSibling.focus(); this.setSlider(e.currentTarget.previousSibling.getAttribute(`data-slider-id`)); + } else { + // In case there no previous sibling we focus the last dot (tab) + e.currentTarget.parentNode.childNodes[ + e.currentTarget.parentNode.childNodes.length - 1 + ].focus(); + this.setSlider( + e.currentTarget.parentNode.childNodes[ + e.currentTarget.parentNode.childNodes.length - 1 + ].getAttribute(`data-slider-id`) + ); } } // HOME diff --git a/src/doc.css b/src/doc.css index 1d79b9f..549f05e 100644 --- a/src/doc.css +++ b/src/doc.css @@ -1 +1 @@ -@import url("//fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css");a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}.hljs{display:block;overflow-x:auto;padding:.5em;background:#011627;color:#d6deeb}.hljs-keyword{color:#c792ea;font-style:italic}.hljs-built_in{color:#addb67;font-style:italic}.hljs-type{color:#82aaff}.hljs-literal{color:#ff5874}.hljs-number{color:#F78C6C}.hljs-regexp{color:#5ca7e4}.hljs-string{color:#ecc48d}.hljs-subst{color:#d3423e}.hljs-symbol{color:#82aaff}.hljs-class{color:#ffcb8b}.hljs-function{color:#82AAFF}.hljs-title{color:#DCDCAA;font-style:italic}.hljs-params{color:#7fdbca}.hljs-comment{color:#637777;font-style:italic}.hljs-doctag{color:#7fdbca}.hljs-meta{color:#82aaff}.hljs-meta-keyword{color:#82aaff}.hljs-meta-string{color:#ecc48d}.hljs-section{color:#82b1ff}.hljs-builtin-name,.hljs-name,.hljs-tag{color:#7fdbca}.hljs-attr{color:#7fdbca}.hljs-attribute{color:#80cbc4}.hljs-variable{color:#addb67}.hljs-bullet{color:#d9f5dd}.hljs-code{color:#80CBC4}.hljs-emphasis{color:#c792ea;font-style:italic}.hljs-strong{color:#addb67;font-weight:bold}.hljs-formula{color:#c792ea}.hljs-link{color:#ff869a}.hljs-quote{color:#697098;font-style:italic}.hljs-selector-tag{color:#ff6363}.hljs-selector-id{color:#fad430}.hljs-selector-class{color:#addb67;font-style:italic}.hljs-selector-attr,.hljs-selector-pseudo{color:#c792ea;font-style:italic}.hljs-template-tag{color:#c792ea}.hljs-template-variable{color:#addb67}.hljs-addition{color:#addb67ff;font-style:italic}.hljs-deletion{color:#EF535090;font-style:italic}body{background:#fff;border:1.875rem solid #f0f5f8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";overflow-x:hidden}.container{max-width:57.5rem;margin:0 auto;padding:0.9375rem}h1,h2,h3,h4,h5,h6{font-family:"Poppins", Helvetica, Arial, sans-serif}h1{font-weight:800;font-size:2.625rem;margin:2rem 0 1.875rem 0}h2{font-size:2.25rem;font-weight:700;margin:0.625rem 0 1.875rem 0}h3{font-size:1.875rem;font-weight:700;margin:0.625rem 0 1.875rem 0}p{font-size:1rem;line-height:1.5;margin-bottom:1.875rem}p.lead{font-size:1.25rem;font-weight:500}a{color:#2d53fe;text-decoration:underline}a:focus,a:hover{color:#2d53fe;text-decoration:none}img{display:block;max-width:100%}small{font-size:50%}.demo-slider{background:#2d53fe;color:white;position:relative;margin-bottom:6.25rem}@media (min-width:1120px){.demo-slider:before{content:'';position:absolute;z-index:-1;top:-2.8125rem;right:-3.125rem;display:block;width:6.25rem;height:6.25rem;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23161616;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Ccircle class='cls-1' cx='32.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='32.5' cy='32.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='32.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E")}}.demo-slider #demo{position:relative;z-index:1}.demo-slider #demo>div>div{display:-webkit-box;display:-ms-flexbox;display:flex;height:18.75rem}.demo-slider #demo>div>div .media{-webkit-box-flex:1;-ms-flex:1 0 40%;flex:1 0 40%;background-repeat:no-repeat;background-size:cover}.demo-slider #demo>div>div .caption{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 3.125rem 0 2.5rem}.demo-slider #demo>div>div .caption h3{margin-top:0;text-transform:uppercase}.demo-slider #demo>div>div .caption p{text-align:justify}.demo-slider #demo>div>div .caption a{color:white;text-decoration:underline}.demo-slider #demo>div>div .caption a:focus,.demo-slider #demo>div>div .caption a:hover{text-decoration:none}@media (max-width:600px){.demo-slider #demo>div>div{display:block;height:auto;min-height:auto;max-height:auto}.demo-slider #demo>div>div .media{display:none}.demo-slider #demo>div>div .caption h3{display:block;text-align:center;width:100%;margin-top:3.75rem!important}}@media (max-width:430px){.demo-slider #demo>div>div .caption h3{font-size:1.25rem}}.demo-slider #demo-play{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0;background:white;width:2.625rem;height:2.625rem;position:absolute;z-index:10;top:0.25rem;left:0.25rem;color:transparent;font-size:0;line-height:0;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}.demo-slider #demo-play:after{display:inline-block;content:"\f04c";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:2rem;font-size:0.875rem}.demo-slider #demo-play:focus,.demo-slider #demo-play:hover{background:#333}.demo-slider #demo-play:focus:after,.demo-slider #demo-play:hover:after{color:white}.demo-slider #demo-play.paused:after{content:"\f04b"}.demo-slider #demo-next,.demo-slider #demo-prev{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0;background:white;width:2.625rem;height:2.625rem;position:absolute;z-index:10;top:50%;left:-1.3125rem;color:transparent;font-size:0;line-height:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;-webkit-box-shadow:0 0 0.625rem rgba(0, 0, 0, 0.3);box-shadow:0 0 0.625rem rgba(0, 0, 0, 0.3)}.demo-slider #demo-next:after,.demo-slider #demo-prev:after{display:inline-block;content:"\f053";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:2rem;font-size:1rem}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover,.demo-slider #demo-prev:focus,.demo-slider #demo-prev:hover{left:-1.875rem;background:#333}.demo-slider #demo-next:focus:after,.demo-slider #demo-next:hover:after,.demo-slider #demo-prev:focus:after,.demo-slider #demo-prev:hover:after{color:white}.demo-slider #demo-next{left:auto;right:-1.3125rem}.demo-slider #demo-next:after{content:"\f054"}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover{left:auto;right:-1.875rem;background:#333}.demo-slider .dots{position:absolute;z-index:10;left:0;right:0;bottom:-2.5rem;text-align:center}.demo-slider .dots button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0;display:inline-block;margin:0 0.3125rem;position:relative;color:transparent;font-size:0;line-height:0;width:1.25rem;height:1.25rem;background:#2d53fe;border-radius:50%;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}.demo-slider .dots button.active:after{content:"";position:absolute;top:0.3125rem;left:0.3125rem;height:0.625rem;width:0.625rem;border-radius:50%;background:white}.demo-slider .dots button:focus,.demo-slider .dots button:hover{background:#333}.btn{background:#2d53fe;color:white;padding:1.25rem 5.625rem;text-transform:uppercase;text-indent:0}.btn:focus,.btn:hover{background:#333}code,pre{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}pre{margin-bottom:2.5rem}table{width:100%;margin-bottom:2.5rem}table thead th{text-transform:uppercase;padding:0.9375rem;font-weight:bold}table tbody tr:nth-of-type(odd){background:#f8f8f8;border-top:0.0625rem solid #e5e5e5;border-bottom:0.0625rem solid #e5e5e5}table tbody tr td{padding:0.9375rem}@media (max-width:570px){.table-wrapper{overflow-x:scroll}}footer{text-align:center;margin:4.5rem 0 3rem 0}.slideshow{background:#2d53fe}.slideshow #slideshow>div h3{text-transform:uppercase;font-size:3.75rem;text-align:center;color:white;margin:0;padding:7.5rem 0}@media (max-width:600px){.slideshow #slideshow>div h3{font-size:2.5rem;padding:6.25rem 0}}@media (max-width:360px){.slideshow #slideshow>div h3{font-size:1.25rem}}.slideshow{position:relative}.slideshow button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;-webkit-box-shadow:0;box-shadow:0;background:white;border-radius:0;font-size:0;line-height:0;color:transparent}.slideshow button:after{display:inline-block;font-size:1.5rem;color:black;line-height:1;font-weight:700;font-family:"Font Awesome 5 Free"}.slideshow button:focus,.slideshow button:hover{background:black}.slideshow button:focus:after,.slideshow button:hover:after{color:white}.slideshow [id*=play]{position:absolute;z-index:10;top:0;left:0;width:3rem;height:3rem}.slideshow [id*=play]:after{content:"\f04c"}.slideshow [id*=play].paused:after{content:"\f04b"}.slideshow [id*=next],.slideshow [id*=prev]{position:absolute;z-index:10;top:50%;left:0;width:3rem;height:3rem;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.slideshow [id*=next]:after,.slideshow [id*=prev]:after{content:"\f060"}.slideshow [id*=next]{left:auto;right:0}.slideshow [id*=next]:after{content:"\f061"}.slideshow .dots{position:absolute;z-index:10;left:0;right:0;bottom:0.625rem;text-align:center}.slideshow .dots button{background:transparent}.slideshow .dots button:after{color:white;content:"\f111"}.slideshow .dots button.active:after{font-weight:normal;content:"\f111"}.slideshow .dots button:focus:after,.slideshow .dots button:hover:after{color:black} \ No newline at end of file +@import url("//fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css");a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}.hljs{display:block;overflow-x:auto;padding:.5em;background:#011627;color:#d6deeb}.hljs-keyword{color:#c792ea;font-style:italic}.hljs-built_in{color:#addb67;font-style:italic}.hljs-type{color:#82aaff}.hljs-literal{color:#ff5874}.hljs-number{color:#F78C6C}.hljs-regexp{color:#5ca7e4}.hljs-string{color:#ecc48d}.hljs-subst{color:#d3423e}.hljs-symbol{color:#82aaff}.hljs-class{color:#ffcb8b}.hljs-function{color:#82AAFF}.hljs-title{color:#DCDCAA;font-style:italic}.hljs-params{color:#7fdbca}.hljs-comment{color:#637777;font-style:italic}.hljs-doctag{color:#7fdbca}.hljs-meta{color:#82aaff}.hljs-meta-keyword{color:#82aaff}.hljs-meta-string{color:#ecc48d}.hljs-section{color:#82b1ff}.hljs-builtin-name,.hljs-name,.hljs-tag{color:#7fdbca}.hljs-attr{color:#7fdbca}.hljs-attribute{color:#80cbc4}.hljs-variable{color:#addb67}.hljs-bullet{color:#d9f5dd}.hljs-code{color:#80CBC4}.hljs-emphasis{color:#c792ea;font-style:italic}.hljs-strong{color:#addb67;font-weight:bold}.hljs-formula{color:#c792ea}.hljs-link{color:#ff869a}.hljs-quote{color:#697098;font-style:italic}.hljs-selector-tag{color:#ff6363}.hljs-selector-id{color:#fad430}.hljs-selector-class{color:#addb67;font-style:italic}.hljs-selector-attr,.hljs-selector-pseudo{color:#c792ea;font-style:italic}.hljs-template-tag{color:#c792ea}.hljs-template-variable{color:#addb67}.hljs-addition{color:#addb67ff;font-style:italic}.hljs-deletion{color:#EF535090;font-style:italic}body{background:#fff;border:1.875rem solid #f0f5f8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";overflow-x:hidden}.container{max-width:57.5rem;margin:0 auto;padding:0.9375rem}h1,h2,h3,h4,h5,h6{font-family:"Poppins", Helvetica, Arial, sans-serif}h1{font-weight:800;font-size:2.625rem;margin:2rem 0 1.875rem 0}h2{font-size:2.25rem;font-weight:700;margin:0.625rem 0 1.875rem 0}h3{font-size:1.875rem;font-weight:700;margin:0.625rem 0 1.875rem 0}p{font-size:1rem;line-height:1.5;margin-bottom:1.875rem}p.lead{font-size:1.25rem;font-weight:500}a{color:#2d53fe;text-decoration:underline}a:focus,a:hover{color:#2d53fe;text-decoration:none}img{display:block;max-width:100%}small{font-size:50%}.demo-slider{background:#2d53fe;color:white;position:relative;margin-bottom:6.25rem}@media (min-width:1120px){.demo-slider:before{content:'';position:absolute;z-index:-1;top:-2.8125rem;right:-3.125rem;display:block;width:6.25rem;height:6.25rem;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23161616;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Ccircle class='cls-1' cx='32.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='32.5' cy='32.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='32.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E")}}.demo-slider #demo{position:relative;z-index:1}.demo-slider #demo>div>div{display:-webkit-box;display:-ms-flexbox;display:flex;height:18.75rem}.demo-slider #demo>div>div .media{-webkit-box-flex:1;-ms-flex:1 0 40%;flex:1 0 40%;background-repeat:no-repeat;background-size:cover}.demo-slider #demo>div>div .caption{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 3.125rem 0 2.5rem}.demo-slider #demo>div>div .caption h2{margin-top:0;text-transform:uppercase}.demo-slider #demo>div>div .caption p{text-align:justify}.demo-slider #demo>div>div .caption a{color:white;text-decoration:underline}.demo-slider #demo>div>div .caption a:focus,.demo-slider #demo>div>div .caption a:hover{text-decoration:none}@media (max-width:600px){.demo-slider #demo>div>div{display:block;height:auto;min-height:auto;max-height:auto}.demo-slider #demo>div>div .media{display:none}.demo-slider #demo>div>div .caption h3{display:block;text-align:center;width:100%;margin-top:3.75rem!important}}@media (max-width:430px){.demo-slider #demo>div>div .caption h3{font-size:1.25rem}}.demo-slider #demo-play{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0;background:white;width:2.625rem;height:2.625rem;position:absolute;z-index:10;top:0.25rem;left:0.25rem;color:transparent;font-size:0;line-height:0;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}.demo-slider #demo-play:after{display:inline-block;content:"\f04c";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:2rem;font-size:0.875rem}.demo-slider #demo-play:focus,.demo-slider #demo-play:hover{background:#333}.demo-slider #demo-play:focus:after,.demo-slider #demo-play:hover:after{color:white}.demo-slider #demo-play.paused:after{content:"\f04b"}.demo-slider #demo-next,.demo-slider #demo-prev{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0;background:white;width:2.625rem;height:2.625rem;position:absolute;z-index:10;top:50%;left:-1.3125rem;color:transparent;font-size:0;line-height:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;-webkit-box-shadow:0 0 0.625rem rgba(0, 0, 0, 0.3);box-shadow:0 0 0.625rem rgba(0, 0, 0, 0.3)}.demo-slider #demo-next:after,.demo-slider #demo-prev:after{display:inline-block;content:"\f053";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:2rem;font-size:1rem}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover,.demo-slider #demo-prev:focus,.demo-slider #demo-prev:hover{left:-1.875rem;background:#333}.demo-slider #demo-next:focus:after,.demo-slider #demo-next:hover:after,.demo-slider #demo-prev:focus:after,.demo-slider #demo-prev:hover:after{color:white}.demo-slider #demo-next{left:auto;right:-1.3125rem}.demo-slider #demo-next:after{content:"\f054"}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover{left:auto;right:-1.875rem;background:#333}.demo-slider .dots{position:absolute;z-index:10;left:0;right:0;bottom:-2.5rem;text-align:center}.demo-slider .dots button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0;display:inline-block;margin:0 0.3125rem;position:relative;color:transparent;font-size:0;line-height:0;width:1.25rem;height:1.25rem;background:#2d53fe;border-radius:50%;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}.demo-slider .dots button.active:after{content:"";position:absolute;top:0.3125rem;left:0.3125rem;height:0.625rem;width:0.625rem;border-radius:50%;background:white}.demo-slider .dots button:focus,.demo-slider .dots button:hover{background:#333}.btn{background:#2d53fe;color:white;padding:1.25rem 5.625rem;text-transform:uppercase;text-indent:0}.btn:focus,.btn:hover{background:#333}code,pre{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}pre{margin-bottom:2.5rem}table{width:100%;margin-bottom:2.5rem}table thead th{text-transform:uppercase;padding:0.9375rem;font-weight:bold}table tbody tr:nth-of-type(odd){background:#f8f8f8;border-top:0.0625rem solid #e5e5e5;border-bottom:0.0625rem solid #e5e5e5}table tbody tr td{padding:0.9375rem}@media (max-width:570px){.table-wrapper{overflow-x:scroll}}footer{text-align:center;margin:4.5rem 0 3rem 0}.slideshow{background:#2d53fe}.slideshow #slideshow>div h3{text-transform:uppercase;font-size:3.75rem;text-align:center;color:white;margin:0;padding:7.5rem 0}@media (max-width:600px){.slideshow #slideshow>div h3{font-size:2.5rem;padding:6.25rem 0}}@media (max-width:360px){.slideshow #slideshow>div h3{font-size:1.25rem}}.slideshow{position:relative}.slideshow button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;-webkit-box-shadow:0;box-shadow:0;background:white;border-radius:0;font-size:0;line-height:0;color:transparent}.slideshow button:after{display:inline-block;font-size:1.5rem;color:black;line-height:1;font-weight:700;font-family:"Font Awesome 5 Free"}.slideshow button:focus,.slideshow button:hover{background:black}.slideshow button:focus:after,.slideshow button:hover:after{color:white}.slideshow [id*=play]{position:absolute;z-index:10;top:0;left:0;width:3rem;height:3rem}.slideshow [id*=play]:after{content:"\f04c"}.slideshow [id*=play].paused:after{content:"\f04b"}.slideshow [id*=next],.slideshow [id*=prev]{position:absolute;z-index:10;top:50%;left:0;width:3rem;height:3rem;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.slideshow [id*=next]:after,.slideshow [id*=prev]:after{content:"\f060"}.slideshow [id*=next]{left:auto;right:0}.slideshow [id*=next]:after{content:"\f061"}.slideshow .dots{position:absolute;z-index:10;left:0;right:0;bottom:0.625rem;text-align:center}.slideshow .dots button{background:transparent}.slideshow .dots button:after{color:white;content:"\f111"}.slideshow .dots button.active:after{font-weight:normal;content:"\f111"}.slideshow .dots button:focus:after,.slideshow .dots button:hover:after{color:black} \ No newline at end of file diff --git a/src/doc.scss b/src/doc.scss index 60db6cb..de6817a 100644 --- a/src/doc.scss +++ b/src/doc.scss @@ -257,7 +257,7 @@ small { align-items: flex-start; padding: 0 3.125rem 0 2.5rem; - h3 { + h2 { margin-top: 0; text-transform: uppercase; }