page styles

components/TeamMemberCard.tsx

@@ -10,7 +10,7 @@ export interface TeamMemberCardProps {
   name: string;
   role: string;
   image: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export function TeamMemberCard({

pages/about/executives/[year]/[term].tsx

@@ -4,6 +4,7 @@ import { GetStaticPaths, GetStaticProps } from "next";
 import React from "react";
 
 import { Link } from "@/components/Link";
+import { TeamMemberCard } from "@/components/TeamMemberCard";
 import { Title } from "@/components/Title";
 import {
   Exec,
@@ -47,7 +48,7 @@ export default function TermPage(props: Props) {
 
   return (
     <div className={styles.main}>
-      <Title>{["Exectives", `${capitalize(props.term)} ${props.year}`]}</Title>
+      <Title>{["Executives", `${capitalize(props.term)} ${props.year}`]}</Title>
       <div className={styles.header}>
         {headerTerms.map((link) => (
           <HeaderLink
@@ -60,20 +61,28 @@ export default function TermPage(props: Props) {
       </div>
 
       <section>
-        <h1>
+        <h1 className={styles.headerlink}>
           Executives Archive:
           <span className={styles.blue}>
             {` ${capitalize(props.term)} ${props.year}`}
           </span>
         </h1>
-        <div>
-          {props.execs.map(({ name, role }) => (
-            <>
-              <h1>{name}</h1>
-              <h6>{role}</h6>
-            </>
-          ))}
+        <div className={styles.execs}>
+          {props.execs.map((exec) => {
+            return (
+              <div key={exec.name}>
+                <TeamMemberCard {...exec}></TeamMemberCard>
+              </div>
+            );
+          })}
         </div>
+        <p className={styles.wikilink}>
+          See more of our past executives{" "}
+          <Link href="https://wiki.csclub.uwaterloo.ca/Past_Executive">
+            here
+          </Link>
+          .
+        </p>
       </section>
     </div>
   );

pages/about/executives/[year]/index.module.css

@@ -2,9 +2,10 @@
   margin-top: calc(60rem / 16);
 }
 
-.main > h1 {
+.headerlink {
   padding-bottom: calc(16rem / 16);
   border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  margin-bottom: calc(66rem / 16);
 }
 
 .blue {
@@ -26,11 +27,25 @@
   color: var(--primary-accent);
 }
 
-.list {
-  list-style: none;
-  padding: 0;
+.execs {
+  display: flex;
+  flex-direction: column;
+  gap: calc(56rem / 16);
+  margin-bottom: calc(56rem / 16);
+  margin: auto;
+  width: 80%;
 }
 
-.list > li {
-  line-height: 3;
+@media only screen and (max-width: calc(768rem / 16)) {
+  .execs {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(calc(130rem / 16), 1fr));
+    justify-items: center;
+    column-gap: 0;
+  }
+}
+
+.wikilink {
+  text-align: right;
+  margin: calc(32rem / 16) calc(96rem / 16);
 }

pages/about/executives/archive.tsx

@@ -1,10 +1,21 @@
 import { GetStaticProps } from "next";
 
 import { ArchivePage, Props } from "@/components/ArchivePage";
+import {
+  ShapesConfig,
+  defaultGetShapesConfig,
+  GetShapesConfig,
+} from "@/components/ShapesBackground";
 import { getExecsTermsByYear, getExecsYears } from "@/lib/executives";
 
 export default ArchivePage;
 
+ArchivePage.getShapesConfig = ((width, height) => {
+  return window.innerWidth <= 768
+    ? ({} as ShapesConfig)
+    : defaultGetShapesConfig(width, height);
+}) as GetShapesConfig;
+
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const years = (await getExecsYears()).reverse();
   const yearsWithTerms = await Promise.all(