GH-40591: [R] Add extra CSS for navbar on pkgdown website (#40610)

etiennebacher · web-flow · commit 14027c34d4db · 2024-03-20T17:08:43.000-08:00
### Rationale for this change This PR fixes #40591. It adds some CSS rules for better readibility of text in the navbar on the `pkgdown` website. ### What changes are included in this PR? Three new CSS rules, one for each change in the navbar: * put the section text (e.g "Get started") in light gray. I chose light gray and not white because white is used when we hover the text; * put the version number in light gray * put the "Search for" placeholder in light gray ### Are these changes tested? Not applicable ### Are there any user-facing changes? Only visual changes on the website: * before: ![image](https://github.com/apache/arrow/assets/52219252/54b7a47f-b997-464c-9787-12df3e3da541) * after: ![image](https://github.com/apache/arrow/assets/52219252/0ccf878e-1607-4574-9b6c-f51804bdbe5b) * GitHub Issue: #40591 Authored-by: Etienne Bacher <52219252+etiennebacher@users.noreply.github.com> Signed-off-by: Bryce Mecum <petridish@gmail.com>
diff --git a/r/pkgdown/extra.css b/r/pkgdown/extra.css
@@ -0,0 +1,14 @@
+/* Section text in navbar */
+.navbar-dark, .navbar[data-bs-theme="dark"] {
+  --bs-navbar-color: #d9d9d9;
+}
+
+/* Version number in navbar */
+.nav-text, .text-muted {
+  color: #d9d9d9 !important;
+}
+
+/* Placeholder of search input in navbar */
+#search-input::placeholder {
+  color: #d9d9d9;
+}
