Remove most of the media queries in the various css files and update …

…style.
HaudinFlorence · Jul 10, 2024 · bc3e7f6 · bc3e7f6
1 parent d1b434b
commit bc3e7f6
Show file tree

Hide file tree

Showing 30 changed files with 579 additions and 765 deletions.
diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
@@ -2,30 +2,37 @@ import styles from "./styles.module.css";
 import { ValueCard } from "@site/src/components/about/ValueCard";
 import { valuesDetails } from "./Values/valuesDetails";
 
-
 export default function FourValues() {
   return (
     <div className={styles.four_values_container}>
       <div className="row">
         <div className="col">
-          <h1 className={"padding-none" + " "+ "full-flex-centered"}>Our values </h1>
+          <h1 className={"padding-none" + " " + "full-flex-centered"}>
+            Our values{" "}
+          </h1>
         </div>
       </div>
       <ul
-        className={"row" + " " + "padding-none" + " " + styles.row_with_margins+" "+ "flex-full-centered"}
+        className={
+          "row" +
+          " " +
+          "padding-none" +
+          " " +
+          styles.row_with_margins +
+          " " +
+          "flex-full-centered"
+        }
       >
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
               <div className={styles.value_card_container}>
-                <ValueCard
-                  value={value}
-                />
+                <ValueCard value={value} />
               </div>
             </div>
           </li>
         ))}
       </ul>
     </div>
   );
