Skip to content

Commit 86adcb3

Browse files
ZahraB21ZahraB21
authored
Merge pull request #55 from MarianaSouza/chore/convert-into-sass
Convert CSS to SASS
2 parents 5165d7b + 031a094 commit 86adcb3

16 files changed

+485
-456
lines changed

‎components/Layout.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Nav from "./Nav";
2-
import styles from "../styles/Layout.module.css";
2+
import styles from "../styles/Layout.module.scss";
33
import Footer from "./Footer";
44

55
export default function Layout({ children }) {
66
return (
77
<>
88
<Nav />
9-
<div className={styles.container}>
10-
<main className={styles.main}>{children}</main>
11-
</div>
9+
<div className={styles.container}>
10+
<main className={styles.main}>{children}</main>
11+
</div>
1212
<Footer />
1313
</>
1414
);

‎components/Nav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from "next/link";
22
import { useEffect, useState } from "react";
3-
import styles from "../styles/Nav.module.css";
3+
import styles from "../styles/Nav.module.scss";
44
import { linksNav } from "../utils/links";
55

66
export default function Nav() {

‎pages/_app.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
// import App from 'next/app'
21
import Layout from "../components/Layout";
32
import "../styles/globals.scss";
43

54
function MyApp({ Component, pageProps }) {
6-
return (
7-
<Layout>
8-
<Component {...pageProps} />
9-
</Layout>
10-
);
5+
return (
6+
<Layout>
7+
<Component {...pageProps} />
8+
</Layout>
9+
);
1110
}
1211

1312
// Only uncomment this method if you have blocking data requirements for

‎pages/about-us.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export default function AboutUs() {
2-
return <h1>Hello from About Us</h1>
2+
return <h1>Hello from About Us</h1>;
33
}

‎pages/contact-us.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export default function ContactUs() {
2-
return <h1>Hello from Contact Us</h1>
2+
return <h1>Hello from Contact Us</h1>;
33
}

‎pages/index.js

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,56 @@
11
import Head from "next/head";
22
import Link from "next/link";
3-
import styles from "../styles/Home.module.css";
3+
import styles from "../styles/Home.module.scss";
44

55
export default function Home() {
6-
return (
7-
<div>
8-
<Head>
9-
<title>Web Dev Path</title>
10-
<link rel="icon" href="/favicon.ico" />
11-
</Head>
12-
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
13-
<div className={styles.description}>
14-
<p>
15-
Hold our hand and enjoy the road to learn how to start a new project,
16-
the magic behind Github while working in a team environment, and much
17-
more...
18-
</p>
19-
</div>
20-
<hr className={styles.divider} />
6+
return (
7+
<div>
8+
<Head>
9+
<title>Web Dev Path</title>
10+
<link rel="icon" href="/favicon.ico" />
11+
</Head>
12+
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
13+
<div className={styles.description}>
14+
<p>
15+
Hold our hand and enjoy the road to learn how to start a new project,
16+
the magic behind Github while working in a team environment, and much
17+
more...
18+
</p>
19+
</div>
20+
<hr className={styles.divider} />
2121

22-
<h2 className={styles.centerText}>
23-
Would you answer "yes" to any of these questions?
24-
</h2>
22+
<h2 className={styles.centerText}>
23+
Would you answer "yes" to any of these questions?
24+
</h2>
2525

26-
<div className={styles.grid}>
27-
<div className={styles.card}>
28-
<p>Are you learning web development and need mentorship?</p>
29-
</div>
30-
<div className={styles.card}>
31-
<p>Are you an experienced web dev who wants to become a mentor?</p>
32-
</div>
33-
<div className={styles.card}>
34-
<p>
35-
Are you a non-profit organization who needs help with a web project?
36-
</p>
37-
</div>
38-
<div className={styles.card}>
39-
<p>
40-
Are you a web dev looking for help or a code buddy for a project?
41-
</p>
42-
</div>
43-
</div>
26+
<div className={styles.grid}>
27+
<div className={styles.card}>
28+
<p>Are you learning web development and need mentorship?</p>
29+
</div>
30+
<div className={styles.card}>
31+
<p>Are you an experienced web dev who wants to become a mentor?</p>
32+
</div>
33+
<div className={styles.card}>
34+
<p>
35+
Are you a non-profit organization who needs help with a web project?
36+
</p>
37+
</div>
38+
<div className={styles.card}>
39+
<p>
40+
Are you a web dev looking for help or a code buddy for a project?
41+
</p>
42+
</div>
43+
</div>
4444

45-
<div>
46-
<h3 className={styles.centerText}>
47-
If so, you are probably in the right place and should learn more about
48-
us
49-
</h3>
50-
</div>
51-
52-
<div className={styles.centerText}>
53-
<button className={styles.button}>
54-
<Link href="/about-us">Learn More</Link>
55-
</button>
56-
</div>
57-
</div>
58-
);
45+
<div className={`${styles.learn_more} ${styles.centerText}`}>
46+
<h3>
47+
If so, you are probably in the right place and should learn more about
48+
us
49+
</h3>
50+
<button className={styles.button}>
51+
<Link href="/about-us">Learn More</Link>
52+
</button>
53+
</div>
54+
</div>
55+
);
5956
}

0 commit comments

Comments
 (0)