Skip to content

Commit 8a14911

Browse files
mariana-caldasmariana-caldas
committed
Adjusting styling, refactoring Container component to allow reusability
1 parent 2abc839 commit 8a14911

File tree

10 files changed

+148
-222
lines changed

10 files changed

+148
-222
lines changed

‎components/Container.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { forwardRef } from 'react';
21
import containerStyles from '../styles/Container.module.scss';
32

4-
const Container = forwardRef((props, ref) => {
5-
const { className, styles, children } = props;
3+
export default function Container({ className, children }) {
64
return (
75
<div
8-
className={`${className ? className : ''} ${containerStyles.container}`}
9-
styles={styles}
10-
ref={ref}
6+
className={`${containerStyles.container} ${className ? className : ''}`}
117
>
128
{children}
139
</div>
1410
);
15-
});
16-
17-
export default Container;
11+
}

‎components/Nav.js

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -39,57 +39,61 @@ export default function Nav() {
3939

4040
return (
4141
<header className={styles.header} ref={headerRef}>
42-
<Container className={styles.container} ref={containerRef}>
43-
<nav className={styles.nav}>
44-
<div className={styles.nav__logo}>
45-
<Link href="/" passHref>
46-
<a>
47-
<Image
48-
src="/images/svg/logo.svg"
49-
height={115.54}
50-
width={180}
51-
alt="Logo"
52-
/>
53-
</a>
54-
</Link>
55-
</div>
56-
<ul className={`${styles.nav__links} ${active ? styles.active : ''}`}>
57-
{linksNav.map(({ text, href }) => {
58-
if (text !== 'Join us') {
59-
return (
60-
<li className={styles.nav__item}>
61-
<Link href={href}>
62-
<a className={styles.nav__link} title={text}>
63-
{text}
64-
</a>
65-
</Link>
66-
</li>
67-
);
68-
}
69-
})}
70-
<li className={styles.nav__item}>
71-
<ButtonLink
72-
className={`${styles.nav__button} ${
73-
active ? styles.active : ''
74-
}`}
75-
link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
76-
>
77-
Join us
78-
</ButtonLink>
79-
</li>
80-
</ul>
81-
<button
82-
className={`${styles.nav__hamburger} ${
83-
active ? styles.active : ''
84-
}`}
85-
onClick={() => setActive(active => !active)}
86-
aria-label="toggle navigation"
87-
>
88-
<span className={styles.nav__hamburger__bar}></span>
89-
<span className={styles.nav__hamburger__bar}></span>
90-
<span className={styles.nav__hamburger__bar}></span>
91-
</button>
92-
</nav>
42+
<Container>
43+
<div ref={containerRef}>
44+
<nav className={styles.nav}>
45+
<div className={styles.nav__logo}>
46+
<Link href="/" passHref>
47+
<a>
48+
<Image
49+
src="/images/svg/logo.svg"
50+
height={115}
51+
width={180}
52+
alt="Logo"
53+
/>
54+
</a>
55+
</Link>
56+
</div>
57+
<ul
58+
className={`${styles.nav__links} ${active ? styles.active : ''}`}
59+
>
60+
{linksNav.map(({ text, href, id }) => {
61+
if (text !== 'Join us') {
62+
return (
63+
<li className={styles.nav__item} key={id}>
64+
<Link href={href}>
65+
<a className={styles.nav__link} title={text}>
66+
{text}
67+
</a>
68+
</Link>
69+
</li>
70+
);
71+
}
72+
})}
73+
<li className={styles.nav__item}>
74+
<ButtonLink
75+
className={`${styles.nav__button} ${
76+
active ? styles.active : ''
77+
}`}
78+
link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
79+
>
80+
Join us
81+
</ButtonLink>
82+
</li>
83+
</ul>
84+
<button
85+
className={`${styles.nav__hamburger} ${
86+
active ? styles.active : ''
87+
}`}
88+
onClick={() => setActive(active => !active)}
89+
aria-label="toggle navigation"
90+
>
91+
<span className={styles.nav__hamburger__bar}></span>
92+
<span className={styles.nav__hamburger__bar}></span>
93+
<span className={styles.nav__hamburger__bar}></span>
94+
</button>
95+
</nav>
96+
</div>
9397
</Container>
9498
</header>
9599
);

‎components/TwoColumn.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export default function TwoColumn({
5959
className={styles.img}
6060
layout="fill"
6161
objectFit="cover"
62+
priority
6263
/>
6364
</div>
6465
)}

‎pages/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export default function Home() {
1010
return (
1111
<section className={styles.container}>
1212
<div className={styles.inner}>
13-
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
1413
<div className={styles.description}>
14+
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
1515
<p>
1616
Hold our hand and enjoy the road to learn how to start a new
1717
project, the magic behind Github while working in a team

‎public/favicon.ico

-15 KB
Binary file not shown.

‎styles/Card.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
margin: 1.5rem;
66
padding: 1.5rem;
77
border-radius: 1.5rem;
8-
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
8+
box-shadow: $box-shadow;
99
min-width: 28%;
1010
@include desktop {
1111
flex-basis: 28%;

‎styles/Home.module.scss

Lines changed: 14 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,51 @@
11
@import 'mixins';
22
@import 'variables';
33

4-
hr {
5-
&.divider {
6-
border-top: 1px solid $primary-bg-color;
7-
width: 100%;
8-
margin: 4rem 0;
9-
}
10-
}
11-
124
.title {
135
margin: 0;
146
line-height: 1.15;
157
font-size: 2.5rem;
168
text-align: center;
179

18-
a {
19-
text-decoration: none;
20-
21-
&:hover,
22-
&:focus,
23-
&:active {
24-
text-decoration: underline;
25-
}
10+
@include desktop-breakpoint-plus {
11+
font-size: 4.5rem;
2612
}
2713
}
2814

2915
.description {
30-
line-height: 1.5;
3116
font-size: 1.5rem;
3217
text-align: center;
3318
max-width: 90%;
3419
margin: 0 auto;
35-
padding: 2rem 0 4rem;
36-
}
37-
38-
.centerText {
39-
text-align: center;
40-
width: 90%;
41-
margin: 1.5rem auto;
42-
}
43-
44-
.grid {
45-
display: flex;
46-
align-items: center;
47-
justify-content: center;
48-
flex-wrap: wrap;
49-
margin: 3rem auto;
50-
}
51-
52-
.card {
53-
height: 13rem;
54-
max-width: 40%;
55-
margin: 1.5rem;
56-
flex-basis: 45%;
57-
padding: 1.5rem;
58-
text-align: left;
59-
display: flex;
60-
align-items: center;
61-
justify-content: center;
62-
text-decoration: none;
63-
@include transition(color 0.3s ease);
64-
box-shadow: inset 0px 0px 0px 1px rgb(0 0 0 / 15%),
65-
0px 3px 4px 2px rgb(0 0 0 / 10%);
66-
67-
&:hover,
68-
&:focus,
69-
&:active {
70-
color: $primary-content-color;
71-
border-color: $primary-bg-color;
72-
}
73-
74-
p {
75-
margin: 0 1rem;
76-
font-size: 1.125rem;
77-
line-height: 1.5;
78-
text-align: center;
79-
font-weight: bold;
80-
}
81-
}
82-
83-
.learn_more {
84-
padding: 4rem 0;
85-
}
86-
87-
.button {
88-
height: 2.4rem;
89-
width: 8rem;
90-
border-radius: 5px;
91-
background-color: $primary-content-color;
92-
color: $white;
93-
font-size: 0.875rem;
94-
border: none;
95-
text-transform: uppercase;
96-
transition: opacity 0.3s ease;
97-
98-
&:hover {
99-
opacity: 0.6;
100-
cursor: pointer;
101-
}
20+
padding: 5rem 0;
10221
}
10322

10423
.bracket {
10524
left: 0;
10625
position: absolute;
10726
transform: translate(10rem, -5rem);
27+
28+
@include desktop-breakpoint-plus {
29+
transform: translate(50%, -5rem);
30+
width: 30%;
31+
}
32+
33+
@include desktop-breakpoint-minus {
34+
display: none;
35+
}
10836
}
10937

11038
.stick {
11139
right: 0;
11240
position: absolute;
11341
transform: translate(-10rem, -5rem);
114-
}
11542

116-
@include desktop-breakpoint-plus {
117-
.title {
118-
font-size: 4rem;
119-
}
120-
121-
.bracket {
122-
transform: translate(50%, -5rem);
123-
width: 30%;
124-
}
125-
126-
.stick {
43+
@include desktop-breakpoint-plus {
12744
transform: translate(-50%, -5rem);
12845
width: 30%;
12946
}
130-
}
131-
132-
@include desktop-breakpoint-minus {
133-
.bracket {
134-
display: none;
135-
}
13647

137-
.stick {
48+
@include desktop-breakpoint-minus {
13849
display: none;
13950
}
14051
}

0 commit comments

Comments
 (0)