mirror of https://github.com/hashicorp/consul
website - add homepage video hero
RJ Spiker
Jack Pearkes
parent
0efaabf5d5
commit
0a1adb8b75
|
|
@ -1,5 +1,101 @@
|
|||
var dots = document.querySelectorAll('.g-carousel .pagination li')
|
||||
if (document.querySelector('.siema')) {
|
||||
//
|
||||
//
|
||||
// home video carousel
|
||||
var qs = document.querySelector.bind(document)
|
||||
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 playbackRate = 2 // video playback speed
|
||||
|
||||
// initiate a video change
|
||||
function initialiateVideoChange(index) {
|
||||
var wrapper = $$wrappers[currentIndex]
|
||||
var nextWrapper = $$wrappers[index]
|
||||
|
||||
// pause the current video
|
||||
$$videos[currentIndex].pause()
|
||||
|
||||
// deactivate the current video
|
||||
wrapper.classList.remove('active')
|
||||
wrapper.classList.add('deactivate')
|
||||
|
||||
// after the current video animates out...
|
||||
setTimeout(function() {
|
||||
// remove transition effect so progress-bar doesn't slowly decline
|
||||
var loadingBar = $$videoControls[currentIndex].querySelector(
|
||||
'.progress-bar span'
|
||||
)
|
||||
loadingBar.style.transitionDuration = '0s'
|
||||
|
||||
// reset the current video and stop deactivation
|
||||
$$videos[currentIndex].currentTime = 0
|
||||
$$videoControls[currentIndex].classList.remove('playing')
|
||||
|
||||
wrapper.classList.remove('deactivate')
|
||||
|
||||
// check if the video is loaded
|
||||
// if not, listen for it to load
|
||||
if ($$videos[index].classList.contains('loaded')) {
|
||||
playVideo(index, nextWrapper)
|
||||
} else {
|
||||
$$videos[index].addEventListener(
|
||||
'canplaythrough',
|
||||
playVideo(index, nextWrapper)
|
||||
)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// activate and play a video
|
||||
function playVideo(index, wrapper) {
|
||||
// toggle
|
||||
$$videos[index].classList.add('loaded')
|
||||
|
||||
// activate the next video and start playing it
|
||||
wrapper.classList.add('active')
|
||||
$$videoControls[index].classList.add('playing')
|
||||
$$videos[index].play()
|
||||
|
||||
$$videoControls[index].querySelector(
|
||||
'.progress-bar span'
|
||||
).style.transitionDuration = `${Math.ceil($$videos[index].duration / playbackRate)}s`
|
||||
|
||||
// set the currentIndex to be that of the current video's index
|
||||
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
|
||||
|
||||
// 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)
|
||||
})
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
//
|
||||
//
|
||||
// siema carousels
|
||||
var dots = qsa('.g-carousel .pagination li')
|
||||
var carousel = new Siema({
|
||||
selector: '.siema',
|
||||
duration: 200,
|
||||
|
|
@ -19,21 +115,23 @@ if (document.querySelector('.siema')) {
|
|||
}
|
||||
})
|
||||
|
||||
// on previous button click
|
||||
document
|
||||
.querySelector('.g-carousel .prev')
|
||||
.addEventListener('click', function() {
|
||||
carousel.prev()
|
||||
})
|
||||
|
||||
// on next button click
|
||||
document
|
||||
.querySelector('.g-carousel .next')
|
||||
.addEventListener('click', function() {
|
||||
carousel.next()
|
||||
})
|
||||
|
||||
// on dot click
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
dots[i].addEventListener('click', function() {
|
||||
carousel.goTo(i)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ html {
|
|||
min-height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -14,6 +15,7 @@ body {
|
|||
font-weight: $font-weight-reg;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,73 @@
|
|||
#page-home {
|
||||
.home-hero {
|
||||
overflow: hidden;
|
||||
padding-top: 96px;
|
||||
#home-hero {
|
||||
padding-top: 12px;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.g-container > div {
|
||||
display: flex;
|
||||
margin: 0 (-$site-gutter-padding);
|
||||
|
||||
& > div {
|
||||
padding: 0 ($site-gutter-padding);
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
align-items: center;
|
||||
@media (min-width: 992px) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 (-$site-gutter-padding);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& > div {
|
||||
@media (min-width: 992px) {
|
||||
padding: 0 $site-gutter-padding;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding-left: 21px;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
margin: 24px 0 16px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 3.2rem;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
font-size: 4.8rem;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 300;
|
||||
margin: 16px 0 32px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
|
|
@ -23,14 +76,19 @@
|
|||
color: #650d34;
|
||||
display: inline-block;
|
||||
font-size: 1.4rem;
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: $consul-red;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700; // TODO - don't have access to this weight yet
|
||||
font-weight: 700;
|
||||
margin-right: 8px;
|
||||
padding: 2px 9px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -41,34 +99,259 @@
|
|||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.8rem;
|
||||
margin: 40px 0 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 100; // TODO - don't have access to this weight yet
|
||||
margin: 16px 0 40px;
|
||||
}
|
||||
|
||||
img {
|
||||
box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
|
||||
.g-btn {
|
||||
min-width: 129px;
|
||||
margin: 0 5px 10px;
|
||||
|
||||
@media (min-width: 400px) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding: 6px 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 144px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
& + .g-btn {
|
||||
@media (min-width: 768px) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-link {
|
||||
border-bottom: 2px dashed $consul-red;
|
||||
color: $consul-black;
|
||||
display: inline-block;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
margin: 24px 0 48px;
|
||||
padding-bottom: 4px;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
font-size: 1.6rem;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 26px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
width: 42vw;
|
||||
}
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
color: #d2d4dc;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
margin: 0 25px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $consul-black;
|
||||
}
|
||||
|
||||
&.playing {
|
||||
color: $consul-black;
|
||||
|
||||
.progress-bar {
|
||||
span {
|
||||
transition: width linear;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #d2d4dc;
|
||||
border-radius: 2px 0 0 2px;
|
||||
height: 2px;
|
||||
margin-top: 6px;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
|
||||
span {
|
||||
background: $consul-red;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.videos {
|
||||
height: 0;
|
||||
margin-bottom: -112px;
|
||||
padding-top: calc((100% * 0.63569) + 18px);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding-top: calc((100% * 0.63569) + 38px);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-top: calc((45vw * 0.63569) + 38px);
|
||||
margin-bottom: 0;
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
padding-top: calc((42vw * 0.63569) + 38px);
|
||||
width: 42vw;
|
||||
}
|
||||
|
||||
& > div {
|
||||
background: #0e1016;
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
|
||||
height: 100%;
|
||||
left: -80px;
|
||||
line-height: 0;
|
||||
opacity: 0;
|
||||
padding-top: 18px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 0.5s;
|
||||
transition-timing-function: cubic-bezier(0.41, 0.15, 0.39, 0.39);
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding-top: 38px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.8s;
|
||||
}
|
||||
|
||||
&.deactivate {
|
||||
left: 95px;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-buttons {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 6px;
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: 16px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: $consul-black;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-right: 4px;
|
||||
width: 5px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.padded {
|
||||
background: #000;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
video {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
height: calc(100% - 12px);
|
||||
width: calc(100% - 12px);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
height: calc(100% - 24px);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#static-dynamic {
|
||||
padding-top: 158px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.static-callout {
|
||||
width: 85%;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -206,7 +206,7 @@ description: |-
|
|||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>How Groupon Orchestrates Databases as a Service with HashiCorp Consul</h4>
|
||||
<p>Groupon 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. In this talk, Sean Chittenden discusses the constraints of providing persistent containerized services, how DaaS has been built, and how Groupon uses HashiCorp tools to power database services.</p>
|
||||
<p>Groupon 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.</p>
|
||||
<a href='https://www.hashicorp.com/resources/groupon-orchestrates-daas-consul'>Watch</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@ description: |-
|
|||
---
|
||||
|
||||
<div class='consul-connect'>
|
||||
|
||||
<section class='home-hero'>
|
||||
<div class='g-container'>
|
||||
<section id='home-hero'>
|
||||
<div class="g-container">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a class='notification' href='#'>
|
||||
<span>New</span> Consul 1.0 release. Get the details <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><path fill="#650D34" d="M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></svg>
|
||||
<span>New</span> Consul 1.0 release. Get the details <svg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'><path fill='#650D34' d='M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z'/></svg>
|
||||
</a>
|
||||
<h1>Service Mesh Made Easy</h1>
|
||||
<p>Connect, configure, and secure services in dynamic infrastructure.</p>
|
||||
|
|
@ -24,10 +23,46 @@ description: |-
|
|||
Download
|
||||
</a>
|
||||
<a href='#' class='g-btn dark-outline'>Get Started</a>
|
||||
<div>
|
||||
<a href='#' class='secondary-link'>View demo of web UI</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/feature.jpg' alt='Service Registry'>
|
||||
<div class='controls'>
|
||||
<div data-index='0'>
|
||||
<span>CLI</span>
|
||||
<div class='progress-bar'><span></span></div>
|
||||
</div>
|
||||
<div data-index='1'>
|
||||
<span>UI</span>
|
||||
<div class='progress-bar'><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='videos'>
|
||||
<div>
|
||||
<div class='bar-buttons'>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class='padded'>
|
||||
<video muted='muted'>
|
||||
<source src='/assets/videos/connect-video-cli.mp4' type='video/mp4'>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='bar-buttons'>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<video muted='muted'>
|
||||
<source src='/assets/videos/connect-video-ui.mp4' type='video/mp4'>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue