diff --git a/website/source/assets/javascripts/consul-connect/carousel.js b/website/source/assets/javascripts/consul-connect/carousel.js index 605417bbfe..8dacad4d4c 100644 --- a/website/source/assets/javascripts/consul-connect/carousel.js +++ b/website/source/assets/javascripts/consul-connect/carousel.js @@ -1,3 +1,5 @@ +objectFitImages() + var qs = document.querySelector.bind(document) var qsa = document.querySelectorAll.bind(document) diff --git a/website/source/assets/javascripts/consul-connect/home-hero.js b/website/source/assets/javascripts/consul-connect/home-hero.js index 94d9ed9fc0..c7bce8ee21 100644 --- a/website/source/assets/javascripts/consul-connect/home-hero.js +++ b/website/source/assets/javascripts/consul-connect/home-hero.js @@ -4,11 +4,11 @@ var qsa = document.querySelectorAll.bind(document) var $$wrappers = qsa('#home-hero .videos > div') // all the wrappers for the videos var $$videos = qsa('#home-hero video') // all the videos var $$videoControls = qsa('#home-hero .controls > div') // carousel controllers -var currentIndex = 0 // currently playing video +var currentIndex = 1 // currently playing video var playbackRate = 2 // video playback speed // initiate a video change -function initialiateVideoChange(index) { +function initiateVideoChange(index) { var wrapper = $$wrappers[currentIndex] var nextWrapper = $$wrappers[index] @@ -68,27 +68,42 @@ function playVideo(index, wrapper) { currentIndex = index } -// loop through videos to set up options/listeners -for (var i = 0; i < $$videos.length; i++) { - // set video default speed - $$videos[i].playbackRate = playbackRate +function initiateVideos() { + // remove 'active' from wrappers which may be + // there on page load because of turbolinks + for (var i = 0; i < $$wrappers.length; i++) { + $$wrappers[i].classList.remove('active') + } - // listen for video ending, then go to the next video - $$videos[i].addEventListener('ended', function() { - var nextIndex = currentIndex + 1 - initialiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0) - }) + // loop through videos to set up options/listeners + for (var i = 0; i < $$videos.length; i++) { + // set video default speed + $$videos[i].playbackRate = playbackRate + + // listen for video ending, then go to the next video + $$videos[i].addEventListener('ended', function() { + var nextIndex = currentIndex + 1 + initiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0) + }) + } + + for (var i = 0; i < $$videoControls.length; i++) { + // remove 'playing' from controls which may be + // there on page load because of turbolinks + $$videoControls[i].classList.remove('playing') + + // listen for control clicks and initiate videos appropriately + $$videoControls[i].addEventListener('click', function() { + if (!this.classList.contains('playing')) { + initiateVideoChange(this.dataset.index) + } + }) + } + + // go to first video to start this thing + if ($$videos.length > 0) { + initiateVideoChange(0) + } } -for (var i = 0; i < $$videoControls.length; i++) { - $$videoControls[i].addEventListener('click', function() { - if (!this.classList.contains('playing')) { - initialiateVideoChange(this.dataset.index) - } - }) -} - -// go to first video to start this thing -if ($$videos.length > 0) { - initialiateVideoChange(0) -} +document.addEventListener('turbolinks:load', initiateVideos) \ No newline at end of file diff --git a/website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js b/website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js new file mode 100644 index 0000000000..62c5cf8f2a --- /dev/null +++ b/website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js @@ -0,0 +1 @@ +var objectFitImages=function(){"use strict";function t(t,e){return"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='"+t+"' height='"+e+"'%3E%3C/svg%3E"}function e(t){if(t.srcset&&!m&&window.picturefill){var e=window.picturefill._;t[e.ns]&&t[e.ns].evaled||e.fillImg(t,{reselect:!0}),t[e.ns].curSrc||(t[e.ns].supported=!1,e.fillImg(t,{reselect:!0})),t.currentSrc=t[e.ns].curSrc||t.src}}function i(t){for(var e,i=getComputedStyle(t).fontFamily,r={};null!==(e=l.exec(i));)r[e[1]]=e[2];return r}function r(e,i,r){var n=t(i||1,r||0);p.call(e,"src")!==n&&b.call(e,"src",n)}function n(t,e){t.naturalWidth?e(t):setTimeout(n,100,t,e)}function c(t){var c=i(t),o=t[a];if(c["object-fit"]=c["object-fit"]||"fill",!o.img){if("fill"===c["object-fit"])return;if(!o.skipTest&&g&&!c["object-position"])return}if(!o.img){o.img=new Image(t.width,t.height),o.img.srcset=p.call(t,"data-ofi-srcset")||t.srcset,o.img.src=p.call(t,"data-ofi-src")||t.src,b.call(t,"data-ofi-src",t.src),t.srcset&&b.call(t,"data-ofi-srcset",t.srcset),r(t,t.naturalWidth||t.width,t.naturalHeight||t.height),t.srcset&&(t.srcset="");try{s(t)}catch(t){window.console&&console.warn("https://bit.ly/ofi-old-browser")}}e(o.img),t.style.backgroundImage='url("'+(o.img.currentSrc||o.img.src).replace(/"/g,'\\"')+'")',t.style.backgroundPosition=c["object-position"]||"center",t.style.backgroundRepeat="no-repeat",t.style.backgroundOrigin="content-box",/scale-down/.test(c["object-fit"])?n(o.img,function(){o.img.naturalWidth>t.width||o.img.naturalHeight>t.height?t.style.backgroundSize="contain":t.style.backgroundSize="auto"}):t.style.backgroundSize=c["object-fit"].replace("none","auto").replace("fill","100% 100%"),n(o.img,function(e){r(t,e.naturalWidth,e.naturalHeight)})}function s(t){var e={get:function(e){return t[a].img[e||"src"]},set:function(e,i){return t[a].img[i||"src"]=e,b.call(t,"data-ofi-"+i,e),c(t),e}};Object.defineProperty(t,"src",e),Object.defineProperty(t,"currentSrc",{get:function(){return e.get("currentSrc")}}),Object.defineProperty(t,"srcset",{get:function(){return e.get("srcset")},set:function(t){return e.set(t,"srcset")}})}function o(t,e){var i=!h&&!t;if(e=e||{},t=t||"img",f&&!e.skipTest||!d)return!1;"img"===t?t=document.getElementsByTagName("img"):"string"==typeof t?t=document.querySelectorAll(t):"length"in t||(t=[t]);for(var r=0;r div { - padding-left: 21px; - - @media (min-width: 1200px) { - padding-left: 0; + @media (min-width: 992px) and (max-width: 1199px) { + padding-left: 21px; } } @@ -77,21 +75,34 @@ display: inline-block; font-size: 1.4rem; padding: 16px; + line-height: 1.7; @media (min-width: 992px) { + line-height: 1.4; padding-left: 12px; padding-right: 12px; } span { - background: $consul-red; - border-radius: 3px; - color: #fff; - font-size: 1.2rem; - font-weight: 700; - margin-right: 8px; - padding: 2px 9px; - text-transform: uppercase; + &:first-child { + background: $consul-red; + border-radius: 3px; + color: #fff; + font-size: 1.2rem; + font-weight: 700; + margin-right: 4px; + padding: 2px 9px; + text-transform: uppercase; + + @media (min-width: 992px) { + float: left; + margin-right: 8px; + } + } + + &:last-child { + display: inline-block; + } } svg { @@ -135,7 +146,7 @@ color: $consul-black; display: inline-block; font-size: 1.4rem; - font-weight: 700; + font-weight: 600; margin: 24px 0 48px; padding-bottom: 4px; transition: all 0.25s ease; @@ -185,7 +196,7 @@ display: flex; flex-direction: column; font-size: 1.2rem; - font-weight: 700; + font-weight: 600; justify-content: center; margin: 0 25px; text-transform: uppercase; @@ -352,6 +363,17 @@ width: 100%; height: 100%; } + + .overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + background: $black; + opacity: 0.02; + } } } diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb index 793cad2d2a..5a69a9efaf 100644 --- a/website/source/configuration.html.erb +++ b/website/source/configuration.html.erb @@ -217,8 +217,8 @@ description: |-

Case Studies

-
-
+
+
@@ -226,10 +226,10 @@ description: |- Video

How Groupon Orchestrates Databases as a Service with HashiCorp Consul

Group​o​n provides centrally managed, containerized database instances to its engineering teams. To make this process faster, more robust, and operationally safe, they deliver Databases-as-a-Service via an orchestration layer backed by HashiCorp Consul.

- Watch + Watch
-
-
+ +
@@ -237,9 +237,9 @@ description: |- Video

Citadel - Extreme Scaling with HashiCorp Nomad and Consul

In this talk from HashiConf 2016, Caius Howcroft covers Citadel's use of HashiCorp Nomad and Consul to gain rapid scaling of its compute resources, for immediate market insights.

- Watch + Watch
-
+