Resolve "change for froggit colors and fonts"

Closes #21 (closed)

src/css/custom.css

@@ -5,32 +5,95 @@
  * 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. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-code-font-size: 95%;
+  --ifm-color-primary: #0d0d0d;  
+  --ifm-color-dark-green: #577018;
+  --ifm-color-light-green:#8EA34E;
+  --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; 
 }
 
 .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.9);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
 
+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-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
+}
+
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+hgroup {
+  font-family: var(--ifm-font-family-base);
+  font-weight: 700;
+}
+
+p {
+  font-family: var(--ifm-font-family);
+  font-weight: 500; 
+}
+
+/************ Navbar style ***********/
+.navbar {
+  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;
+} 
+
+/************ main elements style***********/
 .sections {
   display: flex;
   align-items: center;
   padding: 2rem 0;
   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-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-weight: 600;
+}