feat: implemented background colors on homepage sections

Closes #103

src/components/CarouselLibre.js

@@ -47,7 +47,7 @@ const CarouselList = [
 
 export default function CarouselLibre() {
   return (
-    <div>
+    <div className="homepage_section">
       <section className="sections container">
         <h2 className={clsx("text--center")}>Restez libres !
         </h2>

src/components/HomepageFeatures.js

@@ -53,29 +53,30 @@ const FeatureList = [
 
 export default function HomepageFeatures() {
   return (
-    <section className="sections container" id="features">   
-      <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
-      </h2>
-      <div className={styles.featuresSubtitle}>
-        <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
-        </p>
-        <p className={"text--center margin-bottom--lg"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
-        </p> 
-      </div>
-      <div>
-        <Tabs className={styles.tabsElement}>
-          {FeatureList.map((em) => (
-            <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
-              <div className={styles.rowDisplay}>
-                <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
-                <p className={styles.textDisplay}> {em.description} </p>
-              </div>
-            </TabItem>
-          ))}
-        </Tabs>
-      </div>
-
-    </section>
+    <div className="homepage_section">
+      <section className="sections container" id="features">   
+        <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+        </h2>
+        <div className={styles.featuresSubtitle}>
+          <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
+          </p>
+          <p className={"text--center margin-bottom--lg"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
+          </p> 
+        </div>
+        <div>
+          <Tabs className={styles.tabsElement}>
+            {FeatureList.map((em) => (
+              <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
+                <div className={styles.rowDisplay}>
+                  <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                  <p className={styles.textDisplay}> {em.description} </p>
+                </div>
+              </TabItem>
+            ))}
+          </Tabs>
+        </div>
+      </section>
+    </div>
 
   );
 }

src/components/HomepagePromises.js

@@ -52,7 +52,7 @@ function Promise({Svg, alt, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <div className={styles.rowOverflow}>
+    <div className={styles.rowOverflow+" homepage_section"}>
       <section className="section-promises"> 
         <h2 className="promise-title margin-bottom--lg">Faites la différence</h2>  
         <div className="row">

src/css/custom.css

@@ -198,6 +198,11 @@ ul {
   color: var(--ifm-color-warning);
 }
 
+/* background color on homepage */
+.homepage_section:nth-child(even) {
+  background-color: var(--section-background);
+}
+
 /****** MEDIA SCREEN *******/
 @media screen and (max-width:330px) {
   .navbar {

src/css/dark-theme.css

@@ -5,6 +5,7 @@ html[data-theme='dark'] {
     --ifm-font-color-base: var(--ifm-color-white);
     --ifm-font-color-base-inverse: var(--ifm-color-white);
     --ifm-font-color-secondary: var(--ifm-color-white);
+    --section-background: var(--ifm-color-gray-900);
     /* admonitions base */
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
     --ifm-color-success-contrast-background: var(--ifm-color-success);

src/css/variables.css

@@ -66,6 +66,7 @@
     --ifm-color-secondary-darkest: #9aa4b3;
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray);
     --ifm-color-secondary-contrast-foreground: var(--ifm-color-secondary);
+    --section-background: var(--ifm-color-gray-100);
 
     /* Success */
     --ifm-color-success-lightest: #68861d;