From f32efc167d109194efa8a43ce3bee00b7c98365a Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 12:36:46 -0500 Subject: [PATCH 01/38] First commit --- src/_assets/css/_clock.scss | 18 ++++++++++++++++++ src/_assets/css/main.scss | 1 + src/_assets/js/countdown.js | 35 +++++++++++++++++++++++++++++++++++ src/_includes/head.html | 3 +++ src/clock/index.html | 15 +++++++++++++++ 5 files changed, 72 insertions(+) create mode 100644 src/_assets/css/_clock.scss create mode 100644 src/_assets/js/countdown.js create mode 100644 src/clock/index.html diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss new file mode 100644 index 00000000000..8d33fde7115 --- /dev/null +++ b/src/_assets/css/_clock.scss @@ -0,0 +1,18 @@ +.clock { + .countdown-container { + margin: 60px auto 234px; + text-align: center; + } + + .heading { + font-size: 20px; + margin: 60px 0 100px; + text-align: center; + } + + .time-number { + color: $site-color-primary; + font-size: 86px; + margin: 0; + } +} diff --git a/src/_assets/css/main.scss b/src/_assets/css/main.scss index 2a7f92fead4..f05f4c1e48f 100644 --- a/src/_assets/css/main.scss +++ b/src/_assets/css/main.scss @@ -26,6 +26,7 @@ @import '_landing-page'; @import '_homepage'; @import '_showcase'; +@import '_clock'; @import '_community'; @import '_create'; @import '_404'; diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js new file mode 100644 index 00000000000..5794143ba31 --- /dev/null +++ b/src/_assets/js/countdown.js @@ -0,0 +1,35 @@ +(function () { + const timeNumber = document.querySelector('.time-number'); + const eventTime = moment('21-10-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); + + setInterval(function() { + const currentTime = moment(); + const diffTime = eventTime - currentTime; + + function digitsHandler(number) { + return number > 9 ? number : `0${number}`; + } + + if (diffTime > 0) { + // Duration left to the event + const duration = moment.duration(eventTime.diff(currentTime)); + + //Get Days + const days = digitsHandler(duration.days()); + + //Get hours + const hours = digitsHandler(duration.hours()); + + //Get Minutes + const minutes = digitsHandler(duration.minutes()); + + //Get seconds + const seconds = digitsHandler(duration.seconds()); + + timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; + } else { + time.innerText = "The event is right now"; + clearInterval(); + } + }, 1000); +}()); diff --git a/src/_includes/head.html b/src/_includes/head.html index e977da26a68..6ec09dfda91 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -40,6 +40,9 @@ {% for js in page.js -%} {% endfor -%} + {% if page.title == "Challenge" %} + + {% endif %} {% include head-diff2html.html -%} diff --git a/src/clock/index.html b/src/clock/index.html new file mode 100644 index 00000000000..93289336bdd --- /dev/null +++ b/src/clock/index.html @@ -0,0 +1,15 @@ +--- +title: Challenge +layout: landing +show_banner: False +body_class: clock +--- + +
+

Timing is everything. Stay tuned. xD

+
+

+
+
+ +{% asset countdown %} From 35510f89a1e2d819471706e7b63d7cd9d8ed40f4 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 12:38:12 -0500 Subject: [PATCH 02/38] Minor change. --- src/clock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clock/index.html b/src/clock/index.html index 93289336bdd..42a7ce18367 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -6,7 +6,7 @@ ---
-

Timing is everything. Stay tuned. xD

+

Timing is everything. Stay tuned.

From f65d253ffc109f752bcb0f2efaa5c86f276f69f8 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 13:25:50 -0500 Subject: [PATCH 03/38] Set styles for clock mobile version. --- src/_assets/css/_clock.scss | 11 ++++++++--- src/_assets/css/_showcase.scss | 5 ++--- src/_assets/css/_variables.scss | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 8d33fde7115..2b6a92217dd 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -1,18 +1,23 @@ .clock { + background-color: $flutter-color-dark-blue; + font-family: $site-font-family-alt; + .countdown-container { margin: 60px auto 234px; + padding: 0; text-align: center; } .heading { - font-size: 20px; - margin: 60px 0 100px; + color: $site-color-white; + font-size: 18px; + margin: 152px 0 40px; text-align: center; } .time-number { color: $site-color-primary; - font-size: 86px; + font-size: 58px; margin: 0; } } diff --git a/src/_assets/css/_showcase.scss b/src/_assets/css/_showcase.scss index acabe565a49..93f62e07b08 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-color-dark-blue 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..b354b6d17fc 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-color-dark-blue: #232C33; $site-color-black: #000; $site-color-white: #FFF; $site-color-codeblock-bg: #F8F9FA; From ff4e40a8ad5d30c2ec016cdae3b1ad21fa1e5294 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 14:01:48 -0500 Subject: [PATCH 04/38] Add styles for tablet and desktop breakpoints. --- src/_assets/css/_clock.scss | 18 ++++++++++++++++++ src/_includes/head.html | 4 ++-- src/_layouts/base.html | 5 +++-- src/clock/index.html | 2 +- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 2b6a92217dd..3580d07eedb 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -13,11 +13,29 @@ font-size: 18px; margin: 152px 0 40px; text-align: center; + + @include media-breakpoint-up(md) { + font-size: 32px; + margin: 304px 0 56px; + } + + @include media-breakpoint-up(lg) { + font-size: 40px; + margin: 192px 0 88px; + } } .time-number { color: $site-color-primary; font-size: 58px; margin: 0; + + @include media-breakpoint-up(md) { + font-size: 110px; + } + + @include media-breakpoint-up(lg) { + font-size: 160px; + } } } diff --git a/src/_includes/head.html b/src/_includes/head.html index 6ec09dfda91..21c293b1549 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -40,8 +40,8 @@ {% for js in page.js -%} {% endfor -%} - {% if page.title == "Challenge" %} - + {% if page.title == "Clock" %} + {% endif %} {% include head-diff2html.html -%} diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 88ad6696a41..7d196cfd855 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -15,8 +15,9 @@ {{ content }} - {%- include footer.html %} - + {% if page.title != "Clock" %} + {%- include footer.html %} + {% endif %} diff --git a/src/clock/index.html b/src/clock/index.html index 42a7ce18367..c651b7b7d0c 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -1,5 +1,5 @@ --- -title: Challenge +title: Clock layout: landing show_banner: False body_class: clock From 49ee8691bfaa5569951087598cd9f0b5e043f0ba Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 15:18:33 -0500 Subject: [PATCH 05/38] Add extra-large viewport for countdown. --- src/_assets/css/_clock.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 3580d07eedb..7bd58ca44dc 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -37,5 +37,9 @@ @include media-breakpoint-up(lg) { font-size: 160px; } + + @include media-breakpoint-up(xl) { + font-size: 200px; + } } } From 22ada6db3baf319d667fbc2e5296463164150134 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 16:25:20 -0500 Subject: [PATCH 06/38] Add extra large viewport for countdown font-size. --- src/_assets/css/_clock.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 7bd58ca44dc..8b92f52db7e 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -39,7 +39,11 @@ } @include media-breakpoint-up(xl) { - font-size: 200px; + font-size: 200px; + } + + @include media-breakpoint-up(xxl) { + font-size: 230px; } } } From 634dd8761d891a3ccf98331dff08eb6426b0b1a9 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Mon, 21 Oct 2019 16:34:55 -0500 Subject: [PATCH 07/38] Minor change in digitsHandler function. --- src/_assets/js/countdown.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 5794143ba31..8e81dd3b5b9 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -1,15 +1,15 @@ (function () { const timeNumber = document.querySelector('.time-number'); - const eventTime = moment('21-10-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); + const eventTime = moment('23-10-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); + + function digitsHandler(number) { + return number > 9 ? number : `0${number}`; + } setInterval(function() { const currentTime = moment(); const diffTime = eventTime - currentTime; - function digitsHandler(number) { - return number > 9 ? number : `0${number}`; - } - if (diffTime > 0) { // Duration left to the event const duration = moment.duration(eventTime.diff(currentTime)); @@ -28,7 +28,7 @@ timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; } else { - time.innerText = "The event is right now"; + time.innerText = ""; clearInterval(); } }, 1000); From f40a83476e5c81442a631411af9739402ffed242 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 09:06:49 -0500 Subject: [PATCH 08/38] Add animations --- src/_assets/css/_clock.scss | 240 +++++++++++++++++- src/_assets/image/clock/Left_Rectangle_L.svg | 13 + src/_assets/image/clock/Left_Rectangle_M.svg | 13 + src/_assets/image/clock/Left_Rectangle_S.svg | 13 + src/_assets/image/clock/Oval_L.svg | 13 + src/_assets/image/clock/Oval_M.svg | 13 + src/_assets/image/clock/Oval_S.svg | 13 + src/_assets/image/clock/Right_Rectangle_L.svg | 13 + src/_assets/image/clock/Right_Rectangle_M.svg | 13 + src/_assets/image/clock/Right_Rectangle_S.svg | 13 + src/_assets/js/countdown.js | 49 ++-- src/clock/index.html | 31 ++- 12 files changed, 403 insertions(+), 34 deletions(-) create mode 100755 src/_assets/image/clock/Left_Rectangle_L.svg create mode 100755 src/_assets/image/clock/Left_Rectangle_M.svg create mode 100755 src/_assets/image/clock/Left_Rectangle_S.svg create mode 100755 src/_assets/image/clock/Oval_L.svg create mode 100755 src/_assets/image/clock/Oval_M.svg create mode 100755 src/_assets/image/clock/Oval_S.svg create mode 100755 src/_assets/image/clock/Right_Rectangle_L.svg create mode 100755 src/_assets/image/clock/Right_Rectangle_M.svg create mode 100755 src/_assets/image/clock/Right_Rectangle_S.svg diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 8b92f52db7e..015e1e43058 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -1,34 +1,145 @@ +@keyframes right-slide-in { + from { + right: -500px; + } + to { + right: 0; + } +} + +@keyframes left-slide-in { + from { + left: -300px; + } + to { + left: 0; + } +} + +@keyframes oval-slide-in-small { + from { + left: -650px; + bottom: -350px; + } + to { + left: 0; + bottom: 0; + } +} + + +@keyframes oval-slide-in { + from { + left: -650px; + bottom: -350px; + } + to { + left: 0; + bottom: -10%; + } +} + +@keyframes vertical-lines { + from { + height: 0%; + } + to { + height: 100%; + } +} + +@keyframes slide-in { + from { + bottom: -50px; + opacity: 0; + } + to { + bottom: 0; + opacity: 1; + } +} + .clock { background-color: $flutter-color-dark-blue; font-family: $site-font-family-alt; + .center { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + } + .countdown-container { - margin: 60px auto 234px; + margin: 60px auto 100px; padding: 0; text-align: center; } + .heading-container { + height: 40px; + margin: 152px 0 40px; + position: relative; + + @include media-breakpoint-up(md) { + font-size: 32px; + height: 52px; + margin: 304px 0 56px; + } + + @include media-breakpoint-up(lg) { + font-size: 40px; + height: 60px; + margin: 192px 0 88px; + } + } + .heading { + animation: slide-in 1s; + animation-fill-mode: both; color: $site-color-white; font-size: 18px; - margin: 152px 0 40px; + margin: 0; + position: absolute; text-align: center; + width: 100%; @include media-breakpoint-up(md) { font-size: 32px; - margin: 304px 0 56px; } @include media-breakpoint-up(lg) { font-size: 40px; - margin: 192px 0 88px; + } + } + + .time-unit-container { + display: inline-block; + height: 87px; + overflow: hidden; + position: relative; + width: 100%; + + @include media-breakpoint-up(md) { + height: 165px; + } + + @include media-breakpoint-up(lg) { + height: 260px; } } .time-number { + animation: slide-in 0.8s; + animation-fill-mode: both; color: $site-color-primary; font-size: 58px; margin: 0; + position: absolute; + text-align: center; + top: 0; + width: 100%; + z-index: 2; @include media-breakpoint-up(md) { font-size: 110px; @@ -39,11 +150,128 @@ } @include media-breakpoint-up(xl) { - font-size: 200px; - } + font-size: 200px; + } @include media-breakpoint-up(xxl) { font-size: 230px; } } + + .animations { + height: 92.6%; + overflow: hidden; + position: absolute; + top: 66px; + width: 100%; + } + + .vertical-line { + animation-duration: 1s; + animation-fill-mode: both; + animation-name: vertical-lines; + animation-timing-function: ease; + background-color: #384753; + position: fixed; + top: 0; + width: 1px; + + &--first { + animation-delay: 0s; + left: 4%; + } + + &--second { + animation-delay: 0.2s; + left: 27%; + } + + &--thrid { + animation-delay: 0.4s; + left: 50%; + } + + &--fourth { + animation-delay: 0.6s; + left: 73%; + } + + &--first, &--thrid { + display: none; + + @include media-breakpoint-up(lg) { + display: block; + } + } + } + + .svg-animated { + animation-duration: 1.2s; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.87, 1.15, 1, 0.99); + position: absolute; + + &--left { + animation-name: left-slide-in; + bottom: 130px; + left: 0; + + @include media-breakpoint-up(md) { + bottom: unset; + top: 100px; + } + } + + &--right { + animation-name: right-slide-in; + right: 0; + top: 0; + } + + &--oval { + animation-name: oval-slide-in-small; + bottom: 0; + left: 0; + + @include media-breakpoint-up(md) { + animation-name: oval-slide-in; + } + } + + &--large { + display: none; + + @include media-breakpoint-up(md) { + display: none; + } + + @include media-breakpoint-up(lg) { + display: block; + } + } + + &--medium { + display: none; + + @include media-breakpoint-up(md) { + display: block; + } + + @include media-breakpoint-up(lg) { + display: none; + } + } + + &--small { + display: block; + + @include media-breakpoint-up(md) { + display: none; + } + + @include media-breakpoint-up(lg) { + display: none; + } + } + } } diff --git a/src/_assets/image/clock/Left_Rectangle_L.svg b/src/_assets/image/clock/Left_Rectangle_L.svg new file mode 100755 index 00000000000..df524fd9c80 --- /dev/null +++ b/src/_assets/image/clock/Left_Rectangle_L.svg @@ -0,0 +1,13 @@ + + + + Left_Rectangle_L + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Left_Rectangle_M.svg b/src/_assets/image/clock/Left_Rectangle_M.svg new file mode 100755 index 00000000000..71af7209fa4 --- /dev/null +++ b/src/_assets/image/clock/Left_Rectangle_M.svg @@ -0,0 +1,13 @@ + + + + Left_Rectangle_M + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Left_Rectangle_S.svg b/src/_assets/image/clock/Left_Rectangle_S.svg new file mode 100755 index 00000000000..3ff64d5b33c --- /dev/null +++ b/src/_assets/image/clock/Left_Rectangle_S.svg @@ -0,0 +1,13 @@ + + + + Left_Rectangle_S + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Oval_L.svg b/src/_assets/image/clock/Oval_L.svg new file mode 100755 index 00000000000..75b7c18762d --- /dev/null +++ b/src/_assets/image/clock/Oval_L.svg @@ -0,0 +1,13 @@ + + + + Oval_L + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Oval_M.svg b/src/_assets/image/clock/Oval_M.svg new file mode 100755 index 00000000000..ada44e349e0 --- /dev/null +++ b/src/_assets/image/clock/Oval_M.svg @@ -0,0 +1,13 @@ + + + + Oval_M + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Oval_S.svg b/src/_assets/image/clock/Oval_S.svg new file mode 100755 index 00000000000..6e2e89a9115 --- /dev/null +++ b/src/_assets/image/clock/Oval_S.svg @@ -0,0 +1,13 @@ + + + + Oval_S + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Right_Rectangle_L.svg b/src/_assets/image/clock/Right_Rectangle_L.svg new file mode 100755 index 00000000000..33e32823274 --- /dev/null +++ b/src/_assets/image/clock/Right_Rectangle_L.svg @@ -0,0 +1,13 @@ + + + + Right_Rectangle_L + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Right_Rectangle_M.svg b/src/_assets/image/clock/Right_Rectangle_M.svg new file mode 100755 index 00000000000..4cabaff4c69 --- /dev/null +++ b/src/_assets/image/clock/Right_Rectangle_M.svg @@ -0,0 +1,13 @@ + + + + Right_Rectangle_M + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/Right_Rectangle_S.svg b/src/_assets/image/clock/Right_Rectangle_S.svg new file mode 100755 index 00000000000..173aaa569c6 --- /dev/null +++ b/src/_assets/image/clock/Right_Rectangle_S.svg @@ -0,0 +1,13 @@ + + + + Right_Rectangle_S + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 8e81dd3b5b9..50ab94f28f6 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -1,35 +1,38 @@ -(function () { - const timeNumber = document.querySelector('.time-number'); - const eventTime = moment('23-10-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); +const timeNumber = document.querySelector('.time-number'); +const eventTime = moment('21-12-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); + +function setTimer() { + const currentTime = moment(); + const diffTime = eventTime - currentTime; function digitsHandler(number) { return number > 9 ? number : `0${number}`; } - setInterval(function() { - const currentTime = moment(); - const diffTime = eventTime - currentTime; + if (diffTime > 0) { + // Duration left to the event + const duration = moment.duration(eventTime.diff(currentTime)); - if (diffTime > 0) { - // Duration left to the event - const duration = moment.duration(eventTime.diff(currentTime)); + //Get Days + const days = digitsHandler(duration.days()); - //Get Days - const days = digitsHandler(duration.days()); + //Get hours + const hours = digitsHandler(duration.hours()); - //Get hours - const hours = digitsHandler(duration.hours()); + //Get Minutes + const minutes = digitsHandler(duration.minutes()); - //Get Minutes - const minutes = digitsHandler(duration.minutes()); + //Get seconds + const seconds = digitsHandler(duration.seconds()); - //Get seconds - const seconds = digitsHandler(duration.seconds()); + timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; + } else { + timeNumber.innerText = "The event is right now"; + clearInterval(); + } +} - timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; - } else { - time.innerText = ""; - clearInterval(); - } - }, 1000); +(function () { + setTimer(); + setInterval(setTimer, 1000); }()); diff --git a/src/clock/index.html b/src/clock/index.html index c651b7b7d0c..6d3594e4fe9 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -1,14 +1,35 @@ --- title: Clock -layout: landing +layout: base show_banner: False body_class: clock --- -
-

Timing is everything. Stay tuned.

-
-

+
+
+
+

Time is everything. Stay tuned.

+
+
+
+

+
+
+
+
+ {% asset clock/Left_Rectangle_L.svg class='svg-animated svg-animated--left svg-animated--large' %} + {% asset clock/Right_Rectangle_L.svg class='svg-animated svg-animated--right svg-animated--large' %} + {% asset clock/Oval_L.svg class='svg-animated svg-animated--oval svg-animated--large' %} + {% asset clock/Left_Rectangle_M.svg class='svg-animated svg-animated--left svg-animated--medium' %} + {% asset clock/Right_Rectangle_M.svg class='svg-animated svg-animated--right svg-animated--medium' %} + {% asset clock/Oval_M.svg class='svg-animated svg-animated--oval svg-animated--medium' %} + {% asset clock/Left_Rectangle_S.svg class='svg-animated svg-animated--left svg-animated--small' %} + {% asset clock/Right_Rectangle_S.svg class='svg-animated svg-animated--right svg-animated--small' %} + {% asset clock/Oval_S.svg class='svg-animated svg-animated--oval svg-animated--small' %} +
+
+
+
From 268afaf85e5d0b96d591a7a0c377a427b0af968d Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 09:19:31 -0500 Subject: [PATCH 09/38] Optimize svg files. --- src/_assets/image/clock/Left_Rectangle_L.svg | 13 ------------- src/_assets/image/clock/Left_Rectangle_M.svg | 13 ------------- src/_assets/image/clock/Left_Rectangle_S.svg | 13 ------------- src/_assets/image/clock/Oval_L.svg | 13 ------------- src/_assets/image/clock/Oval_M.svg | 13 ------------- src/_assets/image/clock/Oval_S.svg | 13 ------------- src/_assets/image/clock/Right_Rectangle_L.svg | 13 ------------- src/_assets/image/clock/Right_Rectangle_M.svg | 13 ------------- src/_assets/image/clock/Right_Rectangle_S.svg | 13 ------------- .../image/clock/left_rectangle-large.svg | 1 + .../image/clock/left_rectangle-medium.svg | 1 + .../image/clock/left_rectangle-small.svg | 1 + src/_assets/image/clock/oval-large.svg | 1 + src/_assets/image/clock/oval-medium.svg | 1 + src/_assets/image/clock/oval-small.svg | 1 + .../image/clock/right_rectangle-large.svg | 1 + .../image/clock/right_rectangle-medium.svg | 1 + .../image/clock/right_rectangle-small.svg | 1 + src/clock/index.html | 18 +++++++++--------- 19 files changed, 18 insertions(+), 126 deletions(-) delete mode 100755 src/_assets/image/clock/Left_Rectangle_L.svg delete mode 100755 src/_assets/image/clock/Left_Rectangle_M.svg delete mode 100755 src/_assets/image/clock/Left_Rectangle_S.svg delete mode 100755 src/_assets/image/clock/Oval_L.svg delete mode 100755 src/_assets/image/clock/Oval_M.svg delete mode 100755 src/_assets/image/clock/Oval_S.svg delete mode 100755 src/_assets/image/clock/Right_Rectangle_L.svg delete mode 100755 src/_assets/image/clock/Right_Rectangle_M.svg delete mode 100755 src/_assets/image/clock/Right_Rectangle_S.svg create mode 100644 src/_assets/image/clock/left_rectangle-large.svg create mode 100644 src/_assets/image/clock/left_rectangle-medium.svg create mode 100644 src/_assets/image/clock/left_rectangle-small.svg create mode 100644 src/_assets/image/clock/oval-large.svg create mode 100644 src/_assets/image/clock/oval-medium.svg create mode 100644 src/_assets/image/clock/oval-small.svg create mode 100644 src/_assets/image/clock/right_rectangle-large.svg create mode 100644 src/_assets/image/clock/right_rectangle-medium.svg create mode 100644 src/_assets/image/clock/right_rectangle-small.svg diff --git a/src/_assets/image/clock/Left_Rectangle_L.svg b/src/_assets/image/clock/Left_Rectangle_L.svg deleted file mode 100755 index df524fd9c80..00000000000 --- a/src/_assets/image/clock/Left_Rectangle_L.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Left_Rectangle_L - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Left_Rectangle_M.svg b/src/_assets/image/clock/Left_Rectangle_M.svg deleted file mode 100755 index 71af7209fa4..00000000000 --- a/src/_assets/image/clock/Left_Rectangle_M.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Left_Rectangle_M - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Left_Rectangle_S.svg b/src/_assets/image/clock/Left_Rectangle_S.svg deleted file mode 100755 index 3ff64d5b33c..00000000000 --- a/src/_assets/image/clock/Left_Rectangle_S.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Left_Rectangle_S - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Oval_L.svg b/src/_assets/image/clock/Oval_L.svg deleted file mode 100755 index 75b7c18762d..00000000000 --- a/src/_assets/image/clock/Oval_L.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Oval_L - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Oval_M.svg b/src/_assets/image/clock/Oval_M.svg deleted file mode 100755 index ada44e349e0..00000000000 --- a/src/_assets/image/clock/Oval_M.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Oval_M - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Oval_S.svg b/src/_assets/image/clock/Oval_S.svg deleted file mode 100755 index 6e2e89a9115..00000000000 --- a/src/_assets/image/clock/Oval_S.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Oval_S - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Right_Rectangle_L.svg b/src/_assets/image/clock/Right_Rectangle_L.svg deleted file mode 100755 index 33e32823274..00000000000 --- a/src/_assets/image/clock/Right_Rectangle_L.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Right_Rectangle_L - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Right_Rectangle_M.svg b/src/_assets/image/clock/Right_Rectangle_M.svg deleted file mode 100755 index 4cabaff4c69..00000000000 --- a/src/_assets/image/clock/Right_Rectangle_M.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Right_Rectangle_M - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/Right_Rectangle_S.svg b/src/_assets/image/clock/Right_Rectangle_S.svg deleted file mode 100755 index 173aaa569c6..00000000000 --- a/src/_assets/image/clock/Right_Rectangle_S.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Right_Rectangle_S - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle-large.svg b/src/_assets/image/clock/left_rectangle-large.svg new file mode 100644 index 00000000000..294ce6ceb77 --- /dev/null +++ b/src/_assets/image/clock/left_rectangle-large.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle-medium.svg b/src/_assets/image/clock/left_rectangle-medium.svg new file mode 100644 index 00000000000..c0f901b8a48 --- /dev/null +++ b/src/_assets/image/clock/left_rectangle-medium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle-small.svg b/src/_assets/image/clock/left_rectangle-small.svg new file mode 100644 index 00000000000..faed4956b25 --- /dev/null +++ b/src/_assets/image/clock/left_rectangle-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/oval-large.svg b/src/_assets/image/clock/oval-large.svg new file mode 100644 index 00000000000..0d971f05035 --- /dev/null +++ b/src/_assets/image/clock/oval-large.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/oval-medium.svg b/src/_assets/image/clock/oval-medium.svg new file mode 100644 index 00000000000..75ff92e4a2f --- /dev/null +++ b/src/_assets/image/clock/oval-medium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/oval-small.svg b/src/_assets/image/clock/oval-small.svg new file mode 100644 index 00000000000..815b26c5bc3 --- /dev/null +++ b/src/_assets/image/clock/oval-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/right_rectangle-large.svg b/src/_assets/image/clock/right_rectangle-large.svg new file mode 100644 index 00000000000..1e761afd0c7 --- /dev/null +++ b/src/_assets/image/clock/right_rectangle-large.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/right_rectangle-medium.svg b/src/_assets/image/clock/right_rectangle-medium.svg new file mode 100644 index 00000000000..326be148883 --- /dev/null +++ b/src/_assets/image/clock/right_rectangle-medium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_assets/image/clock/right_rectangle-small.svg b/src/_assets/image/clock/right_rectangle-small.svg new file mode 100644 index 00000000000..1d8ffd646ba --- /dev/null +++ b/src/_assets/image/clock/right_rectangle-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/clock/index.html b/src/clock/index.html index 6d3594e4fe9..e49b4c0cdd1 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -17,15 +17,15 @@

Time is everything. Stay tuned.

- {% asset clock/Left_Rectangle_L.svg class='svg-animated svg-animated--left svg-animated--large' %} - {% asset clock/Right_Rectangle_L.svg class='svg-animated svg-animated--right svg-animated--large' %} - {% asset clock/Oval_L.svg class='svg-animated svg-animated--oval svg-animated--large' %} - {% asset clock/Left_Rectangle_M.svg class='svg-animated svg-animated--left svg-animated--medium' %} - {% asset clock/Right_Rectangle_M.svg class='svg-animated svg-animated--right svg-animated--medium' %} - {% asset clock/Oval_M.svg class='svg-animated svg-animated--oval svg-animated--medium' %} - {% asset clock/Left_Rectangle_S.svg class='svg-animated svg-animated--left svg-animated--small' %} - {% asset clock/Right_Rectangle_S.svg class='svg-animated svg-animated--right svg-animated--small' %} - {% asset clock/Oval_S.svg class='svg-animated svg-animated--oval svg-animated--small' %} + {% asset clock/left_rectangle-large.svg class='svg-animated svg-animated--left svg-animated--large' %} + {% asset clock/right_rectangle-large.svg class='svg-animated svg-animated--right svg-animated--large' %} + {% asset clock/oval-large.svg class='svg-animated svg-animated--oval svg-animated--large' %} + {% asset clock/left_rectangle-medium.svg class='svg-animated svg-animated--left svg-animated--medium' %} + {% asset clock/right_rectangle-medium.svg class='svg-animated svg-animated--right svg-animated--medium' %} + {% asset clock/oval-medium.svg class='svg-animated svg-animated--oval svg-animated--medium' %} + {% asset clock/left_rectangle-small.svg class='svg-animated svg-animated--left svg-animated--small' %} + {% asset clock/right_rectangle-small.svg class='svg-animated svg-animated--right svg-animated--small' %} + {% asset clock/oval-small.svg class='svg-animated svg-animated--oval svg-animated--small' %}
From 7fc8197b44f7dca1acd9891c7ddc23470a124733 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 10:07:20 -0500 Subject: [PATCH 10/38] Minor fix --- src/_assets/css/_clock.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 015e1e43058..c85e56d6b54 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -95,7 +95,7 @@ } .heading { - animation: slide-in 1s; + animation: slide-in 1s 0.8s; animation-fill-mode: both; color: $site-color-white; font-size: 18px; @@ -137,7 +137,6 @@ margin: 0; position: absolute; text-align: center; - top: 0; width: 100%; z-index: 2; @@ -175,6 +174,7 @@ position: fixed; top: 0; width: 1px; + z-index: -1; &--first { animation-delay: 0s; From ed6f94e95daf9658076715794183568c933bfe99 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 11:33:55 -0500 Subject: [PATCH 11/38] Remove unnecessary styles. --- src/_assets/css/_clock.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index c85e56d6b54..12f1a033b41 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -71,26 +71,25 @@ } .countdown-container { - margin: 60px auto 100px; padding: 0; text-align: center; } .heading-container { height: 40px; - margin: 152px 0 40px; + margin: 0 0 40px; position: relative; @include media-breakpoint-up(md) { font-size: 32px; height: 52px; - margin: 304px 0 56px; + margin-bottom: 56px; } @include media-breakpoint-up(lg) { font-size: 40px; height: 60px; - margin: 192px 0 88px; + margin-bottom: 88px; } } @@ -158,7 +157,7 @@ } .animations { - height: 92.6%; + height: calc(100% - 66px); overflow: hidden; position: absolute; top: 66px; @@ -215,11 +214,17 @@ animation-name: left-slide-in; bottom: 130px; left: 0; + transform: scaleX(1.5); @include media-breakpoint-up(md) { bottom: unset; + transform: unset; top: 100px; } + + @include media-breakpoint-up(lg) { + transform: translateX(-30px); + } } &--right { From 558fac1f4a1056d7a6675ab335c642b398c9d776 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 11:56:18 -0500 Subject: [PATCH 12/38] Change variables scope. --- src/_assets/css/_clock.scss | 2 +- src/_assets/js/countdown.js | 50 ++++++++++++++++++------------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 12f1a033b41..2211c0baf9c 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -41,7 +41,7 @@ @keyframes vertical-lines { from { - height: 0%; + height: 0; } to { height: 100%; diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 50ab94f28f6..d3a1078a357 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -1,38 +1,38 @@ -const timeNumber = document.querySelector('.time-number'); -const eventTime = moment('21-12-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); +(function () { + const timeNumber = document.querySelector('.time-number'); + const eventTime = moment('21-12-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); -function setTimer() { - const currentTime = moment(); - const diffTime = eventTime - currentTime; + function setTimer() { + const currentTime = moment(); + const diffTime = eventTime - currentTime; - function digitsHandler(number) { - return number > 9 ? number : `0${number}`; - } + function digitsHandler(number) { + return number > 9 ? number : `0${number}`; + } - if (diffTime > 0) { - // Duration left to the event - const duration = moment.duration(eventTime.diff(currentTime)); + if (diffTime > 0) { + // Duration left to the event + const duration = moment.duration(eventTime.diff(currentTime)); - //Get Days - const days = digitsHandler(duration.days()); + //Get Days + const days = digitsHandler(duration.days()); - //Get hours - const hours = digitsHandler(duration.hours()); + //Get hours + const hours = digitsHandler(duration.hours()); - //Get Minutes - const minutes = digitsHandler(duration.minutes()); + //Get Minutes + const minutes = digitsHandler(duration.minutes()); - //Get seconds - const seconds = digitsHandler(duration.seconds()); + //Get seconds + const seconds = digitsHandler(duration.seconds()); - timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; - } else { - timeNumber.innerText = "The event is right now"; - clearInterval(); + timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; + } else { + timeNumber.innerText = "The event is right now"; + clearInterval(); + } } -} -(function () { setTimer(); setInterval(setTimer, 1000); }()); From 1917ea2f3ac52e6651b52dafb65db4dd7b7b3e74 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 15:37:21 -0500 Subject: [PATCH 13/38] Minor css change. --- src/_assets/css/_clock.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 2211c0baf9c..1d89be4786c 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -18,24 +18,24 @@ @keyframes oval-slide-in-small { from { - left: -650px; bottom: -350px; + left: -650px; } to { - left: 0; bottom: 0; + left: 0; } } @keyframes oval-slide-in { from { - left: -650px; bottom: -350px; + left: -650px; } to { - left: 0; bottom: -10%; + left: 0; } } @@ -115,7 +115,6 @@ .time-unit-container { display: inline-block; height: 87px; - overflow: hidden; position: relative; width: 100%; From 5bcfdf55cecbaf8ebc2fccfe7e9eecd964a341b2 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 16:01:21 -0500 Subject: [PATCH 14/38] Change keyframe transition. --- src/_assets/css/_clock.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 1d89be4786c..e8a6c3423a9 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -50,11 +50,11 @@ @keyframes slide-in { from { - bottom: -50px; + transform: translateY(50px); opacity: 0; } to { - bottom: 0; + transform: none; opacity: 1; } } From 46e374ca7e5edc8e075a0f05197ae7d5a4918273 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 16:30:27 -0500 Subject: [PATCH 15/38] Adjust heading height. --- src/_assets/css/_clock.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index e8a6c3423a9..42c4f292824 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -76,19 +76,19 @@ } .heading-container { - height: 40px; + height: 24px; margin: 0 0 40px; position: relative; @include media-breakpoint-up(md) { font-size: 32px; - height: 52px; + height: 36px; margin-bottom: 56px; } @include media-breakpoint-up(lg) { font-size: 40px; - height: 60px; + height: 48px; margin-bottom: 88px; } } @@ -99,7 +99,6 @@ color: $site-color-white; font-size: 18px; margin: 0; - position: absolute; text-align: center; width: 100%; @@ -133,7 +132,6 @@ color: $site-color-primary; font-size: 58px; margin: 0; - position: absolute; text-align: center; width: 100%; z-index: 2; From 4edaeaa2926d1eec3ed7f3f95afc709934e2f894 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 18:25:54 -0500 Subject: [PATCH 16/38] Add fixed with to digits container. --- src/_assets/css/_clock.scss | 21 +++++++++++++++++++++ src/_assets/js/countdown.js | 12 +++++++++--- src/clock/index.html | 4 +++- 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 42c4f292824..693b1bb7145 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -153,6 +153,27 @@ } } + .digits_container { + display: inline-block; + width: 74px; + + @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 { height: calc(100% - 66px); overflow: hidden; diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index d3a1078a357..60af21b775b 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -1,5 +1,8 @@ (function () { - const timeNumber = document.querySelector('.time-number'); + 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 = moment('21-12-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); function setTimer() { @@ -26,9 +29,12 @@ //Get seconds const seconds = digitsHandler(duration.seconds()); - timeNumber.innerText = `${days}:${hours}:${minutes}:${seconds}`; + daysContainer.innerText = `${days}`; + hoursContainer.innerText = `${hours}`; + minutesContainer.innerText = `${minutes}`; + secondsContainer.innerText = `${seconds}`; } else { - timeNumber.innerText = "The event is right now"; + console.log('The event is now'); clearInterval(); } } diff --git a/src/clock/index.html b/src/clock/index.html index e49b4c0cdd1..c0851d7e765 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -12,7 +12,9 @@

Time is everything. Stay tuned.

-

+
+ ::: +
From 71a62bad901ba41e6e2ed30f81447e591474fe6f Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Tue, 22 Oct 2019 19:56:11 -0500 Subject: [PATCH 17/38] Minor change. --- src/_assets/css/_clock.scss | 128 ++++++++++++++++++------------------ src/clock/index.html | 3 +- 2 files changed, 65 insertions(+), 66 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 693b1bb7145..e47aef83322 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -1,64 +1,3 @@ -@keyframes right-slide-in { - from { - right: -500px; - } - to { - right: 0; - } -} - -@keyframes left-slide-in { - from { - left: -300px; - } - to { - left: 0; - } -} - -@keyframes oval-slide-in-small { - from { - bottom: -350px; - left: -650px; - } - to { - bottom: 0; - left: 0; - } -} - - -@keyframes oval-slide-in { - from { - bottom: -350px; - left: -650px; - } - to { - bottom: -10%; - left: 0; - } -} - -@keyframes vertical-lines { - from { - height: 0; - } - to { - height: 100%; - } -} - -@keyframes slide-in { - from { - transform: translateY(50px); - opacity: 0; - } - to { - transform: none; - opacity: 1; - } -} - .clock { background-color: $flutter-color-dark-blue; font-family: $site-font-family-alt; @@ -77,19 +16,17 @@ .heading-container { height: 24px; - margin: 0 0 40px; + margin: 0; position: relative; @include media-breakpoint-up(md) { font-size: 32px; height: 36px; - margin-bottom: 56px; } @include media-breakpoint-up(lg) { font-size: 40px; height: 48px; - margin-bottom: 88px; } } @@ -298,3 +235,66 @@ } } } + +// animations + +@keyframes right-slide-in { + from { + right: -500px; + } + to { + right: 0; + } +} + +@keyframes left-slide-in { + from { + left: -300px; + } + to { + left: 0; + } +} + +@keyframes oval-slide-in-small { + from { + bottom: -350px; + left: -650px; + } + to { + bottom: 0; + left: 0; + } +} + + +@keyframes oval-slide-in { + from { + bottom: -350px; + left: -650px; + } + to { + bottom: -10%; + left: 0; + } +} + +@keyframes vertical-lines { + from { + height: 0; + } + to { + height: 100%; + } +} + +@keyframes slide-in { + from { + transform: translateY(50px); + opacity: 0; + } + to { + transform: none; + opacity: 1; + } +} diff --git a/src/clock/index.html b/src/clock/index.html index c0851d7e765..a7a23b5a117 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -13,8 +13,7 @@

Time is everything. Stay tuned.

- ::: -
+ ::::
From e91f28bac99c25d66ad8758b99858156d4e9241d Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 11:53:35 -0500 Subject: [PATCH 18/38] Remove unnecessary styles. --- src/_assets/css/_clock.scss | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index e47aef83322..f8c97e03ed9 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -31,7 +31,7 @@ } .heading { - animation: slide-in 1s 0.8s; + animation: slide-in 1s .8s; animation-fill-mode: both; color: $site-color-white; font-size: 18px; @@ -64,7 +64,7 @@ } .time-number { - animation: slide-in 0.8s; + animation: slide-in .8s; animation-fill-mode: both; color: $site-color-primary; font-size: 58px; @@ -131,22 +131,21 @@ z-index: -1; &--first { - animation-delay: 0s; left: 4%; } &--second { - animation-delay: 0.2s; + animation-delay: .2s; left: 27%; } &--thrid { - animation-delay: 0.4s; + animation-delay: .4s; left: 50%; } &--fourth { - animation-delay: 0.6s; + animation-delay: .6s; left: 73%; } @@ -162,7 +161,7 @@ .svg-animated { animation-duration: 1.2s; animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.87, 1.15, 1, 0.99); + animation-timing-function: cubic-bezier(.87, 1.15, 1, .99); position: absolute; &--left { @@ -201,10 +200,6 @@ &--large { display: none; - @include media-breakpoint-up(md) { - display: none; - } - @include media-breakpoint-up(lg) { display: block; } @@ -228,10 +223,6 @@ @include media-breakpoint-up(md) { display: none; } - - @include media-breakpoint-up(lg) { - display: none; - } } } } From d86f41f7e23dded9d8d366a8bdf940c9c867614f Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 16:20:39 -0500 Subject: [PATCH 19/38] Refactor geometric shapes animation. --- src/_assets/css/_clock.scss | 141 +++++------------- src/_assets/css/_showcase.scss | 2 +- src/_assets/css/_variables.scss | 2 +- .../image/clock/left_rectangle-large.svg | 1 - .../image/clock/left_rectangle-medium.svg | 1 - .../image/clock/left_rectangle-small.svg | 1 - src/_assets/image/clock/left_rectangle.svg | 13 ++ src/_assets/image/clock/oval-large.svg | 1 - src/_assets/image/clock/oval-medium.svg | 1 - src/_assets/image/clock/oval-small.svg | 1 - src/_assets/image/clock/oval.svg | 1 + .../image/clock/right_rectangle-large.svg | 1 - .../image/clock/right_rectangle-medium.svg | 1 - .../image/clock/right_rectangle-small.svg | 1 - src/_assets/image/clock/right_rectangle.svg | 1 + src/clock/index.html | 9 -- 16 files changed, 51 insertions(+), 127 deletions(-) delete mode 100644 src/_assets/image/clock/left_rectangle-large.svg delete mode 100644 src/_assets/image/clock/left_rectangle-medium.svg delete mode 100644 src/_assets/image/clock/left_rectangle-small.svg create mode 100644 src/_assets/image/clock/left_rectangle.svg delete mode 100644 src/_assets/image/clock/oval-large.svg delete mode 100644 src/_assets/image/clock/oval-medium.svg delete mode 100644 src/_assets/image/clock/oval-small.svg create mode 100644 src/_assets/image/clock/oval.svg delete mode 100644 src/_assets/image/clock/right_rectangle-large.svg delete mode 100644 src/_assets/image/clock/right_rectangle-medium.svg delete mode 100644 src/_assets/image/clock/right_rectangle-small.svg create mode 100644 src/_assets/image/clock/right_rectangle.svg diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index f8c97e03ed9..44f8d808b13 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -1,5 +1,5 @@ .clock { - background-color: $flutter-color-dark-blue; + background-color: $flutter-dark-blue-texture; font-family: $site-font-family-alt; .center { @@ -7,6 +7,7 @@ top: 50%; transform: translateY(-50%); width: 100%; + z-index: 99; } .countdown-container { @@ -112,11 +113,29 @@ } .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-position: bottom 90px left, top right, bottom left; + 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; + background-position: top 150px left, top right, bottom left; + } + + @include media-breakpoint-up(lg) { + background-size: auto; + } } .vertical-line { @@ -157,135 +176,43 @@ } } } - - .svg-animated { - animation-duration: 1.2s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(.87, 1.15, 1, .99); - position: absolute; - - &--left { - animation-name: left-slide-in; - bottom: 130px; - left: 0; - transform: scaleX(1.5); - - @include media-breakpoint-up(md) { - bottom: unset; - transform: unset; - top: 100px; - } - - @include media-breakpoint-up(lg) { - transform: translateX(-30px); - } - } - - &--right { - animation-name: right-slide-in; - right: 0; - top: 0; - } - - &--oval { - animation-name: oval-slide-in-small; - bottom: 0; - left: 0; - - @include media-breakpoint-up(md) { - animation-name: oval-slide-in; - } - } - - &--large { - display: none; - - @include media-breakpoint-up(lg) { - display: block; - } - } - - &--medium { - display: none; - - @include media-breakpoint-up(md) { - display: block; - } - - @include media-breakpoint-up(lg) { - display: none; - } - } - - &--small { - display: block; - - @include media-breakpoint-up(md) { - display: none; - } - } - } } // animations - -@keyframes right-slide-in { - from { - right: -500px; - } - to { - right: 0; - } -} - -@keyframes left-slide-in { - from { - left: -300px; - } - to { - left: 0; - } -} - -@keyframes oval-slide-in-small { +@keyframes vertical-lines { from { - bottom: -350px; - left: -650px; + height: 0; } to { - bottom: 0; - left: 0; + height: 100%; } } - -@keyframes oval-slide-in { +@keyframes slide-in { from { - bottom: -350px; - left: -650px; + transform: translateY(50px); + opacity: 0; } to { - bottom: -10%; - left: 0; + transform: none; + opacity: 1; } } -@keyframes vertical-lines { +@keyframes geometric-medium-background { from { - height: 0; + background-position: top 150px left -270px, top right -488px, bottom -348px left -140px; } to { - height: 100%; + background-position: top 150px left, top right, bottom left; } } -@keyframes slide-in { +@keyframes geometric-small-background { from { - transform: translateY(50px); - opacity: 0; + background-position: bottom 90px left -144px, top right -140px, bottom -164px left -100px; } to { - transform: none; - opacity: 1; + background-position: bottom 90px left, top right, bottom left; } } diff --git a/src/_assets/css/_showcase.scss b/src/_assets/css/_showcase.scss index 93f62e07b08..c945522c380 100644 --- a/src/_assets/css/_showcase.scss +++ b/src/_assets/css/_showcase.scss @@ -226,7 +226,7 @@ position: relative; &__texture { - background: $flutter-color-dark-blue 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 b354b6d17fc..0e87a60c20f 100644 --- a/src/_assets/css/_variables.scss +++ b/src/_assets/css/_variables.scss @@ -4,7 +4,7 @@ $flutter-color-blue-500: #1389FD; $flutter-color-dark-blue: #075b9a; $flutter-color-fuchsia: #FF2B5B; $flutter-color-light-blue: #E7F8FF; -$flutter-color-dark-blue: #232C33; +$flutter-dark-blue-texture: #232C33; $site-color-black: #000; $site-color-white: #FFF; $site-color-codeblock-bg: #F8F9FA; diff --git a/src/_assets/image/clock/left_rectangle-large.svg b/src/_assets/image/clock/left_rectangle-large.svg deleted file mode 100644 index 294ce6ceb77..00000000000 --- a/src/_assets/image/clock/left_rectangle-large.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle-medium.svg b/src/_assets/image/clock/left_rectangle-medium.svg deleted file mode 100644 index c0f901b8a48..00000000000 --- a/src/_assets/image/clock/left_rectangle-medium.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle-small.svg b/src/_assets/image/clock/left_rectangle-small.svg deleted file mode 100644 index faed4956b25..00000000000 --- a/src/_assets/image/clock/left_rectangle-small.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle.svg b/src/_assets/image/clock/left_rectangle.svg new file mode 100644 index 00000000000..cc0d58e43bb --- /dev/null +++ b/src/_assets/image/clock/left_rectangle.svg @@ -0,0 +1,13 @@ + + + + Left_Rectangle_L + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/_assets/image/clock/oval-large.svg b/src/_assets/image/clock/oval-large.svg deleted file mode 100644 index 0d971f05035..00000000000 --- a/src/_assets/image/clock/oval-large.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/oval-medium.svg b/src/_assets/image/clock/oval-medium.svg deleted file mode 100644 index 75ff92e4a2f..00000000000 --- a/src/_assets/image/clock/oval-medium.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/oval-small.svg b/src/_assets/image/clock/oval-small.svg deleted file mode 100644 index 815b26c5bc3..00000000000 --- a/src/_assets/image/clock/oval-small.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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-large.svg b/src/_assets/image/clock/right_rectangle-large.svg deleted file mode 100644 index 1e761afd0c7..00000000000 --- a/src/_assets/image/clock/right_rectangle-large.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/right_rectangle-medium.svg b/src/_assets/image/clock/right_rectangle-medium.svg deleted file mode 100644 index 326be148883..00000000000 --- a/src/_assets/image/clock/right_rectangle-medium.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_assets/image/clock/right_rectangle-small.svg b/src/_assets/image/clock/right_rectangle-small.svg deleted file mode 100644 index 1d8ffd646ba..00000000000 --- a/src/_assets/image/clock/right_rectangle-small.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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/clock/index.html b/src/clock/index.html index a7a23b5a117..cb081f56b84 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -18,15 +18,6 @@

Time is everything. Stay tuned.

- {% asset clock/left_rectangle-large.svg class='svg-animated svg-animated--left svg-animated--large' %} - {% asset clock/right_rectangle-large.svg class='svg-animated svg-animated--right svg-animated--large' %} - {% asset clock/oval-large.svg class='svg-animated svg-animated--oval svg-animated--large' %} - {% asset clock/left_rectangle-medium.svg class='svg-animated svg-animated--left svg-animated--medium' %} - {% asset clock/right_rectangle-medium.svg class='svg-animated svg-animated--right svg-animated--medium' %} - {% asset clock/oval-medium.svg class='svg-animated svg-animated--oval svg-animated--medium' %} - {% asset clock/left_rectangle-small.svg class='svg-animated svg-animated--left svg-animated--small' %} - {% asset clock/right_rectangle-small.svg class='svg-animated svg-animated--right svg-animated--small' %} - {% asset clock/oval-small.svg class='svg-animated svg-animated--oval svg-animated--small' %}
From 10e650fe851944d21a09b0b18efd973331dba086 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 16:39:24 -0500 Subject: [PATCH 20/38] html refactor. --- src/_assets/css/_clock.scss | 36 ------------------------------------ src/clock/index.html | 11 +++-------- 2 files changed, 3 insertions(+), 44 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 44f8d808b13..acc9497dd3b 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -10,27 +10,6 @@ z-index: 99; } - .countdown-container { - padding: 0; - text-align: center; - } - - .heading-container { - height: 24px; - margin: 0; - position: relative; - - @include media-breakpoint-up(md) { - font-size: 32px; - height: 36px; - } - - @include media-breakpoint-up(lg) { - font-size: 40px; - height: 48px; - } - } - .heading { animation: slide-in 1s .8s; animation-fill-mode: both; @@ -49,21 +28,6 @@ } } - .time-unit-container { - display: inline-block; - height: 87px; - position: relative; - width: 100%; - - @include media-breakpoint-up(md) { - height: 165px; - } - - @include media-breakpoint-up(lg) { - height: 260px; - } - } - .time-number { animation: slide-in .8s; animation-fill-mode: both; diff --git a/src/clock/index.html b/src/clock/index.html index cb081f56b84..535d090d4c5 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -7,14 +7,9 @@
-
-

Time is everything. Stay tuned.

-
-
-
-
- ::::
-
+

Time is everything. Stay tuned.

+
+ ::::
From 23c68869c94e033b2fd3f7bbc1e0c8b85547a5d8 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 16:47:17 -0500 Subject: [PATCH 21/38] Add show_footer front-matter variable --- _config.yml | 1 + src/_layouts/base.html | 2 +- src/clock/index.html | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index e0f8c53b212..1977f7b9d33 100644 --- a/_config.yml +++ b/_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: diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 7d196cfd855..2affe130726 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -15,7 +15,7 @@ {{ content }} - {% if page.title != "Clock" %} + {% if page.show_footer -%} {%- include footer.html %} {% endif %} diff --git a/src/clock/index.html b/src/clock/index.html index 535d090d4c5..d40caf6c926 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -2,6 +2,7 @@ title: Clock layout: base show_banner: False +show_footer: False body_class: clock --- From 3fc05eb20bd38e9c037f09c28e1ee202120a18e4 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 17:45:04 -0500 Subject: [PATCH 22/38] Javascript Refactor. --- src/_assets/js/countdown.js | 43 ++++++++++++++++++++++++------------- src/_includes/head.html | 3 --- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 60af21b775b..183be23cd34 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -3,31 +3,44 @@ const hoursContainer = document.querySelector('.hours-digits_container'); const minutesContainer = document.querySelector('.minutes-digits_container'); const secondsContainer = document.querySelector('.seconds-digits_container'); - const eventTime = moment('21-12-2019 17:30:00', 'DD-MM-YYYY HH:mm:ss'); - - function setTimer() { - const currentTime = moment(); - const diffTime = eventTime - currentTime; + 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, + }; + } - function digitsHandler(number) { - return number > 9 ? number : `0${number}`; - } + // Adds a number if there's just one digit + function digitsHandler(number) { + return number > 9 ? number : `0${number}`; + } - if (diffTime > 0) { - // Duration left to the event - const duration = moment.duration(eventTime.diff(currentTime)); + function setTimer() { + const remainingTime = getTimeRemaining(); + if (remainingTime.total > 0) { //Get Days - const days = digitsHandler(duration.days()); + const days = digitsHandler(remainingTime.days); //Get hours - const hours = digitsHandler(duration.hours()); + const hours = digitsHandler(remainingTime.hours); //Get Minutes - const minutes = digitsHandler(duration.minutes()); + const minutes = digitsHandler(remainingTime.minutes); //Get seconds - const seconds = digitsHandler(duration.seconds()); + const seconds = digitsHandler(remainingTime.seconds); daysContainer.innerText = `${days}`; hoursContainer.innerText = `${hours}`; diff --git a/src/_includes/head.html b/src/_includes/head.html index 21c293b1549..e977da26a68 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -40,9 +40,6 @@ {% for js in page.js -%} {% endfor -%} - {% if page.title == "Clock" %} - - {% endif %} {% include head-diff2html.html -%} From 32fc8f27d98fb4708879090ec2634eb8a76ada16 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 19:05:44 -0500 Subject: [PATCH 23/38] minor css change. --- src/_assets/css/_clock.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index acc9497dd3b..0d93efcf735 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -47,7 +47,7 @@ } @include media-breakpoint-up(xl) { - font-size: 200px; + font-size: 180px; } @include media-breakpoint-up(xxl) { @@ -82,7 +82,6 @@ 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-position: bottom 90px left, top right, bottom left; background-repeat: no-repeat; background-size: 181px 247px, 140px 121px, 280px 163px; height: calc(100% - 66px); @@ -94,7 +93,6 @@ @include media-breakpoint-up(md) { animation-name: geometric-medium-background; background-size: 400px 556px, 317px 258px, auto; - background-position: top 150px left, top right, bottom left; } @include media-breakpoint-up(lg) { From 8260fafd18769879966f9d97db7b8efdf7f04010 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Wed, 23 Oct 2019 19:21:34 -0500 Subject: [PATCH 24/38] Fix 320px mobile issue. --- .firebaserc | 6 ++++-- src/_assets/css/_clock.scss | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.firebaserc b/.firebaserc index e428469277e..15a565ac1bc 100644 --- a/.firebaserc +++ b/.firebaserc @@ -13,6 +13,8 @@ "ft": "flutter-web-staging", "filip": "flutter-website-filiph-staging", "brianegan": "brianegan-flutter-staging", - "xster-staging": "flutter-website-staging-6f2ad" + "xster-staging": "flutter-website-staging-6f2ad", + "huge-qa": "huge-flutter-dev-qa", + "huge-staging": "huge-flutter-dev-staging" } -} \ No newline at end of file +} diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 0d93efcf735..c6ab4edfe13 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -32,7 +32,7 @@ animation: slide-in .8s; animation-fill-mode: both; color: $site-color-primary; - font-size: 58px; + font-size: 52px; margin: 0; text-align: center; width: 100%; @@ -57,7 +57,7 @@ .digits_container { display: inline-block; - width: 74px; + width: 68px; @include media-breakpoint-up(md) { width: 142px; From c7ad56c30e916dae426734dd8132c1ee7b75488e Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Thu, 24 Oct 2019 09:56:58 -0500 Subject: [PATCH 25/38] Undo .firebaserc changes. --- .firebaserc | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.firebaserc b/.firebaserc index 15a565ac1bc..9a4151f0aea 100644 --- a/.firebaserc +++ b/.firebaserc @@ -13,8 +13,6 @@ "ft": "flutter-web-staging", "filip": "flutter-website-filiph-staging", "brianegan": "brianegan-flutter-staging", - "xster-staging": "flutter-website-staging-6f2ad", - "huge-qa": "huge-flutter-dev-qa", - "huge-staging": "huge-flutter-dev-staging" + "xster-staging": "flutter-website-staging-6f2ad" } } From 07183d1a25a3dc662fbedb1c53e0484982edd784 Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Thu, 24 Oct 2019 10:09:33 -0500 Subject: [PATCH 26/38] Minor changes. --- src/_assets/css/_clock.scss | 3 ++- src/_assets/js/countdown.js | 9 +-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index c6ab4edfe13..6f06f7adc60 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -1,6 +1,7 @@ .clock { background-color: $flutter-dark-blue-texture; font-family: $site-font-family-alt; + $vertical-line-color: #384753; .center { position: absolute; @@ -105,7 +106,7 @@ animation-fill-mode: both; animation-name: vertical-lines; animation-timing-function: ease; - background-color: #384753; + background-color: $vertical-line-color; position: fixed; top: 0; width: 1px; diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 183be23cd34..278c3eb3875 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -21,7 +21,7 @@ }; } - // Adds a number if there's just one digit + // Adds a zero number if there's just one digit function digitsHandler(number) { return number > 9 ? number : `0${number}`; } @@ -30,16 +30,9 @@ const remainingTime = getTimeRemaining(); if (remainingTime.total > 0) { - //Get Days const days = digitsHandler(remainingTime.days); - - //Get hours const hours = digitsHandler(remainingTime.hours); - - //Get Minutes const minutes = digitsHandler(remainingTime.minutes); - - //Get seconds const seconds = digitsHandler(remainingTime.seconds); daysContainer.innerText = `${days}`; From d8b61032c9f42ac33ba0b230ec2220c21230632d Mon Sep 17 00:00:00 2001 From: Juan Gomez Date: Fri, 25 Oct 2019 12:12:55 -0500 Subject: [PATCH 27/38] First commit. --- src/_assets/css/_clock.scss | 12 ++++++++++++ src/_includes/banner.html | 1 + src/clock/index.html | 8 ++++++++ 3 files changed, 21 insertions(+) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 6f06f7adc60..e92da373b29 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -139,6 +139,18 @@ } } } + + .share-twitter__paragraph { + color: $site-color-white; + font-size: 16px; + text-align: center; + } + + .learn-more__button { + display: block; + margin: 0 auto; + width: 120px; + } } // animations diff --git a/src/_includes/banner.html b/src/_includes/banner.html index d67520a5bb8..4297582800c 100644 --- a/src/_includes/banner.html +++ b/src/_includes/banner.html @@ -10,5 +10,6 @@ new on this site and the revamped Showcase page.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod clock
{% endif -%} diff --git a/src/clock/index.html b/src/clock/index.html index d40caf6c926..d7d500c4d7b 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -12,6 +12,14 @@

