Commit 5cb99272 authored by Eugen Rochko's avatar Eugen Rochko Committed by GitHub

Merge pull request #8 from latrani/master

Organizational improvements and working CTA
parents 7e5c20a2 add0399e
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"gh-pages": "^0.12.0",
"react": "^15.5.3",
"react-dom": "^15.5.3",
"react-motion": "^0.4.7",
......@@ -20,6 +21,11 @@
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
}
}
......@@ -3,37 +3,81 @@ import {
BrowserRouter as Router
} from 'react-router-dom';
import githubLogo from './assets/github-logo.svg';
import mastodonLogo from './assets/mastodon-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
const App = () => (
<Router>
<div className='app'>
<div className='navbar'>
<div className='container'>
<div className='brand'>Mastodon</div>
<ul className='left'>
<li>
<a className='active' href='https://github.com/tootsuite/mastodon'>
<img className='link-logo before' src={mastodonLogo} alt='Mastodon Logo'/> Mastodon
</a>
</li>
</ul>
<ul>
<li><a href='#'>Get started</a></li>
<ul className='right'>
<li><a href='https://instances.mastodon.xyz'>Find an instance</a></li>
<li><a href='https://github.com/tootsuite/documentation'>Documentation</a></li>
<li><a href='https://www.stickermule.com/marketplace/18010-mastodon-fluffy-elephant-friend'>Merch</a></li>
<li><a className='github' href='https://github.com/tootsuite/mastodon'>Fork on <span /></a></li>
<li>
<a href='https://github.com/tootsuite/mastodon'>
Fork on Github <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</div>
</div>
<div className='intro'>
<h1>Giving social networking back to <strong>you</strong></h1>
<p>With thousands of interconnected communities to choose from, and the tools to make your own, Mastodon is the world's largest free, open-source, decentralized micro-blogging network.</p>
<a href='https://instances.mastodon.xyz' className='cta button'>Get started</a>
</div>
<div className='hero'>
<div className='hero__container'>
<div className='hero__floats' />
<img className='desktop' src={screenshotFull} draggable={false} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} draggable={false} alt='Screenshot of Mastodon on desktop'/>
<img className='logo' src={mastodonLogo} draggable={false} alt='Mastodon logo' />
</div>
<img src='/screenshot_full.png' draggable={false} className='hero__full' alt='' />
<img src='/screenshot_mobile.png' draggable={false} className='hero__mobile' alt='' />
<div className='feature container'>
<div className='text'>
<h2>You're a person, not a product</h2>
<p>Mastodon communities, or instances, are independently owned, hosted, and moderated. Instances can seamlessly connect to each other, but nobody can own or control them all. That means no big corporation owns your data and you aren't being spied on or sold to advertisers.</p>
</div>
<div className='visual'/>
</div>
<div className='logo'><img src='/logo.svg' alt='Mastodon' /></div>
<div className='intro container'>
<h1><strong>Mastodon</strong> is a federated social network</h1>
<p>Free, open-source and decentralized, Mastodon gives back the power to build communities to the people.</p>
<a href='#' className='btn'>Get started</a>
<div className='feature container'>
<div className='visual'/>
<div className='text'>
<h2>Built for nuanced conversation</h2>
<p>Longer 500 character posts give you more space to get deep into a topic, not just surface-level quips, and built in support for content warnings, lets you share sensitive discussions and media with only those who want to see them.</p>
</div>
</div>
<div className='feature container'>
<div className='text'>
<h2>Find your perfect place</h2>
<p>Pick an instance that suits you, out of diverse options for all sorts of interests, needs, and languages. If you don't like how yours is being run, you can quickly and easily find another without losing any of the friends you've made. You can even make a new instance for the public, for your organisation, your friends, or even just yourself.</p>
</div>
<div className='visual'/>
</div>
<div className='feature container'>
<div className='visual'/>
<div className='text'>
<h2>Always within reach</h2>
<p>With multiple apps available iOS, Android, and every platform you can think of, Mastodon is easy to use everywhere you go, and just like with instances, anyone can develop an app</p>
</div>
</div>
<div className='bottom-cta'>
<a href='https://instances.mastodon.xyz' className='cta button'>Find an instance</a>
<br/>
<a href='https://www.github.com/tootsuite/mastodon' className='cta secondary'>Start your own</a>
</div>
</div>
</Router>
......
@import './variables.scss';
.app {
}
.container {
max-width: 950px;
margin: 0 auto;
}
.navbar {
background: darken($color1, 8%);
overflow: hidden;
.brand {
float: left;
padding: 12px 16px;
padding-bottom: 10px;
border-bottom: 2px solid $color4;
color: $color2;
line-height: 32px;
font-weight: 500;
font-size: 14px;
cursor: default;
}
ul {
list-style: none;
float: right;
li {
display: inline-block;
vertical-align: bottom;
}
a {
display: block;
color: $color3;
text-decoration: none;
padding: 12px 16px;
padding-bottom: 10px;
line-height: 32px;
font-weight: 500;
font-size: 14px;
border-bottom: 2px solid transparent;
transition: all 250ms linear;
&:hover {
color: $color2;
border-bottom-color: $color4;
transition: all 100ms linear;
}
}
}
}
.github {
span {
display: inline-block;
vertical-align: bottom;
box-sizing: border-box;
background: darken($color1, 8%) url('/github.png') no-repeat 0 0;
width: 32px;
height: 32px;
background-blend-mode: lighten;
opacity: 0.5;
margin-left: 5px;
}
&:hover {
span {
opacity: 0.8;
}
}
}
.intro {
text-align: center;
padding-top: 115px;
max-width: 600px;
h1 {
padding-top: 60px;
font-size: 26px;
font-weight: 400;
margin-bottom: 30px;
color: $color3;
strong {
font-weight: 500;
color: $color2;
}
}
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 30px;
}
.btn {
margin: 0 auto;
}
}
.hero {
background: darken($color1, 4%);
padding: 30px 0;
text-align: center;
user-select: none;
}
.logo {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
max-width: 230px;
margin-top: -115px;
background: $color1;
border-radius: 100%;
padding: 10px;
z-index: 2;
img {
width: 100%;
height: auto;
}
}
.hero__container {
margin-top: 30px;
margin-bottom: -30px;
position: relative;
z-index: 1;
}
.hero__full, .hero__mobile {
overflow: hidden;
}
.hero__full {
max-width: 800px;
}
.hero__mobile {
max-width: 200px;
margin-left: -100px;
margin-bottom: 0px;
}
.hero__floats {
position: absolute;
max-width: 950px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
img {
height: 200px;
width: auto;
transition: all 0.1s linear;
animation-name: floating;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.delayed img {
animation-delay: 0.2s;
}
.float-2 {
position: absolute;
left: -110px;
top: 50px;
opacity: 0.8;
}
.float-1 {
position: absolute;
right: -120px;
top: 120px;
}
.float-3 {
position: absolute;
left: -60px;
top: 130px;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 4px);
}
to {
transform: translate(0, -0px);
}
}
.btn {
display: block;
width: 200px;
font-size: 14px;
color: $color1;
background: $color2;
text-decoration: none;
border-radius: 4px;
line-height: 36px;
padding: 6px 16px;
box-shadow: 0 2px 6px rgba($color8, 0.3);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1024" height="998.752" viewBox="0, 0, 1024, 998.752">
<g id="Layer_1" transform="translate(0, 0)">
<path d="M512,-0 C229.25,-0 0,229.25 0,512 C0,738.25 146.688,930.125 350.156,997.812 C375.75,1002.5 385.094,986.687 385.094,973.187 C385.094,960.999 384.625,920.625 384.375,877.875 C242,908.812 211.906,817.5 211.906,817.5 C188.594,758.375 155.062,742.625 155.062,742.625 C108.531,710.875 158.592,711.5 158.592,711.5 C209.998,715.062 237.062,764.25 237.062,764.25 C282.75,842.5 356.937,819.875 386.062,806.75 C390.716,773.75 403.966,751.125 418.562,738.375 C304.906,725.438 185.344,681.5 185.344,485.312 C185.344,429.374 205.313,383.75 238,347.906 C232.781,334.906 215.156,282.812 243.062,212.344 C243.062,212.344 286,198.594 383.874,264.844 C424.686,253.438 468.468,247.813 511.999,247.625 C555.499,247.813 599.311,253.5 640.187,264.906 C737.875,198.594 780.875,212.406 780.875,212.406 C808.875,282.937 791.25,334.968 786,347.906 C818.812,383.75 838.625,429.375 838.625,485.312 C838.625,682 718.875,725.312 604.813,738 C623.251,753.875 639.563,785 639.563,832.75 C639.563,901.188 638.875,956.375 638.875,973.25 C638.875,986.875 648.187,1002.812 674.125,997.812 C877.438,930 1024,738.125 1024,512 C1024,229.25 794.75,-0 512,-0 z" fill="#FFFFFF"/>
</g>
</svg>
@import './variables.scss';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: lighten($color1, 4%);
border: 0px none $color5;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($color1, 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($color1, 4%);
}
::-webkit-scrollbar-track {
border: 0px none $color5;
border-radius: 0;
background: rgba($color8, 0.1);
}
::-webkit-scrollbar-track:hover {
background: $color1;
}
::-webkit-scrollbar-track:active {
background: $color1;
}
::-webkit-scrollbar-corner {
background: transparent;
}
body {
font-family: 'Roboto', sans-serif;
background: $color1;
color: lighten($color1, 26%);
font-size: 13px;
line-height: 18px;
font-weight: 400;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none;
}
@import 'App.scss';
@import 'scss/variables.scss';
@import 'scss/reset.scss';
@import 'scss/global.scss';
@import 'scss/App.scss';
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
@import './variables.scss';
$transition-in: 100ms linear;
$transition-out: 250ms linear;
.app {
font-size: 16px;
line-height: 30px;
}
.container {
max-width: 950px;
margin: 0 auto;
}
.navbar {
overflow: hidden;
background-color: mix($darkest, $black);
ul {
list-style: none;
li {
display: inline-block;
vertical-align: bottom;
}
a {
display: flex;
align-content: center;
align-items: center;
color: $lighter;
text-decoration: none;
padding: 12px 16px;
padding-bottom: 10px;
line-height: 32px;
font-weight: 500;
font-size: 14px;
border-bottom: 2px solid transparent;
transition: color $transition-out, border-bottom-color $transition-out;
img.link-logo {
width: 32px;
height: 32px;
opacity: 0.5;
transition: opacity $transition-out;
&.before {
margin-right: 10px;
}
&.after {
margin-left: 10px;
}
}
&.active, &:hover {
color: $lightest;
border-bottom-color: $vibrant;
transition: color $transition-in, border-bottom-color $transition-in;
img.link-logo {
opacity: 0.8;
transition: opacity $transition-in;
}
}
}
}
ul.left {
float: left;
}
ul.right {
float: right;
}
}
.cta {
display: inline-block;
text-align: center;
font-size: 18px;
text-decoration: none;
line-height: 36px;
padding: 6px 16px;
margin-bottom: 10px;
&.button {
font-weight: bold;
color: $darkest;
background: $lighter;
border-radius: 4px;
box-shadow: 0 -5px 10px 0px rgba(0, 0, 0, 0.5);
transition: background-color $transition-out;
&:hover {
background-color: $vibrant;
transition: background-color $transition-in;
}
}
&.secondary {
color: $lighter;
transition: color $transition-out;
&:hover {
color: $lightest;
transition: color $transition-in;
}
}
}
.cta-secondary {
font-size: 18px;
line-height: 36px;
padding: 6px 16px;
}
.intro {
text-align: center;
padding: 30px 0 140px;
$bgBase: mix($darker, $darkest, 20%);
background: linear-gradient( to bottom, $bgBase, $bgBase, $darkest);
color: $lighter;
h1 {
font-size: 36px;
font-weight: 400;
margin: 30px 0;
}
p {
margin-bottom: 30px;
}
strong {
font-weight: 500;
color: $lightest;
}
}
.hero {
position: relative;
margin: -100px auto 0;
// outline: solid 1px red;
width: 800px;
height: 500px;
img {
position: absolute;
display: block;
border-radius: 4px;
box-shadow: 0 -5px 10px 0px rgba(0, 0, 0, 0.2);
}
.desktop {
max-width: 800px;
top: 0;
left: -50px;
}
.mobile {
max-width: 200px;
top: 100px;
right: -50px;
}
.logo {
width: 150px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
.feature {
display: flex;
margin: 60px auto;
align-items: center;
justify-content: space-between;
.text, .visual {
margin: 0 30px;
overflow: hidden;
}
.text {
width: 60%;
}
.visual {
height: 300px;
}
h2 {
color: $vibrant;
font-size: 26px;
margin-bottom: 10px;
}
}
.bottom-cta {
text-align: center;
margin-bottom: 50px;
}
@import './variables.scss';
body {
font-family: 'Roboto', sans-serif;
background: $darkest;
color: $darker;
font-size: 13px;
line-height: 18px;
font-weight: 400;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
box-sizing: border-box;
text-rendering