Skip to content

Commit 31806a7

Browse files
lorensrlorensr
committed
Get mobile looking nice, fixes #6 
1 parent 190e8fc commit 31806a7

File tree

3 files changed

+105
-35
lines changed

3 files changed

+105
-35
lines changed

‎components/emoji.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { PropTypes } from 'react'
44
import stylePropType from 'react-style-proptype'
55

6-
const Emoji = ({ name, size, style, ...props }) => {
6+
const Emoji = ({ name, size, style, className, ...props }) => {
77
const src = `https://github.global.ssl.fastly.net/images/icons/emoji/${name}.png?v5`
88

99
return (
@@ -15,7 +15,7 @@ const Emoji = ({ name, size, style, ...props }) => {
1515
height: size,
1616
...style,
1717
}}
18-
className="emoji"
18+
className={`emoji ${className}`}
1919
{...props}
2020
/>
2121
)
@@ -24,10 +24,12 @@ const Emoji = ({ name, size, style, ...props }) => {
2424
Emoji.defaultProps = {
2525
size: '1.5em',
2626
style: {},
27+
className: '',
2728
}
2829

2930
Emoji.propTypes = {
3031
name: PropTypes.string.isRequired,
32+
className: PropTypes.string,
3133
style: stylePropType,
3234
size: PropTypes.oneOfType([
3335
PropTypes.string,

‎css/raw.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,18 @@ a:hover {
3030
3131
.form-container {
3232
margin-top: 30px;
33+
width: 500px;
3334
}
3435
@media (max-height: 825px) {
3536
.form-container {
3637
margin-top: 10px;
3738
}
3839
}
40+
@media (max-width: ${iPadMaxW}px) {
41+
.form-container {
42+
width: 90vw;
43+
}
44+
}
3945
4046
main.-landing {
4147
display: flex;
@@ -50,6 +56,10 @@ main.-landing {
5056
.book-title {
5157
margin: 5vh 0 15vh 0;
5258
}
59+
.by-authors .authors {
60+
display: flex;
61+
align-items: center;
62+
}
5363
@media (max-width: ${iPadMaxW}px) {
5464
.landing-header {
5565
width: 100vw;
@@ -72,6 +82,22 @@ main.-landing {
7282
.landing-main {
7383
padding-top: 20px;
7484
}
85+
86+
.landing-main > p {
87+
margin-left: 2vw;
88+
}
89+
90+
.by-authors .authors {
91+
flex-direction: column;
92+
align-items: flex-start;
93+
margin-left: 20px;
94+
height: 27vw;
95+
justify-content: space-around;
96+
}
97+
98+
.by-authors span.-and {
99+
display: none
100+
}
75101
}
76102
77103
.ripple-ball {
@@ -89,13 +115,59 @@ main.-landing {
89115
width: 200px;
90116
height: 200px;
91117
}
118+
@media (max-width: ${iPadMaxW}px) {
119+
#logo > svg {
120+
width: 40vw;
121+
height: 40vw;
122+
margin-top: 10vw;
123+
}
124+
}
125+
92126
#logo > svg path:not(#logo-outline) {
93127
fill: rgba(0,0,0,0);
94128
}
95129
#logo-outline {
96130
fill: ${white};
97131
}
98132
133+
.book-title > h1 {
134+
font-size: 4vw;
135+
}
136+
.book-title > h2 {
137+
font-size: 2.5vw;
138+
}
139+
.book-title > h2 > img {
140+
margin: 0 0 3px 15px;
141+
}
142+
.by-authors {
143+
font-size: 1.3vw;
144+
}
145+
@media (max-width: ${iPadMaxW}px) {
146+
.book-title > h1 {
147+
font-size: 8vw;
148+
}
149+
150+
.book-title > h2 {
151+
font-size: 5vw;
152+
}
153+
154+
.book-title > h2 > img {
155+
margin: 0 0 0 5px;
156+
width: 7vw !important;
157+
height: 7vw !important;
158+
}
159+
160+
.by-authors {
161+
font-size: 4vw;
162+
}
163+
164+
.by-authors img {
165+
width: 10vw !important;
166+
height: 10vw !important;
167+
}
168+
}
169+
170+
99171
#apple-logo * {
100172
fill: #aaaaaa;
101173
}

‎pages/index.js

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,6 @@ class Index extends Component {
153153
<div className="book-title">
154154
<h1
155155
style={{
156-
fontSize: '4vw',
157156
fontWeight: 400,
158157
margin: '0 0 20px 0',
159158
textAlign: 'center',
@@ -167,18 +166,13 @@ class Index extends Component {
167166
alignItems: 'center',
168167
justifyContent: 'center',
169168
fontWeight: 300,
170-
fontSize: '2.5vw',
171169
color: white,
172170
}}
173171
>
174172
{"It's the new REST"}
175173
<Emoji
176174
name="sparkles"
177175
size={50}
178-
style={{
179-
marginLeft: 15,
180-
marginBottom: 3,
181-
}}
182176
/>
183177
</h2>
184178
</div>
@@ -187,35 +181,38 @@ class Index extends Component {
187181
style={{
188182
display: 'flex',
189183
alignItems: 'center',
190-
fontSize: '1.3vw',
191184
}}
192185
>
193186
By
194-
<a
195-
href="https://twitter.com/helferjs"
196-
style={styles.avatarLink}
197-
className="author-link"
198-
>
199-
<Avatar
200-
src="https://pbs.twimg.com/profile_images/705848506536210432/Gonh3JNx.jpg"
201-
style={styles.avatar}
202-
size={50}
203-
/>
204-
Jonas Helfer
205-
</a>
206-
and
207-
<a
208-
href="https://twitter.com/lorendsr"
209-
style={styles.avatarLink}
210-
className="author-link"
211-
>
212-
<Avatar
213-
src="http://lorensr.me/img/loren-sq.png"
214-
style={styles.avatar}
215-
size={50}
216-
/>
217-
Loren Sands-Ramshaw
218-
</a>
187+
<div className="authors">
188+
<a
189+
href="https://twitter.com/helferjs"
190+
style={styles.avatarLink}
191+
className="author-link"
192+
>
193+
<Avatar
194+
src="https://pbs.twimg.com/profile_images/705848506536210432/Gonh3JNx.jpg"
195+
style={styles.avatar}
196+
size={50}
197+
/>
198+
Jonas Helfer
199+
</a>
200+
<span className="-and">
201+
and
202+
</span>
203+
<a
204+
href="https://twitter.com/lorendsr"
205+
style={styles.avatarLink}
206+
className="author-link"
207+
>
208+
<Avatar
209+
src="http://lorensr.me/img/loren-sq.png"
210+
style={styles.avatar}
211+
size={50}
212+
/>
213+
Loren Sands-Ramshaw
214+
</a>
215+
</div>
219216
</div>
220217
</Paper>
221218
<section
@@ -377,7 +374,6 @@ class Index extends Component {
377374
flexDirection: 'column',
378375
alignItems: 'center',
379376
justifyContent: 'center',
380-
width: 500,
381377
opacity: 0,
382378
paddingTop: 10,
383379
paddingBottom: 10,

0 commit comments

Comments
 (0)