From b4ab2e7d1a96185183a9a675c6e8470a6f09681a Mon Sep 17 00:00:00 2001
From: Juan Valencia <juanvalencia@calvellido.es>
Date: Wed, 5 Apr 2023 17:48:51 +0200
Subject: [PATCH] Adjust custom CSS specificity affected by Infima (#158)

### Description

This PR make some changes on some selectors' specificity. Due to the way
Docusaurus build production styles, this could sometimes create a
problem through the CSS injection order, making some Infima styles
override custom ones. To overcome this, we are using a subtle trick by
duplicating the class in our CSS, to increase the specificity of our
selectors.

It doesn't seem like an easy task to solve in general for Docusaurus.
More info in: https://github.com/facebook/docusaurus/issues/3678

It also adds proper styling for the Table of Contents on mobile.

This closes #147

### Preview


![imagen](https://user-images.githubusercontent.com/7753447/230122746-a8eb2d3d-f70b-4bb1-92b2-1ea06ca65563.png)

![imagen](https://user-images.githubusercontent.com/7753447/230122431-ddd3dd06-5b06-4e8b-a91e-1aae1723e5f2.png)
---
 src/components/Hero/hero.module.css | 10 +++++-
 src/css/custom.css                  | 50 ++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/Hero/hero.module.css b/src/components/Hero/hero.module.css
index a9582a2f..4fd1df71 100644
--- a/src/components/Hero/hero.module.css
+++ b/src/components/Hero/hero.module.css
@@ -42,7 +42,15 @@
   }
 }
 
-.container {
+/*
+ * The .container class duplication is a subtle trick to increase the specificity of
+ * this selector, as it would clash with an infima styling otherwise. CSS injection
+ * order is affecting this. But it doesn't seem like is an easy task to solve.
+ * More info:
+ *
+ * https://github.com/facebook/docusaurus/issues/3678
+ */
+ .container.container {
   max-width: 700px;
 }
 
diff --git a/src/css/custom.css b/src/css/custom.css
index 1aa4c731..e3ab4ac1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -93,7 +93,7 @@ table {
 
 /* Navbar sidebar */
 .navbar-sidebar__item {
-  padding: 0
+  padding: 0;
 }
 
 .navbar-sidebar__back {
@@ -138,8 +138,24 @@ table {
   margin-top: -1rem;
 }
 
-/* Collapsible ToC */ 
+/* Collapsible ToC */
+.theme-doc-toc-mobile[class*='tocCollapsible'] {
+  background-color: var(--ifm-color-primary-lightest);
+}
 
+.theme-doc-toc-mobile [class*='tocCollapsibleButton'] {
+  font-weight: 500;
+}
+
+.theme-doc-toc-mobile[class*='tocCollapsible'] ul.table-of-contents {
+  border: none;
+  font-size: 0.85rem;
+  padding: 0 0 0.3rem 0;
+}
+
+.theme-doc-toc-mobile[class*='tocCollapsible'] ul.table-of-contents li {
+  margin: calc(var(--ifm-spacing-vertical) / 2) 0.8rem;
+}
 
 /* Pagination bottom buttons not needed */
 .plugin-docs .pagination-nav {
@@ -267,14 +283,21 @@ code {
   color: var(--ifm-menu-color);
 }
 
+/*
+ * The .menu__link--active class duplication is a subtle trick to increase the
+ * specificity of this selector, as it would clash with an infima styling otherwise.
+ * CSS injection order is affecting this. But it doesn't seem like is an easy task to solve.
+ * More info:
+ *
+ * https://github.com/facebook/docusaurus/issues/3678
+ */
 .plugin-docs
   .theme-doc-sidebar-container
   .menu__list-item-collapsible--active
-  .menu__link--active {
+  .menu__link--active.menu__link--active {
   color: var(--ifm-menu-color-active);
 }
 
-
 .menu__list-item-collapsible {
   border-radius: var(--ifm-global-radius);
 }
@@ -288,21 +311,6 @@ code {
   filter: invert(100%);
 }
 
-/* TODO: Adapt these styles for narrow-window versions */
-/* .menu__list-item-collapsible--active .menu__caret::before,
-.menu__link--active ~ .menu__caret::before {
-  filter: invert(100%);
-}
-
-.menu__link--active ~ .menu__caret {
-  background: var(--ifm-menu-color-background-active);
-}
-
-.menu__list-item-collapsible:not(.menu__list-item-collapsible--active)
-  .menu__link--active {
-  background: var(--ifm-menu-color-background-active) !important;
-} */
-
 .menu__caret {
   border-radius: var(--ifm-global-radius);
 }
@@ -319,3 +327,7 @@ code {
 .menu__list-item:not(:first-child) {
   margin-top: 0;
 }
+
+.theme-back-to-top-button.theme-back-to-top-button::after {
+  background-color: var(--ifm-color-primary-darkest);
+}