Skip to content

Commit d5c0446

Browse files
tannerlinsleytannerlinsley
committed
No logs
1 parent a454216 commit d5c0446

File tree

3 files changed

+122
-125
lines changed

3 files changed

+122
-125
lines changed

‎www/next.config.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,11 @@ Module.prototype.require = function(modulePath) {
1919
return false
2020
}
2121
})) {
22-
console.log(require.resolve(modulePath))
2322
try {
2423
modulePath = resolveFrom(
2524
node_modules,
2625
modulePath
2726
)
28-
console.log('NEW: ', modulePath)
2927
} catch (err) {
3028
//
3129
}

‎www/pages/_app.js

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

33
import App from 'next/app'
4-
// import styled, { createGlobalStyle } from 'styled-components'
4+
import styled, { createGlobalStyle } from 'styled-components'
55
import Head from 'next/head'
66
//
77
import 'react-resizable/css/styles.css'
@@ -13,81 +13,81 @@ if (typeof document === 'undefined') {
1313
React.useLayoutEffect = React.useEffect
1414
}
1515

16-
// const GlobalStyles = createGlobalStyle`
17-
// @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
16+
const GlobalStyles = createGlobalStyle`
17+
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
1818
19-
// body {
20-
// font-family: 'Roboto', sans-serif;
21-
// font-weight: normal;
22-
// font-size: 16px;
23-
// margin: 0;
24-
// padding: 0;
25-
// line-height: 1.5;
26-
// overflow-x: hidden;
27-
// }
28-
// * {
29-
// box-sizing: border-box;
30-
// -webkit-overflow-scrolling: touch;
31-
// }
32-
// #root {
33-
// min-height: 100vh;
34-
// }
19+
body {
20+
font-family: 'Roboto', sans-serif;
21+
font-weight: normal;
22+
font-size: 16px;
23+
margin: 0;
24+
padding: 0;
25+
line-height: 1.5;
26+
overflow-x: hidden;
27+
}
28+
* {
29+
box-sizing: border-box;
30+
-webkit-overflow-scrolling: touch;
31+
}
32+
#root {
33+
min-height: 100vh;
34+
}
3535
36-
// a {
37-
// text-decoration: none;
38-
// color: #108db8;
39-
// }
36+
a {
37+
text-decoration: none;
38+
color: #108db8;
39+
}
4040
41-
// img {
42-
// max-width: 100%;
43-
// }
41+
img {
42+
max-width: 100%;
43+
}
4444
45-
// .react-resizable {
46-
// max-width: 100%;
47-
// }
45+
.react-resizable {
46+
max-width: 100%;
47+
}
4848
49-
// .react-resizable-handle {
50-
// bottom: -10px;
51-
// right: -10px;
52-
// }
49+
.react-resizable-handle {
50+
bottom: -10px;
51+
right: -10px;
52+
}
5353
54-
// pre, code {
55-
// font-family: 'Roboto Mono', monospace;
56-
// user-select: text;
57-
// }
54+
pre, code {
55+
font-family: 'Roboto Mono', monospace;
56+
user-select: text;
57+
}
5858
59-
// pre {
60-
// font-size: 13px;
61-
// border-radius: 5px;
62-
// background: rgba(0,0,0,.03);
63-
// border: 2px solid rgba(0,0,0,.1);
64-
// padding: 1rem;
65-
// }
66-
// }
67-
// `
59+
pre {
60+
font-size: 13px;
61+
border-radius: 5px;
62+
background: rgba(0,0,0,.03);
63+
border: 2px solid rgba(0,0,0,.1);
64+
padding: 1rem;
65+
}
66+
}
67+
`
6868

69-
// const AppStyles = styled('div')`
70-
// min-height: 100vh;
71-
// `
69+
const AppStyles = styled('div')`
70+
min-height: 100vh;
71+
`
7272

7373
export default class MyApp extends App {
7474
render() {
7575
const { Component, pageProps } = this.props
7676

7777
return (
78-
<>
78+
<AppStyles>
7979
<Head>
8080
<title>React Charts Examples</title>
8181
<meta charSet="utf-8" />
8282
<meta name="viewport" content="width=device-width, initial-scale=1" />
8383
</Head>
84-
{/* <GlobalStyles /> */}
84+
<GlobalStyles />
8585
<div>
8686
<Sidebar>
8787
<Component {...pageProps} />
8888
</Sidebar>
8989
</div>
90-
</>
90+
</AppStyles>
9191
)
9292
}
9393
}