Time is everything. Stay tuned.

::::
+ + +
From 9c04dd901ab47b39d87fc5582fa498bbea51bba3 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Wed, 30 Oct 2019 14:58:35 -0500 Subject: [PATCH 28/38] CTA changed with animation and spaces between elements modified --- src/_assets/css/_clock.scss | 2 +- src/clock/index.html | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index e92da373b29..cfaa8ba1eff 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -16,7 +16,7 @@ animation-fill-mode: both; color: $site-color-white; font-size: 18px; - margin: 0; + margin: 0 0 50px 0; text-align: center; width: 100%; diff --git a/src/clock/index.html b/src/clock/index.html index d7d500c4d7b..1248c190f31 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -12,12 +12,8 @@

Time is everything. Stay tuned.

::::
-
From 4cdea9948f86d603021ec9ecca698b1335634f68 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Wed, 30 Oct 2019 15:19:42 -0500 Subject: [PATCH 29/38] CTA changed with animation and spaces between elements modified --- src/_assets/css/_clock.scss | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index cfaa8ba1eff..c9489b2730f 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -22,10 +22,12 @@ @include media-breakpoint-up(md) { font-size: 32px; + margin-bottom: 60px; } @include media-breakpoint-up(lg) { font-size: 40px; + margin-bottom: 40px; } } @@ -141,9 +143,24 @@ } .share-twitter__paragraph { + animation: slide-in 1s 1.8s; + animation-fill-mode: both; color: $site-color-white; - font-size: 16px; + font-size: 14px; + margin-top: 32px; + padding: 0 37px; text-align: center; + width: 100%; + + @include media-breakpoint-up(md) { + font-size: 16px; + margin-top: 48px; + } + + @include media-breakpoint-up(lg) { + font-size: 20px; + margin-top: 64px; + } } .learn-more__button { From bf7412e86a427f1f06d225e53bb6dca01fea2013 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Wed, 30 Oct 2019 16:12:12 -0500 Subject: [PATCH 30/38] Fixes for clock script and element position --- src/_assets/css/_clock.scss | 5 ++++- src/_assets/js/countdown.js | 6 +++--- src/clock/index.html | 9 +++++++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index c9489b2730f..c17388c565e 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -1,7 +1,8 @@ .clock { + $vertical-line-color: #384753; + background-color: $flutter-dark-blue-texture; font-family: $site-font-family-alt; - $vertical-line-color: #384753; .center { position: absolute; @@ -35,7 +36,9 @@ animation: slide-in .8s; animation-fill-mode: both; color: $site-color-primary; + display: flex; font-size: 52px; + justify-content: center; margin: 0; text-align: center; width: 100%; diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 278c3eb3875..a1a31df016e 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -1,9 +1,9 @@ -(function () { +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 = 'December 21 2019 17:30:00'; // TODO: Actual event day TBD + const eventTime = 'November 18 2019 09:00:00'; // TODO: Actual event day TBD // Returns remaining time in days, hours, minutes and seconds. function getTimeRemaining() { @@ -47,4 +47,4 @@ setTimer(); setInterval(setTimer, 1000); -}()); +}); diff --git a/src/clock/index.html b/src/clock/index.html index 1248c190f31..bcd68d648f1 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -10,12 +10,17 @@

Time is everything. Stay tuned.

- :::: + 00 + : + 00 + : + 00 + : + 00
-
From e80aa335390b5a8b05d21babe94547cad6c6678b Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Thu, 31 Oct 2019 10:20:15 -0500 Subject: [PATCH 31/38] Slide in animations delay changed for clock --- src/_assets/css/_clock.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index c17388c565e..a6c9c508212 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -13,7 +13,7 @@ } .heading { - animation: slide-in 1s .8s; + animation: slide-in 1s .3s; animation-fill-mode: both; color: $site-color-white; font-size: 18px; @@ -33,7 +33,7 @@ } .time-number { - animation: slide-in .8s; + animation: slide-in 1s; animation-fill-mode: both; color: $site-color-primary; display: flex; @@ -146,7 +146,7 @@ } .share-twitter__paragraph { - animation: slide-in 1s 1.8s; + animation: slide-in 1s .6s; animation-fill-mode: both; color: $site-color-white; font-size: 14px; From 30a4f0bd2e56d153145a33d5941a845e8ec52885 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Thu, 31 Oct 2019 11:02:17 -0500 Subject: [PATCH 32/38] CTA copy changed --- src/clock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clock/index.html b/src/clock/index.html index bcd68d648f1..4235dba570b 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -19,7 +19,7 @@

Time is everything. Stay tuned.

00
From 53aa8830fab52a25e5cc282153031a1001cfe1e4 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Thu, 31 Oct 2019 11:16:18 -0500 Subject: [PATCH 33/38] Lorem text removed from banner --- src/_includes/banner.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/_includes/banner.html b/src/_includes/banner.html index 974d235c44f..9dbd9c96f74 100644 --- a/src/_includes/banner.html +++ b/src/_includes/banner.html @@ -8,6 +8,5 @@ Check out the event page for more details.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod clock
{% endif -%} From d90a86212760acc7399cfb62079c979bbf917447 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Thu, 31 Oct 2019 14:06:57 -0500 Subject: [PATCH 34/38] Spaces fixed for clock and event date added --- src/_assets/css/_clock.scss | 15 ++++++++------- src/_assets/js/countdown.js | 8 +++++--- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index a6c9c508212..668f3a15082 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -6,7 +6,7 @@ .center { position: absolute; - top: 50%; + top: 53%; transform: translateY(-50%); width: 100%; z-index: 99; @@ -17,18 +17,18 @@ animation-fill-mode: both; color: $site-color-white; font-size: 18px; - margin: 0 0 50px 0; + margin: 0 0 24px 0; text-align: center; width: 100%; @include media-breakpoint-up(md) { font-size: 32px; - margin-bottom: 60px; + margin-bottom: 22px; } @include media-breakpoint-up(lg) { font-size: 40px; - margin-bottom: 40px; + margin-bottom: 20px; } } @@ -150,19 +150,20 @@ animation-fill-mode: both; color: $site-color-white; font-size: 14px; - margin-top: 32px; + margin-bottom: 0px; + margin-top: 20px; padding: 0 37px; text-align: center; width: 100%; @include media-breakpoint-up(md) { font-size: 16px; - margin-top: 48px; + margin-top: 22px; } @include media-breakpoint-up(lg) { font-size: 20px; - margin-top: 64px; + margin-top: 24px; } } diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index a1a31df016e..20b44305a10 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -3,7 +3,9 @@ document.addEventListener('DOMContentLoaded', () => { const hoursContainer = document.querySelector('.hours-digits_container'); const minutesContainer = document.querySelector('.minutes-digits_container'); const secondsContainer = document.querySelector('.seconds-digits_container'); - const eventTime = 'November 18 2019 09:00:00'; // TODO: Actual event day TBD + 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() { @@ -41,10 +43,10 @@ document.addEventListener('DOMContentLoaded', () => { secondsContainer.innerText = `${seconds}`; } else { console.log('The event is now'); - clearInterval(); + clearInterval(interval); } } setTimer(); - setInterval(setTimer, 1000); + interval = setInterval(setTimer, 1000); }); From 2ce619f6efeed94b6c254123a108f2c32820aadb Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Thu, 31 Oct 2019 14:37:29 -0500 Subject: [PATCH 35/38] Fix for copy in title --- src/clock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clock/index.html b/src/clock/index.html index 4235dba570b..eb86212472d 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -8,7 +8,7 @@
-

Time is everything. Stay tuned.

+

Timing is everything. Stay tuned.

00 : From d57ef6fd7b4de74056be7cb63f7ed9c4f0f305cc Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Fri, 1 Nov 2019 10:14:06 -0500 Subject: [PATCH 36/38] PR comments fixed --- .firebaserc | 2 +- src/_assets/image/clock/left_rectangle.svg | 15 ++------ src/_assets/js/countdown.js | 5 ++- src/clock/index.html | 42 +++++++++++----------- 4 files changed, 28 insertions(+), 36 deletions(-) diff --git a/.firebaserc b/.firebaserc index 9a4151f0aea..e428469277e 100644 --- a/.firebaserc +++ b/.firebaserc @@ -15,4 +15,4 @@ "brianegan": "brianegan-flutter-staging", "xster-staging": "flutter-website-staging-6f2ad" } -} +} \ No newline at end of file diff --git a/src/_assets/image/clock/left_rectangle.svg b/src/_assets/image/clock/left_rectangle.svg index cc0d58e43bb..3b2471505af 100644 --- a/src/_assets/image/clock/left_rectangle.svg +++ b/src/_assets/image/clock/left_rectangle.svg @@ -1,13 +1,4 @@ - - - Left_Rectangle_L - Created with Sketch. - - - - - - - - \ No newline at end of file + + + diff --git a/src/_assets/js/countdown.js b/src/_assets/js/countdown.js index 20b44305a10..fc970eb171a 100644 --- a/src/_assets/js/countdown.js +++ b/src/_assets/js/countdown.js @@ -42,7 +42,10 @@ document.addEventListener('DOMContentLoaded', () => { minutesContainer.innerText = `${minutes}`; secondsContainer.innerText = `${seconds}`; } else { - console.log('The event is now'); + daysContainer.innerText = '00'; + hoursContainer.innerText = '00'; + minutesContainer.innerText = '00'; + secondsContainer.innerText = '00'; clearInterval(interval); } } diff --git a/src/clock/index.html b/src/clock/index.html index eb86212472d..71c6573b8fc 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -6,28 +6,26 @@ body_class: clock --- -
-
-

