Skip to content

Commit 2e85904

Browse files
lorensrlorensr
committed
Rough landing page
1 parent 8f8bdea commit 2e85904

File tree

7 files changed

+356
-24
lines changed

7 files changed

+356
-24
lines changed

‎.eslintrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"no-unused-vars": 0,
1111
"arrow-body-style": 0,
1212
"react/jsx-filename-extension": 0,
13-
"react/react-in-jsx-scope": 0
13+
"react/react-in-jsx-scope": 0,
14+
"react/jsx-closing-bracket-location": [1, "props-aligned"]
1415
}
1516
}

‎components/book-li.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { Component } from 'react'
2+
3+
import Emoji from './emoji'
4+
5+
const BookLI = ({ children }) => {
6+
return (
7+
<li
8+
style={{
9+
listStyle: 'none',
10+
marginBottom: 10,
11+
}}
12+
>
13+
<span
14+
style={{
15+
display: 'flex',
16+
alignItems: 'center',
17+
}}
18+
>
19+
<Emoji name="white_check_mark" />
20+
{ /* <Emoji name="heavy_check_mark" /> */ }
21+
<span
22+
style={{
23+
marginLeft: 15,
24+
}}
25+
>
26+
{children}
27+
</span>
28+
</span>
29+
</li>
30+
)
31+
}
32+
33+
BookLI.propTypes = {
34+
children: React.PropTypes.element.isRequired,
35+
}
36+
37+
export default BookLI

‎components/emoji.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// https://developer.github.com/v3/emojis/
2+
// http://www.webpagefx.com/tools/emoji-cheat-sheet/
3+
import React from 'react'
4+
5+
const Emoji = ({ name, size }) => {
6+
const src = `https://github.global.ssl.fastly.net/images/icons/emoji/${name}.png?v5`
7+
8+
return (
9+
<img
10+
src={src}
11+
alt={name}
12+
style={{
13+
width: size,
14+
height: size,
15+
}}
16+
/>
17+
)
18+
}
19+
20+
Emoji.defaultProps = {
21+
size: '1.5em',
22+
}
23+
24+
Emoji.propTypes = {
25+
name: React.PropTypes.string.isRequired,
26+
size: React.PropTypes.oneOfType([
27+
React.PropTypes.string,
28+
React.PropTypes.number,
29+
]),
30+
}
31+
32+
export default Emoji

‎lib/muitheme.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
3+
import getMuiTheme from 'material-ui/styles/getMuiTheme'
4+
5+
import { fontFamily, color } from './styles'
6+
7+
// overwrite anything in:
8+
// https://github.com/callemall/material-ui/blob/master/src/styles/baseThemes/lightBaseTheme.js
9+
const muiTheme = getMuiTheme({
10+
fontFamily,
11+
palette: {
12+
primary1Color: color,
13+
},
14+
})
15+
16+
export default muiTheme

‎lib/styles.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// import { cyan500 } from 'material-ui/styles/colors'
2+
3+
export const fontFamily = 'Roboto, sans-serif'
4+
// export const fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif'
5+
export const white = '#f2f2f2'
6+
export const color = '#E10098'

‎pages/_document.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import Document, { Head, Main, NextScript } from 'next/document'
2-
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
3-
import getMuiTheme from 'material-ui/styles/getMuiTheme'
4-
import injectTapEventPlugin from 'react-tap-event-plugin'
52

6-
// should fix "Warning: Unknown prop `onTouchTap` on <label> tag."
7-
injectTapEventPlugin()
3+
import { fontFamily, color } from '../lib/styles'
84

95
export default class MyDocument extends Document {
106
static async getInitialProps({ renderPage }) {
@@ -17,7 +13,32 @@ export default class MyDocument extends Document {
1713
<html lang="en">
1814
<Head>
1915
<title>My page</title>
20-
<style dangerouslySetInnerHTML={{ __html: '' }} />
16+
<style
17+
dangerouslySetInnerHTML={{ __html: `
18+
body {
19+
font-family: ${fontFamily};
20+
color: #333;
21+
font-size: 18px;
22+
line-height: 1.7;
23+
}
24+
25+
@media screen and (max-width: 760px) {
26+
body {
27+
font-size: 16px;
28+
}
29+
}
30+
31+
a {
32+
color: ${color};
33+
text-decoration: none;
34+
}
35+
36+
a:hover {
37+
text-decoration: underline;
38+
}
39+
` }}
40+
/>
41+
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
2142
</Head>
2243
<body>
2344
<Main />

0 commit comments

Comments
 (0)