Commit fac96d0d authored by Eugen Rochko's avatar Eugen Rochko

Boop

parent 65fbe08b
...@@ -16,3 +16,5 @@ npm-debug.log* ...@@ -16,3 +16,5 @@ npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# no CSSerino
src/*.css
.container {
max-width: 800px;
margin: 0 auto; }
.intro {
text-align: center; }
.intro h1 {
padding-top: 60px;
font-size: 31px;
margin-bottom: 60px; }
.hero {
text-align: center; }
.hero__container {
margin-top: 100px;
margin-bottom: -100px; }
.hero__full, .hero__mobile {
overflow: hidden;
border-radius: 8px 8px 0 0; }
.hero__full {
max-width: 850px; }
.hero__mobile {
max-width: 200px;
margin-left: -100px;
margin-bottom: 0px; }
...@@ -10,26 +10,33 @@ const App = () => ( ...@@ -10,26 +10,33 @@ const App = () => (
<div className='app'> <div className='app'>
<div className='navbar'> <div className='navbar'>
<div className='container'> <div className='container'>
<div className='brand'>Mastodon</div>
<ul> <ul>
<li><a href='#'>Get started</a></li> <li><a href='#'>Get started</a></li>
<li><a href='https://github.com/tootsuite/documentation'>Documentation</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://www.stickermule.com/marketplace/18010-mastodon-fluffy-elephant-friend'>Merch</a></li>
<li><a className='github' href='https://github.com/tootsuite/mastodon' title='Fork on GitHub'><span /></a></li> <li><a className='github' href='https://github.com/tootsuite/mastodon'>Fork on <span /></a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div className='hero'> <div className='hero'>
<div className='hero__container'> <div className='hero__container'>
<div className='hero__floats'>
<img src='/elephant-friend.png' className='float-1' />
</div>
<img src='/screenshot_full.png' draggable={false} className='hero__full' /> <img src='/screenshot_full.png' draggable={false} className='hero__full' />
<img src='/screenshot_mobile.png' draggable={false} className='hero__mobile' /> <img src='/screenshot_mobile.png' draggable={false} className='hero__mobile' />
</div> </div>
</div> </div>
<img src='/logo.svg' className='logo' /> <div className='logo'><img src='/logo.svg' /></div>
<div className='intro container'> <div className='intro container'>
<h1><strong>Mastodon</strong> is a federated social network</h1> <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>
</div> </div>
</div> </div>
</Router> </Router>
......
...@@ -11,6 +11,18 @@ ...@@ -11,6 +11,18 @@
background: darken($color1, 8%); background: darken($color1, 8%);
overflow: hidden; 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 { ul {
list-style: none; list-style: none;
float: right; float: right;
...@@ -43,13 +55,15 @@ ...@@ -43,13 +55,15 @@
.github { .github {
span { span {
display: block; display: inline-block;
vertical-align: bottom;
box-sizing: border-box; box-sizing: border-box;
background: darken($color1, 8%) url('/github.png') no-repeat 0 0; background: darken($color1, 8%) url('/github.png') no-repeat 0 0;
width: 32px; width: 32px;
height: 32px; height: 32px;
background-blend-mode: lighten; background-blend-mode: lighten;
opacity: 0.5; opacity: 0.5;
margin-left: 5px;
} }
&:hover { &:hover {
...@@ -62,19 +76,24 @@ ...@@ -62,19 +76,24 @@
.intro { .intro {
text-align: center; text-align: center;
padding-top: 115px; padding-top: 115px;
padding-bottom: 60px;
h1 { h1 {
padding-top: 60px; padding-top: 60px;
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
margin-bottom: 60px; margin-bottom: 30px;
color: $color3;
strong { strong {
font-weight: 500; font-weight: 500;
color: $color2; color: $color2;
} }
} }
p {
font-size: 16px;
line-height: 20px;
}
} }
.hero { .hero {
...@@ -91,11 +110,22 @@ ...@@ -91,11 +110,22 @@
margin: 0 auto; margin: 0 auto;
max-width: 230px; max-width: 230px;
margin-top: -115px; margin-top: -115px;
background: $color1;
border-radius: 100%;
padding: 10px;
z-index: 2;
img {
width: 100%;
height: auto;
}
} }
.hero__container { .hero__container {
margin-top: 30px; margin-top: 30px;
margin-bottom: -30px; margin-bottom: -30px;
position: relative;
z-index: 1;
} }
.hero__full, .hero__mobile { .hero__full, .hero__mobile {
...@@ -111,3 +141,39 @@ ...@@ -111,3 +141,39 @@
margin-left: -100px; margin-left: -100px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.hero__floats {
position: absolute;
max-width: 950px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
img {
animation-name: floating;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.float-1 {
position: absolute;
left: -70px;
}
}
@keyframes floating {
from {
transform:translate(0, 0px);
}
65% {
transform:translate(0, 15px);
}
to {
transform: translate(0, -0px);
}
}
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
::-webkit-scrollbar {
width: 8px;
height: 8px; }
::-webkit-scrollbar-thumb {
background: #313543;
border: 0px none #ffffff;
border-radius: 50px; }
::-webkit-scrollbar-thumb:hover {
background: #353a49; }
::-webkit-scrollbar-thumb:active {
background: #313543; }
::-webkit-scrollbar-track {
border: 0px none #ffffff;
border-radius: 0;
background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-track:hover {
background: #282c37; }
::-webkit-scrollbar-track:active {
background: #282c37; }
::-webkit-scrollbar-corner {
background: transparent; }
body {
font-family: 'Roboto', sans-serif;
background: #282c37;
color: #606984;
background-size: cover;
background-attachment: fixed;
font-size: 13px;
line-height: 18px;
font-weight: 400;
padding-bottom: 140px;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none; }
.container {
max-width: 950px;
margin: 0 auto; }
.navbar {
background: #17191f;
overflow: hidden; }
.navbar ul {
list-style: none;
float: right; }
.navbar ul li {
display: inline-block;
vertical-align: bottom; }
.navbar ul a {
display: block;
color: #9baec8;
text-decoration: none;
padding: 12px 16px;
padding-bottom: 10px;
line-height: 32px;
font-weight: 500;
font-size: 14px;
border-bottom: 2px solid transparent;
transition: all 250ms linear; }
.navbar ul a:hover {
color: #d9e1e8;
border-bottom-color: #2b90d9;
transition: all 100ms linear; }
.github span {
display: block;
box-sizing: border-box;
background: #17191f url("/github.png") no-repeat 0 0;
width: 32px;
height: 32px;
background-blend-mode: lighten;
opacity: 0.5; }
.github:hover span {
opacity: 0.8; }
.intro {
text-align: center;
padding-top: 115px;
padding-bottom: 60px; }
.intro h1 {
padding-top: 60px;
font-size: 26px;
font-weight: 400;
margin-bottom: 60px; }
.intro h1 strong {
font-weight: 500;
color: #d9e1e8; }
.hero {
background: #1f232b;
padding: 30px 0;
text-align: center;
user-select: none; }
.logo {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
max-width: 230px;
margin-top: -115px; }
.hero__container {
margin-top: 30px;
margin-bottom: -30px; }
.hero__full, .hero__mobile {
overflow: hidden; }
.hero__full {
max-width: 850px; }
.hero__mobile {
max-width: 200px;
margin-left: -100px;
margin-bottom: 0px; }
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