Commit 1b3e4b89 authored by Morgan Nichols's avatar Morgan Nichols

Made layout responsive (except for navbar)

parent ddb8294d
......@@ -15,26 +15,24 @@ 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://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'>
......@@ -73,11 +71,11 @@ const App = () => (
</div>
</div>
<div className='feature container'>
<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>
<div className='left visual'/>
</div>
<div className='bottom-cta'>
<a href='https://instances.mastodon.xyz' className='cta button'>Find an instance</a>
......
......@@ -3,7 +3,8 @@
$transition-in: 100ms linear;
$transition-out: 250ms linear;
$content-width: 950px;
$content-width: 800px;
$screenshotScale: 0.9;
$phi: 1.6180339887498948482;
......@@ -20,6 +21,8 @@ $phi: 1.6180339887498948482;
.navbar {
overflow: hidden;
background-color: $black;
padding: 0 30px;
ul {
list-style: none;
......@@ -129,7 +132,7 @@ $phi: 1.6180339887498948482;
color: $lighter;
.text {
width: 800px;
width: $content-width;
margin: 0 auto;
}
......@@ -137,6 +140,7 @@ $phi: 1.6180339887498948482;
font-size: 36px;
font-weight: 400;
margin: 30px 0;
line-height: 1.2em;
}
p {
......@@ -153,8 +157,8 @@ $phi: 1.6180339887498948482;
position: relative;
margin: 30px auto;
padding-bottom: 15px;
width: 800px;
height: 500px;
width: $content-width;
height: 450px;
img {
position: absolute;
......@@ -164,15 +168,15 @@ $phi: 1.6180339887498948482;
}
.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 {
......@@ -225,3 +229,48 @@ $phi: 1.6180339887498948482;
text-align: center;
margin-bottom: 50px;
}
@media only screen and (max-width: $content-width) {
.intro {
margin-bottom: 100px;
.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;
text-align: center;
.left, .right {
margin: 30px auto;
}
div.visual {
height: 0;
}
}
}
@import './variables.scss';
body {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background-color: mix($darkest, $black, 75%);
color: $darker;
......
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