Created by: lukejacksonn
I was inspired by the new react docs, to readdress https://github.com/facebookincubator/create-react-app/pull/1472 and give App.js
some love and attention; changing as little as possible but embracing the new theme and adding a bit of responsiveness.
- Updates
.App-header
background-color to#282c34
from reactjs.org - Moves
.App-intro
into.App-header
and addedmin-height: 100vh
to header - Adds
.App-link
CTA highlighted in#61daFb
which links to reactjs.org for reference - Removes
.App-title
andTo get started,
text in.App-intro
for the sake of brevity - Aligns
.App-header
contents vertically and horizontally usingdisplay: flex
- Optimises screen fit using
font-size: calc(10px + 2vmin)
on.App-header
- Increases the size of the rotating icon for dramatic effect
One concern I have about this design is that if a first time user goes to App.js
and enters content below .App-header
then it won't be immediately visible due to the header being 100vh
. A solution to this would be setting the height of the header to 90vh
and setting the background colour of .App
or body
to #20232a
(the darker grey in the theme).
The changes, although superficial, make the first creat-react-app
experience a little more magical and a little more useful. It is in keeping with the react theme and portrays a truer representation of the products build quality and underlying technologies.
I'm aware this PR is massively subjective but let me know what you think. I am more than willing to discuss/make changes if you like the general direction!