diff --git a/_config.yml b/_config.yml
index 4280094a23c..1fc21332268 100644
--- a/_config.yml
+++ b/_config.yml
@@ -51,6 +51,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:
diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss
new file mode 100644
index 00000000000..bb3634a0c5a
--- /dev/null
+++ b/src/_assets/css/_clock.scss
@@ -0,0 +1,214 @@
+.clock {
+ $vertical-line-color: #384753;
+
+ background-color: $flutter-dark-blue-texture;
+ font-family: $site-font-family-alt;
+
+ .center {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 66px);
+ justify-content: center;
+ }
+
+ .heading {
+ animation: clock-slide-in 1s .3s;
+ animation-fill-mode: both;
+ color: $site-color-white;
+ font-size: 18px;
+ margin: 0 0 24px;
+ text-align: center;
+ width: 100%;
+
+ @include media-breakpoint-up(md) {
+ font-size: 32px;
+ margin: 0 0 22px;
+ }
+
+ @include media-breakpoint-up(lg) {
+ font-size: 40px;
+ margin: 0 0 20px;
+ }
+ }
+
+ .time-number {
+ animation: clock-slide-in 1s;
+ animation-fill-mode: both;
+ color: $site-color-primary;
+ display: flex;
+ font-size: 52px;
+ justify-content: center;
+ 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: clock-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%;
+ z-index: -1;
+
+ @include media-breakpoint-up(md) {
+ animation-name: clock-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: clock-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;
+ }
+ }
+ }
+
+ .share-twitter__paragraph {
+ animation: clock-slide-in 1s .6s;
+ animation-fill-mode: both;
+ color: $site-color-white;
+ font-size: 14px;
+ margin: 20px 0 0;
+ padding: 0 37px;
+ text-align: center;
+ width: 100%;
+
+ @include media-breakpoint-up(md) {
+ font-size: 16px;
+ margin: 22px 0 0;
+ }
+
+ @include media-breakpoint-up(lg) {
+ font-size: 20px;
+ margin: 24px 0 0;
+ }
+ }
+
+ .learn-more__button {
+ display: block;
+ margin: 0 auto;
+ width: 120px;
+ }
+}
+
+// animations
+@keyframes clock-vertical-lines {
+ from {
+ height: 0;
+ }
+ to {
+ height: 100%;
+ }
+}
+
+@keyframes clock-slide-in {
+ from {
+ transform: translateY(50px);
+ opacity: 0;
+ }
+ to {
+ transform: none;
+ opacity: 1;
+ }
+}
+
+@keyframes clock-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 clock-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;
+ }
+}
diff --git a/src/_assets/css/_showcase.scss b/src/_assets/css/_showcase.scss
index acabe565a49..c945522c380 100644
--- a/src/_assets/css/_showcase.scss
+++ b/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;
diff --git a/src/_assets/css/_variables.scss b/src/_assets/css/_variables.scss
index f8a9ea28d11..0e87a60c20f 100644
--- a/src/_assets/css/_variables.scss
+++ b/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;
diff --git a/src/_assets/css/main.scss b/src/_assets/css/main.scss
index b0e9065317e..d498f1f0afd 100644
--- a/src/_assets/css/main.scss
+++ b/src/_assets/css/main.scss
@@ -27,6 +27,7 @@
@import '_landing-page';
@import '_homepage';
@import '_showcase';
+@import '_clock';
@import '_community';
@import '_create';
@import '_books';
diff --git a/src/_assets/image/clock/left_rectangle.svg b/src/_assets/image/clock/left_rectangle.svg
new file mode 100644
index 00000000000..2dd23baa802
--- /dev/null
+++ b/src/_assets/image/clock/left_rectangle.svg
@@ -0,0 +1 @@
+
diff --git a/src/_assets/image/clock/oval.svg b/src/_assets/image/clock/oval.svg
new file mode 100644
index 00000000000..0e6bf5aabbf
--- /dev/null
+++ b/src/_assets/image/clock/oval.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/right_rectangle.svg b/src/_assets/image/clock/right_rectangle.svg
new file mode 100644
index 00000000000..834386b876e
--- /dev/null
+++ b/src/_assets/image/clock/right_rectangle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js
new file mode 100644
index 00000000000..fc970eb171a
--- /dev/null
+++ b/src/_assets/js/countdown.js
@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+ 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 = new Date(Date.UTC(2019, 10, 18, 17, 0, 0));
+
+ let interval;
+
+ // 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 {
+ daysContainer.innerText = '00';
+ hoursContainer.innerText = '00';
+ minutesContainer.innerText = '00';
+ secondsContainer.innerText = '00';
+ clearInterval(interval);
+ }
+ }
+
+ setTimer();
+ interval = setInterval(setTimer, 1000);
+});
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 88ad6696a41..2affe130726 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -15,8 +15,9 @@
{{ content }}
- {%- include footer.html %}
-
+ {% if page.show_footer -%}
+ {%- include footer.html %}
+ {% endif %}