style: team section

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>

src/components/HomepageTeam/styles.module.css

-.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;
+  }
+  
+  
+}

src/css/custom.css

@@ -103,47 +103,6 @@ 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;
 }
@@ -156,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;