Resolve "improve colors readability"

Closes #54 (closed)

src/css/custom.css

-/* stylelint-disable docusaurus/copyright-header */
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/******* google fonts imports *******/
-@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,600,700');
-@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
-
-/* You can override the default Infima variables here. */
+/******** FONTS ********/
+@font-face {
+  font-family: 'comfortaa';
+    src: url('/fonts/comfortaa.woff2') format('woff2');
+    src: url('/fonts/comfortaa.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'montserrat';
+    src: url('/fonts/montserrat.woff2') format('woff2');
+    src: url('/fonts/montserrat.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'jetbrainsmono';
+    src: url('/fonts/jetbrainsmono.woff2') format('woff2');
+    src: url('/fonts/jetbrainsmono.woff') format('woff');
+}
+
+/* VARIABLES */
 :root {
   --ifm-color-primary: #000000;  
   --ifm-color-dark-green: #577018;
@@ -22,8 +34,9 @@
   --ifm-link-color: #E07931;
   --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
-  --ifm-font-family-base: "Comfortaa", cursive;
-  --ifm-font-family: "Montserrat",  sans-serif; 
+  --ifm-font-family-base: "comfortaa", cursive;
+  --ifm-font-family: "montserrat", sans-serif;
+  --ifm-font-family-monospace: "jetbrainsmono", monospace;
   --ifm-container-width: 100%; 
   --ifm-container-max-width: 950px;
   --ifm-navbar-shadow: none;
@@ -51,25 +64,49 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 hgroup {
   font-family: var(--ifm-font-family-base);
   font-weight: 700;
+  font-size: larger;
 }
 
 p {
   font-family: var(--ifm-font-family);
-  font-weight: 500; 
+  font-weight: 500;
 }
 
-.button {
-  margin: 10px;
- }
+/********* TABLE OF CONTENT ********/
+.table-of-contents__link:hover, .table-of-contents__link--active {
+  color: var(--ifm-color-tonic-one);
+}
 
-.button--beta {
-  background-color: var(--ifm-color-dark-green);
-  border-color: var(--ifm-color-dark-green);
- }
+html[data-theme='dark'] .table-of-contents__link--active {
+  color: var(--ifm-color-primary-light);
+}
+
+/****** LINK a ******/
+a:hover {
+  transition: 0.3s;
+}
 
- .button--beta:hover {
-   background-color: var(--ifm-color-dark-green);
- }
+.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);
+}
+
+.navbar-sidebar .clean-btn {
+  color: var(--ifm-color-dark-green);
+}
+
+/******* table & ul montserra font *******/
+table td {
+  font-family: var(--ifm-font-family);
+}
+
+ul {
+  font-family: var(--ifm-font-family);
+}
 
 /************ Navbar style ***********/
 .navbar {
@@ -84,12 +121,17 @@ 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,57 +140,47 @@ p {
   color: var(--ifm-color-primary-light);
 }
 
-.button--warning {
-  color: var(--ifm-color-dark-green);
-  border-style: none;
+/***** BUTTON *****/
+
+.button {
+  margin: 10px;
 }
 
 .button--beta {
+  background-color: var(--ifm-color-dark-green);
+  border-color: var(--ifm-color-dark-green);
   color: var(--ifm-color-frame);
   border-style: none;
 }
 
-
-.button--warning:hover {
-  /* color: var(--ifm-color-dark-green);
-  border-style: none; */
+.button--beta:hover {
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   border-style: none;
 }
 
-.button--beta:hover {
-  /* color: var(--ifm-color-frame); */
+.clean-btn {
   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);
-} */
+.button--warning {
+  color: var(--ifm-color-dark-green);
+  border-style: none;
+}
 
-html[data-theme='dark'] .button--warning:hover {
-  /* color: var(--ifm-color-primary-light); */
+.button--warning:hover {
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   border-style: none;
 }
 
+/***** dark theme button ******/
 html[data-theme='dark'] .button--beta:hover {
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   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;
@@ -172,7 +204,6 @@ html[data-theme='dark'] .button--beta:hover {
 }
 
 /************ footer style ***********/
-
 a.footer__link-item:hover {
   color:  var(--ifm-color-frame);
 }
@@ -187,12 +218,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); 
@@ -215,62 +254,39 @@ html[data-theme='dark'] .footer__copyright {
   color: var(--ifm-color-primary-light);
 }
 
-/********* 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);
+/********* Doc page ***********/
+/* lateral text */
+.menu__link {
+  background: none;
 }
 
-a {
-  text-decoration: none !important;
+/* text mouse hover */
+.menu__link:hover {
+  color: var(--ifm-color-tonic-one);
 }
 
-a:hover {
-  font-weight: bolder;
+/* text on click */
+.navbar__link:hover, .navbar__link--active {
+  color: var(--ifm-color-frame);
   transition: 0.3s;
 }
 
-/******* Dark theme ********/
-/* html[data-theme='dark'] a {
-  color: var(--ifm-color-frame);
-} */
-
 .menu__link--active {
-  color: var(--ifm-color-primary-light);
+  color: var(--ifm-color-tonic-one);
 }
 
-html[data-theme='dark'] .menu__link--active:hover {
+/******* Dark theme ********/
+html[data-theme='dark'] a:hover {
   color: var(--ifm-color-frame);
   transition: 0.3s;
 }
 
-html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist) {
-  color: var(--ifm-color-tonic-one) !important;
-  font-weight: bolder;
+/* lateral text menu*/
+html[data-theme='dark'] .menu__link {
+  color: var(--ifm-color-tonic-one);
 }
 
-html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist):hover {
-  background-color: var(--ifm-color-tonic-one);
-  color: var(--ifm-color-frame) !important;
-  font-weight: bolder;
-  transition: 0.3s;
-}
-
-html[data-theme='dark'] a:hover {
-  font-weight: bolder;
-  color: var(--ifm-color-frame);
-  text-decoration: none;
-  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 {
+html[data-theme='dark'] .menu__link--active {
   color: var(--ifm-color-frame);
+  font-weight: bolder;
 }