Title alignment, project card compactness, fundable sidebar fix

- Normalize all page title alignment to left (remove text--center from About,
  Careers, Contact, and fix spurious full-flex-centered on FourValues)
- ProjectCard: col-8/col-4 split (was 6/6), border frame moved from the full
  column onto an inner wrapper around the logo; logo constrained to max 160x160px
  via object-fit; implement reverse alternating layout from project data
- Project text box: reduce padding from 4xl/3xl to 2xl/2xl; remove text-align:justify
- Fundable sidebar: replace Infima col--2/col--10 with plain flexbox
  (fundable_layout / fundable_sidebar / fundable_main); sidebar is 200px fixed
  width, sticky top:80px, hidden on mobile via media query — no more overlap

Author: MMesch

src/components/about/FourValues.tsx

@@ -7,9 +7,7 @@ export default function FourValues() {
     <div>
       <div className="row">
         <div className="col">
-          <h1 className={"padding-none" + " " + "full-flex-centered"}>
-            Our values{" "}
-          </h1>
+          <h1>Our values</h1>
         </div>
       </div>
       <ul className={"cards-row " + styles.values_row}>

src/components/about/index.tsx

@@ -22,7 +22,7 @@ export function About() {
         <FourValues />
 
         <div className="row-with-margins">
-          <h1 className="text--center">Meet the QuantStack team</h1>
+          <h1>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.

src/components/careers/index.tsx

@@ -10,7 +10,7 @@ export default function Careers() {
   return (
     <div>
       <div className="page-content upper-container-with-margin-top">
-        <h1 className="text--center">Join the QuantStack team!</h1>
+        <h1>Join the QuantStack team!</h1>
         <div className={styles.group_photo_container + " flex-full-centered"}>
           <img
             src={GroupPhotoJupyterConUrl}

src/components/contact/index.tsx

@@ -6,7 +6,7 @@ import ContactIllustration from "/img/illustrations/contact.svg";
 export function Contact() {
   return (
     <div className="page-content upper-container-with-margin-top">
-      <h1 className="padding-none text--center">Contact us</h1>
+      <h1>Contact us</h1>
       <div className="row">
         <div className="col col--6 flex-full-centered" style={{ padding: "var(--ifm-spacing-xl)" }}>
           <ContactIllustration

src/components/fundable/index.tsx

@@ -56,14 +56,11 @@ export default function FundableProjects() {
   return (
 
     <div className="page-content upper-container-with-margin-top">
-      <div className="row">
-        <div className={"col col--2" + " " + styles.menu_sidebar}>
+      <div className={styles.fundable_layout}>
+        <aside className={styles.fundable_sidebar}>
           <MenuSidebar />
-        </div>
-        <div className={"col col--10" + " " + styles.main_area_desktop}>
-          <MainAreaFundableProjects />
-        </div>
-        <div className={"col col--12" + " " + styles.main_area_mobile}>
+        </aside>
+        <div className={styles.fundable_main}>
           <MainAreaFundableProjects />
         </div>
       </div>

src/components/fundable/styles.module.css

@@ -106,26 +106,44 @@
   margin: var(--ifm-spacing-md) 0;
 }
 
+.fundable_layout {
+  display: flex;
+  gap: var(--ifm-spacing-3xl);
+  align-items: flex-start;
+}
+
+.fundable_sidebar {
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.fundable_main {
+  flex: 1;
+  min-width: 0;
+}
+
 .menu_sidebar {
-  padding: 1rem;
-  overflow-y: auto;
+  padding: var(--ifm-spacing-sm) 0;
 }
 
 .menu_sidebar_item {
   font-family: var(--ifm-font-family-roboto);
-  font-size: 16px;
+  font-size: 15px;
   font-style: normal;
   font-weight: 500;
-  line-height: 48px;
-  /* 300% */
+  line-height: 40px;
   letter-spacing: 0.15px;
 }
 
 .menu_sidebar_container {
   position: sticky;
   top: 80px;
-  display: flex;
-  height: fit-content;
+}
+
+@media (max-width: 996px) {
+  .fundable_sidebar {
+    display: none;
+  }
 }
 
 .menu_sidebar_indicator {
@@ -303,14 +321,6 @@
     padding: var(--ifm-spacing-md);
   }
 
-  .main_area_desktop {
-    display: none
-  }
-
-  .menu_sidebar {
-    display: none
-  }
-
   .small_project_card {
     width: 90vw;
     margin-bottom: var(--ifm-spacing-lg);
@@ -410,10 +420,6 @@
     max-height: 95vh;
   }
 
-  .main_area_desktop {
-    display: none
-  }
-
   .small_input {
     width: 400px;
     height: 56px;
@@ -436,10 +442,6 @@
     height: 200px;
   }
 
-  .menu_sidebar {
-    display: none
-  }
-
   .get_a_quote_dialog {
     width: 80vw;
     padding: 40px;
@@ -487,14 +489,6 @@
     max-height: 95vh;
   }
 
-  .main_area_mobile {
-    display: none;
-  }
-
-  .main_area_desktop {
-    padding-left: 80px;
-  }
-
   .small_input {
     width: 400px;
     height: 56px;

src/components/projects/ProjectCard.tsx

@@ -1,33 +1,33 @@
 import styles from "./styles.module.css";
 
 export default function ProjectCard({ project }): JSX.Element {
-  const prefix = "project_picture_";
-  const base = `${prefix}${project.name}` 
-  return (
-    <div className="row row--no-gutters">
-      <div
-        className={"col col--6" + " " + styles.project_text}
-      >
-        <div className={styles.project_title}>{project.title}</div>
-        <div className={styles.project_description}>
-          <project.ProjectMD />
-        </div>
+  const picClass = styles[`project_picture_${project.name}`] ?? "";
+  const isReverse = project.reverse === "true";
+
+  const textCol = (
+    <div className={"col col--8 " + styles.project_text}>
+      <div className={styles.project_title}>{project.title}</div>
+      <div className={styles.project_description}>
+        <project.ProjectMD />
       </div>
-      <div
-        className={
-          "col col--6 flex-full-centered padding-none" +
-          " " +
-          styles[base]
-        }
-      >
-          <div className={styles.col_project_picture}></div>
-          <img
-            src={project.pictureRoute}
-            width={project.pictureWidth}
-            height={project.pictureHeight}
-            alt={project.pictureAltText}
-          />
+    </div>
+  );
+
+  const imageCol = (
+    <div className="col col--4 flex-full-centered padding-none">
+      <div className={picClass}>
+        <img
+          src={project.pictureRoute}
+          alt={project.pictureAltText}
+          className={styles.project_logo}
+        />
       </div>
     </div>
   );
+
+  return (
+    <div className="row row--no-gutters">
+      {isReverse ? <>{imageCol}{textCol}</> : <>{textCol}{imageCol}</>}
+    </div>
+  );
 }