status-im
/
status-site-legacy
mirror of https://github.com/status-im/status-site-legacy.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/css/main.css
View File

@ -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% {

5
src/index.html
View File

@ -80,13 +80,16 @@
<div class="tagline">
<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__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-purple button--more" target="_blank" href="http://slack.status.im">Join our Slack</a>
</div>
</div>
<div class="learn-more">
<a href="#">Learn more about Status</a>
</div>
</div>

5
src/js/app.js
View File

@ -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 () {

6
src/js/main.js
View File

@ -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(){

13
src/scss/header.scss
View File

@ -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;
}
}

37
src/scss/slide--one.scss
View File

@ -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 {

38
src/scss/tokens.scss
View File

@ -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}