Fix styles padding and margins issues, add a background colors on topics cards.

Author: HaudinFlorence

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

@@ -4,10 +4,6 @@
   }
 }
 
-.project_desktop {
-  margin-bottom: var(--ifm-spacing-3xl);
-}
-
 .h2_custom {
   color: var(--ifm-color-blue-jupyter);
 }
@@ -16,7 +12,6 @@
   padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
 }
 
-
 .project_yellow {
   background-color: var(--ifm-color-primary-p1);
 }

src/components/home/WhatWeDo/Topics.tsx

@@ -13,12 +13,10 @@ export function Topics() {
         <ul className="row flex-full-centered">
           {topicsDetails.map((topics, index) => (
             <li className="cards-list" key={index}>
-              <div className="col flex-full-centered">
-                <TopicsCard
-                  topics={topics}
-                  TopicsDescriptionMD={TopicsDescriptions[index]}
-                />
-              </div>
+              <TopicsCard
+                topics={topics}
+                TopicsDescriptionMD={TopicsDescriptions[index]}
+              />
             </li>
           ))}
         </ul>

src/components/home/WhatWeDo/index.tsx

@@ -5,29 +5,20 @@ import LinkToProjects from "../LinkToProjects";
 
 export function WhatWeDo() {
   return (
-    <div className={"container" + " " + styles.whatwedo_container}>
-      <div className="row">
-        <div className="col flex-full-centered">
-          <div className={styles.services_link_mobile}>
-            <LinkToServices label={"DISCOVER OUR SERVICES"} />
-          </div>
+    <div className={"container" + styles.whatwedo_container}>
+      <div className="row flex-full-centered">
+        <div className={styles.services_link_mobile}>
+          <LinkToServices label={"DISCOVER OUR SERVICES"} />
         </div>
       </div>
-      <div className="row">
-        <div className="col flex-full-centered">
-          <h1 className={styles.header}> What we do </h1>
-        </div>
+      <div className={"row flex-full-centered"}>
+        <h1 className={styles.header}> What we do </h1>
+        <Topics />
       </div>
-      <div className="row">
-        <div className="col flex-full-centered">
-          <Topics />
-        </div>
-      </div>
-      <div className="row">
-        <div className="col flex-full-centered">
-          <div className={styles.projects_link}>
-            <LinkToProjects label={"DISCOVER ALL OF OUR PROJECTS"} />
-          </div>
+      <div className="row flex-full-centered">
+        <div className={styles.projects_link}>
+          <LinkToProjects label={"DISCOVER ALL OF OUR PROJECTS"} />
+
           <div className={styles.services_link_desktop}>
             <LinkToServices label={"DISCOVER OUR SERVICES"} />
           </div>

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

@@ -18,21 +18,21 @@ div .topics_header {
     display: none;
   }
 
-
   .whatwedo_container {
     /*background-color: var(--ifm-color-primary-p1);*/
     padding: 0;
     margin-top: 0;
   }
 
   .topics_card {
-    width: 100%;
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-lg);
+    width: 80%;
     text-align: justify;
+    background-color: var(--ifm-color-primary-p0);
+    margin: var(--ifm-spacing-lg) auto var(--ifm-spacing-lg) auto ;
   }
 
   .topics_card .p {
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-lg);
+    padding: var(--ifm-spacing-xs) var(--ifm-spacing-xs);
   }
 
 

src/components/home/styles.module.css

@@ -15,7 +15,6 @@
     font-weight: 700;
   }
 
-
   .link_to_about_us {
     background-color: var(--ifm-color-primary-p1);
     color: var(--ifm-text-color-on-primary-p1);

src/css/custom.css

@@ -92,7 +92,7 @@
 
 ul {
   padding-left: 0;
-  margin-left:0;
+  margin-left: 0;
 }
 
 .container {
@@ -183,6 +183,9 @@ ul {
   .row-with-margins {
     margin: var(--ifm-spacing-xl) 0;
   }
+  .col {
+    padding: 0;
+  }
 
   h1 {
     color: var(--ifm-text-color-main-title);
@@ -212,7 +215,7 @@ ul {
     line-height: 150%;
     line-height: 20px;
     letter-spacing: 0.25px;
-    padding: 0 var(--ifm-spacing-lg) 
+    padding: 0 var(--ifm-spacing-lg);
   }
 
   li {
@@ -298,7 +301,6 @@ ul {
     margin: var(--ifm-spacing-2xl) 0;
   }
 
-  
   h1 {
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
@@ -638,13 +640,18 @@ a.menu__link:active {
 
 .cards-list {
   list-style-type: none;
-  padding: none;
-  margin-left: 0;
+  padding: 0;
+  margin: 0;
+}
+
+ul.row {
+  margin: 0;
+  padding: 0;
 }
 
 .projects-list {
   list-style-type: none;
   padding: none;
-  margin-left:0;
+  margin-left: 0;
   width: 100%;
-}
+}