Commit 7e4edee4 authored by Eugen Rochko's avatar Eugen Rochko

Improve

parent fac96d0d
...@@ -17,4 +17,4 @@ yarn-debug.log* ...@@ -17,4 +17,4 @@ yarn-debug.log*
yarn-error.log* yarn-error.log*
# no CSSerino # no CSSerino
src/*.css src/**/*.css
...@@ -10,13 +10,15 @@ ...@@ -10,13 +10,15 @@
}, },
"devDependencies": { "devDependencies": {
"node-sass": "^4.5.2", "node-sass": "^4.5.2",
"npm-run-all": "^4.0.2",
"react-scripts": "0.9.5" "react-scripts": "0.9.5"
}, },
"scripts": { "scripts": {
"build-css": "node-sass src/ -o src/", "build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "react-scripts start", "start-js": "react-scripts start",
"build": "react-scripts build", "start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom", "test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject" "eject": "react-scripts eject"
} }
......
import React, { Component } from 'react'; import React from 'react';
import { import {
BrowserRouter as Router, BrowserRouter as Router
Route,
Link
} from 'react-router-dom'; } from 'react-router-dom';
const App = () => ( const App = () => (
...@@ -24,15 +22,16 @@ const App = () => ( ...@@ -24,15 +22,16 @@ const App = () => (
<div className='hero'> <div className='hero'>
<div className='hero__container'> <div className='hero__container'>
<div className='hero__floats'> <div className='hero__floats'>
<img src='/elephant-friend.png' className='float-1' /> <img src='/cloud1.png' className='float-1' alt='' />
<img src='/cloud2.png' className='float-2 delayed' alt='' />
</div> </div>
<img src='/screenshot_full.png' draggable={false} className='hero__full' /> <img src='/screenshot_full.png' draggable={false} className='hero__full' alt='' />
<img src='/screenshot_mobile.png' draggable={false} className='hero__mobile' /> <img src='/screenshot_mobile.png' draggable={false} className='hero__mobile' alt='' />
</div> </div>
</div> </div>
<div className='logo'><img src='/logo.svg' /></div> <div className='logo'><img src='/logo.svg' alt='Mastodon' /></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>
......
@import './variables.scss';
.app { .app {
} }
...@@ -151,26 +153,40 @@ ...@@ -151,26 +153,40 @@
z-index: -1; z-index: -1;
img { img {
height: 200px;
width: auto;
transition: all 0.1s linear;
animation-name: floating; animation-name: floating;
animation-duration: 3.5s; animation-duration: 6s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
.delayed img {
animation-delay: .4s;
}
.float-2 {
position: absolute;
left: -170px;
top: 150px;
}
.float-1 { .float-1 {
position: absolute; position: absolute;
left: -70px; right: -170px;
top: 220px;
} }
} }
@keyframes floating { @keyframes floating {
from { from {
transform:translate(0, 0px); transform: translate(0, 0px);
} }
65% { 65% {
transform:translate(0, 15px); transform: translate(0, 8px);
} }
to { to {
......
$color1: #282c37 !default; // darkest @import './variables.scss';
$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
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500'); @import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
......
$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
This diff is collapsed.
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