Commit 3044f42d authored by Morgan Nichols's avatar Morgan Nichols

Tweak CSS, make "Get Started" go somewhere

Made the navbar CSS more general so that we can more easily add new
items to it when needed on both left and right.

Also had Get Started links go to instances.mastodon.xyz temporarily,
per discussion in #landing-page on Discord that we should at least
have the Call-to-Action do something while the page is live. Once we
build our own instance-suggester, we will change this link to that.
parent c1d38b31
......@@ -13,17 +13,23 @@ const App = () => (
<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'>Get started</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 Github <img className='github-logo' src={githubLogo} alt='Github Logo'/>
<a href='https://github.com/tootsuite/mastodon'>
Fork on Github <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</li>
</ul>
</div>
</div>
......@@ -37,12 +43,12 @@ const App = () => (
</div>
</div>
<div className='logo'><img src={mastodonLogo} alt='Mastodon logo' /></div>
<div className='hero-logo'><img src={mastodonLogo} alt='Mastodon logo' /></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>
<a href='https://instances.mastodon.xyz' className='btn'>Get started</a>
</div>
</div>
</Router>
......
......@@ -13,21 +13,8 @@
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;
......@@ -35,7 +22,10 @@
}
a {
display: block;
display: flex;
align-content: center;
align-items: center;
color: $color3;
text-decoration: none;
padding: 12px 16px;
......@@ -46,30 +36,39 @@
border-bottom: 2px solid transparent;
transition: all 250ms linear;
&:hover {
img.link-logo {
width: 32px;
height: 32px;
opacity: 0.5;
transition: all 250ms linear;
&.before {
margin-right: 10px;
}
&.after {
margin-left: 10px;
}
}
&.active, &:hover {
color: $color2;
border-bottom-color: $color4;
transition: all 100ms linear;
img.link-logo {
opacity: 0.8;
}
}
}
}
}
.github {
img.github-logo {
vertical-align: bottom;
width: 32px;
height: 32px;
margin-left: 5px;
opacity: 0.5;
transition: all 250ms linear;
ul.left {
float: left;
}
&:hover {
img.github-logo {
opacity: 0.8;
transition: all 100ms linear;
}
ul.right {
float: right;
}
}
......@@ -98,7 +97,7 @@
}
.btn {
margin: 0 auto;
margin: 0 auto 60px;
}
}
......@@ -109,7 +108,7 @@
user-select: none;
}
.logo {
.hero-logo {
position: absolute;
left: 0;
right: 0;
......@@ -207,7 +206,7 @@
.btn {
display: block;
width: 200px;
width: 300px;
font-size: 14px;
color: $color1;
background: $color2;
......
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