Fix some style issues.

HaudinFlorence · Jul 7, 2024 · a33798e · a33798e
1 parent 4c24534
commit a33798e
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 62 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -202,7 +202,7 @@ const config: Config = {
             {
               html: `
               
-               <div class="quantstack-address">
+               <div class="div .quantstack-address">
                       16, avenue Curti <br/>
                       94100 Saint-Maur-des-Fossés <br/>
                       France

diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
@@ -240,7 +240,7 @@
   }
 
   .four_values_container {
-    margin: var(--ifm-spacing-5xl) 0;
+    margin-bottom: var(--ifm-spacing-5xl);
   }
 
   .join_the_team_container {

diff --git a/src/components/blog/BlogpostCard.tsx b/src/components/blog/BlogpostCard.tsx
@@ -11,7 +11,7 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
       className={"card " + styles.blogpost_card}
       style={{ marginBottom: "var(--ifm-spacing-lg)" }}
     >
-      <div className={styles.blog_time_index}>{timeIndex}</div>
+
       <Link href={blogpost.url}>
         <div className="container">
           <div

diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
@@ -9,16 +9,13 @@
   box-shadow: 4px 4px 18px -1px #dee0fc;
   padding: var(--ifm-spacing-xl);
   background:var(--ifm-background-color-card);
+
 }
 
 .blogpost_card:hover {
   border: 1px solid #cbc7b1;
 }
 
-.blog_time_index {
-  font-size: 10px;
-  font-family: var(--ifm-font-family-roboto);
-}
 
 .blogpost_summary {
   color: var(---ifm-text-color);
@@ -31,6 +28,7 @@
   text-align: justify;
   margin-bottom: var(--ifm-spacing-sm);
   height: 140px;
+  color:var(--ifm-text-color-card);
 }
 
 .blogpost_header {
@@ -43,6 +41,7 @@
   letter-spacing: -0.198px;
   height: 48px;
   margin: var(--ifm-spacing-xl) 0;
+  color:var(--ifm-text-color-card);
 }
 
 .blogpost_date {
@@ -54,6 +53,7 @@
   line-height: 16px;
   letter-spacing: -0.132px;
   text-align: left;
+  color:var(--ifm-text-color-card);
 }
 
 .blogpost_authors {
@@ -63,6 +63,7 @@
   font-weight: 400;
   line-height: 16px;
   text-align: left;
+  color:var(--ifm-text-color-card);
 }
 
 .search_input {

diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx
@@ -5,7 +5,7 @@ export default function Header() {
     return (
       <div className={styles.careers_header}>
         <h1 className="text-centered">Join the QuantStack team!</h1>
-        <div className={styles.group_photo_container}>
+        <div className={styles.group_photo_container + " " + "flex-full-centered"}>
           <img src={GroupPhotoJupyterConUrl} />
         </div>
       </div>

diff --git a/src/components/careers/Interviews.tsx b/src/components/careers/Interviews.tsx
@@ -6,7 +6,7 @@ export default function Interviews({ details, description }) {
     <div className={styles.subteam_component}>
       <h2 className={styles.h2_custom}>{description}</h2>
       <div className="container">
-        <ul className="row">
+        <ul className={"row" + " "+ "flex-full-centered"}>
           {details.map((person, index) => (
             <li className="cards-list" key={index}>
               <div className="col col--2">

diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
@@ -104,8 +104,8 @@ div .learn_more_WTJ {
   }
 
   .interview_card {
-    width: 300px;
-    height: 340px;
+    width: 280px;
+    height: 300px;
     background-color: var(--ifm-background-color);
     border-radius: 10px;
     box-shadow: 0px 0px 8px 1px #c8c8c7;

diff --git a/src/components/projects/desktop/AllProjectsDesktop.tsx b/src/components/projects/desktop/AllProjectsDesktop.tsx
@@ -15,7 +15,7 @@ const ProjectsDescriptions = [
 
 export function AllProjectsDeskTop() {
   return (
-    <div className="container">
+    <div className={"container"}>
       <ul className={"row"}>
         {projectsDetails.map((project, index) => (
           <li className="cards-list" key={index}>

diff --git a/src/components/projects/desktop/ProjectDesktop.tsx b/src/components/projects/desktop/ProjectDesktop.tsx
@@ -7,10 +7,10 @@ export default function ProjectDesktop({
   if (project.reverse === "false") {
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "padding-none" + " " + "margin-none"+" "+ styles.row_project}>
+        <div className={"row"}>
           <div
             className={
-              "col col--6" + " " + styles.col_project_text
+              "col col--6 col--offset-1" + " " + styles.col_project_text
             }
           >
             <div className={styles.project_title}>{project.title}</div>
@@ -20,7 +20,7 @@ export default function ProjectDesktop({
           </div>
           <div
             className={
-              "col col--5" +
+              "col col--4" +
               " " +
               "flex-full-centered" +
               " " +
@@ -43,17 +43,19 @@ export default function ProjectDesktop({
   } else if (project.reverse === "true") {
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "padding-none" + " " + "margin-none" + " "+ styles.row_project}>
+          <div className={"row"}>
           <div
             className={
-              "col col--5" +
+              "col col--4" +
               " " +
-             "flex-full-centered" + " "+ "padding-none"+
+              "flex-full-centered" +
+              " " +
+              "padding-none" +
               " " +
               styles.col_project_picture_left
             }
             /*style={{ border: project.pictureBorderDesktop }}*/
-            style={{border: "Opx"}}
+            style={{ border: "0px" }}
           >
             <div className={styles.project_picture}>
               <img
@@ -64,7 +66,7 @@ export default function ProjectDesktop({
             </div>
           </div>
 
-          <div className={"col col--6" + " " + styles.col_project_text}>
+          <div className={"col col--6 col--offset-1" + " " + styles.col_project_text}>
             <div className={styles.project_title}>{project.title}</div>
             <div className={styles.project_description}>
               <ProjectDescriptionMD />

diff --git a/src/components/projects/index.tsx b/src/components/projects/index.tsx
@@ -21,7 +21,7 @@ export default function Projects() {
 
   return (
     <div>
-      <div className="main-container-with-margins">
+      <div className={"main-container-with-larger-margins"}>
         <div>
           <HeaderComponent />
 

diff --git a/src/components/projects/mobile/AllProjectsMobile.tsx b/src/components/projects/mobile/AllProjectsMobile.tsx
@@ -7,8 +7,8 @@ export default function AllProjectsMobile () {
   return (
     <div>
       <div className="main-container-with-margins">
-        <div className="container">
-          <ul className={"row"}>
+        <div className={"container"}>
+          <ul className={"row" + " " + "flex-full-centered"}>
             {projectsDetails.map((project, index) => (
               <li className="cards-list" key={index}>
                 <div className="col">

diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css
@@ -11,14 +11,14 @@ div .schedule_container {
   .project_container {
     padding: var(--ifm-spacing-sm) var(--ifm-spacing-lg);
     margin-bottom: var(--ifm-spacing-xs);
-    width: 100px;
+    width: 200px;
     height: 100px;
-    background-color: var(--ifm-color-orange-light);
+    background-color: var(--ifm-background-color-project-card);
   }
 
   .header_text {
     font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-neutral-n2);
+    color: var(--ifm-text-color-project-card);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -56,7 +56,7 @@ div .schedule_container {
 
   .schedule_text {
     font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-secondary-s3);
+    color: var(--ifm-text-color-blue-banner);
     font-size: 14px;
     font-family: Roboto;
     font-size: 14px;
@@ -85,6 +85,10 @@ div .schedule_container {
     letter-spacing: 1.056px;
     height: 52px;
   }
+
+  .project_description_container {
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-3xl);
+  }
 }
 
 @media only screen and (min-width: 996px) {
@@ -93,6 +97,9 @@ div .schedule_container {
     margin-bottom: var(--ifm-spacing-lg);
     margin-left: 0;
     padding: 0;
+    background-color: var(--ifm-background-color-project-card);
+    border-radius: 10px;
+    box-shadow: 0px 0px 8px 1px #d0cb54;
   }
 
   .project_title {
@@ -119,11 +126,12 @@ div .schedule_container {
     color: var(--ifm-text-color-project-card);
   }
 
-  .row_project {
+  /*.row_project {
     background-color: var(--ifm-background-color-project-card);
     border-radius: 10px;
     box-shadow: 0px 0px 8px 1px #d0cb54;
-  }
+    width: 1200px;
+  }*/
 
   .col_project_text {
     background-color: var(--ifm-background-color-project-card);
@@ -134,8 +142,7 @@ div .schedule_container {
 
   .col_project_picture_left {
     margin-right: var(--ifm-spacing-lg);
-    /*border-radius: 10px;*/
-    /*border: solid 2px;*/
+    border-radius: 10px;
   }
 
   .col_project_picture_right {
@@ -151,7 +158,7 @@ div .schedule_container {
 
   .header_text {
     font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-neutral-n1);
+    color: var(--ifm-text-color-project-card);
     font-size: 22px;
     font-style: normal;
     font-weight: 400;
@@ -178,12 +185,17 @@ div .schedule_container {
   div .schedule_text {
     color: var(--ifm-text-color-blue-banner);
   }
-  
+
   .link_to_button_custom {
     margin: var(--ifm-spacing-lg) 0;
   }
 
   .schedule_a_meeting_container {
     margin-top: var(--ifm-spacing-7xl);
   }
+
+  .all_projects_desktop_container {
+    margin-left: var(--ifm-spacing-6xl);
+    margin-right: var(--ifm-spacing-6xl);
+  }
 }
diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx
@@ -18,17 +18,18 @@ export function SpecialProjectsIllustration() {
   );
 }
 
-
 export function SpecialProjectsDesktop() {
   return (
-    <div className={"container" + " " + styles.service_container}>
-      <div className="row row--no-gutters">
-        <div className="col col--4 col--offset-1">
-          <h2>Special projects</h2>
-          <SpecialProjectsMD />
-        </div>
-        <div className="col col--5 col--offset-1">
-         <SpecialProjectsIllustration/>
+    <div className="main-container-with-margins">
+      <div className={"container" + " " + styles.service_container}>
+        <div className="row">
+          <div className="col col--4 col--offset-2">
+            <h2>Special projects</h2>
+            <SpecialProjectsMD />
+          </div>
+          <div className="col col--5">
+            <SpecialProjectsIllustration />
+          </div>
         </div>
       </div>
     </div>
@@ -42,7 +43,6 @@ export function SpecialProjectsMobile() {
         <div className="col">
           <div className="flex-full-centered">
             <SpecialProjectsIllustration />
-
           </div>
         </div>
       </div>

diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx
@@ -9,7 +9,7 @@ const breakpointValue: number = 996;
 export function SupportIllustration() {
   return (
     <ThemedImage
-      alt="Astronaut logo of QuantStack"
+      alt="Illustration for the support section, showing symbolically a person indicating the direction to take."
       sources={{
         light: useBaseUrl("/img/illustrations/support-light.svg"),
         dark: useBaseUrl("/img/illustrations/support-dark.svg"),

diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css
@@ -1,9 +1,3 @@
-
-div .transition {
-  color: var(--ifm-background-color-blue-banner);
-}
-
-
 @media only screen and (max-width: 996px) {
   /*Mobile */
   .services_header_text {
@@ -55,7 +49,7 @@ div .transition {
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: var(--ifm-font-size-secondary-title);
     font-weight: 800;
-   
+
     color: var(--ifm-color-secondary-s3);
     padding: var(--ifm-spacing-2xl) 0;
     margin-top: var(--ifm-spacing-7xl);
@@ -85,5 +79,6 @@ div .transition {
     line-height: 150%;
     text-align: center;
     margin-top: var(--ifm-spacing-4xl);
+    color: var(--ifm-text-color-services-transition);
   }
 }