Skip to content

Commit 3cb6308

Browse files
committed
docs: fix sponsored by breaking mobile view on home page and add carbon ads on home page
1 parent 01d9afb commit 3cb6308

File tree

3 files changed

+71
-3
lines changed

3 files changed

+71
-3
lines changed

docs/src/components/HomepageSponsored/styles.module.css

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
.features {
22
display: flex;
3-
align-items: center;
4-
padding: 2rem 0;
5-
width: 100%;
3+
flex-direction: column;
64
}
75

86
.featureSvg {
@@ -15,3 +13,13 @@
1513
display: flex;
1614
justify-content: center;
1715
}
16+
17+
@media screen and (min-width: 1024px) {
18+
.features {
19+
display: flex;
20+
align-items: center;
21+
flex-direction: row;
22+
padding: 2rem 0;
23+
width: 100%;
24+
}
25+
}

docs/src/pages/index.module.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,62 @@
1010
overflow: hidden;
1111
}
1212

13+
.heroAds {
14+
position: absolute;
15+
left: 0;
16+
top: 12px;
17+
}
18+
19+
@media screen and (min-width: 375px) {
20+
.heroAds {
21+
top: 4rem;
22+
}
23+
}
24+
25+
@media screen and (min-width: 425px) {
26+
.heroAds {
27+
left: unset;
28+
top: 8px;
29+
}
30+
}
31+
32+
@media screen and (min-width: 768px) {
33+
.heroAds {
34+
transform: translateX(calc(50% - 30px));
35+
}
36+
}
37+
38+
@media screen and (min-width: 1024px) {
39+
.heroAds {
40+
top: 10rem;
41+
transform: unset;
42+
}
43+
}
44+
45+
@media screen and (min-width: 1256px) {
46+
.heroAds {
47+
left: 4rem;
48+
}
49+
}
50+
51+
@media screen and (min-width: 1440px) {
52+
.heroAds {
53+
left: 8rem;
54+
}
55+
}
56+
57+
@media screen and (min-width: 2000px) {
58+
.heroAds {
59+
left: 16rem;
60+
}
61+
}
62+
63+
@media screen and (min-width: 2560px) {
64+
.heroAds {
65+
left: 32rem;
66+
}
67+
}
68+
1369
@media screen and (max-width: 996px) {
1470
.heroBanner {
1571
padding: 2rem;

docs/src/pages/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
66
import Layout from '@theme/Layout'
77
import HomepageFeatures from '@site/src/components/HomepageFeatures'
88
import HomepageSponsored from '@site/src/components/HomepageSponsored'
9+
import AdsContainerElement from '@site/src/components/AdsContainerElement'
910

1011
import styles from './index.module.css'
1112

@@ -28,6 +29,9 @@ function HomepageHeader() {
2829
</Link>
2930
</div>
3031
</div>
32+
<div className={styles.heroAds}>
33+
<AdsContainerElement />
34+
</div>
3135
</header>
3236
)
3337
}

0 commit comments

Comments
 (0)