From 72188b5f16069b5419e53438e0845bd623f35d9c Mon Sep 17 00:00:00 2001 From: Andrei Mironov Date: Wed, 15 Mar 2017 19:17:24 +0300 Subject: [PATCH] added success and JObs page --- gulpfile.js | 1 + package.json | 1 + src/css/main.css | 136 +++++++++++++++++++++++++---- src/index.html | 11 +-- src/jobs.html | 183 +++++++++++++++++++++++++++++++++++++++ src/js/app.js | 2 +- src/js/main.js | 2 +- src/lgpl.html | 7 -- src/privacy-policy.html | 9 +- src/scss/page.scss | 142 ++++++++++++++++++++++++++++-- src/scss/slide--one.scss | 23 +++-- src/success.html | 57 +++++++++--- 12 files changed, 498 insertions(+), 76 deletions(-) create mode 100644 src/jobs.html diff --git a/gulpfile.js b/gulpfile.js index 4955b46..c089284 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -73,6 +73,7 @@ gulp.task('dapps', function() { .pipe(gulp.dest('build/dapps')) }) + gulp.task('watch', ['css', 'browserify', 'browser-sync'], function() { gulp.watch('src/scss/**/*.+(sass|scss)', ['css']) gulp.watch('src/*.html', browserSync.reload) diff --git a/package.json b/package.json index d97f1f6..68b75e5 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "d3-ease": "^1.0.2", "d3-interpolate": "^1.1.2", "d3-scale": "^1.0.4", + "gulp-file-include": "^1.0.0", "lodash.assign": "^4.2.0", "lodash.clone": "^4.0.1", "lodash.foreach": "^4.0.0", diff --git a/src/css/main.css b/src/css/main.css index 7069fea..6ee39bb 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -638,8 +638,9 @@ li.social-link a { background: white; border-radius: 8px; } -.page__content.page__content--success { - padding: 160px 40px; +.page__content.page__content--centered { + max-width: 100%; + padding: 50px 160px; display: -ms-flexbox; display: flex; -ms-flex-align: center; @@ -669,12 +670,101 @@ li.social-link a { .page__content p strong { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } -.page__content.page__content--success .page__title { +.page__content.page__content--centered .page__title { max-width: 500px; } -.page__content.page__content--success .page__text { +.page__content.page__content--centered .page__text { max-width: 500px; } +.page h3 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 22px; + margin: 32px 0 8px 0; } + +.page h5 { + font-size: 15px; + opacity: 1; + padding: 16px; } + +.page__social { + width: 100%; + padding: 48px 0; } + +.page__social-buttons { + width: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } + +.page__social-button-wrap { + -ms-flex-preferred-size: 33.3%; + flex-basis: 33.3%; + -ms-flex-negative: 1; + flex-shrink: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin: 12px; + position: relative; + border-radius: 8px; + border: 1px solid #e9eaf4; + text-align: center; + box-shadow: 0 2px 5px 0 rgba(71, 91, 106, 0.12); + transition: box-shadow .2s ease; } + +.page__social-button-wrap:first-child { + margin-left: 0; } + +.page__social-button-wrap:last-child { + margin-right: 0; } + +.page__social-button-wrap:hover { + box-shadow: 0 4px 10px 0 rgba(71, 91, 106, 0.16); } + +.page__social-button { + padding: 24px; + height: 92px; + overflow: hidden; } + +.big-button-wrap { + margin: 48px 0 0 0; } + +.button.button--big { + height: 56px; + line-height: 56px; + font-size: 15px; + letter-spacing: 1.2px; } + +.button.button--secondary.button--page { + display: inline-block; + padding: 0 40px; + background-color: #4A5C69; + color: white; } + +.button.button--secondary.button--page.button--page--slack { + background-color: #E3306D; } + +.button.button--secondary.button--page.button--page--wiki { + background-color: #4A55BF; } + +.button.button--secondary.button--page:hover { + opacity: .8; + background-color: #4A5C69; } + +.button.button--secondary.button--page.button--page--slack:hover { + opacity: .8; + background-color: #E3306D; } + +.button.button--secondary.button--page.button--page--wiki:hover { + opacity: .8; + background-color: #4A55BF; } + +.page__social-button-label { + display: block; + text-align: center; + opacity: .6; + padding: 16px; } + .page__footer { position: absolute; bottom: 0; @@ -709,6 +799,18 @@ li.social-link a { margin: 0 0 30px 0; } } @media (max-width: 1140px) { + .page__social { + padding: 16px 0; } + .page__social-buttons { + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .page__social-button-wrap { + width: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; } + .page__social-button-wrap { + margin-left: 0; + margin-right: 0; } .page { margin: 20px 20px 0 20px; } .page__content-wrap { @@ -723,13 +825,13 @@ li.social-link a { .page__content-wrap { top: -20px; margin: 0 0 20px 0; } - .page__content.page__content--success { + .page__content.page__content--centered { padding: 100px 20px; } } @media (max-width: 767px) { .page { margin: 0; } - .page__content.page__content--success, + .page__content.page__content--centered, .page__content { padding: 40px 0 80px 0; } .page__content-wrap { @@ -1143,27 +1245,23 @@ input.email-form__input--email:disabled { box-shadow: 0px -2px 18px 0px rgba(72, 89, 102, 0.25); border-radius: 10px; } -.more-button { - font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - text-transform: uppercase; - line-height: 15px; - text-align: center; - transform: translate3d(-50%, 0, 0); - padding: 14px 35px 14px; - font-size: 13px; - letter-spacing: 1px; +.button.button--secondary { color: #6370CA; background-color: rgba(99, 112, 202, 0.1); - border-radius: 10px; + box-shadow: none; } + +.button.button--more { + padding: 0 35px; + transform: translate3d(-50%, 0, 0); position: absolute; bottom: 30px; left: 50%; transition: transform .2s ease, background-color .2s ease; } -.more-button:hover { +.button.button--secondary:hover { background-color: rgba(99, 112, 202, 0.2); } -.more-button:active { +.button.button--more:active { transform: translate3d(-50%, 0, 0) scale(0.99); } .features__item { @@ -1423,7 +1521,7 @@ input.email-form__input--email:disabled { border-bottom: 1px solid #EEF2F5; } .features__item:nth-child(3) .features-text { border-bottom: none; } - .more-button { + .button.button--more { display: none; } } @keyframes shakeIt { diff --git a/src/index.html b/src/index.html index 7c651c1..60db15a 100755 --- a/src/index.html +++ b/src/index.html @@ -144,7 +144,7 @@

Discover nearby Status users to exchange goods and services.

- Learn more + Learn more @@ -335,18 +335,16 @@ +
-
Status Holdings Pte. Ltd.
22 Sin Ming Lane
Singapore
-
-

Social links

-

More

-

Language

    @@ -376,12 +372,11 @@
-
-
+ diff --git a/src/jobs.html b/src/jobs.html new file mode 100644 index 0000000..ae3a223 --- /dev/null +++ b/src/jobs.html @@ -0,0 +1,183 @@ + + + + + + + Status | The Mobile Ethereum Client + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+ + +
+ Blog + About +
+ +
+ +
+
+
+
+ +
+
+

Love Clojure? Status is looking for Contributors.

+
+

We’re building an open source messaging platform for the decentralized web.
Powered by Ethereum.

+ +

Welcome to Web 3.0.

+

With the new suite of protocols Ethereum has introduced, we have a clear path towards a more democratic internet where we can communicate securely without fear of institutional surveillance, where we can trade freely without borders, and controlling your own wealth without the dependency on intermediaries or centralized servers charging outrageously high fees.

+ +

Status is an interface for the decentralized web.

+

We’re observing an emerging ecosystem of decentralized applications built on top of Ethereum’s protocols, and Status aims to provide an interface to access them. You can think of Status as a browser for the decentralized web, that uses messaging as a platform, akin to an open source, peer-to-peer version of WeChat.

+ +

The technology

+

Status is already in alpha. We’re built using re-natal + re-frame + cljs + golang. Its communication protocol uses an Ethereum sub-protocol called SHH/Whisper (not to be confused with Signal) which is an identity-based encrypted messaging protocol with dark routing. You can learn more about it in this presentation.

+

In Ethereum (and Status), there is a concept called 'web3', files are stored using SWARM (a kademlia-like decentralised file storage solution) and 'server-side logic' is done using Smart Contracts and on the blockchain. This allows us to create trust-less, censorship resistant systems.

+ +

Still interested? Come Get Involved!

+

As an open sourceproject anyone is free to contribute to Status. Regardless of your experience or background all contributors are welcome to join our community and help us shape the direction of the project:

+
+ +
+

Join Us Full Time

+

In addition to our wonderful community of part-time contributors, we have a full-time team of 8, and are looking to hire full-time Core Contributors who are passionate about smart contracts, crypto-currencies and are fluent in Lisp-dialect. Experience with ClojureScript and re-frame is ideal. You will be able to work remotely from anywhere in the world, and salaries competitive. (> pull-requests CVs)

+
+ Apply as a Core Contributor +
+
+
+
+ Learn more about Status +
+
+
+
+
+
+
+
+ +
Status Holdings Pte. Ltd.
22 Sin Ming Lane
Singapore
+
+
+
+
+

Social links

+ +
+
+

More

+ +
+
+

Language

+
    +
  • + +
    • +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + diff --git a/src/js/app.js b/src/js/app.js index 429a04b..0f365bf 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -9970,7 +9970,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol hideCookiePopup(); } - document.querySelectorAll(".more-button")[0].addEventListener('click', function (event) { + document.querySelectorAll(".button--more")[0].addEventListener('click', function (event) { animateScroll(slideTwo, 600, "easeInOutCubic", 0); event.preventDefault(); }); diff --git a/src/js/main.js b/src/js/main.js index 792a800..451a085 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -18,7 +18,7 @@ if (statusCookiePolicyAccepted == "accepted") { hideCookiePopup() } -document.querySelectorAll(".more-button")[0].addEventListener('click', function(event){ +document.querySelectorAll(".button--more")[0].addEventListener('click', function(event){ animateScroll(slideTwo, 600, "easeInOutCubic", 0) event.preventDefault() }) diff --git a/src/lgpl.html b/src/lgpl.html index d7f051c..2166716 100644 --- a/src/lgpl.html +++ b/src/lgpl.html @@ -69,16 +69,13 @@
-
Status Holdings Pte. Ltd.
22 Sin Ming Lane
Singapore
-
-

Social links

-

More

-

Language

    @@ -108,9 +103,7 @@
-
-
diff --git a/src/privacy-policy.html b/src/privacy-policy.html index a567059..840c8af 100644 --- a/src/privacy-policy.html +++ b/src/privacy-policy.html @@ -68,16 +68,13 @@
-
Status Holdings Pte. Ltd.
22 Sin Ming Lane
Singapore
-
-

Social links

-

More

-

Language

    @@ -107,11 +102,11 @@
-
-
+ +