‎www/pages/index.js

Lines changed: 70 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,89 @@
11
import React from 'react'
2-
// import styled from 'styled-components'
3-
import Link from 'next/link'
2+
import styled from 'styled-components'
43
//
54

65
import logoImg from '../src/logo.png'
76

8-
// const Styles = styled('div')`
9-
// display: flex;
10-
// flex-direction: column;
11-
// min-height: 100vh;
12-
// align-items: center;
13-
// justify-content: center;
14-
// padding: 5vw;
15-
// text-align: center;
7+
const Styles = styled('div')`
8+
display: flex;
9+
flex-direction: column;
10+
min-height: 100vh;
11+
align-items: center;
12+
justify-content: center;
13+
padding: 5vw;
14+
text-align: center;
1615
17-
// .backgrounds {
18-
// overflow: hidden;
19-
// pointer-events: none;
20-
// position: absolute;
21-
// z-index: -1;
22-
// left: 0;
23-
// top: 0;
24-
// width: 100%;
25-
// height: 100%;
16+
.backgrounds {
17+
overflow: hidden;
18+
pointer-events: none;
19+
position: absolute;
20+
z-index: -1;
21+
left: 0;
22+
top: 0;
23+
width: 100%;
24+
height: 100%;
2625
27-
// .background1,
28-
// .background2 {
29-
// position: absolute;
30-
// left: 0;
31-
// top: 0;
32-
// width: 100%;
33-
// height: 100%;
34-
// }
26+
.background1,
27+
.background2 {
28+
position: absolute;
29+
left: 0;
30+
top: 0;
31+
width: 100%;
32+
height: 100%;
33+
}
3534
36-
// .background1 {
37-
// transform: scale(3) rotate(50deg);
38-
// transform-origin: top left;
39-
// background: linear-gradient(
40-
// to bottom,
41-
// rgba(0, 120, 150, 0.05),
42-
// transparent 15px
43-
// );
44-
// }
35+
.background1 {
36+
transform: scale(3) rotate(50deg);
37+
transform-origin: top left;
38+
background: linear-gradient(
39+
to bottom,
40+
rgba(0, 120, 150, 0.05),
41+
transparent 15px
42+
);
43+
}
4544
46-
// .background2 {
47-
// transform: scale(3) rotate(-25deg);
48-
// transform-origin: top right;
49-
// background: linear-gradient(
50-
// to bottom,
51-
// rgba(0, 120, 150, 0.05),
52-
// transparent 15px
53-
// );
54-
// }
55-
// }
45+
.background2 {
46+
transform: scale(3) rotate(-25deg);
47+
transform-origin: top right;
48+
background: linear-gradient(
49+
to bottom,
50+
rgba(0, 120, 150, 0.05),
51+
transparent 15px
52+
);
53+
}
54+
}
5655
57-
// img {
58-
// width: 100%;
59-
// max-width: 800px;
60-
// height: auto;
61-
// }
56+
img {
57+
width: 100%;
58+
max-width: 800px;
59+
height: auto;
60+
}
6261
63-
// h1 {
64-
// position: absolute;
65-
// opacity: 0;
66-
// pointer-events: none;
67-
// }
62+
h1 {
63+
position: absolute;
64+
opacity: 0;
65+
pointer-events: none;
66+
}
6867
69-
// h2 {
70-
// width: 400px;
71-
// max-width: 100%;
72-
// color: rgba(0, 0, 0, 0.8);
73-
// }
68+
h2 {
69+
width: 400px;
70+
max-width: 100%;
71+
color: rgba(0, 0, 0, 0.8);
72+
}
7473
75-
// p {
76-
// max-width: 750px;
77-
// }
74+
p {
75+
max-width: 750px;
76+
}
7877
79-
// .github {
80-
// margin-top: 2rem;
81-
// width: 150px;
82-
// }
83-
// `
78+
.github {
79+
margin-top: 2rem;
80+
width: 150px;
81+
}
82+
`
8483

8584
export default function Home() {
8685
return (
87-
<div>
86+
<Styles>
8887
<div className="backgrounds">
8988
<div className="background1" />
9089
<div className="background2" />
@@ -100,6 +99,6 @@ export default function Home() {
10099
/>
101100
</a>
102101
</div>
103-
</div>
102+
</Styles>
104103
)
105104
}

0 commit comments

Comments
 (0)