Commit ca6bd39d authored by Morgan Nichols's avatar Morgan Nichols

Restore hero

parent 44c3b1ee
......@@ -5,7 +5,7 @@ import {
import githubLogo from './assets/github-logo.svg';
import mastodonLogo from './assets/mastodon-logo.svg';
// import screenshotFull from './assets/screenshot_full.png';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
const App = () => (
......@@ -35,15 +35,16 @@ const App = () => (
</div>
<div className='intro'>
<div className='screenshot'/>
<div className='content'>
<h1>Giving social networking back to <strong>you</strong></h1>
<p>Free, open-source and decentralized, <strong>Mastodon</strong> lets people build the communities that matter to them.</p>
<a href='https://instances.mastodon.xyz' className='cta-button'>Get started</a>
</div>
<h1>Giving social networking back to <strong>you</strong></h1>
<p>Free, open-source and decentralized, <strong>Mastodon</strong> lets people build the communities that matter to them.</p>
<a href='https://instances.mastodon.xyz' className='cta-button'>Get started</a>
</div>
<div className='hero-logo'><img src={mastodonLogo} alt='Mastodon logo' /></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>
<div className='feature container'>
<div className='text'>
......@@ -66,7 +67,9 @@ const App = () => (
</div>
<img className='visual' src={screenshotMobile} draggable={false} alt='' />
</div>
<a href='https://instances.mastodon.xyz' className='cta-button'>Get started</a>
<div className='bottom-cta'>
<a href='https://instances.mastodon.xyz' className='cta-button'>Get started</a>
</div>
</div>
</Router>
);
......
@import './variables.scss';
$transition-in: 100ms linear;
$transition-out: 250ms linear;
.app {
font-size: 16px;
line-height: 30px;
......@@ -34,13 +37,13 @@
font-weight: 500;
font-size: 14px;
border-bottom: 2px solid transparent;
transition: all 250ms linear;
transition: color $transition-out, border-bottom-color $transition-out;
img.link-logo {
width: 32px;
height: 32px;
opacity: 0.5;
transition: all 250ms linear;
transition: opacity $transition-out;
&.before {
margin-right: 10px;
......@@ -54,10 +57,11 @@
&.active, &:hover {
color: $lightest;
border-bottom-color: $vibrant;
transition: all 100ms linear;
transition: color $transition-in, border-bottom-color $transition-in;
img.link-logo {
opacity: 0.8;
transition: opacity $transition-in;
}
}
}
......@@ -73,24 +77,28 @@
}
.cta-button {
display: block;
display: inline-block;
text-align: center;
margin: 0 auto 30px;
width: 300px;
font-size: 14px;
font-size: 18px;
font-weight: bold;
color: $darkest;
background: $lightest;
background: $lighter;
text-decoration: none;
border-radius: 4px;
line-height: 36px;
padding: 6px 16px;
box-shadow: 0 2px 6px rgba($black, 0.3);
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;
}
}
.intro {
text-align: center;
padding: 30px 0 150px;
position: relative;
padding: 30px 0 140px;
$bgBase: mix($darker, $darkest, 20%);
background: linear-gradient( to bottom, $bgBase, $bgBase, $darkest);
......@@ -99,44 +107,51 @@
h1 {
font-size: 36px;
font-weight: 400;
margin-bottom: 30px;
margin: 30px 0;
}
p {
margin-bottom: 60px;
margin-bottom: 30px;
}
strong {
font-weight: 500;
color: $lightest;
}
}
.screenshot {
.hero {
position: relative;
margin: -100px auto 0;
// outline: solid 1px red;
width: 800px;
height: 500px;
img {
position: absolute;
display: block;
border-radius: 4px;
box-shadow: 0 -5px 10px 0px rgba(0, 0, 0, 0.2);
}
.desktop {
max-width: 800px;
top: 0;
width: 100%;
height: 100%;
background-image: url('./assets/screenshot_full.png');
background-repeat: no-repeat;
background-size: 40%;
background-position: center 140px;
z-index: 0;
opacity: 0.3;
filter: blur(1px);
left: -50px;
}
.content {
position: relative;
.mobile {
max-width: 200px;
top: 100px;
right: -50px;
}
}
.hero-logo {
position: relative;
margin: -100px auto -20px;
text-align: center;
img {
.logo {
width: 150px;
height: 150px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
......@@ -165,3 +180,8 @@
margin-bottom: 10px;
}
}
.bottom-cta {
text-align: center;
margin-bottom: 50px;
}
$white: #fff !default; // color5
$lightest: #d9e1e8 !default; // color2
$lighter: #9baec8 !default; // color3
$darkest: #282c37 !default; // color1
$darkest: #1F232B !default; // color1
$black: #000 !default; // color8
$darker: mix($lighter, $darkest);
......
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