diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index c30d9962b..0b672e70f 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -3,6 +3,9 @@
+
+ +
diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 2e0cf9ded..336f88976 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -55,6 +55,7 @@ + diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 2b5805879..256a2fb64 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -76,6 +76,27 @@ $(function () { // Yippee! We can use localStorage awesomeness } + function timeLeft() { + var now, ksEndsAt, hoursLeft, minutesLeft, humanized; + + try { + now = moment(); + ksEndsAt = moment("2016-12-01 12:01:00-05"); + hoursLeft = ksEndsAt.diff(now, "hours"); + minutesLeft = ksEndsAt.diff(now, "minutes") - hoursLeft * 60; + } catch (e) {} + + if (hoursLeft < 0 || minutesLeft < 0) { + return; + } + + humanized = hoursLeft + " " + ((hoursLeft === 1) ? "hour" : "hours") + ", " + minutesLeft + " " + ((minutesLeft === 1) ? "minute" : "minutes"); + + $('#time-left-message').html('Just ' + humanized + ' left to support the Font Awesome 5 Kickstarter for $20'); + + setTimeout(timeLeft, 2000); + } + function storageAvailable(type) { try { var storage = window[type], @@ -88,10 +109,13 @@ $(function () { return false; } } + function selectAd() { random_number = Math.floor(Math.random() * ads.length); random_ad = ads[random_number]; + timeLeft(); + $('#banner').addClass(random_ad.class); $('#rotating-message').html(random_ad.quote); $('#rotating-url').attr("href", random_ad.url); diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less index e544ed0be..cd065f2cc 100644 --- a/src/assets/less/site/banner-ad.less +++ b/src/assets/less/site/banner-ad.less @@ -217,6 +217,23 @@ border-bottom: rgba(0,0,0,0.2); .message-container { padding: 40px 0; } .tagline { font-size: 24px; } + .time-left { + font-size: 18px; + color: mix(@kickstarter-bg, #fff, 20%); + } + @keyframes flash-duration { + from { + color: #fff; + } + to { + color: mix(@kickstarter-bg, #fff, 20%); + } + } + .duration { + font-weight: 600; + animation-name: flash-duration; + animation-duration: 1.0s; + } a:not(.btn) { text-decoration: underline; color: #fff;