minor fixes

This commit is contained in:
andmironov 2017-06-03 16:08:01 +03:00
parent bd149f8ad0
commit 77edf8f97a
7 changed files with 167 additions and 23 deletions

View File

@ -206,7 +206,12 @@ a {
width: 100%; width: 100%;
z-index: 900; z-index: 900;
top: 40px; top: 40px;
left: 0; } left: 0;
opacity: .6;
transition: opacity .2s ease; }
.header:hover {
opacity: 1; }
.header__inner { .header__inner {
width: 1080px; width: 1080px;
@ -257,13 +262,13 @@ a.logo {
opacity: .5; } opacity: .5; }
.nav a { .nav a {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 15px; font-size: 15px;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
padding: 10px 15px 15px; } padding: 10px 15px 15px;
color: #70808D; }
.header .nav a { .header .nav a {
color: #49555F; } color: #49555F; }
@ -361,6 +366,10 @@ li.social-link a {
.nav:first-child { .nav:first-child {
display: none; } } display: none; } }
@media (max-width: 767px) {
.header {
display: none; } }
.the-iphone { .the-iphone {
position: relative; position: relative;
width: 292px; width: 292px;
@ -969,6 +978,10 @@ li.social-link a {
transition-delay: 1.6s; transition-delay: 1.6s;
transform: translate3d(-70px, 140px, 0); } 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) { .token-wrap:nth-child(4) {
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -977,6 +990,10 @@ li.social-link a {
transition-delay: 1.45s; transition-delay: 1.45s;
transform: translate3d(-90px, 150px, 0); } 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) { .token-wrap:nth-child(5) {
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -985,6 +1002,10 @@ li.social-link a {
transition-delay: 1.5s; transition-delay: 1.5s;
transform: translate3d(-40px, 180px, 0); } 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) { .token-wrap:nth-child(6) {
width: 54px; width: 54px;
height: 54px; height: 54px;
@ -1001,6 +1022,10 @@ li.social-link a {
transition-delay: 1.7s; transition-delay: 1.7s;
transform: translate3d(-30px, 190px, 0); } 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) { .token-wrap:nth-child(8) {
width: 62px; width: 62px;
height: 62px; height: 62px;
@ -1025,6 +1050,10 @@ li.social-link a {
transition-delay: 1.3s; transition-delay: 1.3s;
transform: translate3d(20px, 190px, 0); } 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) { .token-wrap:nth-child(11) {
width: 58px; width: 58px;
height: 58px; height: 58px;
@ -1041,6 +1070,10 @@ li.social-link a {
transition-delay: 1.5s; transition-delay: 1.5s;
transform: translate3d(20px, 130px, 0); } 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) { .token-wrap:nth-child(13) {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -1049,6 +1082,10 @@ li.social-link a {
transition-delay: 1.6s; transition-delay: 1.6s;
transform: translate3d(20px, 140px, 0); } 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) { .token-wrap:nth-child(14) {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -1057,6 +1094,10 @@ li.social-link a {
transition-delay: 1.7s; transition-delay: 1.7s;
transform: translate3d(40px, 120px, 0); } 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) { .token-wrap:nth-child(15) {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -1230,6 +1271,8 @@ li.social-link a {
margin: 0 0 0 -540px; } } margin: 0 0 0 -540px; } }
@media (max-width: 767px) { @media (max-width: 767px) {
.tokens {
top: 20px; }
.token-wrap.token-wrap--status { .token-wrap.token-wrap--status {
margin: -36px 0 0 -36px; margin: -36px 0 0 -36px;
width: 72px; width: 72px;
@ -1298,10 +1341,10 @@ li.social-link a {
top: 111px; top: 111px;
right: 384px; } right: 384px; }
.token-wrap:nth-child(14) { .token-wrap:nth-child(14) {
width: 46px; width: 40px;
height: 46px; height: 40px;
top: 267px; top: 250px;
right: 374px; } right: 370px; }
.token-wrap:nth-child(15) { .token-wrap:nth-child(15) {
display: none; } display: none; }
.token::after { .token::after {
@ -1329,12 +1372,12 @@ li.social-link a {
.crowdsale { .crowdsale {
background-color: white; background-color: white;
box-shadow: 0 5px 8px 0 rgba(72, 89, 102, 0.1); box-shadow: 0 5px 8px 0 rgba(72, 89, 102, 0.06);
padding: 0 0 60px 0; padding: 0 0 24px 0;
background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%); } background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%); }
.crowdsale .tagline { .crowdsale .tagline {
margin: 130px 0 30px 0; } margin: 130px 0 60px 0; }
.tagline .tagline__title { .tagline .tagline__title {
width: 440px; width: 440px;
@ -1405,6 +1448,22 @@ li.social-link a {
.button.button--color-purple { .button.button--color-purple {
color: #6673CE; } 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 { .about {
padding: 50px 0 0 0; } padding: 50px 0 0 0; }
@ -1803,8 +1862,11 @@ input.email-form__input--email:disabled {
flex-direction: column; } flex-direction: column; }
.tagline__buttons .button { .tagline__buttons .button {
margin: 8px 0; } margin: 8px 0; }
.button.button--bg-white {
background-color: white;
box-shadow: 0 3px 6px 0 rgba(175, 192, 202, 0.3); }
.crowdsale .tagline { .crowdsale .tagline {
margin: 390px 0 0 0; } } margin: 320px 0 14px 0; } }
@keyframes shakeIt { @keyframes shakeIt {
0%, 100% { 0%, 100% {

View File

@ -80,13 +80,16 @@
<div class="tagline"> <div class="tagline">
<h2 class="tagline__title">Introducing the Status Network</h2> <h2 class="tagline__title">Introducing the Status Network</h2>
<div class="tagline__body">The Status Contribution Period will begin at 2pm GMT (UTC+0) on June 17th 2017</div> <div class="tagline__body">The Status Contribution Period will begin at 2pm GMT (UTC+0) on June 17th 2017</div>
<div class="tagline__buttons"> <div class="tagline__buttons">
<a class="button button--bg-white button--color-blue" target="_blank" href="https://status.im/whitepaper.pdf">Read the Whitepaper</a> <a class="button button--bg-white button--color-blue" target="_blank" href="https://status.im/whitepaper.pdf">Read the Whitepaper</a>
<a class="button button--bg-white button--color-purple button--more" target="_blank" href="http://slack.status.im">Join our Slack</a> <a class="button button--bg-white button--color-purple button--more" target="_blank" href="http://slack.status.im">Join our Slack</a>
</div> </div>
</div> </div>
<div class="learn-more">
<a href="#">Learn more about Status</a>
</div>
</div> </div>

View File

@ -9987,6 +9987,11 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
event.preventDefault(); 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) { document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function (event) {
animateScroll(slideFour, 600, "easeInOutCubic", 0); animateScroll(slideFour, 600, "easeInOutCubic", 0);
setTimeout(function () { setTimeout(function () {

View File

@ -20,7 +20,6 @@ if (statusCookiePolicyAccepted == "accepted") {
} }
document.querySelectorAll(".nav__item--features")[0].addEventListener('click', function(event){ document.querySelectorAll(".nav__item--features")[0].addEventListener('click', function(event){
animateScroll(slideTwo, 600, "easeInOutCubic", 0) animateScroll(slideTwo, 600, "easeInOutCubic", 0)
event.preventDefault() event.preventDefault()
@ -37,6 +36,11 @@ cookieButton.addEventListener('click', function(event){
event.preventDefault() 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){ document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function(event){
animateScroll(slideFour, 600, "easeInOutCubic", 0) animateScroll(slideFour, 600, "easeInOutCubic", 0)
setTimeout(function(){ setTimeout(function(){

View File

@ -6,6 +6,12 @@
z-index: 900; z-index: 900;
top: 40px; top: 40px;
left: 0; left: 0;
opacity: .6;
transition: opacity .2s ease;
}
.header:hover {
opacity: 1;
} }
.header__inner { .header__inner {
@ -56,11 +62,12 @@ a.logo {
} }
.nav a { .nav a {
font-family:$PostGroteskMedium; //font-family:$PostGroteskMedium;
font-size: 15px; font-size: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 15px 15px; padding: 10px 15px 15px;
color: #70808D;
} }
.header .nav a { .header .nav a {
@ -185,5 +192,7 @@ li.social-link a {
@media (max-width: 767px) { @media (max-width: 767px) {
.header {
display: none;
}
} }

View File

@ -17,13 +17,13 @@
.crowdsale { .crowdsale {
background-color: $colorWhite; background-color: $colorWhite;
box-shadow: 0 5px 8px 0 rgba(72,89,102,0.10); box-shadow: 0 5px 8px 0 rgba(72,89,102,0.06);
padding: 0 0 60px 0; padding: 0 0 24px 0;
background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%); background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%);
} }
.crowdsale .tagline { .crowdsale .tagline {
margin: 130px 0 30px 0; margin: 130px 0 60px 0;
} }
.tagline .tagline__title { .tagline .tagline__title {
@ -109,6 +109,25 @@
color: #6673CE; 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 { .about {
padding: 50px 0 0 0 padding: 50px 0 0 0
} }
@ -659,10 +678,16 @@ input.email-form__input--email:disabled {
margin: 8px 0; margin: 8px 0;
} }
.crowdsale .tagline { .button.button--bg-white {
margin: 390px 0 0 0 background-color: $colorWhite;
box-shadow: 0 3px 6px 0 rgba(175,192,202,0.3);
} }
.crowdsale .tagline {
margin: 320px 0 14px 0;
}
} }
@keyframes shakeIt { @keyframes shakeIt {

View File

@ -38,6 +38,10 @@
transform: translate3d(-70px, 140px, 0); transform: translate3d(-70px, 140px, 0);
} }
.token-wrap:nth-child(3) .token::after {
transform: scale(.7);
}
.token-wrap:nth-child(4) { .token-wrap:nth-child(4) {
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -47,6 +51,10 @@
transform: translate3d(-90px, 150px, 0); transform: translate3d(-90px, 150px, 0);
} }
.token-wrap:nth-child(4) .token::after {
transform: scale(.7);
}
.token-wrap:nth-child(5) { .token-wrap:nth-child(5) {
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -56,6 +64,10 @@
transform: translate3d(-40px, 180px, 0); transform: translate3d(-40px, 180px, 0);
} }
.token-wrap:nth-child(5) .token::after {
transform: scale(.8);
}
.token-wrap:nth-child(6) { .token-wrap:nth-child(6) {
width: 54px; width: 54px;
height: 54px; height: 54px;
@ -74,6 +86,10 @@
transform: translate3d(-30px, 190px, 0); transform: translate3d(-30px, 190px, 0);
} }
.token-wrap:nth-child(7) .token::after {
transform: scale(.9);
}
.token-wrap:nth-child(8) { .token-wrap:nth-child(8) {
width: 62px; width: 62px;
height: 62px; height: 62px;
@ -101,6 +117,10 @@
transform: translate3d(20px, 190px, 0); transform: translate3d(20px, 190px, 0);
} }
.token-wrap:nth-child(10) .token::after {
transform: scale(.7);
}
.token-wrap:nth-child(11) { .token-wrap:nth-child(11) {
width: 58px; width: 58px;
height: 58px; height: 58px;
@ -119,6 +139,10 @@
transform: translate3d(20px, 130px, 0); transform: translate3d(20px, 130px, 0);
} }
.token-wrap:nth-child(12) .token::after {
transform: scale(.9);
}
.token-wrap:nth-child(13) { .token-wrap:nth-child(13) {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -128,6 +152,10 @@
transform: translate3d(20px, 140px, 0); transform: translate3d(20px, 140px, 0);
} }
.token-wrap:nth-child(13) .token::after {
transform: scale(.9);
}
.token-wrap:nth-child(14) { .token-wrap:nth-child(14) {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -137,6 +165,10 @@
transform: translate3d(40px, 120px, 0); transform: translate3d(40px, 120px, 0);
} }
.token-wrap:nth-child(14) .token::after {
transform: scale(.8);
}
.token-wrap:nth-child(15) { .token-wrap:nth-child(15) {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -288,6 +320,10 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.tokens {
top: 20px;
}
.token-wrap.token-wrap--status { .token-wrap.token-wrap--status {
margin: -36px 0 0 -36px; margin: -36px 0 0 -36px;
width: 72px; width: 72px;
@ -319,7 +355,7 @@
.token-wrap:nth-child(11) { width: 44px; height: 44px; top: 210px; right: 445px;} .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(12) { width: 50px; height: 50px; top: 0px; right: 371px;}
.token-wrap:nth-child(13) { top: 111px; right: 384px;} .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} .token-wrap:nth-child(15) { display: none}