Skip to content

Commit fd03d4f

Browse files
author
swyx
committed
css
1 parent 50b2e6a commit fd03d4f

File tree

3 files changed

+106
-53
lines changed

3 files changed

+106
-53
lines changed

‎public/index.html

+20-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
710
<!--
811
manifest.json provides metadata used when your web app is added to the
912
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1013
-->
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
17+
<link
18+
href="https://fonts.googleapis.com/css?family=Lato:100"
19+
rel="stylesheet"
20+
type="text/css"
21+
/>
22+
<link
23+
href="https://fonts.googleapis.com/css?family=Lato:100italic"
24+
rel="stylesheet"
25+
type="text/css"
26+
/>
1327
<!--
1428
Notice the use of %PUBLIC_URL% in the tags above.
1529
It will be replaced with the URL of the `public` folder during the build.
@@ -22,9 +36,7 @@
2236
<title>React App</title>
2337
</head>
2438
<body>
25-
<noscript>
26-
You need to enable JavaScript to run this app.
27-
</noscript>
39+
<noscript> You need to enable JavaScript to run this app. </noscript>
2840
<div id="root"></div>
2941
<!--
3042
This HTML file is a template.

‎src/App.css

+44-21
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,54 @@
22
text-align: center;
33
}
44

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 40vmin;
5+
.title {
6+
color: #d44b15;
7+
text-align: center;
8+
background-color: #e5e4e4;
9+
/* font-size: 1em; */
10+
font-family: Lato, serif;
11+
margin-top: 0px;
12+
}
13+
14+
.title-r1 {
15+
line-height: 1em;
16+
font-size: 7em;
17+
font-weight: 100;
818
}
919

10-
.App-header {
11-
background-color: #282c34;
12-
min-height: 100vh;
13-
display: flex;
14-
flex-direction: column;
15-
align-items: center;
16-
justify-content: center;
17-
font-size: calc(10px + 2vmin);
18-
color: white;
20+
.title > span {
21+
color: #fff;
22+
font-size: 2em;
23+
font-style: italic;
24+
vertical-align: bottom;
25+
margin: 0 -0.3em;
26+
}
27+
pre {
28+
text-align: left;
29+
overflow-x: scroll;
30+
overflow-y: hidden;
1931
}
2032

21-
.App-link {
22-
color: #61dafb;
33+
nav {
34+
background: #ffe259; /* fallback for old browsers */
35+
background: -webkit-linear-gradient(
36+
to right,
37+
#ffa751,
38+
#ffe259
39+
); /* Chrome 10-25, Safari 5.1-6 */
40+
background: linear-gradient(
41+
to right,
42+
#ffa751,
43+
#ffe259
44+
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
45+
padding: 1rem;
46+
font-size: 2em;
47+
font-family: Lato, serif;
48+
font-weight: bold;
49+
margin-bottom: 1rem;
2350
}
2451

25-
@keyframes App-logo-spin {
26-
from {
27-
transform: rotate(0deg);
28-
}
29-
to {
30-
transform: rotate(360deg);
31-
}
52+
nav a {
53+
color: brown;
54+
text-decoration: none;
3255
}

‎src/App.js

+42-24
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,18 @@ function Dashboard() {
9696
return (
9797
<div>
9898
<h3>This is a Protected Dashboard!</h3>
99-
{!isConfirmedUser && <pre>You have not confirmed your email.</pre>}
99+
{!isConfirmedUser && (
100+
<pre>
101+
You have not confirmed your email. Please confirm it before you ping
102+
the API.
103+
</pre>
104+
)}
100105
<hr />
101106
<div>
102-
You can try pinging our authenticated API here. If you are logged in,
103-
you should be able to see a `user` info here.
107+
<p>You can try pinging our authenticated API here.</p>
108+
<p>
109+
If you are logged in, you should be able to see a `user` info here.
110+
</p>
104111
<button onClick={handler}>Ping authenticated API</button>
105112
<pre>{JSON.stringify(msg, null, 2)}</pre>
106113
</div>
@@ -111,7 +118,8 @@ function Nav() {
111118
const { isLoggedIn } = React.useContext(IdentityContext);
112119
return (
113120
<nav>
114-
<Link to="/">Home</Link> |<Link to="dashboard">Dashboard</Link> |
121+
<Link to="/">Home</Link> | <Link to="dashboard">Dashboard</Link>
122+
{' | '}
115123
<span>
116124
{isLoggedIn ? <Logout /> : <Link to="login">Log In/Sign Up</Link>}
117125
</span>
@@ -132,26 +140,36 @@ function App() {
132140
return (
133141
<IdentityContext.Provider value={identity}>
134142
<div className="App">
135-
<h1>Netlify Identity + Reach Router demo</h1>
136-
<label>
137-
<a href="https://www.netlify.com/docs/identity/">Netlify Identity</a>{' '}
138-
Instance:{' '}
139-
<input
140-
type="text"
141-
placeholder="your instance here e.g. https://unruffled-roentgen-04c3b8.netlify.com"
142-
value={url}
143-
onChange={handler}
144-
size={50}
145-
/>
146-
{window.location.hostname === 'localhost' ? (
147-
<pre>WARNING: this demo doesn't work on localhost</pre>
148-
) : (
149-
<pre>
150-
your instance here e.g.
151-
https://unruffled-roentgen-04c3b8.netlify.com
152-
</pre>
153-
)}
154-
</label>
143+
<div className="Appheader">
144+
<h1 className="title">
145+
Netlify Identity <span>&</span> Reach Router
146+
</h1>
147+
<label>
148+
<a href="https://www.netlify.com/docs/identity/">
149+
Netlify Identity
150+
</a>{' '}
151+
Instance:{' '}
152+
<input
153+
type="text"
154+
placeholder="your instance here e.g. https://unruffled-roentgen-04c3b8.netlify.com"
155+
value={url}
156+
onChange={handler}
157+
size={50}
158+
/>
159+
<div>
160+
<div style={{ display: 'inline-block' }}>
161+
{window.location.hostname === 'localhost' ? (
162+
<pre>WARNING: this demo doesn't work on localhost</pre>
163+
) : (
164+
<pre>
165+
your instance here e.g.
166+
https://unruffled-roentgen-04c3b8.netlify.com
167+
</pre>
168+
)}
169+
</div>
170+
</div>
171+
</label>
172+
</div>
155173
<Nav />
156174
<Router>
157175
<Home path="/" />

0 commit comments

Comments
 (0)