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 55e9ef24 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Merge branch '103-add-badground-color-on-sections-in-index' into 'master'

Resolve "Add badground color on sections in index"

Closes #103

See merge request !80
parents c2f65773 0285ced0
No related branches found
No related tags found
1 merge request!80Resolve "Add badground color on sections in index"
Pipeline #8819 passed
......@@ -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>
......
......@@ -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>
);
}
......@@ -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} />
......
......@@ -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 {
......
......@@ -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;
......
......@@ -33,7 +33,7 @@ export default function Home() {
title={siteConfig.themeConfig.navbar.title}
description={siteConfig.tagline}
>
<HomepageHeader/>
<HomepageHeader />
<main>
<HomepagePromises />
<HomepageFeatures />
......
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