Skip to content

Commit f02011f

Browse files
ZahraB21ZahraB21
committed
Importing the variables and using media query breakpoint variables
1 parent de93bb2 commit f02011f

File tree

2 files changed

+113
-117
lines changed

2 files changed

+113
-117
lines changed

‎styles/Layout.module.scss

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
@import "variables";
2+
13
.container {
2-
min-height: 100vh;
3-
padding: 0 0.5rem;
4-
width: 100%;
5-
margin: 0 auto;
4+
min-height: 100vh;
5+
padding: 0 0.5rem;
6+
width: 100%;
7+
margin: 0 auto;
68
}
79

810
.main {
9-
padding: 3rem 0;
11+
padding: 3rem 0;
1012
}
1113

12-
@media (min-width: 1024px) {
13-
.container {
14-
width: 80%;
15-
}
14+
@media (min-width: $desktop-breakpoint) {
15+
.container {
16+
width: 80%;
17+
}
1618
}

‎styles/Nav.module.scss

Lines changed: 102 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,138 @@
1+
@import "variables";
2+
13
.navContainer {
2-
width: 80%;
3-
position: relative;
4-
margin: 0 auto;
4+
width: 80%;
5+
position: relative;
6+
margin: 0 auto;
57
}
68

79
.header {
8-
width: 100%;
9-
padding: 1em 0;
10+
width: 100%;
11+
padding: 1em 0;
1012
}
1113

1214
.align {
13-
display: flex;
14-
align-items: center;
15+
display: flex;
16+
align-items: center;
1517
}
1618

1719
.nav {
18-
width: 100%;
19-
overflow: hidden;
20-
visibility: hidden;
21-
height: 0;
22-
position: absolute;
23-
font-size: 1em;
20+
width: 100%;
21+
overflow: hidden;
22+
visibility: hidden;
23+
height: 0;
24+
position: absolute;
25+
font-size: 1em;
2426
}
2527

2628
.navToggle {
27-
cursor: pointer;
28-
border: 0;
29-
width: 3em;
30-
height: 3em;
31-
padding: 0;
32-
background-color: transparent;
33-
color: black;
34-
transition: opacity 250ms ease;
35-
position: absolute;
36-
right: 0;
37-
38-
&:hover,
39-
&:focus {
40-
opacity: 0.75;
41-
}
29+
cursor: pointer;
30+
border: 0;
31+
width: 3em;
32+
height: 3em;
33+
padding: 0;
34+
background-color: transparent;
35+
color: black;
36+
transition: opacity 250ms ease;
37+
position: absolute;
38+
right: 0;
39+
40+
&:hover,
41+
&:focus {
42+
opacity: 0.75;
43+
}
4244
}
4345

4446
.hamburger {
45-
width: 50%;
46-
position: relative;
47-
48-
&,
49-
&::before,
50-
&::after {
51-
display: block;
52-
margin: 0 auto;
53-
height: 3px;
54-
background: black;
55-
}
56-
57-
&::before,
58-
&::after {
59-
content: "";
60-
width: 100%;
61-
}
62-
63-
&::before {
64-
transform: translateY(-6px);
65-
}
66-
67-
&::after {
68-
transform: translateY(3px);
69-
}
47+
width: 50%;
48+
position: relative;
49+
50+
&,
51+
&::before,
52+
&::after {
53+
display: block;
54+
margin: 0 auto;
55+
height: 3px;
56+
background: black;
57+
}
58+
59+
&::before,
60+
&::after {
61+
content: "";
62+
width: 100%;
63+
}
64+
65+
&::before {
66+
transform: translateY(-6px);
67+
}
68+
69+
&::after {
70+
transform: translateY(3px);
71+
}
7072
}
7173

72-
73-
// .nav {
74-
// visibility: hidden;
75-
// height: 0;
76-
// position: absolute;
77-
// font-size: 1em;
78-
// }
79-
8074
.navVisible {
81-
visibility: visible;
82-
height: auto;
83-
position: relative;
84-
text-align: start;
85-
padding-top: 1em;
75+
visibility: visible;
76+
height: auto;
77+
position: relative;
78+
text-align: start;
79+
padding-top: 1em;
8680
}
8781

8882
.navList {
89-
margin: 0;
90-
padding: 0;
91-
list-style: none;
83+
margin: 0;
84+
padding: 0;
85+
list-style: none;
9286
}
9387

9488
.navItem {
95-
margin-top: 0.75em;
89+
margin-top: 0.75em;
9690
}
9791

9892
.navLink {
99-
text-decoration: none;
100-
color: black;
93+
text-decoration: none;
94+
color: black;
10195

102-
&:focus,
103-
&:hover {
104-
opacity: 0.65;
105-
}
96+
&:focus,
97+
&:hover {
98+
opacity: 0.65;
99+
}
106100
}
107101

108102
.logo {
109-
border-radius: 50%;
110-
height: 5em;
111-
cursor: pointer;
103+
border-radius: 50%;
104+
height: 5em;
105+
cursor: pointer;
112106

113-
&:hover {
114-
opacity: 0.6;
115-
}
107+
&:hover {
108+
opacity: 0.6;
109+
}
116110
}
117111

118-
@media (min-width: 768px) {
119-
.navToggle {
120-
display: none;
121-
}
122-
123-
.nav {
124-
visibility: visible;
125-
display: flex;
126-
align-items: center;
127-
justify-content: flex-end;
128-
height: auto;
129-
position: relative;
130-
}
131-
132-
.navList {
133-
display: flex;
134-
}
135-
136-
.navItem {
137-
margin: 0 0 0 1.5em;
138-
}
139-
140-
.row {
141-
display: flex;
142-
justify-content: space-between;
143-
}
112+
@media (min-width: $tablet-breakpoint) {
113+
.navToggle {
114+
display: none;
115+
}
116+
117+
.nav {
118+
visibility: visible;
119+
display: flex;
120+
align-items: center;
121+
justify-content: flex-end;
122+
height: auto;
123+
position: relative;
124+
}
125+
126+
.navList {
127+
display: flex;
128+
}
129+
130+
.navItem {
131+
margin: 0 0 0 1.5em;
132+
}
133+
134+
.row {
135+
display: flex;
136+
justify-content: space-between;
137+
}
144138
}

0 commit comments

Comments
 (0)