From 8d4039112cc3fd2a0083f52aa87b8d2037a92815 Mon Sep 17 00:00:00 2001
From: HGouttebroze <hugues.gouttebrozze@etu.univ-st-etienne.fr>
Date: Mon, 9 Aug 2021 15:01:42 +0200
Subject: [PATCH] reverse images and text block position on features section
---
src/components/HomepageFeatures.js | 19 +++++++++----------
src/components/HomepageFeatures.module.css | 7 ++++++-
src/components/HomepagePromises.js | 14 ++++++--------
src/css/custom.css | 20 ++++++++++++++++++--
4 files changed, 39 insertions(+), 21 deletions(-)
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 4ef1124..29a2d2f 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -46,23 +46,22 @@ const FeatureList = [
function Feature({Svg, title, description}) {
return (
- <div className={clsx("hero container text--center padding-horiz--md")}>
- <div className="row">
- <div className={"col col--5"}>
- <Svg className={styles.svg} alt={title} />
- </div>
- <div className={"col col--5"}>
- <h3>{title}</h3>
- <p>{description}</p>
- </div>
+ <div className="sectionsReverse row">
+ <div className="col col--5 text--center">
+ <Svg className={styles.svg} alt={title} />
</div>
+ <div className="col col--5">
+ <h3>{title}</h3>
+ <p>{description}</p>
+ </div>
</div>
+
);
}
export default function HomepageFeatures() {
return (
- <section className="sections" id="features">
+ <section className="sections container" id="features">
<h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
<div>
{FeatureList.map((props, idx) => (
diff --git a/src/components/HomepageFeatures.module.css b/src/components/HomepageFeatures.module.css
index 3f287c7..ff0044a 100644
--- a/src/components/HomepageFeatures.module.css
+++ b/src/components/HomepageFeatures.module.css
@@ -2,5 +2,10 @@
.svg {
height: 175px;
- width: 175px;
+ width: 175px;
+}
+
+.title {
+ font-weight: bold;
+ padding-bottom: 40px;
}
diff --git a/src/components/HomepagePromises.js b/src/components/HomepagePromises.js
index c63bc29..c96b522 100644
--- a/src/components/HomepagePromises.js
+++ b/src/components/HomepagePromises.js
@@ -49,14 +49,12 @@ function Promise({Svg, title, description}) {
export default function HomepagePromises() {
return (
- <section className="sections">
- <div className="container">
- <div className="row">
- {PromiseList.map((props, idx) => (
- <Promise key={idx} {...props} />
- ))}
- </div>
- </div>
+ <section className="section-promises">
+ <div className="row">
+ {PromiseList.map((props, idx) => (
+ <Promise key={idx} {...props} />
+ ))}
+ </div>
</section>
);
}
diff --git a/src/css/custom.css b/src/css/custom.css
index b8aac77..262ee51 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -23,8 +23,8 @@
--ifm-button-color: var(--ifm-color-primary);
--ifm-code-font-size: 95%;
--ifm-font-family-base: "Comfortaa", cursive;
- --ifm-font-family: "Montserrat", sans-serif;
- --ifm-navbar-shadow: none;
+ --ifm-font-family: "Montserrat", sans-serif;
+ --ifm-container-width: 900px;
}
.docusaurus-highlight-code-line {
@@ -84,9 +84,25 @@ header {
}
/************ main elements style***********/
+.section-promises {
+ padding: 4rem 0;
+ width: 100%;
+}
.sections {
+ padding: 4rem 0;
+ width: var(--ifm-container-width);
+}
+.sectionsReverse {
+ margin: 0 16px 0 16px;
padding: 4rem 0;
width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.sectionsReverse:nth-of-type(odd) {
+ flex-direction: row-reverse;
}
/************ footer style ***********/
--
GitLab