Commit 78f8a9c5 authored by Eugen Rochko's avatar Eugen Rochko

Small adjustments

parent bc252d2f
......@@ -57,6 +57,7 @@ const App = () => (
<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>
<div className='feature container'>
<img className='left visual' src={tootScreenshot} alt='Screenshot of toot interface'/>
<div className='right text'>
......@@ -64,6 +65,7 @@ const App = () => (
<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='right visual'/>
<div className='left text'>
......@@ -71,6 +73,7 @@ const App = () => (
<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>
<div className='feature container'>
<div className='left visual'/>
<div className='right text'>
......@@ -78,10 +81,11 @@ const App = () => (
<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>
or <a href='https://github.com/tootsuite/mastodon' className='cta secondary'>start your own</a>
</div>
</div>
</Router>
......
......@@ -93,26 +93,23 @@ $phi: 1.6180339887498948482;
margin-bottom: 10px;
&.button {
font-weight: bold;
font-weight: 500;
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;
background-color: $lightest;
}
}
&.secondary {
color: $lighter;
transition: color $transition-out;
padding-left: 0;
padding-right: 0;
&:hover {
color: $lightest;
transition: color $transition-in;
}
}
}
......@@ -121,7 +118,6 @@ $phi: 1.6180339887498948482;
font-size: 18px;
line-height: 36px;
padding: 6px 16px;
}
.intro {
......@@ -186,8 +182,10 @@ $phi: 1.6180339887498948482;
right: 0;
bottom: -75px;
margin: auto;
background-color: $black;
border-radius: 75px;
background: $darkest;
padding: 10px;
border-radius: 85px;
box-shadow: none;
}
}
......
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