Design overhaul

docusaurus.config.ts

@@ -20,6 +20,8 @@ const config: Config = {
   organizationName: "/HaudinFlorence/", // Usually your GitHub org/user name.
   projectName: "quantstack.github.io", // Usually your repo name.
 
+  clientModules: [require.resolve("./src/clientModules/navbarScroll.ts")],
+
   onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
   staticDirectories: ["static"],
@@ -107,6 +109,12 @@ const config: Config = {
       },
 
       items: [
+        {
+          to: "/",
+          className: "custom_navbar_item",
+          label: "Home",
+          position: "left",
+        },
         {
           to: "/projects/",
           className: "custom_navbar_item",
@@ -122,7 +130,7 @@ const config: Config = {
         {
           to: "/about/",
           className: "custom_navbar_item",
-          label: "About us",
+          label: "About",
           position: "left",
         },
         {
@@ -139,15 +147,15 @@ const config: Config = {
         },
         {
           to: "/fundable/",
-          label: "Fundable projects",
-          position: "right",
-          className: "fundable_projects"
+          className: "custom_navbar_item",
+          label: "Sponsor",
+          position: "left",
         },
         {
           to: "/contact/",
-          label: "Contact us",
-          position: "right",
-          className: "contact",
+          className: "custom_navbar_item",
+          label: "Contact",
+          position: "left",
         },
         {
           to: "https://github.com/QuantStack",

flake.nix

@@ -0,0 +1,24 @@
+{
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs = { self, nixpkgs }:
+    let
+      system = "x86_64-linux";
+      pkgs = nixpkgs.legacyPackages.${system};
+    in {
+      devShells.${system}.default = pkgs.mkShell {
+        buildInputs = with pkgs; [
+          nodejs_20
+          python3
+          pkg-config
+          cairo
+          pango
+          libpng
+          libjpeg
+          giflib
+          librsvg
+          pixman
+        ];
+      };
+    };
+}

src/clientModules/navbarScroll.ts

@@ -0,0 +1,20 @@
+const THRESHOLD = 20;
+
+function update(): void {
+  const scrolled = window.scrollY > THRESHOLD;
+  const isHome = window.location.pathname === "/";
+  document.documentElement.toggleAttribute("data-navbar-scrolled", scrolled);
+  document.documentElement.toggleAttribute(
+    "data-navbar-home-top",
+    isHome && !scrolled
+  );
+}
+
+export function onRouteDidUpdate(): void {
+  update();
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener("scroll", update, { passive: true });
+  update();
+}

src/components/about/FourValues.tsx

@@ -1,26 +1,18 @@
-import styles from "./styles.module.css";
+import CardGrid from "../layout/CardGrid";
 import { ValueCard } from "@site/src/components/about/ValueCard";
 import { valuesDetails } from "./Values/valuesDetails";
 
 export default function FourValues() {
   return (
-    <div>
-      <div className="row">
-        <div className="col">
-          <h1 className={"padding-none" + " " + "full-flex-centered"}>
-            Our values{" "}
-          </h1>
-        </div>
-      </div>
-      <ul className="row padding-none flex-full-centered row-with-margins">
+    <>
+      <h2>Our values</h2>
+      <CardGrid cols={4}>
         {valuesDetails.map((value, index) => (
-          <li className="cards-list" key={index}>
-            <div className="col">
-              <ValueCard value={value} />
-            </div>
+          <li key={index}>
+            <ValueCard value={value} />
           </li>
         ))}
-      </ul>
-    </div>
+      </CardGrid>
+    </>
   );
 }

src/components/about/SmallPortraitCard.tsx

@@ -1,6 +1,7 @@
 import styles from "./styles.module.css";
 import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
+import Card from "../layout/Card";
 
 export function SmallPortraitCard({ person }) {
   const history = useHistory();
@@ -9,34 +10,22 @@ export function SmallPortraitCard({ person }) {
     const completeName = person.completeName.replace(/\s+/g, '');
     const completeNameWithoutAccents = completeName
       .normalize("NFD")
-      .replace(/[\u0300-\u036f]/g, '');
+      .replace(/[̀-ͯ]/g, '');
     history.push({
       pathname: `/about/${completeNameWithoutAccents}`,
-      state: { fromAbout: true, scrollY: window.scrollY, },
+      state: { fromAbout: true, scrollY: window.scrollY },
     });
   }
 
   return (
-    <div onClick={openDialog}>
-      <div className={"card" + " " + styles.small_portrait_card}>
-        <div className="card__header">
-          <Avatar person={person} />
-          <div
-            className={
-              "flex-full-centered" + " " + styles.small_card_complete_name
-            }
-          >
-            {person.completeName}
-          </div>
-        </div>
-        <div className="card__body">
-          <div
-            className={"flex-full-centered" + " " + styles.small_card_position}
-          >
-            {person.position}
-          </div>
-        </div>
+    <Card hover onClick={openDialog} className={styles.small_portrait_card}>
+      <Avatar person={person} />
+      <div className={"flex-full-centered " + styles.small_card_complete_name}>
+        {person.completeName}
       </div>
-    </div>
+      <div className={"flex-full-centered " + styles.small_card_position}>
+        {person.position}
+      </div>
+    </Card>
   );
 }

src/components/about/SubTeam.tsx

@@ -1,21 +1,18 @@
 import styles from "./styles.module.css";
 import { SmallPortraitCard } from "./SmallPortraitCard";
+import CardGrid from "../layout/CardGrid";
 
 export default function SubTeam({ subTeamName, subTeam }) {
   return (
     <div className={styles.subteam_container}>
-      <h2 className={"text--center"}> {subTeamName}</h2>
-      <div className={"container"}>
-        <ul className="row padding-none flex-full-centered row-with-margin-top">
-          {subTeam.map((person, index) => (
-            <li className="cards-list" key={person.pageName}>
-              <div className="col">
-                <SmallPortraitCard person={person} />
-              </div>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <h3 className="text--center">{subTeamName}</h3>
+      <CardGrid cols={3}>
+        {subTeam.map((person) => (
+          <li key={person.pageName}>
+            <SmallPortraitCard person={person} />
+          </li>
+        ))}
+      </CardGrid>
     </div>
   );
 }

src/components/about/ValueCard.tsx

@@ -1,22 +1,17 @@
 import styles from "./styles.module.css";
+import Card from "../layout/Card";
 
 export function ValueCard({ value }) {
   return (
-    <div className={"card" + " " + styles.value_card}>
-      <div
-        className={"card__header flex-full-centered"}
-        style={{ marginBottom: "var(--ifm-spacing-lg)" }}
-      >
+    <Card className={styles.value_card}>
+      <div className={styles.value_icon}>
         <value.pictureComponent alt={value.alt} />
       </div>
-
-      <div className={"card__body"}>
-        <div className={styles.value_header}>{value.name}</div>
-        <div className={styles.value_text}>
-          <value.DescriptionMD />
-        </div>
+      <div className={styles.value_header}>{value.name}</div>
+      <div className={styles.value_text}>
+        <value.DescriptionMD />
       </div>
-    </div>
+    </Card>
   );
 }
 export default ValueCard;

src/components/about/index.tsx

@@ -2,6 +2,8 @@ import styles from "./styles.module.css";
 import { teams } from "./Team/team";
 import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
+import Section from "../layout/Section";
+import Banner from "../layout/Banner";
 import LinkToContact from "../home/LinkToContact";
 
 export function getTeamByPageName(name: string) {
@@ -14,50 +16,40 @@ export function getTeamByPageName(name: string) {
   return null;
 }
 
-
 export function About() {
   return (
-    <div>
-      <div className="main-container-with-margins">
-        <div className="container upper-container-with-margin-top">
-          <div className={"row"}>
-            <div className={"col flex-full-centered"}>
-              <FourValues />
-            </div>
-          </div>
-
-
-          <div className="row">
-            <div className="col col--10 col--offset-1">
-              <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.
-              </div>
-            </div>
-          </div>
-
-          <div className="row">
-            <div className="col">
-              <SubTeam
-                subTeamName={"The leadership team"}
-                subTeam={teams.leadershipTeam}
-              />
-              <SubTeam subTeamName={"The core team"} subTeam={teams.coreTeam} />
-              <SubTeam
-                subTeamName={"QuantStack collaborators"}
-                subTeam={teams.QSCollaboratorsTeam}
-              />
-            </div>
-          </div>
+    <>
+      <Section pageTop bg="yellow">
+        <h1>About QuantStack</h1>
+        <p>A small team of outliers — core maintainers of projects adopted globally by researchers, engineers, and educators. We believe open-source is the most powerful way to make high-quality tools available to everyone.</p>
+      </Section>
+      <Section>
+        <FourValues />
+      </Section>
+      <Section>
+        <h2>Meet the QuantStack team</h2>
+        <div className={styles.team_description}>
+          A team of outliers, leaders in software projects adopted at the
+          global scale, benefiting millions of people worldwide.
         </div>
-      </div>
-      <div className="blue-banner-container">
-        <div className="blue-banner-header">Join the team</div>
+        <SubTeam
+          subTeamName={"The leadership team"}
+          subTeam={teams.leadershipTeam}
+        />
+        <SubTeam subTeamName={"The core team"} subTeam={teams.coreTeam} />
+        <SubTeam
+          subTeamName={"QuantStack collaborators"}
+          subTeam={teams.QSCollaboratorsTeam}
+        />
+      </Section>
+      <Banner
+        bg="dark"
+        title="Join the team"
+        cta={<LinkToContact label={"JOIN THE TEAM!"} />}
+      >
         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>
+      </Banner>
+    </>
   );
 }