Skip to content

Commit d17cdb2

Browse files
DZaporozhanDZaporozhan
committed
Merge branch 'main' into homepageFix
2 parents 7139231 + f10d959 commit d17cdb2

File tree

2 files changed

+109
-115
lines changed

2 files changed

+109
-115
lines changed

‎src/components/Header/Navigation/Navigation.styled.jsx

+87-90
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,116 @@
11
import styled from 'styled-components';
22

3-
43
export const NavMobMenu = styled.div`
5-
position: fixed;
4+
position: fixed;
65
right: 0;
76
top: 59px;
87
width: 100vw;
98
height: 100vh;
109
z-index: 2;
1110
overflow: auto;
12-
13-
text-align: center;
14-
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
15-
opacity: ${({ menuToggle }) => (menuToggle ? 1 : 0)};
16-
background-color: ${p => p.theme.colors.background};
17-
display: ${({ menuToggle }) => (menuToggle ? "flex" : "none")};
18-
19-
align-items: center;
20-
flex-direction: column;
21-
22-
@media (min-width: 768px) {
23-
top: 71px;
24-
}
2511
26-
@media (min-width: 1280px) {
12+
text-align: center;
13+
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
14+
opacity: ${({ menuToggle }) => (menuToggle ? 1 : 0)};
15+
background-color: ${p => p.theme.colors.background};
16+
display: ${({ menuToggle }) => (menuToggle ? 'flex' : 'none')};
17+
18+
align-items: center;
19+
flex-direction: column;
20+
21+
@media (min-width: 768px) {
22+
top: 71px;
23+
}
24+
25+
@media (min-width: 1280px) {
2726
display: none;
2827
}
29-
`
28+
`;
3029

3130
export const NavTag = styled.nav`
32-
display: flex;
33-
align-items: center;
34-
justify-content: start;
35-
flex-direction: column-reverse;
36-
padding-top: 46px;
37-
38-
@media (min-width: 768px) {
39-
display: flex;
40-
padding-top: 88px;
41-
}
42-
`
31+
display: flex;
32+
align-items: center;
33+
justify-content: start;
34+
flex-direction: column-reverse;
35+
padding-top: 46px;
36+
37+
@media (min-width: 768px) {
38+
display: flex;
39+
padding-top: 88px;
40+
}
41+
`;
4342
export const NavHeader = styled.nav`
44-
margin-left: auto;
45-
margin-right: 20px;
46-
47-
43+
margin-left: auto;
44+
margin-right: 20px;
4845
49-
@media (min-width: 1280px) {
50-
display: flex;
51-
width: 100%;
52-
margin-right: 0px;
53-
margin-left: 0px;
46+
@media (min-width: 1280px) {
47+
display: flex;
48+
width: 100%;
49+
margin-right: 0px;
50+
margin-left: 0px;
5451
}
55-
`
52+
`;
5653
export const ModalBtn = styled.div`
5754
@media (min-width: 1280px) {
5855
display: none;
5956
}
60-
`
57+
`;
6158

