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: facebook/docusaurus#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

@@ -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;
 }
 

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);
+}