From 0285ced01a6af73c648c1e44025715a31de82cc8 Mon Sep 17 00:00:00 2001
From: Celeste Robert <robert.m.celeste@gmail.com>
Date: Wed, 5 Oct 2022 08:01:50 +0000
Subject: [PATCH] feat: Add badground color on sections in index
---
src/components/CarouselLibre.js | 10 +++----
src/components/HomepageFeatures.js | 47 +++++++++++++++---------------
src/components/HomepagePromises.js | 6 ++--
src/css/custom.css | 5 ++++
src/css/dark-theme.css | 1 +
src/css/variables.css | 1 +
src/pages/index.js | 2 +-
7 files changed, 40 insertions(+), 32 deletions(-)
diff --git a/src/components/CarouselLibre.js b/src/components/CarouselLibre.js
index 0131a06..a77a5f5 100644
--- a/src/components/CarouselLibre.js
+++ b/src/components/CarouselLibre.js
@@ -57,12 +57,12 @@ const CarouselList = [
export default function CarouselLibre() {
return (
- <div>
- <h2 className={clsx("text--center")}>Restez libres !
- </h2>
- <p className={"text--center"}>Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
- </p>
+ <div className="homepage_section">
<section className="sections container">
+ <h2 className={clsx("text--center")}>Restez libres !
+ </h2>
+ <p className="text--center margin-bottom--lg">Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
+ </p>
<Carousel list={CarouselList} />
</section>
</div>
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 7e7c69a..e6e2225 100644
--- a/src/components/HomepageFeatures.js
+++ b/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"}> 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>
);
}
diff --git a/src/components/HomepagePromises.js b/src/components/HomepagePromises.js
index 411e51d..115c25b 100644
--- a/src/components/HomepagePromises.js
+++ b/src/components/HomepagePromises.js
@@ -52,9 +52,9 @@ function Promise({Svg, alt, title, description}) {
export default function HomepagePromises() {
return (
- <div className={styles.rowOverflow}>
- <h2 className="promise-title">Faites la différence</h2>
- <section className="section-promises">
+ <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">
{PromiseList.map((props, idx) => (
<Promise key={idx} {...props} />
diff --git a/src/css/custom.css b/src/css/custom.css
index e2b10a9..6d6ea9c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -206,6 +206,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 {
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index ed4d3e5..2f2fbc8 100644
--- a/src/css/dark-theme.css
+++ b/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);
diff --git a/src/css/variables.css b/src/css/variables.css
index 893cfb4..3967cbe 100644
--- a/src/css/variables.css
+++ b/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;
diff --git a/src/pages/index.js b/src/pages/index.js
index a3dc5e7..02b73ad 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -33,7 +33,7 @@ export default function Home() {
title={siteConfig.themeConfig.navbar.title}
description={siteConfig.tagline}
>
- <HomepageHeader/>
+ <HomepageHeader />
<main>
<HomepagePromises />
<HomepageFeatures />
--
GitLab