Keep on working on style and css classes. Add svg pictures for the mo…

…bile menu.
HaudinFlorence · Jul 14, 2024 · c00c730 · c00c730
1 parent 1441977
commit c00c730
Show file tree

Hide file tree

Showing 60 changed files with 512 additions and 610 deletions.
diff --git a/src/components/about/Avatar.tsx b/src/components/about/Avatar.tsx
@@ -11,7 +11,7 @@ export default function Avatar({ person }) {
           height={"160px"}
           alt={
             "Avatar of " +
-            person.CompleteName +
+            person.completeName +
             "working at QuantStack as a " +
             person.position
           }

diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
@@ -4,7 +4,7 @@ import { valuesDetails } from "./Values/valuesDetails";
 
 export default function FourValues() {
   return (
-    <div className={styles.four_values_container}>
+    <div className="upper-container-with-margin-top">
       <div className="row">
         <div className="col">
           <h1 className={"padding-none" + " " + "full-flex-centered"}>

diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx
@@ -49,7 +49,7 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
                 className={styles.avatar}
                 alt={
                   "Avatar of " +
-                  person.CompleteName +
+                  person.completeName +
                   "working at QuantStack as a " +
                   person.position
                 }

diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx
@@ -56,7 +56,7 @@ export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
             height={"160px"}
             alt={
               "Avatar of " +
-              person.CompleteName +
+              person.completeName +
               "working at QuantStack as a " +
               person.position
             }

diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx
@@ -1,5 +1,4 @@
 import styles from "./styles.module.css";
-import Link from "@docusaurus/Link";
 import PopupPortrait from "./SmallPortraitCard";
 
 export default function SubTeam ({

diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
@@ -14,12 +14,11 @@ import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
 import LinkToContact from "../home/LinkToContact";
 
-
 export function About() {
   return (
     <div>
       <div className="main-container-with-margins">
-        <div className={"container" + " " + styles.about_container}>
+        <div className="container upper-container-with-margin-top">
           <div className={"row"}>
             <div className={"col" + " " + "flex-full-centered"}>
               <FourValues />
@@ -59,24 +58,10 @@ export function About() {
           </div>
         </div>
       </div>
-      <div className={styles.join_the_team_container}>
-        <h1
-          className={
-            "text--center" +
-            " " +
-            "padding-none" +
-            " " +
-            "h1-margin-none" +
-            " " +
-            styles.join_the_team_title
-          }
-        >
-          Join the team
-        </h1>
-        <div className={styles.join_the_team_text}>
-          QuantStack is seeking talents in the open-source scientific computing
-          community. Join a team committed to open-science and free software.
-        </div>
+      <div className="blue-banner-container">
+        <div className="blue-banner-header">Join the team</div>
+        QuantStack is seeking talents in the open-source scientific computing
+        community. Join a team committed to open-science and free software.
         <LinkToContact label={"JOIN THE TEAM!"} />
       </div>
     </div>

diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
@@ -60,10 +60,6 @@ div .row {
   margin-right: 0;
 }
 
-.about_container {
-  margin-top: var(--ifm-spacing-6xl);
-}
-
 .value_card {
   height: 540px;
   width: 264px;

diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
@@ -90,6 +90,4 @@ div .blogpost_date {
     var(--ifm-spacing-lg);
 }
 
-.blogposts_container {
-  margin: var(--ifm-spacing-6xl) 0;
-}
+
diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx
@@ -1,14 +0,0 @@
-import styles from "./styles.module.css";
-import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
-
-export default function Header() {
-    return (
-      <div className={styles.careers_header}>
-        <h1 className="text--center">Join the QuantStack team!</h1>
-        <div className={styles.group_photo_container + " " + "flex-full-centered"}>
-          <img src={GroupPhotoJupyterConUrl} alt={"Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."}/>
-        </div>
-      </div>
-    );
-  }
-

diff --git a/src/components/careers/InterviewPicture.tsx b/src/components/careers/InterviewPicture.tsx
@@ -9,7 +9,7 @@ export default function InterviewPicture({ person }) {
           src={person.pictureRoute}
           alt={
             "Picture of" +
-            person.CompleteName +
+            person.completeName +
             "working at QuantStack as a" +
             person.position
           }

diff --git a/src/components/careers/VisitWTJProfile.tsx b/src/components/careers/VisitWTJProfile.tsx
@@ -1,22 +1,9 @@
-import styles from "./styles.module.css";
 import LinkToWTJ from "./LinkToWTJ";
 
 export default function VisitWTJProfile() {
   return (
-    <div className={styles.WTJ_profile_container}>
-      <h1
-        className={
-          "text--center" +
-          " " +
-          "padding-none" +
-          " " +
-          "h1-margin-none" +
-          " " +
-          styles.learn_more_WTJ
-        }
-      >
-        LEARN MORE ON OUR WELCOME TO THE JUNGLE WEB PAGE
-      </h1>
+    <div className="blue-banner-container">
+      Learn more on our Welcome to the Jungle web page.
       <LinkToWTJ label={"OPEN OUR PROFILE"} />
     </div>
   );

diff --git a/src/components/careers/index.tsx b/src/components/careers/index.tsx
@@ -4,15 +4,32 @@ import Interviews from "./Interviews";
 import Header from "./Header";
 import VisitWTJProfile from "./VisitWTJProfile";
 import JoinTheTeam from "./JoinTheTeam";
+import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
 
 export default function Careers() {
   return (
     <div>
       <div className="main-container-with-margins">
-        <div className={"container" + " " + styles.careers_container}>
-          <div className={"row" + " " + "padding-none" + " "+ "flex-full-centered"}>
+        <div className="container upper-container-with-margin-top">
+          <div
+            className={
+              "row padding-none flex-full-centered"
+            }
+          >
             <div className="col">
-              <Header />
+              <h1 className="text--center">Join the QuantStack team!</h1>
+              <div
+                className={
+                  styles.group_photo_container + " " + "flex-full-centered"
+                }
+              >
+                <img
+                  src={GroupPhotoJupyterConUrl}
+                  alt={
+                    "Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."
+                  }
+                />
+              </div>
             </div>
           </div>
           <div

diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
@@ -26,22 +26,13 @@
   -ms-transform: translate(-50%, -50%);
 }
 
-div .learn_more_WTJ {
-  color: var(--ifm-color-secondary-s2);
-  margin-bottom: var(--ifm-spacing-2xl);
-}
-
 .link_to_WTJ {
   background-color: var(--ifm-color-secondary-s2);
   color: white;
   width: 358px;
   font-weight: 700;
 }
 
-  .careers_container {
-    margin-top: var(--ifm-spacing-6xl);
-  }
-
   .interview_card {
     width: 280px;
     height: 300px;
@@ -97,23 +88,3 @@ div .learn_more_WTJ {
     line-height: 24px; /* 133.333% */
     letter-spacing: 0.5px;
   }
-
-  .WTJ_profile_container {
-    margin: var(--ifm-spacing-6xl) 0 var((--ifm-spacing-2xl)) 0;
-    background-color: var(--ifm-color-secondary-s1);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 28px;
-    text-align: center;
-  }
-
-  .learn_more_WTJ {
-    margin-bottom: var(--ifm-spacing-2xl);
-    text-align: center;
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: var(--ifm-font-size-main-title);
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%; /* 72px */
-    letter-spacing: 2.112px;
-  }
diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
@@ -6,7 +6,7 @@ import ContactIllustration from "/img/illustrations/contact.svg"
 
 export function Contact() {
   return (
-    <div className={"container" + " " + styles.contact_container}>
+    <div className="container upper-container-with-margin-top">
       <div className={"row"}>
         <div
           className={

diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
@@ -9,9 +9,6 @@
   width: 508px;
   margin-top: var(--ifm-spacing-2xl);
 }
-.contact_container {
-  margin: var(--ifm-spacing-5xl) 0;
-}
 
 .contact_form {
   margin-top: var(--ifm-spacing-xl);

diff --git a/src/components/home/AboutQS/index.tsx b/src/components/home/AboutQS/index.tsx
@@ -4,25 +4,18 @@ import LinkToAboutUs from "../LinkToAboutUs";
 
 export default function AboutQS() {
   return (
-    <div className={"container" + " " + styles.about_us_container}>
-      <div
-        className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
-      >
-        <div className={"col" + " " + "padding-none" + " " + "margin-none"}>
-          <div className={styles.text_container}>
+    <div className={"container" + " " + styles.aboutQS_container}>
+      <div className={"row flex-full-centered padding-none"}>
+        <div className={"col padding-none margin-none"}>
+          <div className={styles.aboutQS_text}>
             We are a team of expert of open-source developers, the very same
             people behind a number of technologies that you already use.
           </div>
         </div>
       </div>
-      <div
-        className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
-      >
-        <div className={"col" + " " + "padding-none" + " " + "margin-none"}>
-          <div
-            className="flex-full-centered"
-            style={{ marginBottom: "var(--ifm-spacing-2xl)" }}
-          >
+      <div className={"row flex-full-centered padding-none"}>
+        <div className={"col padding-none margin-none"}>
+          <div className="flex-full-centered">
             <img
               src={GroupPhotoUrl}
               alt={
@@ -32,13 +25,11 @@ export default function AboutQS() {
           </div>
         </div>
       </div>
-      <div
-        className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
-      >
-        <div className={"col" + " " + "padding-none"}>
-          <LinkToAboutUs label={"LEARN MORE ABOUT US"} />
-
-          <div className="spacing-2xl" />
+      <div className={"row flex-full-centered padding-none"}>
+        <div className={"col padding-none"}>
+          <div className={styles.learn_more_button_container}>
+            <LinkToAboutUs label={"LEARN MORE ABOUT US"} />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/home/AboutQS/styles.module.css b/src/components/home/AboutQS/styles.module.css
@@ -1,15 +1,32 @@
-.about_us_container {
-  margin-top: var(--ifm-spacing-2xl);
-  background-color: var(--ifm-color-primary-p1);
-}
+@media only screen and (max-width: 996px) {
+  .aboutQS_container {
+    background-color: var(--ifm-color-secondary-s2);
+    color: white;
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0
+      var(--ifm-spacing-2xl);
+    text-align: center;
+  }
+
+  .aboutQS_text {
+    font-size: 14px;
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-xl);
+  }
 
-div .text_container {
-  color: var(--ifm-color-primary-p2);
 }
 
-.text_container {
-  font-size: 24px;
-  text-align: center;
-  margin-bottom: var(--ifm-spacing-lg);
-  padding: var(--ifm-spacing-5xl) var(--ifm-spacing-5xl);
+@media only screen and (min-width: 996px) {
+  .aboutQS_container {
+    margin-top: var(--ifm-spacing-2xl);
+    background-color: var(--ifm-color-primary-p1);
+    color: var(--ifm-color-primary-p2);
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-5xl) 0
+      var(--ifm-spacing-5xl);
+  }
+
+  .aboutQS_text {
+    font-size: 24px;
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-lg);
+  }
 }