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

Lines changed: 20 additions & 8 deletions
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

Lines changed: 44 additions & 21 deletions
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

Lines changed: 42 additions & 24 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy