mobile styling

components/TeamMember.module.css

@@ -6,9 +6,19 @@
 }
 
 .img {
-  width: 100%;
   border-radius: 50%;
   margin: 0 auto;
+  object-fit: cover;
+}
+
+.small {
+  width: calc(110rem / 16);
+  height: calc(110rem / 16);
+}
+
+.medium {
+  width: calc(130rem / 16);
+  height: calc(130rem / 16);
 }
 
 .caption {
@@ -25,3 +35,19 @@
   font-weight: 600;
   color: var(--purple-2);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .container {
+    width: min-content;
+  }
+
+  .small {
+    width: calc(85rem / 16);
+    height: calc(85rem / 16);
+  }
+
+  .name,
+  .role {
+    font-size: calc(11rem / 16);
+  }
+}

components/TeamMember.tsx

@@ -6,17 +6,20 @@ interface TeamMemberProps {
   name: string;
   role: string;
   image?: string;
+  size?: "small" | "medium";
 }
 
 export const TeamMember: React.FC<TeamMemberProps> = ({
   name,
   role,
   image,
+  size,
 }) => {
+  const imgSize = size ? size : "small";
   return (
     <div className={styles.container}>
       <Image
-        className={styles.img}
+        className={styles.img + " " + styles[imgSize]}
         src={image ?? "/images/team-member-placeholder.svg"}
         alt={`Picture of ${name}`}
       />

pages/_app.css

@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   /* Default is light theme */
   --white: #ffffff;

pages/about/team.module.css

@@ -1,12 +1,15 @@
 .headerContainer {
   display: flex;
   flex-direction: row;
-  align-items: center;
   padding-bottom: calc(24rem / 16);
   border-bottom: calc(1rem / 16) solid var(--purple-2);
   margin-bottom: calc(46rem / 16);
 }
 
+.nav {
+  display: none;
+}
+
 .headerTextContainer {
   margin: auto 0 0 0;
 }
@@ -30,7 +33,11 @@
   width: calc(360rem / 16);
 }
 
-.execs {
+.execsMobile {
+  display: none;
+}
+
+.execsDesktop {
   display: flex;
   flex-direction: column;
   gap: calc(26rem / 16);
@@ -42,6 +49,7 @@
   grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
   row-gap: calc(43rem / 16);
   column-gap: calc(53rem / 16);
+  justify-items: center;
 }
 
 .members:last-child {
@@ -62,3 +70,60 @@
   margin: 0;
   line-height: 1.875;
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .headerContainer {
+    flex-direction: column-reverse;
+    padding-bottom: 1rem;
+  }
+
+  .nav {
+    margin-top: calc(24rem / 16);
+    margin-bottom: calc(46rem / 16);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .codey {
+    width: calc(140rem / 16);
+    align-self: center;
+  }
+
+  .header {
+    font-size: calc(24rem / 16);
+    margin: calc(10rem / 16) 0 0 0;
+    text-align: center;
+  }
+
+  .subheading {
+    font-size: calc(24rem / 16);
+    padding-bottom: calc(15rem / 16);
+  }
+
+  .execsMobile {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
+    row-gap: calc(24rem / 16);
+    column-gap: calc(24rem / 16);
+    justify-items: center;
+  }
+
+  .execsDesktop {
+    display: none;
+  }
+
+  .members {
+    row-gap: calc(24rem / 16);
+    column-gap: calc(1rem / 16);
+  }
+
+  .elections {
+    padding: 2rem;
+  }
+
+  .electionSubheading {
+    font-size: calc(24rem / 16);
+  }
+}

pages/about/team.tsx

@@ -24,6 +24,7 @@ import NeilParikh, {
 import MaxErenberg, {
   metadata as MaxMetadata,
 } from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
+import { Link } from "../../components/Link";
 
 // TODO: get hotdog for elections
 //       add member info
@@ -37,6 +38,12 @@ export default function MeetTheTeam() {
         <div className={styles.headerContainer}>
           <div className={styles.headerTextContainer}>
             <h1 className={styles.header}>Meet the Team!</h1>
+            <div className={styles.nav}>
+              <Link href="#execs">The Executives</Link>
+              <Link href="#programme">Programme Committee</Link>
+              <Link href="#website">Website Committee</Link>
+              <Link href="#system">Systems Committee</Link>
+            </div>
             <h2
               className={styles.subheading}
               style={{ borderBottom: "none", margin: 0, padding: 0 }}
@@ -46,7 +53,7 @@ export default function MeetTheTeam() {
           </div>
           <Image src="images/team/team-codey.svg" className={styles.codey} />
         </div>
-        <div className={styles.execs}>
+        <div className={styles.execsDesktop} id="execs">
           {/* {props.execs.map((exec) => {
             return (
               <div key={exec.metadata.name}>
@@ -72,15 +79,22 @@ export default function MeetTheTeam() {
             <MaxErenberg />
           </TeamMemberCard>
         </div>
-        <div className={styles.programme}>
+        <div className={styles.execsMobile} id="execs">
+          <TeamMember {...KallenMetadata} size="medium" />
+          <TeamMember {...GordonMetadata} size="medium" />
+          <TeamMember {...RavinduMetadata} size="medium" />
+          <TeamMember {...NeilMetadata} size="medium" />
+          <TeamMember {...MaxMetadata} size="medium" />
+        </div>
+        <div className={styles.programme} id="programme">
           <h2 className={styles.subheading}>Programme Committee</h2>
           <MembersList team={programme} />
         </div>
-        <div className={styles.website}>
+        <div className={styles.website} id="website">
           <h2 className={styles.subheading}>Website Committee</h2>
           <MembersList team={website} />
         </div>
-        <div className={styles.system}>
+        <div className={styles.system} id="system">
           <h2 className={styles.subheading}>Systems Committee</h2>
           <MembersList team={systems} />
         </div>