From 77edf8f97a777f69407551556a1849f75a4c6bf5 Mon Sep 17 00:00:00 2001 From: andmironov Date: Sat, 3 Jun 2017 16:08:01 +0300 Subject: [PATCH] minor fixes --- src/css/main.css | 86 ++++++++++++++++++++++++++++++++++------ src/index.html | 5 ++- src/js/app.js | 5 +++ src/js/main.js | 6 ++- src/scss/header.scss | 13 +++++- src/scss/slide--one.scss | 37 ++++++++++++++--- src/scss/tokens.scss | 38 +++++++++++++++++- 7 files changed, 167 insertions(+), 23 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 511ed1a..8f7df80 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -206,7 +206,12 @@ a { width: 100%; z-index: 900; top: 40px; - left: 0; } + left: 0; + opacity: .6; + transition: opacity .2s ease; } + +.header:hover { + opacity: 1; } .header__inner { width: 1080px; @@ -257,13 +262,13 @@ a.logo { opacity: .5; } .nav a { - font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; - padding: 10px 15px 15px; } + padding: 10px 15px 15px; + color: #70808D; } .header .nav a { color: #49555F; } @@ -361,6 +366,10 @@ li.social-link a { .nav:first-child { display: none; } } +@media (max-width: 767px) { + .header { + display: none; } } + .the-iphone { position: relative; width: 292px; @@ -969,6 +978,10 @@ li.social-link a { transition-delay: 1.6s; transform: translate3d(-70px, 140px, 0); } +.token-wrap:nth-child(3) .token::after { + -ms-transform: scale(0.7); + transform: scale(0.7); } + .token-wrap:nth-child(4) { width: 46px; height: 46px; @@ -977,6 +990,10 @@ li.social-link a { transition-delay: 1.45s; transform: translate3d(-90px, 150px, 0); } +.token-wrap:nth-child(4) .token::after { + -ms-transform: scale(0.7); + transform: scale(0.7); } + .token-wrap:nth-child(5) { width: 46px; height: 46px; @@ -985,6 +1002,10 @@ li.social-link a { transition-delay: 1.5s; transform: translate3d(-40px, 180px, 0); } +.token-wrap:nth-child(5) .token::after { + -ms-transform: scale(0.8); + transform: scale(0.8); } + .token-wrap:nth-child(6) { width: 54px; height: 54px; @@ -1001,6 +1022,10 @@ li.social-link a { transition-delay: 1.7s; transform: translate3d(-30px, 190px, 0); } +.token-wrap:nth-child(7) .token::after { + -ms-transform: scale(0.9); + transform: scale(0.9); } + .token-wrap:nth-child(8) { width: 62px; height: 62px; @@ -1025,6 +1050,10 @@ li.social-link a { transition-delay: 1.3s; transform: translate3d(20px, 190px, 0); } +.token-wrap:nth-child(10) .token::after { + -ms-transform: scale(0.7); + transform: scale(0.7); } + .token-wrap:nth-child(11) { width: 58px; height: 58px; @@ -1041,6 +1070,10 @@ li.social-link a { transition-delay: 1.5s; transform: translate3d(20px, 130px, 0); } +.token-wrap:nth-child(12) .token::after { + -ms-transform: scale(0.9); + transform: scale(0.9); } + .token-wrap:nth-child(13) { width: 48px; height: 48px; @@ -1049,6 +1082,10 @@ li.social-link a { transition-delay: 1.6s; transform: translate3d(20px, 140px, 0); } +.token-wrap:nth-child(13) .token::after { + -ms-transform: scale(0.9); + transform: scale(0.9); } + .token-wrap:nth-child(14) { width: 48px; height: 48px; @@ -1057,6 +1094,10 @@ li.social-link a { transition-delay: 1.7s; transform: translate3d(40px, 120px, 0); } +.token-wrap:nth-child(14) .token::after { + -ms-transform: scale(0.8); + transform: scale(0.8); } + .token-wrap:nth-child(15) { width: 48px; height: 48px; @@ -1230,6 +1271,8 @@ li.social-link a { margin: 0 0 0 -540px; } } @media (max-width: 767px) { + .tokens { + top: 20px; } .token-wrap.token-wrap--status { margin: -36px 0 0 -36px; width: 72px; @@ -1298,10 +1341,10 @@ li.social-link a { top: 111px; right: 384px; } .token-wrap:nth-child(14) { - width: 46px; - height: 46px; - top: 267px; - right: 374px; } + width: 40px; + height: 40px; + top: 250px; + right: 370px; } .token-wrap:nth-child(15) { display: none; } .token::after { @@ -1329,12 +1372,12 @@ li.social-link a { .crowdsale { background-color: white; - box-shadow: 0 5px 8px 0 rgba(72, 89, 102, 0.1); - padding: 0 0 60px 0; - background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%); } + box-shadow: 0 5px 8px 0 rgba(72, 89, 102, 0.06); + padding: 0 0 24px 0; + background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%); } .crowdsale .tagline { - margin: 130px 0 30px 0; } + margin: 130px 0 60px 0; } .tagline .tagline__title { width: 440px; @@ -1405,6 +1448,22 @@ li.social-link a { .button.button--color-purple { color: #6673CE; } +.learn-more { + text-align: center; } + +.learn-more a { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 13px; + text-transform: uppercase; + text-align: center; + letter-spacing: 1px; + opacity: .4; + transition: opacity .2s ease, color .2s ease; } + +.learn-more a:hover { + opacity: 1; + color: #6673CE; } + .about { padding: 50px 0 0 0; } @@ -1803,8 +1862,11 @@ input.email-form__input--email:disabled { flex-direction: column; } .tagline__buttons .button { margin: 8px 0; } + .button.button--bg-white { + background-color: white; + box-shadow: 0 3px 6px 0 rgba(175, 192, 202, 0.3); } .crowdsale .tagline { - margin: 390px 0 0 0; } } + margin: 320px 0 14px 0; } } @keyframes shakeIt { 0%, 100% { diff --git a/src/index.html b/src/index.html index 1e19cf8..69d34be 100755 --- a/src/index.html +++ b/src/index.html @@ -80,13 +80,16 @@

Introducing the Status Network

The Status Contribution Period will begin at 2pm GMT (UTC+0) on June 17th 2017
- +
Read the Whitepaper Join our Slack
+
+ Learn more about Status +
diff --git a/src/js/app.js b/src/js/app.js index f2b7841..01a5e31 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -9987,6 +9987,11 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol event.preventDefault(); }); + document.querySelectorAll(".learn-more a")[0].addEventListener('click', function (event) { + animateScroll(slideAbout, 600, "easeInOutCubic", 0); + event.preventDefault(); + }); + document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function (event) { animateScroll(slideFour, 600, "easeInOutCubic", 0); setTimeout(function () { diff --git a/src/js/main.js b/src/js/main.js index 1760bd3..791a5ec 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -20,7 +20,6 @@ if (statusCookiePolicyAccepted == "accepted") { } - document.querySelectorAll(".nav__item--features")[0].addEventListener('click', function(event){ animateScroll(slideTwo, 600, "easeInOutCubic", 0) event.preventDefault() @@ -37,6 +36,11 @@ cookieButton.addEventListener('click', function(event){ event.preventDefault() }) +document.querySelectorAll(".learn-more a")[0].addEventListener('click', function(event){ + animateScroll(slideAbout, 600, "easeInOutCubic", 0) + event.preventDefault() +}) + document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function(event){ animateScroll(slideFour, 600, "easeInOutCubic", 0) setTimeout(function(){ diff --git a/src/scss/header.scss b/src/scss/header.scss index a30de9e..4e0a16a 100644 --- a/src/scss/header.scss +++ b/src/scss/header.scss @@ -6,6 +6,12 @@ z-index: 900; top: 40px; left: 0; + opacity: .6; + transition: opacity .2s ease; +} + +.header:hover { + opacity: 1; } .header__inner { @@ -56,11 +62,12 @@ a.logo { } .nav a { - font-family:$PostGroteskMedium; + //font-family:$PostGroteskMedium; font-size: 15px; display: flex; align-items: center; padding: 10px 15px 15px; + color: #70808D; } .header .nav a { @@ -185,5 +192,7 @@ li.social-link a { @media (max-width: 767px) { - + .header { + display: none; + } } diff --git a/src/scss/slide--one.scss b/src/scss/slide--one.scss index 1c97c70..237d7fd 100644 --- a/src/scss/slide--one.scss +++ b/src/scss/slide--one.scss @@ -17,13 +17,13 @@ .crowdsale { background-color: $colorWhite; - box-shadow: 0 5px 8px 0 rgba(72,89,102,0.10); - padding: 0 0 60px 0; - background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%); + box-shadow: 0 5px 8px 0 rgba(72,89,102,0.06); + padding: 0 0 24px 0; + background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%); } .crowdsale .tagline { - margin: 130px 0 30px 0; + margin: 130px 0 60px 0; } .tagline .tagline__title { @@ -109,6 +109,25 @@ color: #6673CE; } +.learn-more { + text-align: center; +} + +.learn-more a { + font-family: $PostGroteskMedium; + font-size: 13px; + text-transform: uppercase; + text-align: center; + letter-spacing: 1px; + opacity: .4; + transition: opacity .2s ease, color .2s ease; +} + +.learn-more a:hover { + opacity: 1; + color: #6673CE; +} + .about { padding: 50px 0 0 0 } @@ -659,10 +678,16 @@ input.email-form__input--email:disabled { margin: 8px 0; } - .crowdsale .tagline { - margin: 390px 0 0 0 + .button.button--bg-white { + background-color: $colorWhite; + box-shadow: 0 3px 6px 0 rgba(175,192,202,0.3); } + .crowdsale .tagline { + margin: 320px 0 14px 0; + } + + } @keyframes shakeIt { diff --git a/src/scss/tokens.scss b/src/scss/tokens.scss index 535f067..270ba55 100644 --- a/src/scss/tokens.scss +++ b/src/scss/tokens.scss @@ -38,6 +38,10 @@ transform: translate3d(-70px, 140px, 0); } +.token-wrap:nth-child(3) .token::after { + transform: scale(.7); +} + .token-wrap:nth-child(4) { width: 46px; height: 46px; @@ -47,6 +51,10 @@ transform: translate3d(-90px, 150px, 0); } +.token-wrap:nth-child(4) .token::after { + transform: scale(.7); +} + .token-wrap:nth-child(5) { width: 46px; height: 46px; @@ -56,6 +64,10 @@ transform: translate3d(-40px, 180px, 0); } +.token-wrap:nth-child(5) .token::after { + transform: scale(.8); +} + .token-wrap:nth-child(6) { width: 54px; height: 54px; @@ -74,6 +86,10 @@ transform: translate3d(-30px, 190px, 0); } +.token-wrap:nth-child(7) .token::after { + transform: scale(.9); +} + .token-wrap:nth-child(8) { width: 62px; height: 62px; @@ -101,6 +117,10 @@ transform: translate3d(20px, 190px, 0); } +.token-wrap:nth-child(10) .token::after { + transform: scale(.7); +} + .token-wrap:nth-child(11) { width: 58px; height: 58px; @@ -119,6 +139,10 @@ transform: translate3d(20px, 130px, 0); } +.token-wrap:nth-child(12) .token::after { + transform: scale(.9); +} + .token-wrap:nth-child(13) { width: 48px; height: 48px; @@ -128,6 +152,10 @@ transform: translate3d(20px, 140px, 0); } +.token-wrap:nth-child(13) .token::after { + transform: scale(.9); +} + .token-wrap:nth-child(14) { width: 48px; height: 48px; @@ -137,6 +165,10 @@ transform: translate3d(40px, 120px, 0); } +.token-wrap:nth-child(14) .token::after { + transform: scale(.8); +} + .token-wrap:nth-child(15) { width: 48px; height: 48px; @@ -288,6 +320,10 @@ @media (max-width: 767px) { + .tokens { + top: 20px; + } + .token-wrap.token-wrap--status { margin: -36px 0 0 -36px; width: 72px; @@ -319,7 +355,7 @@ .token-wrap:nth-child(11) { width: 44px; height: 44px; top: 210px; right: 445px;} .token-wrap:nth-child(12) { width: 50px; height: 50px; top: 0px; right: 371px;} .token-wrap:nth-child(13) { top: 111px; right: 384px;} - .token-wrap:nth-child(14) { width: 46px; height: 46px; top: 267px; right: 374px;} + .token-wrap:nth-child(14) { width: 40px; height: 40px; top: 250px; right: 370px;} .token-wrap:nth-child(15) { display: none}