Resolve "change for froggit colors and fonts"

Closes #21 (closed)

src/css/custom.css

@@ -5,22 +5,21 @@
  * work well for content-centric websites.
  */
 
-/* google fonts imports */
+/******* 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. */
 :root {
-  --ifm-color-primary: #805D93;
+  --ifm-color-primary: #0d0d0d;  
   --ifm-color-dark-green: #577018;
   --ifm-color-light-green:#8EA34E;
-  --ifm-color-yellow: #FFC729;
-  --ifm-color-orange: #E07931;
-  --ifm-color-red: #B3433B;
-  --ifm-color-purple: #805D93;
-  --ifm-color-light: #ffffff;
-  --ifm-color-dark: #121213;
-  --ifm-link-color: #121213c2;
+  --ifm-color-frame: #FFC729;
+  --ifm-color-tonic-one: #E07931;
+  --ifm-color-tonic-two: #B3433B;
+  --ifm-color-tonic-three: #805D93;
+  --ifm-color-primary-dark: #0c0c0cb0;
+  --ifm-color-primary-light: #ffffff;
   --ifm-code-font-size: 95%; 
   --ifm-font-family-base: "Comfortaa", cursive;
   --ifm-font-family: "Montserrat",  sans-serif; 
@@ -45,11 +44,11 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-h1, h3 {
+hgroup {
   font-family: var(--ifm-font-family-base);
   font-weight: 700;
 }
-  
+
 p {
   font-family: var(--ifm-font-family);
   font-weight: 500; 
@@ -57,16 +56,18 @@ p {
 
 /************ Navbar style ***********/
 .navbar {
-  font-size: 16px;
+  background-color: var(--ifm-color-light-green);
+  --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
   font-family: var(--ifm-font-family-base);
   font-weight: 700; 
+  font-size: 16px;
 }
 
 .navbar__title {
   font-size: 18px;
 } 
 
-/************ Other sections style ***********/
+/************ main elements style***********/
 .sections {
   display: flex;
   align-items: center;
@@ -74,23 +75,25 @@ p {
   width: 100%;
 }
 
+/************ footer style ***********/
+#__docusaurus > footer > div > div.text--center > div > a {
+  color: unset;  
+}
+
+#__docusaurus > footer > div > div.text--center > div > a:hover {
+  color: var(--ifm-color-frame);
+}
+
 .footer--dark {
-  background-color: var(--ifm-color-orange);
+  background-color: var(--ifm-color-tonic-one);
   color: var(--ifm-color-dark);
   --ifm-footer-link-color: var(--ifm-color-dark);
   --ifm-footer-title-color: var(--ifm-color-dark);
   font-family: var( --ifm-font-family);
 }
 
+/************ sub-footer style ***********/
 .footer__bottom {
-  font-family: var( --ifm-font-family); 
+  font-family: var(--ifm-font-family); 
   font-weight: 600;
 } 
-
-#__docusaurus > footer > div > div.text--center > div > a {
-  color: unset;
-}
-
-#__docusaurus > footer > div > div.text--center > div > a:hover {
-  color: var(--ifm-link-color);
-}