diff --git a/src/components/HomepageWhy.js b/src/components/HomepageWhy.js index 78934263def022188db49b6222fe527567914430..9c44d0b488910c946fd01bb84da09a84c21e0432 100644 --- a/src/components/HomepageWhy.js +++ b/src/components/HomepageWhy.js @@ -6,25 +6,29 @@ const imgPath = "img/components/HomepageWhy/"; const WhyList = [ { id: 1, - title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", + title: "dummy why 1", + text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", icon: imgPath+"logo_froggit.svg", alt: "" }, { id: 2, - title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", + title: "dummy why 2", + text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", icon: imgPath+"logo_froggit.svg", alt: "" }, { id: 3, - title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", + title: "dummy why 3", + text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", icon: imgPath+"logo_froggit.svg", alt: "" }, { id: 4, - title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", + title: "dummy why 4", + text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", icon: imgPath+"logo_froggit.svg", alt: "" } @@ -33,12 +37,12 @@ const WhyList = [ export default function HomepageWhy() { return ( <div> - <h2 className={clsx("text--center")}> Pourquoi Froggit et pas Gitlab, Github…? - </h2> - <p className={"text--center"}> Parce que collaborer autour du code, c’est bien plus que coder. - </p> - <section className="sections container"> - <p className={"text--center homepageWhy_title"}>Pour mener à bien un projet, vous avez plusieurs choix : + <section className="sections container overflow-hidden"> + <h2 className={clsx("text--center")}> Pourquoi Froggit et pas Gitlab, Github…? + </h2> + <p className={"text--center homepageWhy_title"}> Parce que collaborer autour du code, c’est bien plus que coder. + </p> + <p className={"text--center"}>Pour mener à bien un projet, vous avez plusieurs choix : </p> <div className="row"> {WhyList.map((props, idx) => ( diff --git a/src/components/Why.js b/src/components/Why.js index 4d4ccbbcdef166f562eefaa3ffd220ea09ae1f8a..0a00ad44b8c9a52c1ed5d0570d0165cb8cdd3997 100644 --- a/src/components/Why.js +++ b/src/components/Why.js @@ -2,11 +2,16 @@ import React from "react"; import useBaseUrl from "@docusaurus/useBaseUrl"; // eslint-disable-next-line -export default function Why({title, icon, alt}) { +export default function Why({title, text, icon, alt}) { return ( - <div className="col col--6 text--center padding-horiz--lg"> - <img src={useBaseUrl(icon)} className="why_img" alt={alt}/> - <p> {title} </p> + <div className="col col--6 padding-horiz--lg margin-top--md"> + <div className="row"> + <img src={useBaseUrl(icon)} className="why_img" alt={alt}/> + <div className="why_col padding-horiz--md"> + <span className="why_title"> {title} </span> + <p> {text} </p> + </div> + </div> </div> ); } diff --git a/src/css/custom.css b/src/css/custom.css index d2d27c9a754cacd63990eb4d37f52898058a5b32..48058a6d5ea0f51fcf8cb0662b4addb12c4bd654 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -210,3 +210,8 @@ ul { display: flex; justify-content: center; } + +/**** UTILITIES ****/ +.overflow-hidden { + overflow: hidden; +} diff --git a/src/css/why.css b/src/css/why.css index 35ac2d7ac07c55756933c0d9c28483d513c8266d..9d714f44c0b0e46df8d308d166efbe056d1e1f27 100644 --- a/src/css/why.css +++ b/src/css/why.css @@ -1,9 +1,16 @@ /**** 'WHY' ELEMENT ****/ .why_img { - margin: 22px 0px 12px 0px ; - max-width: 82px; - max-height: 82px; + margin: 8px 18px 0px 8px ; + max-width: 58px; + max-height: 58px; + pointer-events: none; + +} + +.why_title { + font-size: 1.2rem; + font-weight: 700; } .homepageWhy_title { @@ -11,3 +18,9 @@ font-weight: 900; padding-bottom: 15px; } + +.why_col { + display: flex; + flex-direction: column; + max-width: 78%; +}