Skip to content

Commit 50cb007

Browse files
SylvainCorlaySylvainCorlay
authored
Merge pull request #284 from HaudinFlorence/update-notebook-link-banner
Update Notebook.link banner.
2 parents a1eb04c + b107065 commit 50cb007

File tree

11 files changed

+2361
-300
lines changed

11 files changed

+2361
-300
lines changed

‎src/components/home/Hero/Banner.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,35 @@ import LinkToNotebookLink from './LinkToNotebookLink';
55

66
export default function Banner() {
77
return (
8-
<div className={styles.banner_container}>
9-
<div className={styles.banner_text_overlay}>
10-
<div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
11-
<div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
12-
<LinkToNotebookLink label={"Get started"}/>
8+
<div>
9+
<div className={styles.banner_container_small}>
10+
<div className={styles.banner_text_overlay}>
11+
<div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
12+
<div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
13+
<LinkToNotebookLink label={"Get started"} />
14+
</div>
15+
</div>
16+
<div className={styles.banner_container_medium}>
17+
18+
<div className={styles.banner_text_overlay}>
19+
<div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
20+
<div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
21+
<LinkToNotebookLink label={"Get started"} />
22+
</div>
23+
</div>
24+
<div className={styles.banner_container_large}>
25+
<div className={styles.banner_text_overlay}>
26+
<div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
27+
<div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
28+
<LinkToNotebookLink label={"Get started"} />
29+
</div>
30+
</div>
31+
<div className={styles.banner_container_very_large}>
32+
<div className={styles.banner_text_overlay}>
33+
<div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
34+
<div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
35+
<LinkToNotebookLink label={"Get started"} />
36+
</div>
1337
</div>
1438
</div>
1539
);

‎src/components/home/Hero/styles.module.css‎

Lines changed: 120 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,55 @@
1111
padding-bottom: var(--ifm-spacing-3xl);
1212
}
1313

14-
.banner_container {
14+
.banner_container_small {
1515
position: relative;
1616
width: 100%;
1717
display: flex;
1818
align-items: center;
19-
background-image: url('/img/banner/notebook-link-banner.svg');
19+
background-image: url('/img/banner/notebook-link-banner-small.svg');
2020
background-position: center;
2121
background-repeat: no-repeat;
2222
height: 464px;
2323
padding-bottom: 110px;
2424
}
2525

26+
.banner_container_medium {
27+
position: relative;
28+
width: 100%;
29+
display: flex;
30+
align-items: center;
31+
background-image: url('/img/banner/notebook-link-banner-medium.svg');
32+
background-position: center;
33+
background-repeat: no-repeat;
34+
height: 464px;
35+
padding-bottom: 110px;
36+
}
37+
38+
.banner_container_large {
39+
position: relative;
40+
width: 100%;
41+
display: flex;
42+
align-items: center;
43+
background-image: url('/img/banner/notebook-link-banner-large.svg');
44+
background-position: center;
45+
background-repeat: no-repeat;
46+
height: 464px;
47+
padding-bottom: 110px;
48+
}
49+
50+
.banner_container_very_large {
51+
position: relative;
52+
width: 100%;
53+
display: flex;
54+
align-items: center;
55+
background-image: url('/img/banner/notebook-link-banner-very-large.svg');
56+
background-position: center;
57+
background-repeat: no-repeat;
58+
height: 464px;
59+
padding-bottom: 110px;
60+
}
61+
62+
2663
.banner_image {
2764
width: 100%;
2865
height: auto;
@@ -75,17 +112,49 @@
75112
font-size: 24px;
76113
}
77114

78-
@media only screen and (max-width: 996px) {
115+
@media only screen and (max-width: 576px) {
79116

80117
/*Mobile*/
81118
.logos_carousel {
82119
display: none;
83120
}
121+
122+
.banner_container_medium {
123+
display: none
124+
}
125+
126+
.banner_container_large {
127+
display: none
128+
}
129+
130+
.banner_container_very_large {
131+
display: none
132+
}
133+
}
134+
135+
@media screen and (min-width: 576px) and (max-width: 996px) {
136+
137+
/*Tablet*/
138+
.logos_carousel {
139+
display: none;
140+
}
141+
142+
.banner_container_small {
143+
display: none
144+
}
145+
146+
.banner_container_large {
147+
display: none
148+
}
149+
150+
.banner_container_very_large {
151+
display: none
152+
}
84153
}
85154

86-
@media only screen and (min-width: 996px) {
155+
@media screen and (min-width: 996px) and (max-width: 1511px) {
87156

88-
/*Desktop*/
157+
/*Desktop: small screen*/
89158
.table_with_8_customers {
90159
margin-bottom: var(--ifm-spacing-xl);
91160
}
@@ -103,4 +172,50 @@
103172
text-align: center;
104173
margin: var(--ifm-spacing-2xl) 0;
105174
}
175+
176+
.banner_container_small {
177+
display: none
178+
}
179+
180+
.banner_container_medium {
181+
display: none
182+
}
183+
184+
.banner_container_very_large {
185+
display: none
186+
}
106187
}
188+
189+
@media only screen and (min-width: 1511px) {
190+
191+
/* Desktop : large screen*/
192+
.table_with_8_customers {
193+
margin-bottom: var(--ifm-spacing-xl);
194+
}
195+
196+
.customer_logo {
197+
filter: grayscale(1);
198+
width: 100px;
199+
}
200+
201+
.worked_with {
202+
font-size: 24px;
203+
font-weight: 200;
204+
font-family: var(--ifm-font-family-rubik-one);
205+
color: var(--ifm-color-primary-p2);
206+
text-align: center;
207+
margin: var(--ifm-spacing-2xl) 0;
208+
}
209+
210+
.banner_container_small {
211+
display: none
212+
}
213+
214+
.banner_container_medium {
215+
display: none
216+
}
217+
218+
.banner_container_large {
219+
display: none
220+
}
221+
}

‎static/atom.xml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/atom_all.xml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)