Commit 44c3b1ee authored by Morgan Nichols's avatar Morgan Nichols

Revamp layout, add dummy feature list

parent 3044f42d
......@@ -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 = () => (
......@@ -34,22 +34,39 @@ const App = () => (
</div>
</div>
<div className='hero'>
<div className='hero__container'>
<div className='hero__floats' />
<img src={screenshotFull} draggable={false} className='hero__full' alt='' />
<img src={screenshotMobile} draggable={false} className='hero__mobile' alt='' />
<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>
</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='https://instances.mastodon.xyz' className='btn'>Get started</a>
<div className='feature container'>
<div className='text'>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Luke, we're ready for takeoff. Good luck, Lando When we find Jabba the Hut and that bounty hunter, we'll contact you. I'll meet you at the rendezvous point on Tatooine. Princess, we'll find Han. I promise. Chewie, I'll be waiting for your signal. Take care, you two. May the Force be with you. Ow!</p>
</div>
<img className='visual' src={screenshotMobile} draggable={false} alt='' />
</div>
<div className='feature container'>
<img className='visual' src={screenshotMobile} draggable={false} alt='' />
<div className='text'>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Luke, we're ready for takeoff. Good luck, Lando When we find Jabba the Hut and that bounty hunter, we'll contact you. I'll meet you at the rendezvous point on Tatooine. Princess, we'll find Han. I promise. Chewie, I'll be waiting for your signal. Take care, you two. May the Force be with you. Ow!</p>
</div>
</div>
<div className='feature container'>
<div className='text'>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Luke, we're ready for takeoff. Good luck, Lando When we find Jabba the Hut and that bounty hunter, we'll contact you. I'll meet you at the rendezvous point on Tatooine. Princess, we'll find Han. I promise. Chewie, I'll be waiting for your signal. Take care, you two. May the Force be with you. Ow!</p>
</div>
<img className='visual' src={screenshotMobile} draggable={false} alt='' />
</div>
<a href='https://instances.mastodon.xyz' className='cta-button'>Get started</a>
</div>
</Router>
);
......
......@@ -2,4 +2,5 @@
@import 'scss/variables.scss';
@import 'scss/reset.scss';
@import 'scss/global.scss';
@import 'scss/App.scss';
@import './variables.scss';
.app {
font-size: 16px;
line-height: 30px;
}
.container {
......@@ -10,9 +11,8 @@
}
.navbar {
background: darken($color1, 8%);
overflow: hidden;
background-color: mix($darkest, $black);
ul {
list-style: none;
......@@ -26,7 +26,7 @@
align-content: center;
align-items: center;
color: $color3;
color: $lighter;
text-decoration: none;
padding: 12px 16px;
padding-bottom: 10px;
......@@ -52,8 +52,8 @@
}
&.active, &:hover {
color: $color2;
border-bottom-color: $color4;
color: $lightest;
border-bottom-color: $vibrant;
transition: all 100ms linear;
img.link-logo {
......@@ -72,147 +72,96 @@
}
}
.cta-button {
display: block;
text-align: center;
margin: 0 auto 30px;
width: 300px;
font-size: 14px;
color: $darkest;
background: $lightest;
text-decoration: none;
border-radius: 4px;
line-height: 36px;
padding: 6px 16px;
box-shadow: 0 2px 6px rgba($black, 0.3);
}
.intro {
text-align: center;
padding-top: 115px;
max-width: 600px;
padding: 30px 0 150px;
position: relative;
$bgBase: mix($darker, $darkest, 20%);
background: linear-gradient( to bottom, $bgBase, $bgBase, $darkest);
color: $lighter;
h1 {
padding-top: 60px;
font-size: 26px;
font-size: 36px;
font-weight: 400;
margin-bottom: 30px;
color: $color3;
strong {
font-weight: 500;
color: $color2;
}
}
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 30px;
margin-bottom: 60px;
}
.btn {
margin: 0 auto 60px;
strong {
font-weight: 500;
color: $lightest;
}
}
.hero {
background: darken($color1, 4%);
padding: 30px 0;
text-align: center;
user-select: none;
}
.hero-logo {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
max-width: 230px;
margin-top: -115px;
background: $color1;
border-radius: 100%;
padding: 10px;
z-index: 2;
img {
.screenshot {
position: absolute;
top: 0;
width: 100%;
height: auto;
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);
}
}
.hero__container {
margin-top: 30px;
margin-bottom: -30px;
position: relative;
z-index: 1;
}
.hero__full, .hero__mobile {
overflow: hidden;
}
.hero__full {
max-width: 800px;
}
.hero__mobile {
max-width: 200px;
margin-left: -100px;
margin-bottom: 0px;
.content {
position: relative;
}
}
.hero__floats {
position: absolute;
max-width: 950px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
.hero-logo {
position: relative;
margin: -100px auto -20px;
text-align: center;
img {
height: 200px;
width: auto;
transition: all 0.1s linear;
animation-name: floating;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.delayed img {
animation-delay: 0.2s;
}
.float-2 {
position: absolute;
left: -110px;
top: 50px;
opacity: 0.8;
width: 150px;
height: 150px;
}
}
.float-1 {
position: absolute;
right: -120px;
top: 120px;
}
.feature {
display: flex;
margin: 60px auto;
align-items: center;
justify-content: space-between;
.float-3 {
position: absolute;
left: -60px;
top: 130px;
.text, .visual {
margin: 0 30px;
overflow: hidden;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
.text {
width: 60%;
}
65% {
transform: translate(0, 4px);
.visual {
height: 300px;
}
to {
transform: translate(0, -0px);
h2 {
color: $vibrant;
font-size: 26px;
margin-bottom: 10px;
}
}
.btn {
display: block;
width: 300px;
font-size: 14px;
color: $color1;
background: $color2;
text-decoration: none;
border-radius: 4px;
line-height: 36px;
padding: 6px 16px;
box-shadow: 0 2px 6px rgba($color8, 0.3);
}
@import './variables.scss';
body {
font-family: 'Roboto', sans-serif;
background: $darkest;
color: $darker;
font-size: 13px;
line-height: 18px;
font-weight: 400;
}
@import './variables.scss';
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
......@@ -34,6 +32,10 @@ footer, header, hgroup, menu, nav, section {
body {
line-height: 1;
box-sizing: border-box;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none;
}
ol, ul {
......@@ -54,52 +56,3 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: lighten($color1, 4%);
border: 0px none $color5;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($color1, 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($color1, 4%);
}
::-webkit-scrollbar-track {
border: 0px none $color5;
border-radius: 0;
background: rgba($color8, 0.1);
}
::-webkit-scrollbar-track:hover {
background: $color1;
}
::-webkit-scrollbar-track:active {
background: $color1;
}
::-webkit-scrollbar-corner {
background: transparent;
}
body {
font-family: 'Roboto', sans-serif;
background: $color1;
color: lighten($color1, 26%);
font-size: 13px;
line-height: 18px;
font-weight: 400;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none;
}
$color1: #282c37 !default; // darkest
$color2: #d9e1e8 !default; // lightest
$color3: #9baec8 !default; // lighter
$color4: #2b90d9 !default; // vibrant
$color5: #ffffff !default; // white
$color6: #df405a !default; // error red
$color7: #79bd9a !default; // succ green
$color8: #000000 !default; // black
$white: #fff !default; // color5
$lightest: #d9e1e8 !default; // color2
$lighter: #9baec8 !default; // color3
$darkest: #282c37 !default; // color1
$black: #000 !default; // color8
$darker: mix($lighter, $darkest);
$vibrant: #2b90d9 !default; // color4
$error: #df405a !default; // color6
$success: #79bd9a !default; // color7
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