Clock countdown

.firebaserc

@@ -15,4 +15,4 @@
     "brianegan": "brianegan-flutter-staging",
     "xster-staging": "flutter-website-staging-6f2ad"
   }
-}
+}

_config.yml

@@ -49,6 +49,7 @@ defaults:
     # below. To selectively enable a banner (say, on the homepage) add
     # `show_banner: true` to the page's frontmatter.
     show_banner: true
+    show_footer: true
 - scope:
     path: 'docs'
   values:

src/_assets/css/_clock.scss

@@ -0,0 +1,181 @@
+.clock {
+  background-color: $flutter-dark-blue-texture;
+  font-family: $site-font-family-alt;
+  $vertical-line-color: #384753;
+
+  .center {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    z-index: 99;
+  }
+
+  .heading {
+    animation: slide-in 1s .8s;
+    animation-fill-mode: both;
+    color: $site-color-white;
+    font-size: 18px;
+    margin: 0;
+    text-align: center;
+    width: 100%;
+
+    @include media-breakpoint-up(md) {
+      font-size: 32px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      font-size: 40px;
+    }
+  }
+
+  .time-number {
+    animation: slide-in .8s;
+    animation-fill-mode: both;
+    color: $site-color-primary;
+    font-size: 52px;
+    margin: 0;
+    text-align: center;
+    width: 100%;
+    z-index: 2;
+
+    @include media-breakpoint-up(md) {
+      font-size: 110px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      font-size: 160px;
+    }
+
+    @include media-breakpoint-up(xl) {
+      font-size: 180px;
+    }
+
+    @include media-breakpoint-up(xxl) {
+      font-size: 230px;
+    }
+  }
+
+  .digits_container {
+    display: inline-block;
+    width: 68px;
+
+    @include media-breakpoint-up(md) {
+      width: 142px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 200px;
+    }
+
+    @include media-breakpoint-up(xl) {
+      width: 248px;
+    }
+
+    @include media-breakpoint-up(xxl) {
+      width: 294px;
+    }
+  }
+
+  .animations {
+    animation-name: geometric-small-background;
+    animation-duration: 1.2s;
+    animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(.87, 1.15, 1, .99);
+    background-image: asset_url('clock/left_rectangle.svg'), asset_url('clock/right_rectangle.svg'), asset_url('clock/oval.svg');
+    background-repeat: no-repeat;
+    background-size: 181px 247px, 140px 121px, 280px 163px;
+    height: calc(100% - 66px);
+    overflow: hidden;
+    position: absolute;
+    top: 66px;
+    width: 100%;
+
+    @include media-breakpoint-up(md) {
+      animation-name: geometric-medium-background;
+      background-size: 400px 556px, 317px 258px, auto;
+    }
+
+    @include media-breakpoint-up(lg) {
+      background-size: auto;
+    }
+  }
+
+  .vertical-line {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    animation-name: vertical-lines;
+    animation-timing-function: ease;
+    background-color: $vertical-line-color;
+    position: fixed;
+    top: 0;
+    width: 1px;
+    z-index: -1;
+
+    &--first {
+      left: 4%;
+    }
+
+    &--second {
+      animation-delay: .2s;
+      left: 27%;
+    }
+
+    &--thrid {
+      animation-delay: .4s;
+      left: 50%;
+    }
+
+    &--fourth {
+      animation-delay: .6s;
+      left: 73%;
+    }
+
+    &--first, &--thrid {
+      display: none;
+
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+    }
+  }
+}
+
+// animations
+@keyframes vertical-lines {
+  from {
+    height: 0;
+  }
+  to {
+    height: 100%;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes geometric-medium-background {
+  from {
+    background-position: top 150px left -270px, top right -488px, bottom -348px left -140px;
+  }
+  to {
+    background-position: top 150px left, top right, bottom left;
+  }
+}
+
+@keyframes geometric-small-background {
+  from {
+    background-position: bottom 90px left -144px, top right -140px, bottom -164px left -100px;
+  }
+  to {
+    background-position: bottom 90px left, top right, bottom left;
+  }
+}

src/_assets/css/_showcase.scss

@@ -1,6 +1,6 @@
 .showcase {
   background-color: $site-color-codeblock-bg;
-  font-family: "Google Sans", "Roboto", sans-serif;
+  font-family: $site-font-family-alt;
   $site-color-paragraph: #555;
   $site-color-title: #212C34;
 
@@ -221,13 +221,12 @@
     $image_height_lg: 350px;
     $image_height_md: 280px;
     $image_height_sm: 200px;
-    $texture-bg-color: #232C33;
     $author-copy-color: #5bc8f8;
     color: $site-color-white;
     position: relative;
 
     &__texture {
-      background: $texture-bg-color none no-repeat center;
+      background: $flutter-dark-blue-texture none no-repeat center;
       height: 100%;
       margin-left: calc(50% - 50vw);
       position: absolute;

src/_assets/css/_variables.scss

@@ -4,6 +4,7 @@ $flutter-color-blue-500: #1389FD;
 $flutter-color-dark-blue: #075b9a;
 $flutter-color-fuchsia: #FF2B5B;
 $flutter-color-light-blue: #E7F8FF;
+$flutter-dark-blue-texture: #232C33;
 $site-color-black: #000;
 $site-color-white: #FFF;
 $site-color-codeblock-bg: #F8F9FA;

src/_assets/css/main.scss

@@ -26,6 +26,7 @@
 @import '_landing-page';
 @import '_homepage';
 @import '_showcase';
+@import '_clock';
 @import '_community';
 @import '_create';
 @import '_404';

src/_assets/js/countdown.js

@@ -0,0 +1,50 @@
+(function () {
+    const daysContainer = document.querySelector('.days-digits_container');
+    const hoursContainer = document.querySelector('.hours-digits_container');
+    const minutesContainer = document.querySelector('.minutes-digits_container');
+    const secondsContainer = document.querySelector('.seconds-digits_container');
+    const eventTime = 'December 21 2019 17:30:00'; // TODO: Actual event day TBD
+
+    // Returns remaining time in days, hours, minutes and seconds.
+    function getTimeRemaining() {
+        const t = Date.parse(eventTime) - Date.parse(new Date());
+        const seconds = Math.floor( (t/1000) % 60 );
+        const minutes = Math.floor( (t/1000/60) % 60 );
+        const hours = Math.floor( (t/(1000*60*60)) % 24 );
+        const days = Math.floor( t/(1000*60*60*24) );
+        return  {
+            'total': t,
+            'days': days,
+            'hours': hours,
+            'minutes': minutes,
+            'seconds': seconds,
+        };
+    }
+
+    // Adds a zero number if there's just one digit
+    function digitsHandler(number) {
+        return number > 9 ? number : `0${number}`;
+    }
+
+    function setTimer() {
+        const remainingTime = getTimeRemaining();
+
+        if (remainingTime.total > 0) {
+            const days = digitsHandler(remainingTime.days);
+            const hours = digitsHandler(remainingTime.hours);
+            const minutes = digitsHandler(remainingTime.minutes);
+            const seconds = digitsHandler(remainingTime.seconds);
+
+            daysContainer.innerText = `${days}`;
+            hoursContainer.innerText = `${hours}`;
+            minutesContainer.innerText = `${minutes}`;
+            secondsContainer.innerText = `${seconds}`;
+        } else {
+            console.log('The event is now');
+            clearInterval();
+        }
+    }
+
+    setTimer();
+    setInterval(setTimer, 1000);
+}());

src/_layouts/base.html

@@ -15,8 +15,9 @@
 
     {{ content }}
 
-    {%- include footer.html %}
-
+    {% if page.show_footer -%}
+      {%- include footer.html %}
+    {% endif %}
     <script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script>
   </body>
 </html>

src/clock/index.html

@@ -0,0 +1,24 @@
+---
+title: Clock
+layout: base
+show_banner: False
+show_footer: False
+body_class: clock
+---
+
+<section>
+    <div class="center">
+        <h1 class="heading">Time is everything. Stay tuned.</h1>
+        <div class="time-number">
+            <span class="digits_container days-digits_container"></span><span>:</span><span class="digits_container hours-digits_container"></span><span>:</span><span class="digits_container minutes-digits_container"></span><span>:</span><span class="digits_container seconds-digits_container"><span>:</span></span>
+        </div>
+    </div>
+    <div class="animations">
+        <div class="vertical-line vertical-line--first"></div>
+        <div class="vertical-line vertical-line--second"></div>
+        <div class="vertical-line vertical-line--thrid"></div>
+        <div class="vertical-line vertical-line--fourth"></div>
+    </div>
+</section>
+
+{% asset countdown %}