Skip to content

J
joinmastodon
Commit b43b909d authored by Eugen Rochko's avatar Eugen Rochko
Browse files
Options

Improve everything

parent 8144bf01
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 79 deletions
package.json
View file @ b43b909d
......@@ -7,7 +7,8 @@
"react": "^15.5.3",
"react-dom": "^15.5.3",
"react-motion": "^0.4.7",
"react-router-dom": "^4.0.0"
"react-router-dom": "^4.0.0",
"react-snapshot": "^1.1.0"
},
"devDependencies": {
"node-sass": "^4.5.2",
......@@ -19,7 +20,7 @@
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"build": "npm run build-css && react-scripts build && react-snapshot",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
......
src/App.js
View file @ b43b909d
import React from 'react';
import {
BrowserRouter as Router
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Features from './Features';
import Wizard from './Wizard';
import githubLogo from './assets/github-logo.svg';
import mastodonLogo from './assets/mastodon-logo.svg';
......@@ -14,9 +19,6 @@ import motherboardLogo from './assets/motherboard-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
import elefriend from './assets/elephant-friend.png';
import tootScreenshot from './assets/toot-screenshot.png';
import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png';
......@@ -28,9 +30,9 @@ const App = () => (
<div className='navbar container'>
<ul className='left'>
<li>
<a className='brand' href='https://github.com/tootsuite/mastodon'>
<Link className='brand' to='/'>
<img className='link-logo before' src={mastodonLogo} alt='Mastodon Logo'/> Mastodon
</a>
</Link>
</li>
</ul>
......@@ -50,7 +52,7 @@ const App = () => (
<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&rsquo;s largest free, open-source, decentralized microblogging network.</p>
<a href='https://instances.mastodon.xyz' className='cta button'>Get started</a>
<Link to='/wizard' className='cta button'>Get started</Link>
<a href='#' className='cta button alt'>How it works</a>
</div>
......@@ -71,51 +73,21 @@ const App = () => (
<h3>As seen on</h3>
<div className='logo-grid'>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a>
<div>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
</div>
<div>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a>
</div>
</div>
</div>
</div>
<div className='feature container'>
<div className='right visual'/>
<div className='left text'>
<h2>Find your perfect place</h2>
<p>Mastodon is a federated network. Pick an instance that suits you, out of a diverse pool for all sorts of interests, needs, and languages, run by independent people and organizations. Regardless of which one you choose, you can always interact with everyone else.</p>
</div>
</div>
<div className='feature container'>
<div className='left visual'/>
<div className='right text'>
<h2>Built for real conversation</h2>
<p>With 500 characters per post, you get plenty of space to go deep into topics, instead of just making surface-level quips. Built-in support for content and spoiler 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='right visual'/>
<div className='left text'>
<h2>You&rsquo;re a person, not a product</h2>
<p>Mastodon is free, open source software. The development is crowdfunded. All instances are independently owned, hosted, and moderated. There is no monopoly by a single commercial company, no ads, no tracking.</p>
</div>
</div>
<div className='feature container'>
<div className='left visual'/>
<div className='right text'>
<h2>Always within reach</h2>
<p>With multiple apps available for iOS, Android, and every platform you can think of, Mastodon is easy to use everywhere you go. An easy to use and open API ensures a rich ecosystem of 3rd party apps.</p>
</div>
</div>
<div className='bottom-cta'>
<a href='https://instances.mastodon.xyz' className='cta button'>Find an instance</a>
<br/>
or <a href='https://github.com/tootsuite/mastodon' className='cta secondary'>start your own</a>
</div>
<Route path='/' exact component={Features} />
<Route path='/wizard' component={Wizard} />
</div>
</Router>
);
......
src/Features.js 0 → 100644
View file @ b43b909d
import React from 'react';
import { Link } from 'react-router-dom';
const Features = () => (
<div>
<div className='feature container'>
<div className='right visual'><i className='ion-android-globe' /></div>
<div className='left text'>
<h2>Find your perfect place</h2>
<p>Mastodon is a federated network. Pick an instance that suits you, out of a diverse pool for all sorts of interests, needs, and languages, <strong>run by independent people and organizations</strong>. Regardless of which one you choose, <strong>you can always interact with everyone else</strong>.</p>
</div>
</div>
<div className='feature container'>
<div className='left visual'><i className='ion-chatboxes' /></div>
<div className='right text'>
<h2>Built for real conversation</h2>
<p>With <strong>500 characters per post</strong>, you get plenty of space to go deep into topics, instead of just making surface-level quips. Built-in <strong>support for content and spoiler warnings</strong> lets you share sensitive discussions and media with only those who want to see them.</p>
</div>
</div>
<div className='feature container'>
<div className='right visual'><i className='ion-ios-people' /></div>
<div className='left text'>
<h2>You&rsquo;re a person, not a product</h2>
<p>Mastodon is <strong>free, open source software</strong>. The development is crowdfunded. All instances are independently owned, hosted, and moderated. <strong>There is no monopoly by a single commercial company, no ads, no tracking</strong>.</p>
</div>
</div>
<div className='feature container'>
<div className='left visual'><i className='ion-iphone' /></div>
<div className='right text'>
<h2>Always within reach</h2>
<p>With <strong>multiple apps available for iOS, Android, and every platform you can think of</strong>, Mastodon is easy to use everywhere you go. An easy to use and open API ensures a rich ecosystem of 3rd party apps.</p>
</div>
</div>
<div className='bottom-cta'>
<Link to='/wizard' className='cta button'>Find an instance</Link>
<br/>
or <a href='https://github.com/tootsuite/mastodon' className='cta secondary'>start your own</a>
</div>
</div>
);
export default Features;
src/Wizard.js 0 → 100644
View file @ b43b909d
import React from 'react';
const Wizard = () => (
<div>
Wizard
</div>
);
export default Wizard;
src/assets/mastodon-logo.svg
View file @ b43b909d
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="1000" width="1000"><path d="M500 0a500 500 0 0 0-353.553 146.447 500 500 0 1 0 707.106 707.106A500 500 0 0 0 500 0zm-.059 280.05h107.12c-19.071 13.424-26.187 51.016-27.12 73.843V562.05c0 44.32-35.68 80-80 80s-80-35.68-80-80v-202c0-44.32 35.68-80 80-80zm-.441 52c-15.464 0-28 12.537-28 28 0 15.465 12.536 28 28 28s28-12.535 28-28c0-15.463-12.536-28-28-28zm-279.059 7.9c44.32 0 80 35.68 80 80v206.157c.933 22.827 8.049 60.42 27.12 73.842H220.44c-44.32 0-80-35.68-80-80v-200c0-44.32 35.68-80 80-80zm559.12 0c44.32 0 80 35.68 80 80v200c0 44.32-35.68 80-80 80H672.44c19.071-13.424 26.187-51.016 27.12-73.843V419.95c0-44.32 35.68-80 80-80zM220 392c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm560 0c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm-280.5 40.05c-15.464 0-28 12.537-28 28 0 15.465 12.536 28 28 28s28-12.535 28-28c0-15.463-12.536-28-28-28zM220 491.95c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zm560 0c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zM499.5 532c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zM220 591.95c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zm560 0c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28z" fill="#189efc"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="1000" width="1000"><path d="M500 0a500 500 0 0 0-353.553 146.447 500 500 0 1 0 707.106 707.106A500 500 0 0 0 500 0zm-.059 280.05h107.12c-19.071 13.424-26.187 51.016-27.12 73.843V562.05c0 44.32-35.68 80-80 80s-80-35.68-80-80v-202c0-44.32 35.68-80 80-80zm-.441 52c-15.464 0-28 12.537-28 28 0 15.465 12.536 28 28 28s28-12.535 28-28c0-15.463-12.536-28-28-28zm-279.059 7.9c44.32 0 80 35.68 80 80v206.157c.933 22.827 8.049 60.42 27.12 73.842H220.44c-44.32 0-80-35.68-80-80v-200c0-44.32 35.68-80 80-80zm559.12 0c44.32 0 80 35.68 80 80v200c0 44.32-35.68 80-80 80H672.44c19.071-13.424 26.187-51.016 27.12-73.843V419.95c0-44.32 35.68-80 80-80zM220 392c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm560 0c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm-280.5 40.05c-15.464 0-28 12.537-28 28 0 15.465 12.536 28 28 28s28-12.535 28-28c0-15.463-12.536-28-28-28zM220 491.95c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zm560 0c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zM499.5 532c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zM220 591.95c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zm560 0c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28z" fill="#fff"/></svg>
src/index.js
View file @ b43b909d
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-snapshot';
import App from './App';
import './index.css';
ReactDOM.render(
render(
<App />,
document.getElementById('root')
);
src/index.scss
View file @ b43b909d
@import url('https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:500|Roboto:400,500');
@import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
@import 'scss/variables.scss';
@import 'scss/reset.scss';
......
src/scss/App.scss
View file @ b43b909d
......@@ -19,8 +19,9 @@ $phi: 1.6180339887498948482;
}
.navbar {
overflow: hidden;
margin-bottom: 90px;
display: flex;
justify-content: space-between;
ul {
list-style: none;
......@@ -70,7 +71,7 @@ $phi: 1.6180339887498948482;
}
&.brand {
color: $vibrant;
color: $white;
img {
opacity: 1;
......@@ -94,14 +95,6 @@ $phi: 1.6180339887498948482;
padding-right: 0;
}
}
ul.left {
float: left;
}
ul.right {
float: right;
}
}
.cta {
......@@ -243,6 +236,13 @@ $phi: 1.6180339887498948482;
justify-content: center;
flex-direction: row;
& > div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
a {
display: inline-block;
text-decoration: none;
......@@ -282,6 +282,30 @@ $phi: 1.6180339887498948482;
}
}
.brand {
display: inline-block;
position: relative;
z-index: 2;
&::before {
content: "";
display: block;
background: url('assets/elephant-friend-top.png');
position: absolute;
width: 393px;
height: 176px;
z-index: -1;
top: -21px;
left: -28px;
}
&:hover {
&::before {
top: -20px;
}
}
}
.feature {
display: flex;
margin: 100px auto;
......@@ -304,10 +328,20 @@ $phi: 1.6180339887498948482;
width: 80%;
font-size: 16px;
line-height: 24px;
strong {
font-weight: 500;
color: $lighter;
}
}
.visual {
max-width: 20%;
i {
font-size: 128px;
color: lighten($darkest, 30%);
}
}
h2 {
......@@ -363,9 +397,25 @@ $phi: 1.6180339887498948482;
}
@media only screen and (max-width: $content-width) {
.intro {
margin-bottom: 150px;
.navbar {
padding: 0 20px;
}
.as-seen-on .logo-grid {
& > div {
flex-direction: column;
a {
padding: 10px;
}
.logo-product-hunt {
padding: 0;
}
}
}
.intro {
.text {
width: 90%;
}
......@@ -401,6 +451,10 @@ $phi: 1.6180339887498948482;
.feature {
display: block;
&:first-child {
margin-top: 50px;
}
.left, .right {
margin: 30px auto;
text-align: center;
......@@ -412,6 +466,27 @@ $phi: 1.6180339887498948482;
}
}
@media only screen and (max-width: $content-width - 50px) {
.brand::before {
display: none;
}
}
@media only screen and (max-width: 640px) {
.navbar {
display: block;
background: $darkest;
margin-top: -15px;
margin-bottom: 50px;
}
.intro {
.hero {
height: 120px;
}
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
......
yarn.lock
View file @ b43b909d
......@@ -2040,7 +2040,7 @@ expand-range@^1.8.1:
dependencies:
fill-range "^2.1.0"
express@^4.13.3:
express@^4.13.3, express@^4.15.2:
version "4.15.2"
resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
dependencies:
......@@ -2372,6 +2372,10 @@ glob-parent@^2.0.0:
dependencies:
is-glob "^2.0.0"
glob-to-regexp@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
......@@ -2416,14 +2420,10 @@ globule@^1.0.0:
lodash "~4.16.4"
minimatch "~3.0.2"
graceful-fs@4.1.10:
graceful-fs@4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
version "4.1.10"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
......@@ -2590,6 +2590,15 @@ http-proxy-middleware@0.17.3, http-proxy-middleware@~0.17.1:
lodash "^4.17.2"
micromatch "^2.3.11"
http-proxy-middleware@^0.17.4:
version "0.17.4"
resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
dependencies:
http-proxy "^1.16.2"
is-glob "^3.1.0"
lodash "^4.17.2"
micromatch "^2.3.11"
http-proxy@^1.16.2:
version "1.16.2"
resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
......@@ -3180,7 +3189,7 @@ jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
jsdom@^9.9.1:
jsdom@^9.4.5, jsdom@^9.9.1:
version "9.12.0"
resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
dependencies:
......@@ -4415,14 +4424,10 @@ q-io@1.13.2:
qs "^1.2.1"
url2 "^0.0.0"
q@1.4.1:
q@1.4.1, q@^1.0.1, q@^1.1.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
q@^1.0.1, q@^1.1.2:
version "1.5.0"
resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
qs@6.4.0, qs@~6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
......@@ -4491,7 +4496,7 @@ react-dev-utils@^0.5.2:
sockjs-client "1.0.1"
strip-ansi "3.0.1"
react-dom@^15.5.3:
react-dom@^15.3.0, react-dom@^15.5.3:
version "15.5.3"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.3.tgz#2ee127ce942df55da53111ae303316e68072b5c5"
dependencies:
......@@ -4569,7 +4574,20 @@ react-scripts@0.9.5:
optionalDependencies:
fsevents "1.0.17"
react@^15.5.3:
react-snapshot@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-snapshot/-/react-snapshot-1.1.0.tgz#03bf427065d2d8c70db9bd04d4b8364ab30b8675"
dependencies:
connect-history-api-fallback "^1.3.0"
express "^4.15.2"
glob-to-regexp "^0.3.0"
http-proxy-middleware "^0.17.4"
jsdom "^9.4.5"
mkdirp "^0.5.1"
react "^15.3.0"
react-dom "^15.3.0"
react@^15.3.0, react@^15.5.3:
version "15.5.3"
resolved "https://registry.yarnpkg.com/react/-/react-15.5.3.tgz#84055382c025dec4e3b902bb61a8697cc79c1258"
dependencies:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment