Skip to content

Commit b38abcb

Browse files
Lisofffaalsakhaev
Lisofffa
authored and
alsakhaev
committed
fix: update adaptive styles
1 parent 92239e7 commit b38abcb

File tree

4 files changed

+87
-38
lines changed

4 files changed

+87
-38
lines changed

‎website/src/components/HomePage/ExamplesFirstSection.module.scss‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@
5050
.labelImg {
5151
position: absolute;
5252

53+
&--bottom-1-tablet,
54+
&--top-1-tablet {
55+
display: none;
56+
}
57+
5358
&--bottom-1 {
5459
left: 10em;
5560
bottom: -1.5em;
@@ -157,7 +162,7 @@
157162
&--top-2 {
158163
left: auto;
159164
right: 2em;
160-
bottom: 25em;
165+
bottom: 23em;
161166
}
162167

163168
&--bottom-2 {
@@ -177,6 +182,25 @@
177182
display: none;
178183
}
179184

185+
&--bottom-1-tablet,
186+
&--top-1-tablet {
187+
display: block;
188+
189+
}
190+
191+
&--bottom-1-tablet {
192+
width: 9.375rem;
193+
left: 5em;
194+
bottom: 7em;
195+
}
196+
197+
&--top-1-tablet {
198+
width: 15rem;
199+
left: auto;
200+
right: 8em;
201+
bottom: 12em;
202+
}
203+
180204
&--bottom-2 {
181205
right: -4em;
182206
top: 4em;
@@ -202,7 +226,7 @@
202226

203227
&.reverse {
204228
flex-direction: column-reverse;
205-
margin-top: 2.5rem;
229+
margin-top: 0;
206230
}
207231

208232
.content {
@@ -230,6 +254,17 @@
230254

231255
@media (max-width: 58.75rem) {
232256

257+
.labelImg {
258+
&--bottom-1-tablet {
259+
bottom: 5em;
260+
}
261+
262+
&--top-1-tablet {
263+
right: 5em;
264+
bottom: 10em;
265+
}
266+
}
267+
233268
.content,
234269
.imageContainer {
235270
max-width: 26.25rem;
@@ -246,6 +281,7 @@
246281

247282
&--top-2 {
248283
right: -1em;
284+
bottom: 20em;
249285
}
250286

251287
&--bottom-2 {

‎website/src/components/HomePage/ExamplesFirstSection.tsx‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ export const ExamplesFirstSection = () => {
1313

1414
const addToExampleBlocksRef = (el: HTMLDivElement | null, index: number) => {
1515
if (el) {
16-
gsap.set(el.querySelector(`.${styles.imageContainer}`), {
17-
opacity: 0,
18-
y: 50
16+
gsap.set(el.querySelector(`.${styles.imageContainer}`), {
17+
opacity: 0,
18+
y: 50
1919
});
2020
exampleBlocksRef.current[index] = el;
2121
}
@@ -48,8 +48,8 @@ export const ExamplesFirstSection = () => {
4848
});
4949
},
5050
{
51-
threshold: 0.4,
52-
rootMargin: '0px 0px -150px 0px'
51+
threshold: 0.4,
52+
rootMargin: '0px 0px -150px 0px'
5353
}
5454
);
5555

@@ -65,7 +65,7 @@ export const ExamplesFirstSection = () => {
6565
return (
6666
<section className={styles.wrapper}>
6767
<h2 className={styles.title}>
68-
for example
68+
for example
6969
</h2>
7070

7171
<div className={styles.examplesContainer}>
@@ -90,26 +90,40 @@ export const ExamplesFirstSection = () => {
9090
<h3 className={styles.exampleTitle}>{example.title}</h3>
9191
<p className={styles.exampleDescription}>{example.description}</p>
9292
</div>
93-
<div className={cn(styles.label,styles['label--top'], index % 2 == 0 && styles['label--top-2'], index % 2 !== 0 && styles['label--top-1'])}>
94-
<Label title={example.labelTop.label} subtitle={example.labelTop.subLabel}/>
95-
</div>
96-
<ThemeImage
97-
width={500}
98-
height={61}
99-
alt={example.title}
100-
src={`icons/home/arrow-example-${index + 1}.svg`}
101-
className={cn(styles.labelImg,index % 2 !== 0 && styles['labelImg--top-1'],index % 2 == 0 && styles['labelImg--top-2'])}
102-
/>
103-
<ThemeImage
104-
width={500}
105-
height={61}
106-
alt={example.title}
107-
src={`icons/home/arrow-example-${index + 1}-bottom.svg`}
108-
className={cn(styles.labelImg,index % 2 !== 0 && styles['labelImg--bottom-1'],index % 2 == 0 && styles['labelImg--bottom-2'])}
109-
/>
110-
<div className={cn(styles.label,styles['label--bottom'], index % 2 == 0 && styles['label--bottom-2'],index % 2 !== 0 && styles['label--bottom-1'])}>
111-
<Label title={example.labelBottom.label} subtitle={example.labelBottom.subLabel}/>
112-
</div>
93+
<div className={cn(styles.label, styles['label--top'], index % 2 == 0 && styles['label--top-2'], index % 2 !== 0 && styles['label--top-1'])}>
94+
<Label title={example.labelTop.label} subtitle={example.labelTop.subLabel} />
95+
</div>
96+
<ThemeImage
97+
width={500}
98+
height={61}
99+
alt={example.title}
100+
src={`icons/home/arrow-example-${index + 1}.svg`}
101+
className={cn(styles.labelImg, index % 2 !== 0 && styles['labelImg--top-1'], index % 2 == 0 && styles['labelImg--top-2'])}
102+
/>
103+
<ThemeImage
104+
width={500}
105+
height={61}
106+
alt={example.title}
107+
src={`icons/home/arrow-example-${index + 1}-bottom.svg`}
108+
className={cn(styles.labelImg, index % 2 !== 0 && styles['labelImg--bottom-1'], index % 2 == 0 && styles['labelImg--bottom-2'])}
109+
/>
110+
{index % 2 !== 0 && <ThemeImage
111+
width={500}
112+
height={61}
113+
alt={example.title}
114+
src={`icons/home/arrow-tablet-right.svg`}
115+
className={cn(styles.labelImg, styles['labelImg--top-1'], styles['labelImg--top-1-tablet'])}
116+
/>}
117+
{index % 2 !== 0 && <ThemeImage
118+
width={500}
119+
height={61}
120+
alt={example.title}
121+
src={`icons/home/arrow-tablet-left.svg`}
122+
className={cn(styles.labelImg, styles['labelImg--bottom-1'], styles['labelImg--bottom-1-tablet'])}
123+
/>}
124+
<div className={cn(styles.label, styles['label--bottom'], index % 2 == 0 && styles['label--bottom-2'], index % 2 !== 0 && styles['label--bottom-1'])}>
125+
<Label title={example.labelBottom.label} subtitle={example.labelBottom.subLabel} />
126+
</div>
113127
</div>
114128
))}
115129
</div>

‎website/src/components/HomePage/ExamplesSection.module.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,9 @@
4444
&:hover {
4545
border-radius: 0.625rem;
4646
border: 1px solid var(--black-48);
47-
background: radial-gradient(
48-
66.37% 55.29% at 49.88% 40.83%,
49-
var(--white-t02) 0%,
50-
var(--white-t05) 100%
51-
);
47+
background: radial-gradient(66.37% 55.29% at 49.88% 40.83%,
48+
var(--white-t02) 0%,
49+
var(--white-t05) 100%);
5250
box-shadow:
5351
0px 0.6875rem 1.5625rem 0px var(--black-t1),
5452
0px 0.1875rem 0.1875rem 0px var(--black-t09),
@@ -160,10 +158,11 @@
160158

161159
.img {
162160
width: 100%;
161+
max-width: 100%;
163162
height: auto;
164163

165164
img {
166-
width: calc(100% - 1.25rem) !important;
165+
width: 100%;
167166
}
168167
}
169-
}
168+
}

‎website/src/pages/home/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ const Home = () => {
1616
>
1717
<div className={styles.wrapper}>
1818
<HeroSection />
19-
<RevolutionarySection/>
20-
<ExamplesFirstSection/>
21-
<ExamplesSection />
19+
<RevolutionarySection />
20+
<ExamplesFirstSection />
2221
<HowItWorksSection />
22+
<ExamplesSection />
2323
<FeaturesSection />
2424
<GetStartedSection />
2525
</div>

0 commit comments

Comments
 (0)