diff --git a/src/components/HomepageTeam/index.js b/src/components/HomepageTeam/index.js
index 5853de07e7f306659cec34e92f33bd829346a663..d4939f93433c3ca8954efe56c1b8d3e7ff36d88c 100644
--- a/src/components/HomepageTeam/index.js
+++ b/src/components/HomepageTeam/index.js
@@ -5,7 +5,6 @@ import styles from "./styles.module.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
import { FaLinkedin } from "react-icons/fa";
import Image from "@theme/IdealImage";
-import { useState } from "react";
import Link from "@docusaurus/Link";
const FeatureList = [
@@ -56,23 +55,21 @@ const FeatureList = [
},
{
title: 'Pourquoi pas toi ?',
- subtitle: "Rejoins Lydra ",
- img: 'img/team/hacker.png',
+ subtitle: "Rejoins Lydra",
+ description: "Rejoins Lydra et partage notre passion pour le logiciel libre et Open Source",
+ img: 'img/team/question-mark.png',
link: "/contacts"
}
];
function Feature({ img, title, subtitle, description, url, link }) {
- const [showMore, setShowMore] = useState(false);
- const maxLength = 150;
return (
- <div className="col col--4 feature">
- <div className={styles.featureElement}>
- <div style={{ position: "relative" }}>
+ <div className={styles.teamElement}>
+ <div className={styles.teamPicture}>
{url && (
<a
- className="linkedin-button"
+ className={styles.linkedinButton}
href={url}
target="_blank"
rel="noreferrer"
@@ -85,30 +82,18 @@ function Feature({ img, title, subtitle, description, url, link }) {
className={styles.featureSvg}
role="img"
/>
- </div>
- <div className="text--center padding-horiz--md">
+ </div>
+ <div className={styles.teamDescription}>
<h3>{title}</h3>
+ <p><b>{subtitle}</b></p>
- {link ? <Link className="button button--sm button--secondary" href={link}> {subtitle} </Link> : <p><b>{subtitle}</b></p>}
+ <p>{description}</p>
- {description && description.length > maxLength
- ? showMore
- ? description
- : `${description.substring(0, maxLength)}...`
- : description}
- </div>
- {description && description.length > maxLength && (
- <button
- className="button button--sm button--secondary"
- onClick={() => setShowMore(!showMore)}
- >
- {showMore ? "Voir moins" : "Voir plus"}
- </button>
- )}
+ {link && <Link className="button button--sm button--secondary" href={link}> {subtitle} </Link>}
</div>
</div>
- );
+);
}
export default function HomepageTeam() {
@@ -117,11 +102,9 @@ export default function HomepageTeam() {
<h2 className="text--center margin-top--lg"> Notre Équipe </h2>
<div className={styles.features + " team"}>
<div className="container">
- <div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
- </div>
</div>
</div>
</section>
diff --git a/src/components/HomepageTeam/styles.module.css b/src/components/HomepageTeam/styles.module.css
index a49723802634ecf7507387badc3c78e62baa034e..c526577ce96188c398dbda23aab705efb019d490 100644
--- a/src/components/HomepageTeam/styles.module.css
+++ b/src/components/HomepageTeam/styles.module.css
@@ -1,10 +1,3 @@
-.features {
- display: flex;
- align-items: center;
- padding: 2rem 0;
- width: 100%;
-}
-
.featureSvg {
height: 200px;
width: 200px;
@@ -14,13 +7,91 @@
background-color: var(--alterning-bkg);
}
-.featureElement {
+.teamElement {
display: flex;
- flex-direction: column;
- align-items: center;
- margin: 12px auto;
+ flex-direction: row;
+ margin-bottom: 3rem;
+}
+
+.teamElement h3 {
+ color: var(--ifm-color-primary);
+}
+
+.teamElement:nth-child(even) {
+ display: flex;
+ flex-direction: row-reverse;
}
.featureElement:hover {
text-decoration: none;
}
+
+.teamPicture {
+ position: relative;
+}
+
+.teamDescription {
+ margin-left: 5rem;
+}
+
+.teamDescription p, .teamDescription h3 {
+ text-align: left;
+ max-width: 860px;
+}
+
+.teamElement:nth-child(even) .teamDescription {
+ margin-right: 5rem;
+}
+
+.teamElement:nth-child(even) p, .teamElement:nth-child(even) h3 {
+ text-align: right;
+}
+
+.linkedinButton {
+ font-size: 3rem;
+ position: absolute;
+ top: 150px;
+ left: 0;
+ color: #0e76a8;
+}
+
+.linkedinButton:hover {
+ color: #5da8d0;
+}
+
+.teamElement:nth-last-child(1) .featureSvg {
+ border: 6px solid var(--ifm-color-success);
+}
+
+.teamElement:nth-last-child(1) h3 {
+ color: var(--ifm-color-success);
+}
+
+@media (max-width: 768px) {
+ .teamPicture {
+ margin: 0 auto;
+ }
+
+ .teamDescription {
+ margin: 0 auto;
+ }
+
+ .teamElement:nth-child(even) .teamDescription {
+ margin: 0 auto;
+ }
+
+ .teamDescription p, .teamDescription h3, .teamDescription:nth-child(even) p, .teamDescription:nth-child(even) h3 {
+ text-align: center;
+ }
+
+
+ .teamElement {
+ flex-direction: column;
+ }
+
+ .teamElement:nth-child(even) {
+ flex-direction: column;
+ }
+
+
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 0eceb54616e03303e72ac16a372c660b5e2c8ed3..96ceac18df0518002944b0e8283461e612bb2998 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -103,45 +103,8 @@ i, em {
color: var(--ifm-color-primary) !important;
}
-section:nth-child(even) {
- background-color: var(--alterning-bkg);
- padding: 2rem 0;
-}
-
-.linkedin-button {
- font-size: 3rem;
- position: absolute;
- bottom: -1rem;
- left: 0;
- color: #0e76a8;
-}
-
-.linkedin-button:hover {
- color: #5da8d0;
-}
-
-.team .feature:nth-child(4n+1) img {
- border: 6px solid var(--ifm-color-success);
-}
-
-.team .feature:nth-child(4n+1) h3 {
- color: var(--ifm-color-success);
-}
-
-.team .feature:nth-child(4n+2) img {
- border: 6px solid var(--ifm-color-info);
-}
-
-.team .feature:nth-child(4n+2) h3 {
- color: var(--ifm-color-info);
-}
-
-.team .feature:nth-child(4n+3) img, .team .feature:nth-child(4n+4) img {
- border: 6px solid var(--ifm-color-highlight);
-}
-
-.team .feature:nth-child(4n+3) h3, .team .feature:nth-child(4n+4) h3 {
- color: var(--ifm-color-highlight);
+.feature {
+ margin: auto;
}
.pagination-nav__label {
@@ -152,6 +115,11 @@ section:nth-child(even) {
text-align: center;
}
+section:nth-child(even) {
+ background-color: var(--alterning-bkg);
+ padding: 2rem 0;
+}
+
.notFound {
position: absolute;
top: -75px;
diff --git a/static/img/team/hacker.png b/static/img/team/hacker.png
deleted file mode 100644
index 7509e2b26334f66a3f47bd6d6b0d206ef3e67222..0000000000000000000000000000000000000000
Binary files a/static/img/team/hacker.png and /dev/null differ
diff --git a/static/img/team/question-mark.png b/static/img/team/question-mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..545f447a9978551d8fec33522d7552ec4d9b8f27
Binary files /dev/null and b/static/img/team/question-mark.png differ