Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 9b25284f authored by Plumtree3D's avatar Plumtree3D Committed by Christophe Chaudier
Browse files

feat: :lipstick: implemented background colors on homepage sections

Closes #103
parent 1635665a
No related branches found
No related tags found
1 merge request!80Resolve "Add badground color on sections in index"
Pipeline #8705 passed
......@@ -57,7 +57,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>
......
......@@ -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>
);
}
......@@ -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">
......
......@@ -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 {
......
......@@ -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);
......
......@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment