Resolve "change for froggit colors and fonts"

Closes #21 (closed)

src/css/custom.css

@@ -5,13 +5,13 @@
  * 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: #121213;
   --ifm-color-dark-green: #577018;
   --ifm-color-light-green:#8EA34E;
   --ifm-color-yellow: #FFC729;
@@ -20,7 +20,8 @@
   --ifm-color-purple: #805D93;
   --ifm-color-light: #ffffff;
   --ifm-color-dark: #121213;
-  --ifm-link-color: #121213c2;
+  --ifm-color-dark-orange: #160e05;
+  --ifm-link-color: #FFC729;
   --ifm-code-font-size: 95%; 
   --ifm-font-family-base: "Comfortaa", cursive;
   --ifm-font-family: "Montserrat",  sans-serif; 
@@ -57,6 +58,8 @@ p {
 
 /************ Navbar style ***********/
 .navbar {
+  background-color: var(--ifm-color-purple);
+/*background-color: var(--ifm-color-orange); */ 
   font-size: 16px;
   font-family: var(--ifm-font-family-base);
   font-weight: 700; 
@@ -66,7 +69,7 @@ p {
   font-size: 18px;
 } 
 
-/************ Other sections style ***********/
+/************ main elements style***********/
 .sections {
   display: flex;
   align-items: center;
@@ -74,6 +77,15 @@ 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-dark-orange);
+}
+
 .footer--dark {
   background-color: var(--ifm-color-orange);
   color: var(--ifm-color-dark);
@@ -82,15 +94,8 @@ p {
   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);
-}