WIP

src/components/HomepageFeatures.js

@@ -48,10 +48,10 @@ function Feature({Svg, title, description}) {
   return (
     <div className={clsx("hero container text--center padding-horiz--md")}>
       <div className="row">
-        <div className={"col col--6"}>
+        <div className={"col col--5"}>
           <Svg className={styles.svg} alt={title} />
         </div>
-        <div className={"col col--6"}>
+        <div className={"col col--5"}>
           <h3>{title}</h3>
           <p>{description}</p>
         </div>

src/css/custom.css

@@ -7,15 +7,16 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #577018;
-  --ifm-color-secondary: #8EA34E;
+  --ifm-color-primary: #805D93;
+  --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-secondary6: #ffffff;
-  --ifm-color-secondary7: #13051b;
-  --ifm-color-primary-dark: #13051b;;
+  --ifm-color-light: #ffffff;
+  --ifm-color-dark: #13051b;
+  --ifm-color-primary-dark: #13051b;
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
   --ifm-color-primary-light: rgba(255, 255, 255, 0.637);
@@ -69,8 +70,7 @@ p {
 /************ Other sections style ***********/
 header {
   height: 15rem;
-  background: rgb(87,112,24);
-background: linear-gradient(90deg, rgba(87,112,24,1) 0%, rgba(87,112,24,1) 35%, rgba(142,163,78,1) 100%);
+  background: var(--ifm-color-dark-green);
 }
 
 .sections {
@@ -78,42 +78,36 @@ background: linear-gradient(90deg, rgba(87,112,24,1) 0%, rgba(87,112,24,1) 35%,
   align-items: center;
   padding: 2rem 0;
   width: 100%;
-  /* color: var(--ifm-color-primary);
-  color: var(--ifm-heading-color); */
 }
 /************ 
     font-weight: var(--ifm-heading-font-weight);
     line-height: var(--ifm-heading-line-height);
     margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0;
-Footer style ***********/
-.footer--dark {
-  background-color: var(--ifm-footer-background-color);
-  color: var(--ifm-footer-color);
-  /*
-  --ifm-footer-background-color2: #131413;  
-  --ifm-footer-background-color3: #577018;
-  --ifm-footer-background-color4: #8EA34E;
-  --ifm-footer-background-color5: #FFC729;  
-  --ifm-footer-background-color6: #B3433B;
-  --ifm-footer-background-color7: #805D93;
-  */
-  --ifm-footer-background-color: #E07931;
-  --ifm-footer-color: var(--ifm-color-primary);
-  --ifm-footer-link-color: var(--ifm-color-secondary7);
-  --ifm-footer-title-color: var(--ifm-background-color);
-}
 
-.footer {
-  /* background-color: var(--ifm-footer-background-color);
+    Footer style 
+.footer {***********/
+/* background-color: var(--ifm-footer-background-color);
   color: var(--ifm-footer-color); */
+/*   --ifm-footer-color: var(--ifm-color-dark);
+  --ifm-footer-link-color: var(--ifm-color-secondary7);
+  --ifm-footer-title-color: var(--ifm-color-secondary7);
   padding: var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal);
+} */
+.footer--dark {
+  background-color: var(--ifm-color-orange);
+  color: var(--ifm-color-dark);
+  
+  --ifm-footer-link-color: var(--ifm-color-dark);
+  --ifm-footer-title-color: var(--ifm-color-dark);
+  font-family: "Montserrat", sans-serif;
 }
 
 .footer__bottom {
-  color: var(--ifm-color-secondary7);
+
+
   font-family: "Montserrat", sans-serif;
   font-weight: 600;
-}
+} 
 
 /************ Fonts ***********/
 /* cyrillic-ext */

src/pages/index.js

-/* eslint-disable indent */
 import React from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";