Resolve "improve colors readability"

Closes #54 (closed)

src/css/custom.css

@@ -58,6 +58,30 @@ p {
   font-weight: 500; 
 }
 
+/****** LINK a ******/
+a {
+  text-decoration: none !important;
+}
+
+a:hover {
+  font-weight: bolder;
+  transition: 0.3s;
+  color: var(--ifm-color-tonic-three);
+}
+
+.heroBanner_src-pages-index-module {
+  padding: 3rem 0 !important;
+}
+
+/********* TABLE OF CONTENT ********/
+.table-of-contents__link:hover, .table-of-contents__link--active {
+  color: var(--ifm-color-tonic-one);
+}
+
+html[data-theme='dark'] .table-of-contents__link--active {
+  color: var(--ifm-color-primary-light);
+}
+
 .button {
   margin: 10px;
  }
@@ -84,12 +108,18 @@ p {
   font-size: 18px;
 } 
 
+.navbar__link {
+  color: var(--ifm-color-primary-light);
+}
+
 .navbar--fixed-top {
   position: sticky; 
   top: 0;
   z-index: 1; 
  } 
 
+/****** HERO TITLE ******/
+
 .hero__title {
   color: var(--ifm-color-primary-light);
 }
@@ -98,6 +128,7 @@ p {
   color: var(--ifm-color-primary-light);
 }
 
+/***** BUTTON *****/
 .button--warning {
   color: var(--ifm-color-dark-green);
   border-style: none;
@@ -110,27 +141,19 @@ p {
 
 
 .button--warning:hover {
-  /* color: var(--ifm-color-dark-green);
-  border-style: none; */
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   border-style: none;
 }
 
 .button--beta:hover {
-  /* color: var(--ifm-color-frame); */
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   border-style: none;
 }
 
 /***** dark theme button ******/
-/* html[data-theme='dark'] .button:hover {
-  color: var(--ifm-color-primary-light);
-} */
-
 html[data-theme='dark'] .button--warning:hover {
-  /* color: var(--ifm-color-primary-light); */
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   border-style: none;
@@ -142,13 +165,6 @@ html[data-theme='dark'] .button--beta:hover {
   border-style: none;
 }
 
-/* 
- --ifm-color-primary: #000000;  
- --ifm-color-dark-green: #577018;
- --ifm-color-light-green:#8EA34E;
- --ifm-color-frame: #FFC729;
- --ifm-color-tonic-one: #E07931; */
-
 /************ main elements style***********/
 .section-promises {
   padding: 4rem 0;
@@ -187,12 +203,20 @@ a.footer__link-item:hover {
 
 .footer {
   background-color: var(--ifm-color-tonic-one);
-  color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary-light);
   --ifm-footer-link-color: var(--ifm-color-primary);
   --ifm-footer-title-color: var(--ifm-color-primary);
   font-family: var(--ifm-font-family);
 }
 
+.footer__title {
+  color: var(--ifm-color-primary-light);
+}
+
+.footer__link-item {
+  color: var(--ifm-color-primary-light);
+}
+
 /************ sub-footer style ***********/
 .footer__bottom {
   font-family: var(--ifm-font-family); 
@@ -216,38 +240,24 @@ html[data-theme='dark'] .footer__copyright {
 }
 
 /********* Page Docs ***********/
-.menu__link--active {
-  color: var(--ifm-color-dark-green) !important;
-}
-
-.menu__link--active:hover {
-  color: var(--ifm-color-tonic-three);
-}
-
-.menu__link--active:not(.menu__link--sublist):hover {
-  background-color: var(--ifm-color-frame);
-}
-
-a {
-  text-decoration: none !important;
-}
-
-a:hover {
-  font-weight: bolder;
-  transition: 0.3s;
+/* textes du menu latéral */
+.menu__link {
+  color: var(--ifm-color-primary);
+  background: none !important;
 }
 
-/******* Dark theme ********/
-/* html[data-theme='dark'] a {
+/* texte passe dessus */
+.menu__link:hover {
   color: var(--ifm-color-frame);
-} */
+}
 
+/* texte quand on a cliqué */
 .menu__link--active {
-  color: var(--ifm-color-primary-light);
+  color: var(--ifm-color-primary);
 }
 
+/******* Dark theme ********/
 html[data-theme='dark'] .menu__link--active:hover {
-  color: var(--ifm-color-frame);
   transition: 0.3s;
 }
 
@@ -270,7 +280,12 @@ html[data-theme='dark'] a:hover {
   transition: 0.3s;
 }
 
-/*********** page FAQ ***********/
-html[data-theme='dark'] .table-of-contents__link:hover code, .table-of-contents__link--active, .table-of-contents__link--active code {
-  color: var(--ifm-color-frame);
+/* textes du menu latéral */
+html[data-theme='dark'] .menu__link {
+  color: var(--ifm-color-tonic-one);
+  background: none !important;
 }
+
+html[data-theme='dark'] .menu__link--active {
+  background: var(--ifm-color-frame) !important;
+}
\ No newline at end of file