Commit bc252d2f authored by Eugen Rochko's avatar Eugen Rochko Committed by GitHub

Merge pull request #9 from latrani/master

Stripped down layout to go live along with the Discourse announcement
parents 5cb99272 b9e12df8
......@@ -8,68 +8,72 @@ import mastodonLogo from './assets/mastodon-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
import elefriend from './assets/fluffy-elephant-friend.png';
import tootScreenshot from './assets/toot-screenshot.png';
const App = () => (
<Router>
<div className='app'>
<div className='navbar'>
<div className='container'>
<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 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 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 href='https://github.com/tootsuite/mastodon'>
Fork on Github <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</div>
<ul className='right'>
<li><a href='https://discourse.joinmastodon.org'>Community support</a></li>
<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 href='https://github.com/tootsuite/mastodon'>
Fork on Github <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</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='text'>
<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'>
<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 className='hero'>
<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>
</div>
<div className='feature container'>
<div className='text'>
<img className='right visual' src={elefriend} alt='Mastodon mascot'/>
<div className='left 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='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>
<img className='left visual' src={tootScreenshot} alt='Screenshot of toot interface'/>
<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 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'>
<div className='right visual'/>
<div className='left 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'>
<div className='left visual'/>
<div className='right 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>
......
......@@ -3,19 +3,26 @@
$transition-in: 100ms linear;
$transition-out: 250ms linear;
$content-width: 800px;
$screenshotScale: 0.9;
$phi: 1.6180339887498948482;
.app {
font-size: 16px;
line-height: 30px;
}
.container {
max-width: 950px;
max-width: $content-width;
margin: 0 auto;
}
.navbar {
overflow: hidden;
background-color: mix($darkest, $black);
background-color: $black;
padding: 0 30px;
ul {
list-style: none;
......@@ -119,16 +126,22 @@ $transition-out: 250ms linear;
.intro {
text-align: center;
padding: 30px 0 140px;
padding-top: 30px;
margin-bottom: 120px;
$bgBase: mix($darker, $darkest, 20%);
background: linear-gradient( to bottom, $bgBase, $bgBase, $darkest);
background: $darkest;
color: $lighter;
.text {
width: $content-width;
margin: 0 auto;
}
h1 {
font-size: 36px;
font-weight: 400;
margin: 30px 0;
line-height: 1.2em;
}
p {
......@@ -143,10 +156,10 @@ $transition-out: 250ms linear;
.hero {
position: relative;
margin: -100px auto 0;
// outline: solid 1px red;
width: 800px;
height: 500px;
margin: 30px auto;
padding-bottom: 15px;
width: $content-width;
height: 450px;
img {
position: absolute;
......@@ -156,43 +169,53 @@ $transition-out: 250ms linear;
}
.desktop {
max-width: 800px;
max-width: $content-width * $screenshotScale;
top: 0;
left: -50px;
left: 0;
}
.mobile {
max-width: 200px;
top: 100px;
right: -50px;
max-width: ($content-width / 4) * $screenshotScale;
top: 90px;
right: 0;
}
.logo {
width: 150px;
left: 0;
right: 0;
bottom: 0;
bottom: -75px;
margin: auto;
background-color: $black;
border-radius: 75px;
}
}
.feature {
display: flex;
margin: 60px auto;
margin: 100px auto;
align-items: center;
justify-content: space-between;
.text, .visual {
margin: 0 30px;
overflow: hidden;
.left {
margin-right: 20px;
order: 1;
text-align: left;
}
.right {
margin-left: 20px;
order: 2;
text-align: right;
}
.text {
width: 60%;
width: 80%;
}
.visual {
height: 300px;
width: 20%;
visibility: hidden;
}
h2 {
......@@ -206,3 +229,48 @@ $transition-out: 250ms linear;
text-align: center;
margin-bottom: 50px;
}
@media only screen and (max-width: $content-width) {
.intro {
margin-bottom: 150px;
.text {
width: 90%;
}
.hero {
width: 90%;
height: initial;
padding-bottom: 100px;
}
.desktop {
position: relative;
width: percentage($screenshotScale);
top: 0;
left: 0;
}
.mobile {
width: percentage($screenshotScale/4);
top: percentage($screenshotScale/8);
right: 0;
}
.logo {
width: percentage($screenshotScale/4);
}
}
.feature {
display: block;
.left, .right {
margin: 30px auto;
text-align: center;
}
.visual {
display: none;
}
}
}
@import './variables.scss';
body {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background: $darkest;
background-color: mix($darkest, $black, 75%);
color: $darker;
font-size: 13px;
line-height: 18px;
......
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