From 0469a583c6607118b9c81ebec2885df7d033879d Mon Sep 17 00:00:00 2001 From: arthurzurb Date: Fri, 19 Aug 2016 16:55:46 -0700 Subject: [PATCH] Adding Wired countdown banner --- docs/assets/js/docs.js | 46 +++++++++++++++++++++++++++++ docs/assets/scss/docs.scss | 60 ++++++++++++++++++++++++++++++++++++++ docs/layout/default.html | 15 ++++++++++ 3 files changed, 121 insertions(+) diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js index af814d63d..c0de1b8dc 100644 --- a/docs/assets/js/docs.js +++ b/docs/assets/js/docs.js @@ -16,3 +16,49 @@ $(function() { $(function() { $('[data-docs-version]').text('v' + Foundation.version); }); + + +// COUNTDOWN TIMER for Events banner +function getTimeRemaining(endtime){ + var t = Date.parse(endtime) - Date.parse(new Date()); + var minutes = Math.floor( (t/1000/60) % 60 ); + var days = Math.floor( (t/(1000*60*60)/24) ); + var hours = Math.floor( (t/(1000*60*60)) % 24 ); + var seconds = Math.floor( (t/1000) % 60 ); + + return { + 'total': t, + 'hours': hours, + 'days': days, + 'minutes': minutes, + 'seconds': seconds + }; +} + +function initializeClock(id, endtime){ + var clock = document.getElementById(id); + var daysSpan = clock.querySelector('.days'); + var hoursSpan = clock.querySelector('.hours'); + var minutesSpan = clock.querySelector('.minutes'); + var secondsSpan = clock.querySelector('.seconds'); + + function updateClock(){ + var t = getTimeRemaining(endtime); + + daysSpan.innerHTML = ('0' + t.days).slice(-2); + hoursSpan.innerHTML = ('0' + t.hours).slice(-2); + minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); + secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); + + if(t.total<=0){ + clearInterval(timeinterval); + } + } + + updateClock(); + var timeinterval = setInterval(updateClock,1000); +} + +var deadline = 'Thurs, 25 Aug 2016 8:00:00 PDT'; +initializeClock('clockdiv', deadline); +// COUNTDOWN TIMER END diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index fa102b24f..c2d28d807 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -31,6 +31,66 @@ $topbar-background: #2c3840; $topbar-hover-color: lighten($topbar-background, 10%); + +/* Banner for announcements */ +a#notice { + display:block; + overflow: hidden; + position: relative; + padding: 1rem 0; + width:100%; + background-image: url('http://zurb.com/university/assets/zurbwired2016-web-banner-90dc22ff5454de9d2099b9f5b7231137.gif'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: #0078AB; + height: 70px; + + .countdown { + display: inline; + color: #ffffff; + font-size: 35px; + font-weight: 500; + margin-left: -50%; + font-family: "Proxima-Nova", "Proxima", "proxima-nova", sans-serif; + background-color: rgba(0,120,171,0.7); + -webkit-box-shadow: 0px 0px 16px 7px rgba(0,120,171,0.7); + -moz-box-shadow: 0px 0px 16px 7px rgba(0,120,171,0.7); + box-shadow: 0px 0px 16px 7px rgba(0,120,171,0.7); + } + + .timer-colon { + margin: 0px -2px 0px -4px; + padding: 0; + } + + .timer-hour, .timer-minute, .timer-second { + letter-spacing: 2px; + } + + .info { + left: 0; + right: 0; + // top: 15px; + z-index: 20; + margin-top: -7px; + // width: 75%; + margin-left: auto; + margin-right: auto; + // position: absolute; + h5 { color: #ffffff; font-size: 18px !important;} + text-align: center; + @media only screen and (max-width: 675px) { width: 100%; padding: 0 15px 0px 15px; position: relative; } + } + + @media (max-width: 800px) { + background-position: 51.2% 0; + .countdown { display: none; } + } +} +/* COUNTDOWN END */ + + .marketing-topbar, .title-bar { background: $topbar-background; diff --git a/docs/layout/default.html b/docs/layout/default.html index 74e0aea0f..911a65304 100644 --- a/docs/layout/default.html +++ b/docs/layout/default.html @@ -14,6 +14,21 @@ + + +

+ +

{{> off-canvi}} -- 2.47.2