Adding counter

diff --git a/doc/assets/js/docs.js b/doc/assets/js/docs.js
index 510fcd38d6f259f50716bcfe6b7f37ed88680300..3732140a3d11adb9c3908de7f9ebb1497a656a99 100644 (file)
--- a/doc/assets/js/docs.js
+++ b/doc/assets/js/docs.js
@@ -115,3 +115,45 @@ if ($('[data-building-blocks]').length > 0) {
     success: cb
   });
 }
+
+
+// COUNTDOWN TIMER
+
+function getTimeRemaining(endtime){
+  var t = Date.parse(endtime) - Date.parse(new Date());
+  var minutes = Math.floor( (t/1000/60) % 60 );
+  var hours = Math.floor( (t/(1000*60*60)) );
+  var seconds = Math.floor( (t/1000) % 60 );
+
+  return {
+    'total': t,
+    'hours': hours,
+    'minutes': minutes,
+    'seconds': seconds
+  };
+}
+
+function initializeClock(id, endtime){
+  var clock = document.getElementById(id);
+  var hoursSpan = clock.querySelector('.hours');
+  var minutesSpan = clock.querySelector('.minutes');
+  var secondsSpan = clock.querySelector('.seconds');
+
+  function updateClock(){
+    var t = getTimeRemaining(endtime);
+
+    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 = 'November 19 2015 10:15:00 PDT-0800';
+initializeClock('clockdiv', deadline);

diff --git a/doc/assets/scss/docs.scss b/doc/assets/scss/docs.scss
index a2fca894448ff8b0cb8a7855647748908ae5bdcb..8aa2d83b1721e3530de650d92694f81f44e74bd5 100644 (file)
--- a/doc/assets/scss/docs.scss
+++ b/doc/assets/scss/docs.scss
@@ -3,12 +3,12 @@
 @import "global";
 
 //Foundation Libraries
-@import 
+@import
   "foundation/settings",
   "foundation";
 
 //Marketing Site Common Library
-@import 
+@import
   "code",
   "marketing-off-canvas",
   "footer",
@@ -23,8 +23,8 @@ a#notice {
   overflow: hidden;
   position: relative;
   padding: 1rem 0;
-  width:100%; 
-  background: #C9025C; /* Old browsers */
+  width:100%;
+  // background: #FF6908; /* Old browsers */
   // background: -moz-linear-gradient(left,  #C9025C 0%, #DB0A5B 100%); /* FF3.6+ */
   // background: -webkit-gradient(linear, left top, right top, color-stop(0%,#81CFE0), color-stop(100%,#DB0A5B)); /* Chrome,Safari4+ */
   // background: -webkit-linear-gradient(left,  #C9025C 0%,#DB0A5B 100%); /* Chrome10+,Safari5.1+ */
@@ -32,17 +32,40 @@ a#notice {
   // background: -ms-linear-gradient(left,  #C9025C 0%,#DB0A5B 100%); /* IE10+ */
   // background: linear-gradient(to right,  #C9025C 0%,#DB0A5B 100%); /* W3C */
   // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9025C', endColorstr='#DB0A5B',GradientType=1 ); /* IE6-9 */
-  @media only screen and (max-width: 675px) { margin-top: -3px; }
+  background: rgba(15,28,33,1);
+  background: -moz-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
+  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(15,28,33,1)), color-stop(45%, rgba(38,54,62,1)), color-stop(76%, rgba(79,88,99,1)), color-stop(100%, rgba(198,134,127,1)));
+  background: -webkit-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
+  background: -o-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
+  background: -ms-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
+  background: linear-gradient(to bottom, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f1c21', endColorstr='#c6867f', GradientType=0 );
+  // span {
+  //   border-bottom: #fff 4px dashed;
+  //   width: 36%;
+  //   position: absolute;
+  //   bottom: 25px;
+  //   &.left-side { left: 0; }
+  //   &.right-side { right: 0; }
+  //   @media only screen and (max-width: 1000px) { width: 30%; }
+  //   @media only screen and (max-width: 675px) { width: 16%; }
+  // }
 
-  span { 
-    border-bottom: #fff 4px dashed;
-    width: 36%;
-    position: absolute;
-    bottom: 25px;  
-    &.left-side { left: 0; }
-    &.right-side { right: 0; }
-    @media only screen and (max-width: 1000px) { width: 30%; }
-    @media only screen and (max-width: 675px) { width: 16%; }
+  .countdown {
+    display: inline;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 700;
+    margin-left: 3px;
+  }
+
+  .timer-colon {
+    margin: 0px -2px 0px -4px;
+    padding: 0;
+  }
+
+  .timer-hour, .timer-minute, .timer-second {
+    letter-spacing: 2px;
   }
 
   .info {
@@ -56,24 +79,11 @@ a#notice {
     // position: absolute;
     h5 { color: #ffffff; }
     text-align: center;
-    @media only screen and (max-width: 675px) { width: 100%; padding: 0 15px 20px 15px; position: relative; }
-  }
-  .graphic { 
-   /*    
-    width: 100px;
-    height: 100px; 
-    background: url("../img/yeti-pointing.svg") center center no-repeat;
-    z-index: 9999999;
-    background-size: 60%;
-    position: absolute;
-    bottom: -30px;
-    left: 60px;
-    @media only screen and (max-width: 1100px) { width: 100px; left: 30px;}
-    @media only screen and (max-width: 740px) { display: none !important; }
-    */
+    @media only screen and (max-width: 675px) { width: 100%; padding: 0 15px 0px 15px; position: relative; }
   }
 }
 
+
 .spaced-divider hr {
   margin: 0.5rem;
   border: 1px solid #4e4e4e;
@@ -210,7 +220,7 @@ table.plugin-options {
   tbody {
     td:not([rowspan]) {
       font-family: Consolas, 'Liberation Mono', Courier, monospace;
-    } 
+    }
   }
   thead {
     td:first-child {
@@ -625,7 +635,7 @@ $custom-active-bg:darken($custom-link-color, 5%);
 // Make sure topbar dropdowns are above tab bar.
 .docs-bar ul.dropdown { z-index: 1003; }
 
-// Side nav custom active style 
+// Side nav custom active style
 .sidebar .side-nav li.active > a:first-child {
   font-weight: bold;
   color: lighten(#004054,20%);
@@ -686,7 +696,7 @@ you will need
     font-size: 1.3rem;
     font-weight: normal;
     text-transform: capitalize;
-  } 
+  }
 }
 
 
@@ -702,7 +712,7 @@ images
 
 .flow-chart {
   margin: 10px 10px 15px 0;
-  @media #{$small-only} { 
+  @media #{$small-only} {
     margin:20px;
   }
 }
@@ -734,7 +744,7 @@ padding
 }
 
 .otherapps {
-  margin-bottom: 20px !important; 
+  margin-bottom: 20px !important;
 }
 
 /*------------------------------------
@@ -770,7 +780,7 @@ circles
   height: 35px;
   position: relative;
   margin-top: -5px;
-  margin-right: 18px; 
+  margin-right: 18px;
   margin-bottom: 5px;
   margin-left: 0.83333rem;
   z-index: 2;
@@ -785,16 +795,16 @@ circles
 }
 
 
-@media only screen and (min-width: 0) and (max-width: 64.063em){ 
+@media only screen and (min-width: 0) and (max-width: 64.063em){
   .path-item {
-    padding-left: 0.83333rem; 
+    padding-left: 0.83333rem;
     .circlenumber {
       left: -12px;
     }
   }
 }
 
-@media #{$large-up} { 
+@media #{$large-up} {
   .path-item {
     padding-left: 65px;
     position: relative;
@@ -823,7 +833,7 @@ circles
     font-family: Consolas, 'Liberation Mono', Courier, monospace;
     font-weight: normal;
     padding-left:20px;
-    } 
+    }
   }
 }
 
@@ -1026,7 +1036,7 @@ what you get
     }
   }
   .tabs-content {
-    border-top: 1px solid #ccc; 
+    border-top: 1px solid #ccc;
     margin: 0;
     padding: 1rem;
   }
@@ -1067,7 +1077,7 @@ what you get
 
 // Stlyings for Getting Started Examples
 
-.what-comes-with { 
+.what-comes-with {
   hr {
     margin-top: 3.5rem;
     margin-bottom: 3.5rem;
@@ -1154,7 +1164,7 @@ border: 5px solid red;
   transform: translate3d(-100.5%, 0, 0);
 }
 
-.newsletter-foundation { 
+.newsletter-foundation {
   border: 2px solid #085a78;
   h5 { font-size: 20px;font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
   font-weight: 400; margin-bottom: 0px; margin-top: 10px; color: #222; line-height: 24px; }
@@ -1202,10 +1212,10 @@ border: 5px solid red;
 
 .top-bar.docs-bar .name h1 {
   padding: 0;
-  margin-left: 20px; 
+  margin-left: 20px;
 }
 .top-bar.docs-bar .name h1 img {
-  margin-top: -2px; 
+  margin-top: -2px;
   display: inline-block !important;
   vertical-align: middle !important;
 }
@@ -1220,11 +1230,11 @@ border: 5px solid red;
   font-size: 22px !important;
   line-height: 45px;
   padding: 0;
-  text-rendering: auto; 
+  text-rendering: auto;
   span { font-size: 17px !important; line-height: 0 !important; margin-left: 0px; }
 }
 .top-bar.docs-bar .name h1 a:hover {
-  opacity: 1; 
+  opacity: 1;
 }
 
 .top-bar.docs-bar .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {

diff --git a/doc/layouts/component.html b/doc/layouts/component.html
index 970d451953807a83ccf43324aeb8215abbdce8c3..eafb3319b635de3e96914f730a5735ac8e10569e 100644 (file)
--- a/doc/layouts/component.html
+++ b/doc/layouts/component.html
@@ -25,16 +25,23 @@
     <script src="{{assets}}/js/modernizr.js"></script>
   </head>
   <body class="antialiased hide-extras">
-    
+
     <!-- Info Banner For Announcements or Links -->
-    
-    <a href="http://zurb.com/article/1407/foundation-6-leaner-meaner-and-cleaner-sa" id="notice">
-      <div class="graphic hide-for-small"></div>
-      <div class="info"><h5 class="hide-for-small">See What's Happening in Foundation 6 - Leaner, Meaner & Cleaner Sass</h5>
-        <h5 class="show-for-small">See What's Happening in Foundation 6</h5></div>
+    <a href="http://zurb.com/article/1403/foundation-6-prototype-to-production" id="notice">
+      <div class="info">
+        <h5>Foundation 6 launches in
+        <div id="clockdiv" class="countdown">
+          <span class="timer-hour hours"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-hour minutes"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-seconds seconds"></span>
+        </div>
+        </h5>
+      </div>
     </a>
 
-    
+
     <div class="marketing off-canvas-wrap" data-offcanvas>
       <div class="inner-wrap">
 

diff --git a/doc/layouts/default.html b/doc/layouts/default.html
index 86f281944cb56c427f6d273994c0fbf148fdf1ab..b38ea5c5add9189b9be380e38de282cc53216fc2 100644 (file)
--- a/doc/layouts/default.html
+++ b/doc/layouts/default.html
@@ -27,19 +27,26 @@
   <body class="antialiased hide-extras">
 
     <!-- Info Banner For Announcements or Links -->
-    
-    <!-- <a href="http://zurb.com/article/1407/foundation-6-leaner-meaner-and-cleaner-sa" id="notice">
-      <div class="graphic hide-for-small"></div>
-      <div class="info"><h5 class="hide-for-small">See What's Happening in Foundation 6 - Leaner, Meaner & Cleaner Sass</h5>
-        <h5 class="show-for-small">See What's Happening in Foundation 6</h5></div>
-    </a> -->
+    <a href="http://zurb.com/article/1403/foundation-6-prototype-to-production" id="notice">
+      <div class="info">
+        <h5>Foundation 6 launches in
+        <div id="clockdiv" class="countdown">
+          <span class="timer-hour hours"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-hour minutes"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-seconds seconds"></span>
+        </div>
+        </h5>
+      </div>
+    </a>
 
     <a href="http://zurb.com/article/1412/a-look-under-the-hood-of-foundation-6" id="notice">
       <div class="graphic hide-for-small"></div>
       <div class="info"><h5>Slick Features of Foundation 6 We Think You’ll Love</h5>
       </div>
     </a>
-    
+
     <div class="marketing off-canvas-wrap" data-offcanvas>
       <div class="inner-wrap">
 
@@ -89,8 +96,6 @@
       $(document).foundation().foundation('joyride', 'start');
     </script>
   </body>
-  
-
-</html>
 
 
+</html>

diff --git a/doc/layouts/kitchen.html b/doc/layouts/kitchen.html
index 6f0a3e890ac0d2311ccc7006c134e632057f7ca9..ff89876b0862172f1ad96b74967c683aab4a5a6e 100644 (file)
--- a/doc/layouts/kitchen.html
+++ b/doc/layouts/kitchen.html
@@ -26,13 +26,20 @@
     <script src="{{assets}}/js/modernizr.js"></script>
   </head>
   <body class="antialiased hide-extras">
-    
+
     <!-- Info Banner For Announcements or Links -->
-    
-    <a href="http://zurb.com/article/1407/foundation-6-leaner-meaner-and-cleaner-sa" id="notice">
-      <div class="graphic hide-for-small"></div>
-      <div class="info"><h5 class="hide-for-small">See What's Happening in Foundation 6 - Leaner, Meaner & Cleaner Sass</h5>
-        <h5 class="show-for-small">See What's Happening in Foundation 6</h5></div>
+    <a href="http://zurb.com/article/1403/foundation-6-prototype-to-production" id="notice">
+      <div class="info">
+        <h5>Foundation 6 launches in
+        <div id="clockdiv" class="countdown">
+          <span class="timer-hour hours"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-hour minutes"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-seconds seconds"></span>
+        </div>
+        </h5>
+      </div>
     </a>
 
 
@@ -47,7 +54,7 @@
           <div class="row">
             <div class="large-3 medium-4 columns">
               <div class="hide-for-small">
-              {{> sidebar}}  
+              {{> sidebar}}
               </div>
             </div>
             <div class="large-9 medium-8 columns">
@@ -88,4 +95,4 @@
       });
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

diff --git a/doc/layouts/offcanvastest.html b/doc/layouts/offcanvastest.html
index e98abf68d0ff9f31c0bf42af9e69ab32dd899661..d5481a611b263f31276616b2611686981c5896a1 100644 (file)
--- a/doc/layouts/offcanvastest.html
+++ b/doc/layouts/offcanvastest.html
@@ -27,6 +27,21 @@
   </head>
   <body class="antialiased hide-extras">
 
+    <!-- Info Banner For Announcements or Links -->
+    <a href="http://zurb.com/article/1403/foundation-6-prototype-to-production" id="notice">
+      <div class="info">
+        <h5>Foundation 6 launches in
+        <div id="clockdiv" class="countdown">
+          <span class="timer-hour hours"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-hour minutes"></span>
+          <span class="timer-colon">:</span>
+          <span class="timer-seconds seconds"></span>
+        </div>
+        </h5>
+      </div>
+    </a>
+
     <div class="off-canvas-wrap sticky" data-offcanvas>
       <div class="inner-wrap">
         <nav class="tab-bar">