Skip to content

Commit 0f3e6de

Browse files
authored
fix: examples cards small texts (#891)
Fixing small headings and descriptions on link cards (e.g. in `/sdk/js/docs/examples`). This font size comes from docosaurus and the class names have generated suffixes (e.g. `cardTitle_rnsV`) so special selectors had to be used. It was probably caused when changing the rem base size from 16px to 10px. Reported here: https://apify.slack.com/archives/C0L33UM7Z/p1710937646009279
1 parent 88b4f5e commit 0f3e6de

File tree

2 files changed

+25
-4
lines changed

2 files changed

+25
-4
lines changed

apify-docs-theme/src/theme/custom.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -915,6 +915,17 @@ html[data-theme='dark'] .actionLink:hover::after {
915915
margin-left: 8px;
916916
}
917917

918+
919+
.card {
920+
[class^="cardTitle"] {
921+
font-size: 1.6rem !important;
922+
}
923+
924+
[class^="cardDescription"] {
925+
font-size: 1.2rem !important;
926+
}
927+
}
928+
918929
.cardContentWrapper {
919930
display: flex;
920931
padding-top: 1.6rem;

src/pages/index.module.css

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,16 @@
8282
margin: 0;
8383
}
8484

85+
.card {
86+
[class^="cardTitle"] {
87+
font-size: 1.6rem !important;
88+
}
89+
90+
[class^="cardDescription"] {
91+
font-size: 1.2rem !important;
92+
}
93+
}
94+
8595
.cardContentWrapper {
8696
display: flex;
8797
padding-top: 1.6rem;
@@ -113,12 +123,12 @@
113123
.bannerContentActions { width: 38.4rem; }
114124
.bannerContentDescription { width: 25rem; margin-bottom: 0; }
115125
.actionCards { grid-template-columns: repeat(2, 1fr); }
116-
.smallBannerContent {
126+
.smallBannerContent {
117127
flex-direction: row;
118128
justify-content: space-between;
119129
align-items: center;
120130
align-self: stretch;
121-
text-align: left;
131+
text-align: left;
122132
}
123133
.smallBannerContent h2 { align-self: flex-start; }
124134
.smallBannerContentText { width: 41.8rem; }
@@ -132,7 +142,7 @@
132142
@media (min-width: 1024px) {
133143
.cards { grid-template-columns: repeat(3, 1fr); }
134144
.actionCards { width: 896px; }
135-
.bannerContentActions { width: 41.8rem; }
145+
.bannerContentActions { width: 41.8rem; }
136146
.bannerContentDescription { width: 38.4rem; }
137147
.bannerContentImage {
138148
width: 38.4rem;
@@ -149,4 +159,4 @@
149159
margin-top: 14.2rem;
150160
}
151161

152-
}
162+
}

0 commit comments

Comments
 (0)