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

Improve

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