6259
export const NavWrapper = styled.div`
63-
display: flex;
64-
align-items: center;
65-
flex-direction: column;
66-
gap: 40px;
67-
68-
@media (min-width: 768px) {
69-
gap: 60px;
70-
}
71-
72-
@media (min-width: 1280px) {
73-
display: flex;
74-
flex-direction: row;
75-
margin-left: 80px;
76-
width: 40%;
77-
78-
&:not(:last-child) {
79-
gap: 80px; }
80-
}
81-
`
60+
display: flex;
61+
align-items: center;
62+
flex-direction: column;
63+
gap: 40px;
64+
65+
@media (min-width: 768px) {
66+
gap: 60px;
67+
}
68+
69+
@media (min-width: 1280px) {
70+
display: flex;
71+
flex-direction: row;
72+
margin-left: 80px;
73+
width: 40%;
74+
75+
&:not(:last-child) {
76+
gap: 80px;
77+
}
78+
}
79+
`;
8280

8381
export const AuthWrapper = styled.div`
84-
display: flex;
85-
gap: 12px;
86-
margin-bottom: 60px;
87-
88-
@media (min-width: 768px) {
89-
display: none;
90-
}
91-
`
92-
export const TabletWrapper = styled.div`
93-
display: flex;
94-
align-items: center;
95-
justify-content: center;
96-
97-
@media (min-width: 768px) {
98-
gap: 12px;
99-
}
100-
101-
@media (min-width: 1280px) {
102-
margin-right: 0px;
103-
width: 60%;
104-
justify-content: flex-end;
82+
display: flex;
83+
gap: 12px;
84+
margin-bottom: 60px;
85+
86+
@media (min-width: 768px) {
87+
display: none;
10588
}
106-
`
89+
`;
90+
export const TabletWrapper = styled.div`
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
10794
108-
export const Image = styled.img`
109-
border-radius: 50%;
110-
width: 130px;
111-
margin-top: 20px;
112-
margin-bottom: 80px;
95+
@media (min-width: 768px) {
96+
gap: 12px;
97+
}
11398
114-
@media (min-width: 768px) {
99+
@media (min-width: 1280px) {
100+
margin-right: 0px;
101+
width: 60%;
102+
justify-content: flex-end;
103+
}
104+
`;
115105

116-
width: 200px;
117-
margin-top: 60px;
118-
}
119-
`
106+
export const Image = styled.img`
107+
border-radius: 50%;
108+
width: 130px;
109+
margin-top: 20px;
110+
margin-bottom: 80px;
111+
112+
@media (min-width: 768px) {
113+
width: 200px;
114+
margin-top: 60px;
115+
}
116+
`;

‎src/pages/Homepage/Homepage.styled.jsx

+22-25
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import backgroundImageTablet from './images/background-tablet-min.png';
44
import backgroundImageDeskV2 from './images/backgroundImageDesk-V2-1x.png';
55
import backgroundImageDeskV22x from './images/backgroundImageDesk-V2-2x.png';
66

7-
import girtWithDogMob1x from "./images/girlWithDog_1x-mobile-min.png"
8-
import girtWithDogMob2x from "./images/girlWithDog_2x-mobile-min.png"
9-
import girtWithDogTab1x from "./images/girlWithDog_1x-tablet-min.png"
10-
import girtWithDogTab2x from "./images/girlWithDog_2x-tablet-min.png"
11-
import girtWithDogDesk1x from "./images/girlWithDog_1x-desktop-min.png"
12-
import girtWithDogDesk2x from "./images/girlWithDog_2x-desktop-min.png"
13-
import heart from "./images/heart-min.png"
14-
7+
import girtWithDogMob1x from './images/girlWithDog_1x-mobile-min.png';
8+
import girtWithDogMob2x from './images/girlWithDog_2x-mobile-min.png';
9+
import girtWithDogTab1x from './images/girlWithDog_1x-tablet-min.png';
10+
import girtWithDogTab2x from './images/girlWithDog_2x-tablet-min.png';
11+
import girtWithDogDesk1x from './images/girlWithDog_1x-desktop-min.png';
12+
import girtWithDogDesk2x from './images/girlWithDog_2x-desktop-min.png';
13+
import heart from './images/heart-min.png';
1514

1615
export const Main = styled.main`
1716
margin: 0 auto;
@@ -36,37 +35,35 @@ export const Text = styled.h1`
3635
}
3736
3837
@media screen and (min-width: 1280px) {
39-
padding: 40px 0 0 16px;
40-
max-width: 604px;
41-
margin-right: auto;
38+
padding: 40px 0 0 16px;
39+
max-width: 604px;
40+
margin-right: auto;
4241
}
4342
`;
4443

4544
export const Background = styled.section`
46-
background: url(${girtWithDogMob1x}), url(${backgroundImageMob}) ;
45+
background: url(${girtWithDogMob1x}), url(${backgroundImageMob});
4746
height: calc(100vh - 59px);
4847
background-position: bottom, bottom -10px right -200px;
4948
background-repeat: no-repeat;
5049
51-
@media (min-device-pixel-ratio: 2),
50+
@media (min-device-pixel-ratio: 2),
5251
(min-resolution: 192dpi),
5352
(min-resolution: 2dppx) {
5453
background-image: url(${girtWithDogMob2x}), url(${backgroundImageMob});
5554
}
5655
5756
@media screen and (min-width: 768px) {
5857
background-image: url(${girtWithDogTab1x}), url(${backgroundImageTablet});
59-
background-position: bottom, 22% calc(9vh + 100%) ;
58+
background-position: bottom, 22% calc(9vh + 100%);
6059
background-repeat: no-repeat;
6160
height: calc(100vh - 75px);
62-
6361
6462
@media (min-device-pixel-ratio: 2),
6563
(min-resolution: 192dpi),
6664
(min-resolution: 2dppx) {
6765
background-image: url(${girtWithDogTab2x}), url(${backgroundImageTablet});
6866
}
69-
7067
}
7168
7269
/* @media screen and (min-width: 1024px) {
@@ -75,40 +72,41 @@ export const Background = styled.section`
7572
background-repeat: no-repeat;
7673
background-size: contain;
7774
height: calc(100vh - 99px);
78-
} */
75+
} */
7976
8077
@media screen and (min-width: 1280px) {
8178
margin-top: 60px;
82-
background: url(${girtWithDogDesk1x}), url(${backgroundImageDeskV2});
79+
background: url(${girtWithDogDesk1x}), url(${backgroundImageDeskV2});
8380
background-position: bottom right, bottom -10px right -25px;
8481
background-repeat: no-repeat;
8582
background-size: contain;
8683
height: calc(100vh - 130px);
8784
88-
&:after {
85+
&:after {
8986
content: '';
9087
position: absolute;
9188
width: 92px;
9289
height: 89px;
9390
background-image: url(${heart});
9491
top: calc(50% - 200px);
9592
left: calc(50% + 80px);
96-
}
93+
}
9794
98-
@media (min-device-pixel-ratio: 2),
95+
@media (min-device-pixel-ratio: 2),
9996
(min-resolution: 192dpi),
10097
(min-resolution: 2dppx) {
101-
background-image: url(${girtWithDogDesk2x}), url(${backgroundImageDeskV22x});
98+
background-image: url(${girtWithDogDesk2x}),
99+
url(${backgroundImageDeskV22x});
102100
}
103101
}
104-
`;
102+
`;
105103

106104
export const SectionWrapper = styled.div`
107105
width: 100%;
108106
margin-right: auto;
109107
margin-left: auto;
110108
@media screen and (min-width: 320px) {
111-
width: 320px
109+
width: 320px;
112110
}
113111
@media screen and (min-width: 768px) {
114112
width: 768px;
@@ -117,4 +115,3 @@ export const SectionWrapper = styled.div`
117115
width: 1280px;
118116
}
119117
`;
120-

0 commit comments

Comments
 (0)