Timing is everything. Stay tuned.

-
- 00 - : - 00 - : - 00 - : - 00 -
- +
+

Timing is everything. Stay tuned.

+
+ 00 + : + 00 + : + 00 + : + 00
-
-
-
-
-
-
-
+ +
+
+
+
+
+
+
{% asset countdown %} From 1bf8115acfb11730c2be74e2157e3d4f003f2981 Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Fri, 1 Nov 2019 10:48:44 -0500 Subject: [PATCH 37/38] More comments fixed for PR --- src/_assets/css/_clock.scss | 42 +++++++++++----------- src/_assets/image/clock/left_rectangle.svg | 5 +-- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 668f3a15082..192c9b5ce6a 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -5,35 +5,36 @@ font-family: $site-font-family-alt; .center { - position: absolute; - top: 53%; - transform: translateY(-50%); - width: 100%; + align-items: center; + display: flex; + flex-direction: column; + height: calc(100vh - 66px); + justify-content: center; z-index: 99; } .heading { - animation: slide-in 1s .3s; + animation: clock-slide-in 1s .3s; animation-fill-mode: both; color: $site-color-white; font-size: 18px; - margin: 0 0 24px 0; + margin: 0 0 24px; text-align: center; width: 100%; @include media-breakpoint-up(md) { font-size: 32px; - margin-bottom: 22px; + margin: 0 0 22px; } @include media-breakpoint-up(lg) { font-size: 40px; - margin-bottom: 20px; + margin: 0 0 20px; } } .time-number { - animation: slide-in 1s; + animation: clock-slide-in 1s; animation-fill-mode: both; color: $site-color-primary; display: flex; @@ -83,7 +84,7 @@ } .animations { - animation-name: geometric-small-background; + animation-name: clock-geometric-small-background; animation-duration: 1.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.87, 1.15, 1, .99); @@ -97,7 +98,7 @@ width: 100%; @include media-breakpoint-up(md) { - animation-name: geometric-medium-background; + animation-name: clock-geometric-medium-background; background-size: 400px 556px, 317px 258px, auto; } @@ -109,7 +110,7 @@ .vertical-line { animation-duration: 1s; animation-fill-mode: both; - animation-name: vertical-lines; + animation-name: clock-vertical-lines; animation-timing-function: ease; background-color: $vertical-line-color; position: fixed; @@ -146,24 +147,23 @@ } .share-twitter__paragraph { - animation: slide-in 1s .6s; + animation: clock-slide-in 1s .6s; animation-fill-mode: both; color: $site-color-white; font-size: 14px; - margin-bottom: 0px; - margin-top: 20px; + margin: 20px 0 0; padding: 0 37px; text-align: center; width: 100%; @include media-breakpoint-up(md) { font-size: 16px; - margin-top: 22px; + margin: 22px 0 0; } @include media-breakpoint-up(lg) { font-size: 20px; - margin-top: 24px; + margin: 24px 0 0; } } @@ -175,7 +175,7 @@ } // animations -@keyframes vertical-lines { +@keyframes clock-vertical-lines { from { height: 0; } @@ -184,7 +184,7 @@ } } -@keyframes slide-in { +@keyframes clock-slide-in { from { transform: translateY(50px); opacity: 0; @@ -195,7 +195,7 @@ } } -@keyframes geometric-medium-background { +@keyframes clock-geometric-medium-background { from { background-position: top 150px left -270px, top right -488px, bottom -348px left -140px; } @@ -204,7 +204,7 @@ } } -@keyframes geometric-small-background { +@keyframes clock-geometric-small-background { from { background-position: bottom 90px left -144px, top right -140px, bottom -164px left -100px; } diff --git a/src/_assets/image/clock/left_rectangle.svg b/src/_assets/image/clock/left_rectangle.svg index 3b2471505af..2dd23baa802 100644 --- a/src/_assets/image/clock/left_rectangle.svg +++ b/src/_assets/image/clock/left_rectangle.svg @@ -1,4 +1 @@ - - - - + From 85d79766946eb1776f7d511eab2088ea710f174e Mon Sep 17 00:00:00 2001 From: Omar Gonzalez Date: Fri, 1 Nov 2019 13:39:28 -0500 Subject: [PATCH 38/38] CTA z index fixed --- src/_assets/css/_clock.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss index 192c9b5ce6a..bb3634a0c5a 100644 --- a/src/_assets/css/_clock.scss +++ b/src/_assets/css/_clock.scss @@ -10,7 +10,6 @@ flex-direction: column; height: calc(100vh - 66px); justify-content: center; - z-index: 99; } .heading { @@ -96,6 +95,7 @@ position: absolute; top: 66px; width: 100%; + z-index: -1; @include media-breakpoint-up(md) { animation-name: clock-geometric-medium-background;