Fix some style issues.

Author: HaudinFlorence

src/components/about/LargePortraitCard.tsx

@@ -7,22 +7,14 @@ import Avatar from "./Avatar";
 
 export function Distinction({ person }) {
   if (person.distinctionTitle.length !== 0) {
-    return (
-      <ul>
-        {person.distinctionTitle.map((distinction, index) => (
-          <li className="cards-list" key={index}>
-            <div>
-              <div>
-                <Link href={person.distinctionLink[index]}>
-                  <DistinctionIcon />
-                  {distinction}
-                </Link>
-              </div>
-            </div>
-          </li>
-        ))}
-      </ul>
-    );
+    return person.distinctionTitle.map((distinction, index) => (
+      <div>
+        <Link href={person.distinctionLink[index]}>
+          <DistinctionIcon className={styles.distinction_icon} />
+          {distinction}
+        </Link>
+      </div>
+    ));
   } else return <div></div>;
 }
 export default function LargePortraitCard({ person }) {
@@ -31,20 +23,10 @@ export default function LargePortraitCard({ person }) {
       <div className={"container"}>
         <div className={"row padding-none"}>
           <div className="col col--12 col--offset-1">
-            <div
-              className={
-                styles.large_card_complete_name
-              }
-            >
+            <div className={styles.large_card_complete_name}>
               {person.completeName}
             </div>
-            <div
-              className={
-                styles.large_card_position
-              }
-            >
-              {person.position}
-            </div>
+            <div className={styles.large_card_position}>{person.position}</div>
           </div>
         </div>
         <div className="row">

src/components/about/styles.module.css

@@ -128,6 +128,11 @@ div .join_the_team_text {
   width: 160px;
 }
 
+.distinction_icon {
+  vertical-align: middle;
+  padding-right: 5px;
+}
+
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {

src/components/home/Hero/styles.module.css

@@ -6,6 +6,7 @@
 }
 .hero_container {
   background-color: var(--ifm-color-primary-p0);
+  padding-bottom: var(--ifm-spacing-3xl);
 }
 
 .table_with_8_customers {

src/components/home/WhatWeDo/styles.module.css

@@ -36,9 +36,8 @@ div .topics_header {
 }
 
 @media only screen and (min-width: 996px) {
-
   .header {
-    color: var(--ifm-color-blue-jupyter);
+    color: var(--ifm-color-primary-p2);
   }
 
   .projects_link{
@@ -51,9 +50,8 @@ div .topics_header {
 
   .whatwedo_container {
     background-color: var(--ifm-color-primary-p1);
-    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-2xl) 0
+    padding: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl) 0
       var(--ifm-spacing-2xl);
-    /*margin-top: var(--ifm-spacing-3xl);*/
   }
 
   .topics_card {

src/components/projects/AllProjects.tsx

@@ -8,7 +8,7 @@ export default function AllProjects() {
       <ul className="row">
         {projectsDetails.map((project, index) => {
           return(
-          <li className="cards-list" key={index}>
+          <li className="projects-list" key={index}>
             <div className="col">
               <ProjectCard project={project}/>
             </div>

src/css/custom.css

@@ -11,7 +11,7 @@
   --ifm-color-grey-condaforge: #7a7865;
   --ifm-color-orange-light: #fef9ec;
   --ifm-color-indigo-i1: rgb(79, 82, 255);
-  --ifm-color-primary-p0: #FFFBD7;
+  --ifm-color-primary-p0: #fffbd7;
   --ifm-color-primary-p1: #f6f195;
   --ifm-color-primary-p2: #1c1c16;
   --ifm-text-color-on-primary-p1: #1e1c00;
@@ -161,13 +161,6 @@ ul {
   }
 }
 
-/*@media (min-width: 1880px) {
-  .row {
-    width: 1600px;
-  }
-}*/
-
-
 /******  Class that are specific for smaller screens*/
 @media (max-width: 996px) {
   .main-container-with-margins {
@@ -646,3 +639,9 @@ a.menu__link:active {
   list-style-type: none;
   padding: none;
 }
+
+.projects-list {
+  list-style-type: none;
+  padding: none;
+  width: 100%;
+}