Resolve "improve colors readability"

Closes #54 (closed)

src/css/custom.css

@@ -72,13 +72,35 @@ p {
   font-weight: 500;
 }
 
-.button {
-  margin: 10px;
+/****** LINK a ******/
+a:hover {
+  transition: 0.3s;
 }
 
-.button--beta {
-  background-color: var(--ifm-color-dark-green);
-  border-color: var(--ifm-color-dark-green);
+.heroBanner_src-pages-index-module {
+  padding: 0.5rem !important;
+  padding-bottom: 2.5rem !important;
+}
+
+/********* TABLE OF CONTENT ********/
+.table-of-contents__link:hover, .table-of-contents__link--active {
+  color: var(--ifm-color-tonic-one);
+}
+
+.clean-btn {
+  color: var(--ifm-color-dark-green);
+}
+
+.clean-btn :hover {
+  color: var(--ifm-color-light-green);
+}
+
+html[data-theme='dark'] .clean-btn {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme='dark'] .clean-btn :hover {
+  color: var(--ifm-color-primary-light);
 }
 
 /******* table & ul montserra font *******/
@@ -90,26 +112,82 @@ ul {
   font-family: var(--ifm-font-family);
 }
 
-/************ NAVBAR STYLE ***********/
+/************ Navbar style ***********/
 .navbar {
   background-color: var(--ifm-color-light-green);
-  --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
+  --ifm-navbar-link-hover-color: var(--ifm-color-frame);
   font-family: var(--ifm-font-family-base);
   font-weight: 700; 
   font-size: 16px;
 }
 
+.navbar__items :hover {
+  color: var(--ifm-color-tonic-three);
+}
+
 .navbar__title {
   font-size: 18px;
 } 
 
+.navbar__link {
+  color: var(--ifm-color-primary-light);
+}
+
 .navbar--fixed-top {
   position: sticky; 
   top: 0;
   z-index: 1; 
 } 
 
-/************ MAIN ELEMENT STYLE ***********/
+/****** HERO TITLE ******/
+.hero__title {
+  color: var(--ifm-color-primary-light);
+}
+
+.hero__subtitle {
+  color: var(--ifm-color-primary-light);
+}
+
+/***** BUTTON *****/
+.button {
+  margin: 10px;
+  border-color: var(--ifm-color-dark-green);
+  color: var(--ifm-color-frame);
+  border-style: none;
+}
+
+.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--beta:hover {
+  color: var(--ifm-color-primary-light);
+  background-color: var(--ifm-color-tonic-three);
+  border-style: none;
+}
+
+.button--warning {
+  color: var(--ifm-color-dark-green);
+  border-style: none;
+}
+
+.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;
+}
+
+/************ main elements style***********/
 .section-promises {
   padding: 4rem 0;
   width: 100%;
@@ -131,8 +209,7 @@ ul {
   flex-direction: row-reverse;
 }
 
-/************ FOOTER STYLE ***********/
-
+/************ footer style ***********/
 a.footer__link-item:hover {
   color:  var(--ifm-color-frame);
 }
@@ -147,14 +224,76 @@ 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);
 }
 
-/************ SUB-FOOTER STYLE ***********/
+.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); 
   font-weight: 600;
+} 
+
+/*************** dark footer *************/
+html[data-theme='dark'] .footer__link-item {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme='dark'] .footer {
+  background-color: var(--ifm-color-tonic-one);
+  color: var(--ifm-color-primary);
+  --ifm-footer-link-color: var(--ifm-color-primary-light);
+  --ifm-footer-title-color: var(--ifm-color-primary-light );
+}
+
+html[data-theme='dark'] .footer__copyright {
+  color: var(--ifm-color-primary-light);
+}
+
+/********* Doc page ***********/
+/* lateral text */
+.menu__link {
+  background: none;
+}
+
+/* text mouse hover */
+.menu__link:hover {
+  color: var(--ifm-color-tonic-three);
+}
+
+/* text on click */
+.navbar__link:hover, .navbar__link--active {
+  color: var(--ifm-color-frame);
+  transition: 0.3s;
+}
+
+.menu__link--active {
+  color: var(--ifm-color-tonic-one);
+}
+
+/* button "La doc de Froggit" */
+.breadcrumbs__item--active .breadcrumbs__link {
+  background: var(--ifm-breadcrumb-item-background-active);
+  color: var(--ifm-color-tonic-one);
+}
+
+/******* Dark theme ********/
+html[data-theme='dark'] a:hover {
+
+  transition: 0.3s;
+}
+
+/* lateral text menu*/
+html[data-theme='dark'] .menu__link {
+  color: var(--ifm-color-tonic-one);
 }