Commit 5c0a0ac0 authored by Eugen Rochko's avatar Eugen Rochko

Move all to single page, update OpenGraph tags

parent 56682556
......@@ -15,9 +15,12 @@
-->
<title>Giving social networking back to you - The Mastodon Project</title>
<meta property="og:title" content="Join The Mastodon Project" />
<meta property="og:description" content="Giving social networking back to you. 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." />
<meta property="og:title" content="Mastodon" />
<meta property="og:description" content="Mastodon is an open source decentralized social network - by the people for the people. Join the federation and take back control of your social media!" />
<meta property="og:type" content="website" />
<meta property='og:image' content='%PUBLIC_URL%/preview.jpg' />
<meta property='og:image:width' content='400' />
<meta property='og:image:height' content='400' />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@MastodonProject" />
......
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
......@@ -52,8 +51,8 @@ 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>
<Link to='/wizard' className='cta button'>Get started</Link>
<a href='#' className='cta button alt'>How it works</a>
<a href='#getting-started' className='cta button'>Get started</a>
<a href='#how-it-works' className='cta button alt'>How it works</a>
</div>
<div className='hero'>
......@@ -86,8 +85,15 @@ const App = () => (
</div>
</div>
<Route path='/' exact component={Features} />
<Route path='/wizard' component={Wizard} />
<Features />
<Wizard />
<div className='bottom-cta'>
<div className='container'>
<p>If you are interested in running your own instance &mdash; for your friends, family or organization &mdash; you can get started by reading the installation documentation. You only host your own users and the content that they subscribe to.</p>
<a href='https://github.com/tootsuite/documentation#running-mastodon' className='cta button alt'>Read the docs</a>
</div>
</div>
</div>
</Router>
);
......
import React from 'react';
import { Link } from 'react-router-dom';
const Features = () => (
<div>
<div id='features'>
<div className='feature container'>
<div className='right visual'><i className='ion-android-globe' /></div>
<div className='left text'>
......@@ -34,12 +33,6 @@ const Features = () => (
<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>
);
......
......@@ -13,7 +13,7 @@ export default class Wizard extends React.Component {
const { instances } = this.props;
return (
<div className='wizard-page'>
<div className='wizard-page' id='getting-started'>
<h2>Instance picker</h2>
<p>Each instance is a separate, independently owned gateway into the fediverse. You can talk to your friends regardless of which one you choose, but they have different moderation policies and interest groups.</p>
......@@ -31,9 +31,6 @@ export default class Wizard extends React.Component {
)}
</Scrollbars>
</div>
<p>If you are interested in running your own instance &mdash; for your friends, family or organization &mdash; you can get started by reading the installation documentation. You only host your own users and the content that they subscribe to.</p>
<p><a href='https://github.com/tootsuite/documentation#running-mastodon' className='cta button alt'>Read the docs</a></p>
</div>
);
}
......
......@@ -6,7 +6,7 @@ const WizardRow = ({ instance }) => {
let stabilityColor, stabilityLabel,
populationColor, populationLabel;
if (instance.uptime > 0.98) {
if (instance.uptime > 0.95) {
stabilityLabel = 'Stable';
stabilityColor = 'green';
} else if (instance.uptime > 0.50) {
......@@ -29,12 +29,12 @@ const WizardRow = ({ instance }) => {
}
return (
<div className='wizard-row'>
<a href={`https://${instance.name}/about`} target='_blank' rel='noopener' className='wizard-row'>
<div className='wizard-column'>{instance.name}</div>
<div className='wizard-column'><span className={`indicator-text ${stabilityColor}`}><i className={`indicator ${stabilityColor}`} /> {stabilityLabel}</span></div>
<div className='wizard-column'><span className={`indicator-text ${populationColor}`}><i className={`indicator ${populationColor}`} /> {populationLabel}</span></div>
<div className='wizard-column'>{theme}</div>
</div>
</a>
);
};
......
@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 url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
@import 'scss/variables.scss';
@import 'scss/reset.scss';
......
......@@ -392,8 +392,12 @@ $phi: 1.6180339887498948482;
}
.bottom-cta {
text-align: center;
margin-bottom: 50px;
background: darken($darkest, 4%);
padding: 30px 0;
p {
margin-bottom: 30px;
}
}
@media only screen and (max-width: $content-width) {
......
......@@ -3,6 +3,7 @@
.wizard-page {
max-width: 800px;
margin: 100px auto;
margin-bottom: 0;
h2 {
font-family: 'Montserrat', sans-serif;
......@@ -45,6 +46,8 @@
.wizard-row {
display: flex;
font-size: 14px;
text-decoration: none;
color: inherit;
&:nth-child(even) {
background: lighten($darkest, 2%);
......@@ -53,6 +56,11 @@
&:hover {
color: $lightest;
}
&:focus {
background: mix($darkest, $vibrant);
color: $white;
}
}
.wizard-column {
......
......@@ -56,3 +56,7 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
a {
outline: 0;
}
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