docs: fix the Hero section tagline colors (#2757)

The inbuilt Docusaurus CSS minifier doesn't respect the CSS descendant combinator (likely treats it as an unused style and removes it from the build). This shows both with the nested CSS and the classic `a b` syntax. While related CSS issues (e.g. facebook/docusaurus#9303) are already known to the Docusaurus team, this one still shows in the latest version (`[email protected]`). This PR adds a separate CSS class for the transparent words in the tagline and explicitly sets this class on the relevant elements
apify · Nov 29, 2024 · 30d0bf8 · 30d0bf8
1 parent bc7d17f
commit 30d0bf8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -24,7 +24,7 @@ function Hero() {
                                 Crawlee is a web<br /> scraping and browser<br /> automation library
                             </h1>
                             <h1 className={styles.tagline}>
-                                Crawlee is a <span>web<br /> scraping</span> and <span>browser<br /> automation</span> library
+                                Crawlee is a <span className={styles.taglineGap}>web<br /> scraping</span> and <span className={styles.taglineGap}>browser<br /> automation</span> library
                             </h1>
                         </div>
                     </div>

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -18,9 +18,10 @@
     text-align: left;
     transition: all var(--ifm-transition-fast);
 
-    span {
-        color: transparent !important;
-    }
+}
+
+.taglineGap {
+    color: transparent !important;
 }
 
 .relative {