Resolve "Add CheatSheet form on internal page"

Closes #63 (closed)

src/css/custom.css

@@ -40,7 +40,7 @@
   --ifm-container-width: 100%; 
   --ifm-container-max-width: 950px;
   --ifm-navbar-shadow: none;
-  --ifm-button-shadow: 1px 3px 4px rgb(182, 182, 182);
+  --ifm-button-shadow: 1px 3px 4px #b6b6b6;
 }
 
 .docusaurus-highlight-code-line {
@@ -53,8 +53,8 @@
 html[data-theme='dark'] {
   --ifm-background-color: #18191a;
   --ifm-background-surface-color: #18191a;
-  --ifm-hover-overlay: rgba(255, 255, 255, 0.05); 
-  --ifm-color-content-secondary: rgba(255, 255, 255, 1);
+  --ifm-hover-overlay: #ffffff0d;
+  --ifm-color-content-secondary: var(--ifm-color-primary-light);
   --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
 }
 
@@ -73,6 +73,11 @@ p {
   font-weight: 500;
 }
 
+/****** LINK a ******/
+a:hover {
+  transition: 0.3s;
+}
+
 form > p {
   font-size: small;
   margin-top: 2em;
@@ -89,19 +94,33 @@ input {
   border-style: solid;
   border-width: 2px;
   border-color: var(--ifm-color-dark-green);
-  box-shadow: var(--ifm-button-shadow);
   font-family: var(--ifm-font-family-base);
-}   
+}
 
-.button {
-  margin: 10px;
-  white-space : initial;
-  font-family: var(--ifm-font-family-base);
+.heroBanner_src-pages-index-module {
+  padding: 0.5rem !important;
+  padding-bottom: 2.5rem !important;
 }
 
-.button--beta {
-  background-color: var(--ifm-color-dark-green);
-  border-color: var(--ifm-color-dark-green);
+/********* 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 *******/
@@ -113,26 +132,84 @@ 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;
+  white-space : initial;
+  font-family: var(--ifm-font-family-base);
+}
+
+.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%;
@@ -154,8 +231,7 @@ ul {
   flex-direction: row-reverse;
 }
 
-/************ FOOTER STYLE ***********/
-
+/************ footer style ***********/
 a.footer__link-item:hover {
   color:  var(--ifm-color-frame);
 }
@@ -170,18 +246,81 @@ 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 ***********/
 /* 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);
+}
+
 /****** Media screen *******/
 @media screen and (max-width:330px) {
   .navbar {