Address style issue comments made on the PR.

Author: HaudinFlorence

src/components/about/SmallPortraitCard.tsx

@@ -4,6 +4,7 @@ import SocialMediaContacts from "./SocialMediaContacts";
 import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
 import Avatar from "./Avatar";
+import Link from "@docusaurus/Link";
 
 const contentStyle = {
   background: "white",

src/components/about/styles.module.css

@@ -36,22 +36,22 @@ div .row {
 }
 
 .small_card_complete_name {
-  font-size: 16px;
+  font-size: 24px;
   font-family: var(--ifm-font-family-roboto);
   color: var(--ifm-color-primary-p2);
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 24px;
   letter-spacing: 0.15px;
   margin: var(--ifm-spacing-xs) 0;
 }
 
 .small_card_position {
-  font-size: var(--ifm--font-size-normal);
+  font-size: 16px;
   font-family: var(--ifm-font-family-roboto);
   color: var(---ifm-text-color);
   font-style: normal;
-  font-weight: 600;
+  font-weight: 400;
   line-height: 24px;
   letter-spacing: 0.5px;
   color: var(--ifm-color-primary-p2);
@@ -96,7 +96,7 @@ div .large_card_position {
 }
 
 .githubname {
-  font-size: var(--ifm-font-size-normal);
+  font-size: 16px;
   font-family: var(--ifm-font-family-roboto);
   font-style: normal;
   font-weight: 400;

src/components/careers/styles.module.css

@@ -56,20 +56,21 @@
   color: var(--ifm-text-color);
   text-align: center;
   font-family: var(--ifm-font-family-roboto);
-  font-size: 28px;
+  font-size: 22px;
   font-style: normal;
   font-weight: 400;
-  line-height: 36px; /* 128.571% */
+  line-height: 128.571%; 
+  margin-top: var(--ifm-spacing-lg);
 }
 
 .interview_position {
   color: var(--ifm-text-color);
   text-align: center;
   font-family: var(--ifm-font-family-roboto);
-  font-size: var(--ifm-font-size-normal);
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  line-height: 24px; /* 133.333% */
+  line-height: 133.333%;
   letter-spacing: 0.5px;
 }
 

src/components/projects/AllProjects.tsx

@@ -6,14 +6,16 @@ export default function AllProjects() {
   return (
     <div className="container flex-full-centered" style={{marginBottom: "var(--ifm-spacing-3xl)"}}>
       <ul className="row">
-        {projectsDetails.map((project, index) => (
+        {projectsDetails.map((project, index) => {
+          return(
           <li className="cards-list" key={index}>
             <div className="col">
-              <ProjectCard project={project} />
+              <ProjectCard project={project}/>
             </div>
           </li>
-        ))}
+          )
+        })}
       </ul>
     </div>
-  );
+  )
 }

src/components/projects/ProjectCard.tsx

@@ -1,12 +1,13 @@
 import styles from "./styles.module.css";
 
 export default function ProjectCard({ project }): JSX.Element {
-  /*if (project.reverse === "false") {*/
+  const prefix = "project_picture_";
+  const base = `${prefix}${project.name}` 
   return (
     <div className="container">
       <div className="row row--no-gutters horizontally-centered">
         <div
-          className={"col col--6 col" + " " + styles.col_project_text}
+          className={"col col--6 col" + " " + styles.project_text}
         >
           <div className={styles.project_title}>{project.title}</div>
           <div className={styles.project_description}>
@@ -17,9 +18,8 @@ export default function ProjectCard({ project }): JSX.Element {
           className={
             "col col--4 flex-full-centered padding-none" +
             " " +
-            styles.col_project_picture_right
+            styles[base]
           }
-          style={{ border: project.pictureBorder }}
         >
           <div className={styles.col_project_picture}></div>
           <img
@@ -32,36 +32,4 @@ export default function ProjectCard({ project }): JSX.Element {
       </div>
     </div>
   );
-  /* } else if (project.reverse === "true") {
-    return (
-      <div className="container">
-        <div className={"row horizontally-centered"}>
-          <div
-            className={
-              "col col--4 flex-full-centered padding-none" +
-              " " +
-              styles.col_project_picture_left
-            }
-            style={{ border: project.pictureBorder }}
-          >
-            <div className={styles.col_project_picture}>
-              <img
-                src={project.pictureRoute}
-                width={project.pictureWidth}
-                height={project.pictureHeight}
-                alt={project.pictureAltText}
-              />
-            </div>
-          </div>
-
-          <div className={"col col--6" + " " + styles.col_project_text}>
-            <div className={styles.project_title}>{project.title}</div>
-            <div className={styles.project_description}>
-              <project.projectMD />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }*/
 }

src/components/projects/descriptions/projectsDetails.ts

@@ -15,7 +15,6 @@ export const projectsDetails = [
     pictureRoute: jupyterLogoUrl,
     pictureWidth: "198px",
     pictureHeight: "234px",
-    pictureBorder: "solid 1px var(--ifm-color-orange-jupyter)",
     pictureAltText: "Picture for Jupyter project showing its logo.",
     ProjectMD: JupyterMD,
     reverse: "false"
@@ -26,7 +25,6 @@ export const projectsDetails = [
     pictureRoute: xtensorLogoUrl,
     pictureWidth: "257px",
     pictureHeight: "257px",
-    pictureBorder: "solid 1px  var(--ifm-color-green-xtensor)",
     pictureAltText: "Picture for Xtensor and Xsimd showing their respective logo.",
     ProjectMD: XTensorXSIMDMD,
     reverse: "true",
@@ -37,7 +35,6 @@ export const projectsDetails = [
     pictureRoute: condaforgeLogoUrl,
     pictureWidth: "196px",
     pictureHeight: "180px",
-    pictureBorder: "solid 1px var(--ifm-color-grey-condaforge)",
     pictureAltText: "Picture for Condaforge project showing its forge logo.",
     ProjectMD: CondaForgeMD,
     reverse:"false"
@@ -48,7 +45,6 @@ export const projectsDetails = [
     pictureRoute: robostackPictureUrl,
     pictureWidth: "189px",
     pictureHeight: "210px",
-    pictureBorder: "solid 1px rgb(146, 95, 218)",
     pictureAltText: "Picture for robotics project showing an illustration with a robotics device.",
     ProjectMD: RoboticsMD,
     reverse:"true"

src/components/projects/styles.module.css

@@ -4,6 +4,7 @@ div .schedule_container {
 
 .project_title {
   margin-bottom: var(--ifm-spacing-md);
+  margin-top: var(--ifm-spacing-xl);
   font-family: var(--ifm-font-family-bebas-neue);
   font-size: var(--ifm-font-size-secondary-title);
   font-style: normal;
@@ -29,10 +30,11 @@ div .project_title {
 @media only screen and (max-width: 996px) {
   /*Mobile*/
 
-  .header_container{
+  .header_container {
     padding-top: var(--ifm-spacing-2xl);
     background-color: var(--ifm-color-primary-p1);
   }
+
   .header_title {
     padding-left: none;
   }
@@ -46,20 +48,39 @@ div .project_title {
     line-height: 20px;
     letter-spacing: 0.25px;
     text-align: center;
-    margin-bottom: var(--ifm-spacing-2xl);
+    margin-bottom: var(--ifm-spacing-lg);
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl);
   }
 
-  .col_project_text {
-    background-color: var(--ifm-color-orange-light);
-    padding: var(--ifm-spacing-2xl) 0 var(--ifm-spacing-md) 0;
-    border-radius: 10px;
+  .col_project_text p {
+    background-color: white;
+    text-align: justify;
+  }
+
+  .project_picture_jupyter {
+    border: none;
+    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .project_picture_xtensorxsimd {
+    border: none;
+    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .project_picture_condaforge {
+    border: none;
+    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .project_picture_robotics {
+    border: none;
+    margin-bottom: var(--ifm-spacing-xl);
   }
 }
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
-  .header_container{
+  .header_container {
     margin-top: var(--ifm-spacing-6xl);
   }
   .header_title {
@@ -72,7 +93,7 @@ div .project_title {
     font-size: 22px;
     font-style: normal;
     font-weight: 400;
-    line-height: 28px; 
+    line-height: 28px;
     margin-bottom: var(--ifm-spacing-3xl);
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl);
   }
@@ -81,22 +102,34 @@ div .project_title {
     text-align: center;
   }
 
-  .col_project_text {
+  .project_text {
     background-color: var(--ifm-color-orange-light);
     padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
     margin-bottom: var(--ifm-spacing-lg);
     border-radius: 10px;
-    /*box-shadow: 0px 0px 8px 1px #d0cb54;*/
   }
 
-  .col_project_picture_left {
-    margin: none;
+  .project_picture_jupyter {
+    border: solid 1px var(--ifm-color-orange-jupyter);
+    margin-bottom: var(--ifm-spacing-lg);
     border-radius: 10px;
+  }
+
+  .project_picture_xtensorxsimd {
+    border: solid 1px var(--ifm-color-green-xtensor);
     margin-bottom: var(--ifm-spacing-lg);
+    border-radius: 10px;
   }
 
-  .col_project_picture_right {
+  .project_picture_condaforge {
+    border: solid 1px var(--ifm-color-grey-condaforge);
+    margin-bottom: var(--ifm-spacing-lg);
     border-radius: 10px;
+  }
+
+  .project_picture_robotics {
+    border: solid 1px rgb(146, 95, 218);
     margin-bottom: var(--ifm-spacing-lg);
+    border-radius: 10px;
   }
 }

src/components/services/SpecialProjects.tsx

@@ -3,23 +3,26 @@ import SpecialProjectsIllustration from "@site/static/img/illustrations/special_
 
 export default function SpecialProjects() {
   return (
-    <div className="main-container-with-margins">
-      <div className="container upper-container-with-margin-top">
-        <div className="row">
-          <div className="col col--4 col--offset-2">
-            <h2>Special projects</h2>
-            <SpecialProjectsMD />
-          </div>
-          <div className={"col col--5 flex-full-centered"}>
-            <SpecialProjectsIllustration
-              alt={
-                "Picture showing an illustration of a group of people working together in an office."
-              }
-              height={"300px"}
-            />
+    <>
+      <div className="main-container-with-margins">
+        <div className="container upper-container-with-margin-top">
+          <div className="row">
+            <div className="col col--4 col--offset-2">
+              <h2>Special projects</h2>
+              <SpecialProjectsMD />
+            </div>
+            <div className={"col col--5 flex-full-centered"}>
+              <SpecialProjectsIllustration
+                alt={
+                  "Picture showing an illustration of a group of people working together in an office."
+                }
+                height={"300px"}
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+      <div className="spacing-4xl" />
+    </>
   );
 }

src/components/services/styles.module.css

@@ -6,7 +6,7 @@
   /*Mobile*/
   .transition {
     font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 40px;
+    font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: 150%;
@@ -20,7 +20,7 @@
   /*Desktop*/
   .transition {
     font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 40px;
+    font-size: 32px;
     font-style: normal;
     font-weight: 600;
     line-height: 150%;

src/css/custom.css

@@ -193,7 +193,7 @@ ul {
   h1 {
     color: var(--ifm-text-color-main-title);
     font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 24px;
+    font-size: 32px;
     font-style: normal;
     font-weight: 600;
     line-height: 150%; /* 36px */
@@ -223,6 +223,7 @@ ul {
 
   li {
     font-size: 14px;
+    margin-left: 24px;
   }
 
   .blue-banner-container {