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

improvements

This commit is contained in:
andmironov 2018-04-30 18:15:18 +03:00
parent 7025b13b6f
commit 438dc93591
6 changed files with 162 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

29
css/main.css
View File

@ -655,7 +655,8 @@ select[multiple] {
.bubbles-wrap { .bubbles-wrap {
width: 300px; width: 300px;
height: 300px; height: 300px;
position: relative; } position: relative;
transform: translate3d(0, 0, 0); }
.bubbles-wrap .bubbles { .bubbles-wrap .bubbles {
position: absolute; position: absolute;
@ -1122,6 +1123,9 @@ select[multiple] {
cursor: pointer; cursor: pointer;
text-align: center; } text-align: center; }
.social-block a {
text-decoration: none; }
.social-block:nth-child(1) { .social-block:nth-child(1) {
padding-left: 0; } padding-left: 0; }
@ -1129,6 +1133,7 @@ select[multiple] {
padding-right: 0; } padding-right: 0; }
.social-block p { .social-block p {
text-decoration: none;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #8D99A4; } color: #8D99A4; }
@ -1138,12 +1143,12 @@ select[multiple] {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 200px; height: 140px;
position: relative; position: relative;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 12px; border-radius: 12px;
width: 100%; padding: 36px 24px 24px 24px;
padding: 36px 24px 24px 24px; } text-decoration: none; }
.social-block-logo { .social-block-logo {
display: block; display: block;
@ -1256,6 +1261,22 @@ select[multiple] {
color: #49555F; color: #49555F;
margin: 16px 0 0 0; } margin: 16px 0 0 0; }
.popup__text h3 {
font-size: 18px;
color: #000000;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
padding: 8px 0 4px 0; }
.popup__text p {
padding: 0 0 8px 0; }
h3.terms-header {
font-size: 18px;
line-height: 26px;
padding: 0 32px 8px 32px;
color: #000000;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.popup__button { .popup__button {
position: absolute; position: absolute;
top: -56px; top: -56px;

2
img/logo-dribbble.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

211
index.html
View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Status Design</title> <title>Status Design</title>
<link rel="stylesheet" href="./css/main.css?v=0.0.2"> <link rel="stylesheet" href="./css/main.css?v=0.0.3">
</head> </head>
<body> <body>
@ -17,10 +17,16 @@
<div class="popup__steps">3 Open Positions</div> <div class="popup__steps">3 Open Positions</div>
<h4 class="popup__title">UI/UX Designer</h4> <h4 class="popup__title">UI/UX Designer</h4>
<div class="popup__text"> <div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br> <h3>Status</h3>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div> <p>Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</p>
<p>As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</p>
<h3>Opportunity</h3>
<p>Although still in its infancy, blockchain technology is developing rapidly and is poised to have a profound impact on our social, financial and legal systems. By joining us, you’ll help to craft the way people interact with these technologies.</p>
</div>
<h3 class="terms-header">Job Description</h3>
<div class="terms"> <div class="terms">
<h6>Requirements:</h6> <h6>Requirements</h6>
<ul> <ul>
<li>3+ years of experience</li> <li>3+ years of experience</li>
<li>Fluent English</li> <li>Fluent English</li>
@ -67,34 +73,87 @@
<div class="overlay"> <div class="overlay">
<div class="popup"> <div class="popup">
<a class="popup__button popup__button--close"></a> <a class="popup__button popup__button--close"></a>
<div class="popup__steps">3 Open Positions</div> <div class="popup__steps">1 Open Position</div>
<h4 class="popup__title">UI/UX Designer</h4> <h4 class="popup__title">Web Designer</h4>
<div class="popup__text"> <div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br> <h3>Status</h3>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div> <p>Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</p>
<p>As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</p>
<h3>Opportunity</h3>
<p>Although still in its infancy, blockchain technology is developing rapidly and is poised to have a profound impact on our social, financial and legal systems. By joining us, you’ll help to craft the way people interact with these technologies.</p>
</div>
<h3 class="terms-header">Job Description</h3>
<div class="terms"> <div class="terms">
<h6>Requirements:</h6> <h6>Requirements</h6>
<ul> <ul>
<li>3+ years of experience</li> <li>3+ years of experience</li>
<li>Fluent English</li> <li>Fluent English</li>
<li>Great communication skills</li> <li>Great communication skills</li>
<li>Self-starter who can collaborate</li> <li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li> <li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li> <li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li> <li>mobile responsive design</li>
<li>Experience shipping mobile products</li> <li>UX design / information architecture capabilities</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li> <li>HTML/CSS/JS experience</li>
<li>Have used GitHub before</li>
<li>A love for making things beautiful, usable and elegant</li> <li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li> <li>Modern design stack: Sketch, Figma, Invision, Zeplin</li>
<li>Living in CET ± 2h</li> </ul>
<h6>Nice to have</h6>
<ul>
<li>Interested in blockchain, decentralized web and privacy</li>
</ul>
<h6>About us</h6>
<p>We care deeply about open source software, and our organizational structure does away with strict hierarchy and fixed work hours. We believe in working with a high degree of autonomy while supporting the organisation's priorities:</p>
<ul>
<li>We are Remote and Decentralized.</li>
<li>We are 70+ employees spread across 20+ different countries</li>
<li>We believe in complete transparency. That's why everything we do including metrics, Town Halls, and more, are completely public to the entire community</li>
</ul>
</div>
<div class="popup__footer">
<div class="input-wrap">
<a class="button button--apply" href="#">Apply</a>
<div class="tooltip tooltip--shown">Get 10 000 SNT ($1000 value) for a recommendation</div>
<a class="button button--recommend" href="#">Recommend<span> Someone</span></a>
</div>
</div>
</div>
</div>
<div class="overlay">
<div class="popup">
<a class="popup__button popup__button--close"></a>
<div class="popup__steps">1 Open Position</div>
<h4 class="popup__title">Brand Design Lead</h4>
<div class="popup__text">
<h3>Status</h3>
<p>Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</p>
<p>As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</p>
<h3>Opportunity</h3>
<p>Although still in its infancy, blockchain technology is developing rapidly and is poised to have a profound impact on our social, financial and legal systems. By joining us, you’ll help to craft the way people interact with these technologies.</p>
</div>
<h3 class="terms-header">Job Description</h3>
<div class="terms">
<h6>Requirements</h6>
<ul>
<li>5+ years of experience</li>
<li>Fluent English</li>
<li>Great communication skills</li>
<li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Ability to create a brand design system</li>
<li>Success designing for diverse groups of people</li>
<li>A great portfolio with branding projects</li>
</ul> </ul>
<h6>Nice to have</h6> <h6>Nice to have</h6>
<ul> <ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li> <li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li> <li>Owns a Crypto Kitty </li>
</ul> </ul>
@ -120,87 +179,29 @@
<div class="overlay"> <div class="overlay">
<div class="popup"> <div class="popup">
<a class="popup__button popup__button--close"></a> <a class="popup__button popup__button--close"></a>
<div class="popup__steps">3 Open Positions</div> <div class="popup__steps">1 Open Position</div>
<h4 class="popup__title">UI/UX Designer</h4> <h4 class="popup__title">Graphic Designer/Brand Designer/Illustrator</h4>
<div class="popup__text"> <div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br> <h3>Status</h3>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div> <p>Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</p>
<p>As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</p>
<h3>Opportunity</h3>
<p>Although still in its infancy, blockchain technology is developing rapidly and is poised to have a profound impact on our social, financial and legal systems. By joining us, you’ll help to craft the way people interact with these technologies.</p>
</div>
<h3 class="terms-header">Job Description</h3>
<div class="terms"> <div class="terms">
<h6>Requirements:</h6> <h6>Requirements</h6>
<ul> <ul>
<li>3+ years of experience</li> <li>2+ years of experience</li>
<li>Fluent English</li> <li>Fluent English</li>
<li>Great communication skills</li> <li>Great communication skills</li>
<li>Self-starter who can collaborate</li> <li>A portfolio that showcases variety of projects</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li> <li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li>
<li>Experience shipping mobile products</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li>
<li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li>
<li>Living in CET ± 2h</li>
</ul> </ul>
<h6>Nice to have</h6> <h6>Nice to have</h6>
<ul> <ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li>
</ul>
<h6>About us</h6>
<p>We care deeply about open source software, and our organizational structure does away with strict hierarchy and fixed work hours. We believe in working with a high degree of autonomy while supporting the organisation's priorities:</p>
<ul>
<li>We are Remote and Decentralized.</li>
<li>We are 70+ employees spread across 20+ different countries</li>
<li>We believe in complete transparency. That's why everything we do including metrics, Town Halls, and more, are completely public to the entire community</li>
</ul>
</div>
<div class="popup__footer">
<div class="input-wrap">
<a class="button button--apply" href="#">Apply</a>
<div class="tooltip tooltip--shown">Get 10 000 SNT ($1000 value) for a recommendation</div>
<a class="button button--recommend" href="#">Recommend<span> Someone</span></a>
</div>
</div>
</div>
</div>
<div class="overlay">
<div class="popup">
<a class="popup__button popup__button--close"></a>
<div class="popup__steps">3 Open Positions</div>
<h4 class="popup__title">UI/UX Designer</h4>
<div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div>
<div class="terms">
<h6>Requirements:</h6>
<ul>
<li>3+ years of experience</li>
<li>Fluent English</li>
<li>Great communication skills</li>
<li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li>
<li>Experience shipping mobile products</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li>
<li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li>
<li>Living in CET ± 2h</li>
</ul>
<h6>Nice to have</h6>
<ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li> <li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li> <li>Owns a Crypto Kitty </li>
</ul> </ul>
@ -231,15 +232,15 @@
<div class="header-left"> <div class="header-left">
<a class="logo" href="/"></a> <a class="logo" href="/"></a>
<ul class="main-nav"> <ul class="main-nav">
<li><a href="#">Open Positions</a></li> <li><a href="#" class="nav-link--positions">Open Positions</a></li>
<li><a href="#">How We Work</a></li> <li><a href="#" class="nav-link--people">Who We Are</a></li>
<li><a href="#">Who We Are</a></li> <li><a href="#" class="nav-link--blog">Our Blog</a></li>
</ul> </ul>
</div> </div>
<ul class="secondary-nav"> <ul class="secondary-nav">
<li><a href="#">About Status</a></li> <li><a href="https://status.im" target="_blank" >About Status</a></li>
<li class="social-link social-link--twitter"><a href="#"></a></li> <li class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank" ></a></li>
<li class="social-link social-link--github"><a href="#"></a></li> <li class="social-link social-link--github"><a href="https://github.com/status-im/" target="_blank" ></a></li>
</ul> </ul>
</div> </div>
<div class="intro"> <div class="intro">
@ -331,7 +332,7 @@
</div> </div>
</div> </div>
<div class="section-header"> <div class="section-header section-header--people">
<h2>Who We Are</h2> <h2>Who We Are</h2>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p> <p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div> </div>
@ -427,7 +428,7 @@
<div class="positions-item-inner"> <div class="positions-item-inner">
<div class="positions-arrow"></div> <div class="positions-arrow"></div>
<div class="positions-item-top"> <div class="positions-item-top">
<h2>Lead Brand Designer</h2> <h2>Brand Design Lead</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p> <p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div> </div>
<div class="reward"> <div class="reward">
@ -460,7 +461,7 @@
</div> </div>
</div> </div>
<div class="section-header"> <div class="section-header section-header--blog">
<h2>Read our Blog</h2> <h2>Read our Blog</h2>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p> <p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div> </div>
@ -496,22 +497,22 @@
<div class="social-blocks"> <div class="social-blocks">
<div class="social-block"> <div class="social-block">
<div class="social-block-inner"> <a href="https://www.youtube.com/channel/UCFzdJTUdzqyX4e9dOW7UpPQ" target="_blank" class="social-block-inner">
<div class="social-block-logo social-block-logo--one"></div> <div class="social-block-logo social-block-logo--one"></div>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth</p> <p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth</p>
</div> </a>
</div> </div>
<div class="social-block"> <div class="social-block">
<div class="social-block-inner"> <a href="https://github.com/status-im/" target="_blank" class="social-block-inner">
<div class="social-block-logo social-block-logo--two"></div> <div class="social-block-logo social-block-logo--two"></div>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth</p> <p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth</p>
</div> </a>
</div> </div>
<div class="social-block"> <div class="social-block">
<div class="social-block-inner"> <a href="https://dribbble.com/statusapp" target="_blank" class="social-block-inner">
<div class="social-block-logo social-block-logo--three"></div> <div class="social-block-logo social-block-logo--three"></div>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth</p> <p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth</p>
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@ -546,6 +547,6 @@
</div> </div>
</div> </div>
<script src="./js/bundle.js?v=0.0.2"></script> <script src="./js/bundle.js?v=0.0.3"></script>
</body> </body>
</html> </html>

35
js/bundle.js
View File

@ -25035,12 +25035,36 @@ let wrap = document.querySelectorAll(".wrap")[0];
/* Scroll Buttons */ /* Scroll Buttons */
let navLinkPositions = document.querySelectorAll(".nav-link--positions")[0];
let navLinkPeople = document.querySelectorAll(".nav-link--people")[0];
let navLinkBlog = document.querySelectorAll(".nav-link--blog")[0];
let buttonPositions = document.querySelectorAll(".button--positions")[0]; let buttonPositions = document.querySelectorAll(".button--positions")[0];
let sectionPositions = document.querySelectorAll(".section-header--positions")[0]; let sectionPositions = document.querySelectorAll(".section-header--positions")[0];
let sectionPeople = document.querySelectorAll(".section-header--people")[0];
let sectionBlog = document.querySelectorAll(".section-header--blog")[0];
if (buttonPositions) { if (buttonPositions) {
buttonPositions.addEventListener('click', function (event) { buttonPositions.addEventListener('click', function (event) {
animateScroll(sectionPositions, 2000, "easeInOutCubic", 0); animateScroll(sectionPositions, 1800, "easeInOutCubic", 0);
event.preventDefault();
});
}
if (navLinkPositions) {
navLinkPositions.addEventListener('click', function (event) {
animateScroll(sectionPositions, 1800, "easeInOutCubic", 0);
event.preventDefault();
});
}
if (navLinkPeople) {
navLinkPeople.addEventListener('click', function (event) {
animateScroll(sectionPeople, 1800, "easeInOutCubic", 0);
event.preventDefault();
});
}
if (navLinkBlog) {
navLinkBlog.addEventListener('click', function (event) {
animateScroll(sectionBlog, 1800, "easeInOutCubic", 0);
event.preventDefault(); event.preventDefault();
}); });
} }
@ -25107,7 +25131,7 @@ new ScrollOver({
}, { }, {
element: sectionThree, element: sectionThree,
reveal: { reveal: {
when: 1300, when: 1200,
className: "section--shown" className: "section--shown"
} }
}, { }, {
@ -25136,13 +25160,13 @@ new ScrollOver({
}] }]
}, { }, {
element: header, element: header,
domain: [300, 400], domain: [300, 480],
animate: [{ animate: [{
property: "opacity", property: "opacity",
range: ["1", "0"] range: ["1", "0"]
}, { }, {
property: "translateY", property: "translateY",
range: ["0", "-30"] range: ["0", "-40"]
}] }]
}] }]
}).init(); }).init();
@ -25182,11 +25206,8 @@ function showCircles() {
disturbanceNodes.map((o, i) => { disturbanceNodes.map((o, i) => {
o.vx += Math.sin(Date.now() * 0.0001 + i * 2) * (0.42 + i * 0.1); o.vx += Math.sin(Date.now() * 0.0001 + i * 2) * (0.42 + i * 0.1);
o.vy += Math.cos(Date.now() * 0.0001 + i * 2) * (0.42 + i * 0.1); o.vy += Math.cos(Date.now() * 0.0001 + i * 2) * (0.42 + i * 0.1);
o.radius += Math.cos(Date.now() * 0.001 + i * 2) * .03;
}); });
simulation.force("charge", d3.forceCollide().radius(d => d.radius * 1.1));
circles.selectAll("circle").attr("cx", function (d) { circles.selectAll("circle").attr("cx", function (d) {
return d.x; return d.x;
}).attr("cy", function (d) { }).attr("cy", function (d) {

4
js/bundle.js.map
View File

File diff suppressed because one or more lines are too long