Skip to content

Commit 35b48a0

Browse files
mariana-caldasmariana-caldas
committed
Adjust footer social media spaces with <Image /> component
1 parent 3d2d0a9 commit 35b48a0

File tree

3 files changed

+145
-151
lines changed

3 files changed

+145
-151
lines changed

‎components/Footer.js

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ import Image from "next/image";
77
export default function Footer() {
88
return (
99
<footer className={footerStyles.footer}>
10-
<div
11-
className={footerStyles.container}
12-
>
10+
<div className={footerStyles.container}>
1311
<div className={footerStyles.columnLeft}>
1412
<ul className={footerStyles.footerList}>
1513
{linksNav.map((link) => (
1614
<li className={footerStyles.footerItem} key={link.href}>
17-
<Link href={link.href} >
15+
<Link href={link.href}>
1816
<a title={link.text}>{link.text}</a>
1917
</Link>
2018
</li>
2119
))}
2220
</ul>
23-
<Image width={77} height={72}
21+
<Image
22+
width={77}
23+
height={72}
2424
className={footerStyles.logo}
2525
src="/images/web-dev-path-logo-small.png"
2626
alt="Logo"
@@ -32,27 +32,22 @@ export default function Footer() {
3232
<p className={footerStyles.text}>
3333
Get the answer to the most common questions directly to your email
3434
</p>
35-
< NewsletterSubscribe />
35+
<NewsletterSubscribe />
3636
<p>*Unsubscribe anytime</p>
3737
</div>
3838
<div className={footerStyles.socialMedia}>
3939
{linksSocial.map((link) => (
40-
<section className={footerStyles.socialMedia}>
41-
<Link href={link.href} key={link.text}>
42-
<Image width={32} height={32}
43-
src={link.src}
44-
alt={link.text}
45-
/>
46-
</Link>
47-
</section>
40+
<Link href={link.href} key={link.text} passHref>
41+
<a>
42+
<Image width={32} height={32} src={link.src} alt={link.text} />
43+
</a>
44+
</Link>
4845
))}
4946
</div>
5047
</div>
5148
</div>
5249
<div className={footerStyles.copyright}>
53-
<p>
54-
Web Dev Path {new Date().getFullYear()}. All rights reserved.
55-
</p>
50+
<p>Web Dev Path {new Date().getFullYear()}. All rights reserved.</p>
5651
</div>
5752
</footer>
5853
);

‎components/Nav.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,18 @@ export default function Nav() {
2323

2424
return (
2525
<header className={styles.header}>
26-
<div
27-
className={`${styles.navContainer} ${styles.row}`}
28-
>
26+
<div className={`${styles.navContainer} ${styles.row}`}>
2927
<div className={styles.align}>
30-
<Link href="/">
31-
<Image width={86} height={80}
32-
className={styles.logo}
33-
src="/images/web-dev-path-logo-small.png"
34-
alt="Logo"
35-
/>
28+
<Link href="/" passHref>
29+
<a>
30+
<Image
31+
width={86}
32+
height={80}
33+
className={styles.logo}
34+
src="/images/web-dev-path-logo-small.png"
35+
alt="Logo"
36+
/>
37+
</a>
3638
</Link>
3739
<button
3840
className={styles.navToggle}
@@ -47,7 +49,9 @@ export default function Nav() {
4749
{linksNav.map((link) => (
4850
<li className={styles.navItem} key={link.href}>
4951
<Link href={link.href}>
50-
<a className={styles.navLink} title={link.text}>{link.text}</a>
52+
<a className={styles.navLink} title={link.text}>
53+
{link.text}
54+
</a>
5155
</Link>
5256
</li>
5357
))}

‎styles/Footer.module.scss

Lines changed: 119 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -2,158 +2,153 @@
22
@import "variables";
33

44
.footer {
5-
width: 100%;
6-
background-color: $primary-bg-color;
5+
width: 100%;
6+
background-color: $primary-bg-color;
77
}
88

99
.footerList {
10-
list-style: none;
11-
padding: 0;
10+
list-style: none;
11+
padding: 0;
1212
}
1313

1414
.container {
15-
border-bottom: 1px solid $primary-bg-color;
16-
max-width: 80%;
17-
margin: 0 auto;
18-
padding: 2rem 0;
15+
border-bottom: 1px solid $primary-bg-color;
16+
max-width: 80%;
17+
margin: 0 auto;
18+
padding: 2rem 0;
1919
}
2020

2121
.columnLeft {
22-
display: flex;
23-
justify-content: space-between;
24-
align-items: center;
22+
display: flex;
23+
justify-content: space-between;
24+
align-items: center;
2525
}
2626

2727
.footerItem {
28-
+ .footerItem {
29-
margin-top: 0.5rem;
30-
}
31-
32-
&:hover,
33-
&:focus {
34-
color: $accent-color;
35-
}
28+
+ .footerItem {
29+
margin-top: 0.5rem;
30+
}
31+
32+
&:hover,
33+
&:focus {
34+
color: $accent-color;
35+
}
3636
}
3737

3838
.logo {
39-
border-radius: 50%;
40-
height: 4.5em;
41-
cursor: pointer;
39+
border-radius: 50%;
40+
height: 4.5em;
41+
cursor: pointer;
4242

43-
&:hover {
44-
opacity: 0.6;
45-
}
43+
&:hover {
44+
opacity: 0.6;
45+
}
4646
}
4747

4848
.subscribe {
49-
h2 {
50-
margin-bottom: 0.8rem;
51-
font-size: 1.8rem;
52-
}
53-
54-
p {
55-
margin-top: 0.2rem;
56-
font-size: 0.8rem;
57-
color: $accent-color;
58-
}
59-
60-
.text {
61-
font-size: 1rem;
62-
color: $primary-content-color;
63-
}
64-
65-
input {
66-
height: 2.4rem;
67-
width: 65%;
68-
border-radius: 5px 0 0 5px;
69-
text-indent: 5%;
70-
border: 1px solid $primary-bg-color;
71-
}
72-
73-
button {
74-
height: 2.4rem;
75-
width: 35%;
76-
border-radius: 0 5px 5px 0;
77-
background-color: $accent-color;
78-
color: $white;
79-
font-size: 0.7rem;
80-
border: 1px solid $accent-color;
81-
text-transform: uppercase;
82-
@include transition(opacity 0.3s ease);
83-
84-
&:hover {
85-
opacity: 0.6;
86-
cursor: pointer;
87-
}
88-
}
49+
h2 {
50+
margin-bottom: 0.8rem;
51+
font-size: 1.8rem;
52+
}
53+
54+
p {
55+
margin-top: 0.2rem;
56+
font-size: 0.8rem;
57+
color: $accent-color;
58+
}
59+
60+
.text {
61+
font-size: 1rem;
62+
color: $primary-content-color;
63+
}
64+
65+
input {
66+
height: 2.4rem;
67+
width: 65%;
68+
border-radius: 5px 0 0 5px;
69+
text-indent: 5%;
70+
border: 1px solid $primary-bg-color;
71+
}
72+
73+
button {
74+
height: 2.4rem;
75+
width: 35%;
76+
border-radius: 0 5px 5px 0;
77+
background-color: $accent-color;
78+
color: $white;
79+
font-size: 0.7rem;
80+
border: 1px solid $accent-color;
81+
text-transform: uppercase;
82+
@include transition(opacity 0.3s ease);
83+
84+
&:hover {
85+
opacity: 0.6;
86+
cursor: pointer;
87+
}
88+
}
8989
}
9090

9191
.socialMedia {
92-
margin: 1.8rem 0 1rem;
93-
display: flex;
94-
justify-content: center;
92+
margin: 1.8rem 0 1rem;
93+
display: flex;
94+
justify-content: center;
9595

96-
+ .socialMedia {
97-
margin-left: 1rem;
98-
}
96+
img {
97+
padding-left: 20px !important;
9998

100-
img {
101-
padding: 10px;
102-
103-
&:hover {
104-
opacity: 65%;
105-
}
106-
}
99+
&:hover {
100+
opacity: 65%;
101+
}
102+
}
107103
}
108104

109105
.copyright {
110-
font-size: 0.8rem;
111-
color: $accent-color;
112-
text-align: center;
113-
margin: 0 auto;
114-
width: 80%;
115-
padding: 0.5rem 0;
106+
font-size: 0.8rem;
107+
color: $accent-color;
108+
text-align: center;
109+
margin: 0 auto;
110+
width: 80%;
111+
padding: 0.5rem 0;
116112
}
117113

118114
@media (min-width: $tablet-breakpoint) {
119-
.container {
120-
display: flex;
121-
justify-content: space-between;
122-
}
123-
124-
.columnLeft {
125-
display: flex;
126-
flex-direction: column;
127-
}
128-
129-
.columnRight {
130-
width: 55%;
131-
display: flex;
132-
flex-direction: column;
133-
}
134-
135-
.subscribe {
136-
h2 {
137-
margin-top: 0.5rem;
138-
}
139-
140-
button {
141-
font-size: 0.875rem;
142-
width: 30%;
143-
}
144-
145-
input {
146-
width: 70%;
147-
}
148-
}
149-
150-
.socialMedia {
151-
justify-content: flex-end;
152-
margin: 1rem 1rem 0.5rem 0;
153-
}
154-
155-
.copyright {
156-
text-align: left;
157-
}
115+
.container {
116+
display: flex;
117+
justify-content: space-between;
118+
}
119+
120+
.columnLeft {
121+
display: flex;
122+
flex-direction: column;
123+
}
124+
125+
.columnRight {
126+
width: 55%;
127+
display: flex;
128+
flex-direction: column;
129+
}
130+
131+
.subscribe {
132+
h2 {
133+
margin-top: 0.5rem;
134+
}
135+
136+
button {
137+
font-size: 0.875rem;
138+
width: 30%;
139+
}
140+
141+
input {
142+
width: 70%;
143+
}
144+
}
145+
146+
.socialMedia {
147+
justify-content: flex-end;
148+
margin: 1rem 1rem 0.5rem 0;
149+
}
150+
151+
.copyright {
152+
text-align: left;
153+
}
158154
}
159-

0 commit comments

Comments
 (0)