Commit 65fbe08b authored by Eugen Rochko's avatar Eugen Rochko

Basic layout

parent 1c3bb364
......@@ -4,15 +4,20 @@
"private": true,
"dependencies": {
"react": "^15.5.3",
"react-dom": "^15.5.3"
"react-dom": "^15.5.3",
"react-motion": "^0.4.7",
"react-router-dom": "^4.0.0"
},
"devDependencies": {
"node-sass": "^4.5.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",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
\ No newline at end of file
}
......@@ -13,7 +13,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Join Mastodon</title>
</head>
<body>
<div id="root"></div>
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="1000" width="1000"><path d="M500 0a500 500 0 0 0-353.553 146.447 500 500 0 1 0 707.106 707.106A500 500 0 0 0 500 0zm-.059 280.05h107.12c-19.071 13.424-26.187 51.016-27.12 73.843V562.05c0 44.32-35.68 80-80 80s-80-35.68-80-80v-202c0-44.32 35.68-80 80-80zm-.441 52c-15.464 0-28 12.537-28 28 0 15.465 12.536 28 28 28s28-12.535 28-28c0-15.463-12.536-28-28-28zm-279.059 7.9c44.32 0 80 35.68 80 80v206.157c.933 22.827 8.049 60.42 27.12 73.842H220.44c-44.32 0-80-35.68-80-80v-200c0-44.32 35.68-80 80-80zm559.12 0c44.32 0 80 35.68 80 80v200c0 44.32-35.68 80-80 80H672.44c19.071-13.424 26.187-51.016 27.12-73.843V419.95c0-44.32 35.68-80 80-80zM220 392c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm560 0c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm-280.5 40.05c-15.464 0-28 12.537-28 28 0 15.465 12.536 28 28 28s28-12.535 28-28c0-15.463-12.536-28-28-28zM220 491.95c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zm560 0c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zM499.5 532c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zM220 591.95c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28zm560 0c-15.464 0-28 12.535-28 28 0 15.463 12.536 28 28 28s28-12.537 28-28c0-15.465-12.536-28-28-28z" fill="#189efc"/></svg>
\ No newline at end of file
.App {
text-align: center;
}
.container {
max-width: 800px;
margin: 0 auto; }
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.intro {
text-align: center; }
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.intro h1 {
padding-top: 60px;
font-size: 31px;
margin-bottom: 60px; }
.App-intro {
font-size: large;
}
.hero {
text-align: center; }
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.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; }
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
const App = () => (
<Router>
<div className='app'>
<div className='navbar'>
<div className='container'>
<ul>
<li><a href='#'>Get started</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 className='github' href='https://github.com/tootsuite/mastodon' title='Fork on GitHub'><span /></a></li>
</ul>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
<div className='hero'>
<div className='hero__container'>
<img src='/screenshot_full.png' draggable={false} className='hero__full' />
<img src='/screenshot_mobile.png' draggable={false} className='hero__mobile' />
</div>
</div>
<img src='/logo.svg' className='logo' />
<div className='intro container'>
<h1><strong>Mastodon</strong> is a federated social network</h1>
</div>
</div>
</Router>
);
export default App;
.app {
}
.container {
max-width: 950px;
margin: 0 auto;
}
.navbar {
background: darken($color1, 8%);
overflow: hidden;
ul {
list-style: none;
float: right;
li {
display: inline-block;
vertical-align: bottom;
}
a {
display: block;
color: $color3;
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;
&:hover {
color: $color2;
border-bottom-color: $color4;
transition: all 100ms linear;
}
}
}
}
.github {
span {
display: block;
box-sizing: border-box;
background: darken($color1, 8%) url('/github.png') no-repeat 0 0;
width: 32px;
height: 32px;
background-blend-mode: lighten;
opacity: 0.5;
}
&:hover {
span {
opacity: 0.8;
}
}
}
.intro {
text-align: center;
padding-top: 115px;
padding-bottom: 60px;
h1 {
padding-top: 60px;
font-size: 26px;
font-weight: 400;
margin-bottom: 60px;
strong {
font-weight: 500;
color: $color2;
}
}
}
.hero {
background: darken($color1, 4%);
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;
}
body {
@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;
font-family: sans-serif;
}
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; }
$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 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: 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%);
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;
}
@import 'App.scss';
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