-}
+}
diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx
@@ -10,7 +10,7 @@ export default function SubTeam ({
 }) {
   return (
     <div className={styles.subteam_component}>
-      <h2 className="text-centered"> {description}</h2>
+      <h2 className="text--center"> {description}</h2>
       <div className={"container" + " " + styles.subteam_container}>
         <ul
           className={

diff --git a/src/components/about/ValueCard.tsx b/src/components/about/ValueCard.tsx
@@ -2,18 +2,19 @@ import styles from "./styles.module.css";
 
 export function ValueCard({ value }) {
   return (
-    <div className={"card " + styles.value_card}>
+    <div className={"card" + " " + styles.value_card}>
       <div
-        className={"flex-full-centered"}
+        className={"card__header flex-full-centered"}
         style={{ marginBottom: "var(--ifm-spacing-lg)" }}
       >
         <value.pictureComponent alt={value.alt} />
+
+        <div className={styles.value_header}>{value.name}</div>
       </div>
-      <div className={styles.value_header}>{value.name}</div>
-      <div className={styles.value_text}>
+      <div className={"card__body" + " " + styles.value_text}>
         <value.DescriptionMD className={styles.value_component} />
       </div>
     </div>
   );
 }
- export default ValueCard;
+export default ValueCard;
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
@@ -28,7 +28,7 @@ export function About() {
 
           <div className="row">
             <div className="col col--10 col--offset-1">
-              <h1 className="text-centered">Meet the QuantStack team</h1>
+              <h1 className="text--center">Meet the QuantStack team</h1>
               <div className={styles.team_description}>
                 A team of outliers, leaders in software projects adopted at the
                 global scale, benefiting millions of people worldwide.
@@ -62,7 +62,7 @@ export function About() {
       <div className={styles.join_the_team_container}>
         <h1
           className={
-            "text-centered" +
+            "text--center" +
             " " +
             "padding-none" +
             " " +

diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
@@ -29,9 +29,9 @@
   line-height: 28px;
   text-align: center;
 }
-@media only screen and (max-width: 996px) {
+/*@media only screen and (max-width: 996px) {
   /* mobile */
-  .h2_custom {
+  /*.h2_custom {
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl);
   }
 
@@ -61,7 +61,7 @@
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px; 
     letter-spacing: 0.25px;
   }
 
@@ -93,13 +93,13 @@
     font-size: var(--ifm--font-size-normal);
     font-style: normal;
     font-weight: 400;
-    line-height: 24px; /* 133.333% */
+    line-height: 24px;
     letter-spacing: 0.5px;
     padding: var(--ifm-spacing-4xl) var(--ifm-spacing-2xl);
   }
 }
-
-@media only screen and (min-width: 996px) {
+*/
+/*@media only screen and (min-width: 996px) {
   /* Desktop */
   .value_header {
     font-family: var(--ifm-font-family-rubik-one);
@@ -274,4 +274,4 @@
   div .join_the_team_text {
     color: var(--ifm-text-color-blue-banner);
   }
-}
+/*}*/
diff --git a/src/components/blog/BlogpostCard.tsx b/src/components/blog/BlogpostCard.tsx
@@ -8,10 +8,9 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 export default function BlogpostCard({ blogpost, timeIndex }) {
   return (
     <div
-      className={"card " + styles.blogpost_card}
+      className={"card" + " " + styles.blogpost_card}
       style={{ marginBottom: "var(--ifm-spacing-lg)" }}
     >
-
       <Link href={blogpost.url}>
         <div className="container">
           <div
@@ -25,29 +24,33 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
               "margin-none"
             }
           ></div>
-
-          <div className="flex-full-centered" style = {{height: "180px"}}>
-            <div className={styles.blogpost_image}>
+          <div className="card__header">
+            <div
+              className={styles.blogpost_image + " " + "flex-full-centered"}
+              style={{ height: "180px" }}
+            >
               <img
                 src={useBaseUrl(blogpost.image)}
                 id={blogpost.imageID}
                 width={blogpost.imageRenderedWidth}
                 height={blogpost.imageRenderedHeight}
-                alt={"Illustration for the blog post"}
+                alt={"Illustration for the blog post."}
               />
             </div>
-          </div>
 
-          <div className={styles.blogpost_header}>{blogpost.title}</div>
+            <div className={styles.blogpost_header}>{blogpost.title}</div>
+          </div>
 
-          <div className={styles.blogpost_summary}>
-            {blogpost.summary.length < 200
-              ? blogpost.summary
-              : blogpost.summary.substring(0, 200) + "..."}
+          <div className={"card__body"}>
+            <div className={styles.blogpost_summary}>
+              {blogpost.summary.length < 200
+                ? blogpost.summary
+                : blogpost.summary.substring(0, 200) + "..."}
+            </div>
           </div>
 
           <div
-            className="row"
+            className={"row card__footer"}
             style={{ marginBottom: "var(--ifm-spacing-md)" }}
           >
             <div className="col" style={{ padding: "0px" }}>

diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
@@ -90,13 +90,6 @@ div .blogpost_date {
     var(--ifm-spacing-lg);
 }
 
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-}
-
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .blogposts_container {
-    margin: var(--ifm-spacing-6xl) 0;
-  }
+.blogposts_container {
+  margin: var(--ifm-spacing-6xl) 0;
 }
diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx
@@ -4,7 +4,7 @@ import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
 export default function Header() {
     return (
       <div className={styles.careers_header}>
-        <h1 className="text-centered">Join the QuantStack team!</h1>
+        <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>

diff --git a/src/components/careers/VisitWTJProfile.tsx b/src/components/careers/VisitWTJProfile.tsx
@@ -6,7 +6,7 @@ export default function VisitWTJProfile() {
     <div className={styles.WTJ_profile_container}>
       <h1
         className={
-          "text-centered" +
+          "text--center" +
           " " +
           "padding-none" +
           " " +

diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
@@ -38,67 +38,6 @@ div .learn_more_WTJ {
   font-weight: 700;
 }
 
-@media only screen and (max-width: 400px) {
-  /*Mobile */
-  .careers_container {
-    margin-top: var(--ifm-spacing-2xl);
-  }
-
-  .join_the_team_text {
-    text-align: center;
-    font-size: 12px;
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-primary-p2);
-    text-align: center;
-    font-style: normal;
-    font-weight: 400;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
-
-  .interview_card {
-    width: 300px;
-    height: 270px;
-    background-color: var(--ifm-background-color);
-    border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    padding: var(--ifm-spacing-sm);
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .interview_name {
-    color: var(--ifm-text-color);
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 36px; /* 128.571% */
-  }
-
-  .interview_position {
-    color: var(--ifm-text-color);
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-  }
-
-  .WTJ_profile_container {
-    margin-top: var(--ifm-spacing-2xl);
-    background-color: var(--ifm-background-color-blue-banner);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 16px;
-    text-align: center;
-  }
-}
-
-@media only screen and (min-width: 400px) {
-  /*Desktop */
   .careers_container {
     margin-top: var(--ifm-spacing-6xl);
   }
@@ -178,5 +117,3 @@ div .learn_more_WTJ {
     line-height: 150%; /* 72px */
     letter-spacing: 2.112px;
   }
-
-}
diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
@@ -1,4 +1,3 @@
-
 .send_button {
   width: 258px;
   height: 59px;
@@ -10,57 +9,27 @@
   width: 508px;
   margin-top: var(--ifm-spacing-2xl);
 }
-
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .contact_container {
-    margin: var(--ifm-spacing-5xl) 0;
-    text-align: center;
-  }
-
-  .form_label {
-    font-size: 12px;
-    color: var(---ifm-text-color);
-    background-color: var(--ifm-color-orange-light);
-  }
-
-  .small_input {
-    width: 297px;
-    height: 56px;
-    border-radius: 4px;
-  }
-
-  .large_input {
-    width: 297px;
-    height: 220px;
-    border-radius: 4px;
-  }
+.contact_container {
+  margin: var(--ifm-spacing-5xl) 0;
 }
 
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .contact_container {
-    margin: var(--ifm-spacing-5xl) 0;
-  }
-
-  .contact_form {
-    margin-top: var(--ifm-spacing-xl);
-  }
+.contact_form {
+  margin-top: var(--ifm-spacing-xl);
+}
 
-  .form_label {
-    font-size: 12px;
-    color: var(--ifm-text-color);
-    background-color: var(--ifm-background-color);
-  }
-  .small_input {
-    width: 508px;
-    height: 56px;
-    border-radius: 4px;
-  }
+.form_label {
+  font-size: 12px;
+  color: var(--ifm-text-color);
+  background-color: var(--ifm-background-color);
+}
+.small_input {
+  width: 508px;
+  height: 56px;
+  border-radius: 4px;
+}
 
-  .large_input {
-    width: 508px;
-    height: 220px;
-    border-radius: 4px;
-  }
-}
+.large_input {
+  width: 508px;
+  height: 220px;
+  border-radius: 4px;
+}