From 13c20dd88f9de884e49495aba44ed1daa4f7f365 Mon Sep 17 00:00:00 2001
From: Bonnie Peng <bonnie.peng@uwaterloo.ca>
Date: Tue, 1 Jun 2021 04:45:52 +0000
Subject: [PATCH 01/16] Add Button component

---
 components/Button.module.css        | 32 +++++++++++++++++++++++
 components/Button.tsx               | 40 +++++++++++++++++++++++++++++
 components/EventCard.module.css     |  3 ++-
 components/EventCard.tsx            | 13 +++++++---
 components/EventDescriptionCard.tsx |  8 +++---
 components/playground.tsx           | 26 +++++++++++++++++++
 pages/playground.mdx                | 11 +++++++-
 7 files changed, 123 insertions(+), 10 deletions(-)
 create mode 100644 components/Button.module.css
 create mode 100644 components/Button.tsx

diff --git a/components/Button.module.css b/components/Button.module.css
new file mode 100644
index 00000000..a6020fbd
--- /dev/null
+++ b/components/Button.module.css
@@ -0,0 +1,32 @@
+.button,
+.link {
+  font-family: "Poppins", "sans-serif";
+  border-radius: calc(20rem / 16);
+  background-color: var(--blue-2);
+  color: white;
+  border: none;
+  outline: none;
+  transition-duration: 0.3s;
+  font-weight: normal;
+  text-align: center;
+}
+
+.button:hover,
+.link:hover {
+  background-color: var(--teal-2);
+  cursor: pointer;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.small {
+  padding: calc(5rem / 16) calc(30rem / 16);
+  font-size: calc(14rem / 16);
+}
+
+.normal {
+  padding: calc(10rem / 16) calc(50rem / 16);
+  font-size: calc(18rem / 16);
+}
diff --git a/components/Button.tsx b/components/Button.tsx
new file mode 100644
index 00000000..e04b2df7
--- /dev/null
+++ b/components/Button.tsx
@@ -0,0 +1,40 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import styles from "./Button.module.css";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  isLink?: false;
+}
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  isLink: true;
+}
+
+type Props = (ButtonProps | LinkProps) & { size?: "small" | "normal" };
+
+export function Button(props: Props) {
+  const btnSize = props.size ? props.size : "normal";
+  if (props.isLink) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <a
+        {...otherProps}
+        target="_blank"
+        className={`${styles.link} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <button
+        {...otherProps}
+        className={`${styles.button} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  }
+}
diff --git a/components/EventCard.module.css b/components/EventCard.module.css
index 0039d275..f2efd058 100644
--- a/components/EventCard.module.css
+++ b/components/EventCard.module.css
@@ -21,7 +21,8 @@
 }
 
 .registerButton {
-  width: 100%;
+  display: block;
+  font-weight: bold;
 }
 
 .content > h1 {
diff --git a/components/EventCard.tsx b/components/EventCard.tsx
index e782ec0a..81a07ada 100644
--- a/components/EventCard.tsx
+++ b/components/EventCard.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { Button } from "./Button";
 import styles from "./EventCard.module.css";
 
 import { EventSetting } from "./EventSetting";
@@ -29,11 +30,15 @@ export function EventCard({
       <aside>
         {poster && <Image alt={name} src={poster} />}
         {!poster && <div className={styles.spacer}></div>}
-        {/* TODO: use the <Button /> component */}
         {registerLink && (
-          <button className={styles.registerButton}>
-            <a href={registerLink}>Register</a>
-          </button>
+          <Button
+            isLink={true}
+            href={registerLink}
+            size="small"
+            className={styles.registerButton}
+          >
+            Register
+          </Button>
         )}
       </aside>
       <section className={styles.content}>
diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx
index 3e9e5970..0767c2a0 100644
--- a/components/EventDescriptionCard.tsx
+++ b/components/EventDescriptionCard.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-// import { Button } from "./Button";
+import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
@@ -65,9 +65,9 @@ export function EventDescriptionCard({
         <footer>
           {registerLink && (
             <div className={styles.button}>
-              <button>
-                <a href={registerLink}>Register</a>
-              </button>
+              <Button isLink={true} href={registerLink} size="small">
+                Register
+              </Button>
             </div>
           )}
           {online && platformURL && (
diff --git a/components/playground.tsx b/components/playground.tsx
index 609e9566..9ea55249 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -26,6 +26,7 @@ import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
+import { Button } from "./Button";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -64,6 +65,31 @@ export function NewsCardDemo() {
   );
 }
 
+export function ButtonDemo() {
+  return (
+    <>
+      <h3>Standard buttons</h3>
+      <p>
+        <Button isLink={true} href="/">
+          Link
+        </Button>
+      </p>
+      <p>
+        <Button>Button</Button>
+      </p>
+      <h3>Small buttons</h3>
+      <p>
+        <Button isLink={true} href="/" size="small">
+          Small Link
+        </Button>
+      </p>
+      <p>
+        <Button size="small">Small Button</Button>
+      </p>
+    </>
+  );
+}
+
 export function EventDescriptionCardDemo() {
   return (
     <div className={styles.eventDescriptionCardDemo}>
diff --git a/pages/playground.mdx b/pages/playground.mdx
index f998bb14..e9c6f6f5 100644
--- a/pages/playground.mdx
+++ b/pages/playground.mdx
@@ -5,6 +5,7 @@ import {
   EventCardDemo,
   TeamMemberDemo,
   TeamMemberCardDemo,
+  ButtonDemo,
 } from "../components/playground";
 
 import { TeamMemberCard } from "../components/TeamMemberCard";
@@ -28,6 +29,14 @@ unavailable
 
 ---
 
+## `<Button />`
+
+The `<Button />` is customizable in size and in whether it is an anchor tag or a button tag.
+
+<ButtonDemo />
+
+---
+
 ## `<EventDescriptionCard />`
 
 The `<EventDescriptionCard />` component is used on the home page, and uses the
@@ -48,7 +57,7 @@ The `<EventCard />` component is used on the events page, and uses the
 
 ## `<TeamMember />`
 
-The `<TeamMember />` component has an image of the team member along with their name and role. 
+The `<TeamMember />` component has an image of the team member along with their name and role.
 It is used on the Meet the Team page for non executive members.
 
 <TeamMemberDemo />

From b494c9ee16f46b04a916f92e782e6e5476617346 Mon Sep 17 00:00:00 2001
From: Adi Thakral <aditya.thakral@uwaterloo.ca>
Date: Tue, 8 Jun 2021 00:18:15 +0000
Subject: [PATCH 02/16] Staging website

---
 .gitlab-ci.yml | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 8a82447a..b13489b4 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -10,6 +10,9 @@ stages:
   - build
   - staging
 
+variables:
+  BASE_PATH: '/~a3thakra/csc'
+
 install_deps:
   stage: .pre
   script:
@@ -25,14 +28,13 @@ build:
   script:
     - npm run build
 
-pages:
+staging:
   stage: staging
   script:
     - npm run export
-    - mv public src-public
-    - mv out public
   artifacts:
     paths:
-      - public
+      - out
   only:
-    - main
+    refs:
+      - main
\ No newline at end of file

From 26b279e71d0de5923da5cde61b272788d7d404b3 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <aditya.thakral@uwaterloo.ca>
Date: Mon, 7 Jun 2021 20:55:37 -0400
Subject: [PATCH 03/16] Use custom link for MDX

---
 pages/_app.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index d85bd4f3..ba816722 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,15 +1,26 @@
-import React from "react";
+import React, { AnchorHTMLAttributes } from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
+import NextLink from "next/link";
 import "./_app.css";
 import "./font.css";
 
+function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const { href, ...other } = props;
+
+  return (
+    <NextLink href={href ?? "#"}>
+      <a {...other}></a>
+    </NextLink>
+  );
+}
+
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ThemeProvider theme="light">
-      <MDXProvider components={{}}>
+      <MDXProvider components={{ a: Link }}>
         <Navbar />
         <Component {...pageProps} />
       </MDXProvider>

From 102023ec2cf374b9cd7cbaf263d5fb4661434ae2 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <aditya.thakral@uwaterloo.ca>
Date: Mon, 7 Jun 2021 21:04:55 -0400
Subject: [PATCH 04/16] Add job to update staging website

---
 .gitlab-ci.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b13489b4..239fb4d1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -37,4 +37,10 @@ staging:
       - out
   only:
     refs:
-      - main
\ No newline at end of file
+      - main
+
+update_staging_website:
+  stage: staging
+  needs: [staging]
+  script:
+    - curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/$BASE_PATH"
\ No newline at end of file

From 699a0836b4839f76ca78a5117e6e9462d8bc73de Mon Sep 17 00:00:00 2001
From: Aditya Thakral <aditya.thakral@uwaterloo.ca>
Date: Mon, 7 Jun 2021 21:13:32 -0400
Subject: [PATCH 05/16] Fix ci lint errors

---
 .gitlab-ci.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 239fb4d1..48a1b95d 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -39,8 +39,8 @@ staging:
     refs:
       - main
 
-update_staging_website:
-  stage: staging
-  needs: [staging]
+deploy_staging:
+  stage: .post
+  needs: ["staging"]
   script:
-    - curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/$BASE_PATH"
\ No newline at end of file
+    - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/$BASE_PATH"'
\ No newline at end of file

From 66f9d93d8e30aa7195991e6fe5c520dc443b7c90 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <aditya.thakral@uwaterloo.ca>
Date: Mon, 7 Jun 2021 21:15:21 -0400
Subject: [PATCH 06/16] Only run deploy_staging on main branch

---
 .gitlab-ci.yml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 48a1b95d..7c9f2af0 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -43,4 +43,7 @@ deploy_staging:
   stage: .post
   needs: ["staging"]
   script:
-    - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/$BASE_PATH"'
\ No newline at end of file
+    - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/$BASE_PATH"'
+  only:
+    refs:
+      - main
\ No newline at end of file

From 2b733ade4414b8a31ed0668e91b5307ec90c0937 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <aditya.thakral@uwaterloo.ca>
Date: Mon, 7 Jun 2021 21:51:02 -0400
Subject: [PATCH 07/16] Use NEXT_PUBLIC_ prefix for base path

---
 .gitlab-ci.yml       | 4 ++--
 components/Image.tsx | 2 +-
 next.config.js       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 7c9f2af0..55e2e5a6 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -11,7 +11,7 @@ stages:
   - staging
 
 variables:
-  BASE_PATH: '/~a3thakra/csc'
+  NEXT_PUBLIC_BASE_PATH: '/~a3thakra/csc'
 
 install_deps:
   stage: .pre
@@ -43,7 +43,7 @@ deploy_staging:
   stage: .post
   needs: ["staging"]
   script:
-    - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/$BASE_PATH"'
+    - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/~a3thakra/csc/"'
   only:
     refs:
       - main
\ No newline at end of file
diff --git a/components/Image.tsx b/components/Image.tsx
index 020233d2..cc913deb 100644
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -3,7 +3,7 @@ import React, { ImgHTMLAttributes } from "react";
 export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
   const { src: relativeSrc = "" } = props;
 
-  let absoluteSrc = process.env.BASE_PATH ?? "/";
+  let absoluteSrc = process.env.NEXT_PUBLIC_BASE_PATH ?? "/";
   if (absoluteSrc.endsWith("/") && relativeSrc.startsWith("/")) {
     absoluteSrc += relativeSrc.slice(1);
   } else if (absoluteSrc.endsWith("/") || relativeSrc.startsWith("/")) {
diff --git a/next.config.js b/next.config.js
index 30e33dc0..0c22d34a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,5 +5,5 @@ const withMDX = require("@next/mdx")({
 module.exports = withMDX({
   pageExtensions: ["ts", "tsx", "mdx"],
   trailingSlash: true,
-  basePath: process.env.BASE_PATH,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
 });

From 2594a72fdb6bb8a40714507b652d5fe64e40c9ba Mon Sep 17 00:00:00 2001
From: Bonnie Peng <bonnie.peng@uwaterloo.ca>
Date: Wed, 9 Jun 2021 11:16:40 +0000
Subject: [PATCH 08/16] Mobile EventDescriptionCard

---
 components/EventDescriptionCard.module.css | 38 +++++++++++++++++++---
 components/EventSetting.module.css         |  9 +++++
 components/EventSetting.tsx                | 12 +++++--
 components/NewsCard.module.css             |  6 ++--
 components/playground.module.css           |  8 ++---
 content/playground/after-hours.event.mdx   |  2 +-
 content/playground/alt-tab.event.mdx       |  2 +-
 content/playground/ootb-react.event.mdx    |  2 +-
 8 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 components/EventSetting.module.css

diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css
index f8517e4f..93364b1e 100644
--- a/components/EventDescriptionCard.module.css
+++ b/components/EventDescriptionCard.module.css
@@ -3,7 +3,7 @@
   box-sizing: border-box;
   max-width: calc(540rem / 16);
   padding: calc(24rem / 16);
-  border-radius: calc(4rem / 16);
+  border-radius: calc(20rem / 16);
   background-color: white;
 }
 
@@ -22,7 +22,7 @@
   color: var(--purple-2);
   font-weight: bolder;
   font-size: calc(18rem / 16);
-  line-height: calc(27rem / 16);
+  line-height: calc(27 / 18);
   margin: 0;
 }
 
@@ -42,7 +42,7 @@
 }
 
 .logo {
-  width: calc(30rem / 16);
+  width: calc(32rem / 16);
   position: absolute;
   bottom: 0;
   right: 0;
@@ -50,7 +50,7 @@
 
 .setting {
   margin: 0;
-  color: var(--blue-1);
+  color: var(--blue-2);
   font-weight: bolder;
   font-size: calc(14rem / 16);
 }
@@ -58,6 +58,34 @@
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     padding: 0;
-    background-color: #e1eefa;
+    background-color: transparent;
+  }
+
+  .details {
+    min-width: calc(150rem / 16);
+  }
+
+  .name,
+  .setting {
+    font-size: calc(14rem / 16);
+    line-height: calc(21 / 14);
+  }
+
+  .poster {
+    width: calc(95rem / 16);
+    height: calc(95rem / 16);
+    border: 1px solid var(--purple-2);
+    box-sizing: border-box;
+    margin-right: calc(14rem / 16);
+  }
+
+  .desc {
+    font-size: calc(12rem / 16);
+    line-height: calc(18 / 12);
+  }
+
+  .logo,
+  .button {
+    display: none;
   }
 }
diff --git a/components/EventSetting.module.css b/components/EventSetting.module.css
new file mode 100644
index 00000000..f9fbfb01
--- /dev/null
+++ b/components/EventSetting.module.css
@@ -0,0 +1,9 @@
+@media only screen and (max-width: calc(768rem / 16)) {
+  .separator {
+    display: none;
+  }
+  
+  .setting {
+    display: block;
+  }
+}
diff --git a/components/EventSetting.tsx b/components/EventSetting.tsx
index 3dec1cde..aa95025c 100644
--- a/components/EventSetting.tsx
+++ b/components/EventSetting.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import styles from "./EventSetting.module.css";
 
 interface Props {
   date: Date;
@@ -15,13 +16,20 @@ export function EventSetting(props: Props) {
   const time = props.date.toLocaleTimeString("en-US", {
     hour: "numeric",
     minute: "numeric",
+    timeZoneName: "short",
   });
   const location = props.online ? `Online - ${props.location}` : props.location;
+  const separator = <span className={styles.separator}> | </span>;
 
   return (
     <div>
-      <time dateTime={props.date.toISOString()}>{`${date} | ${time}`}</time>
-      {` | ${location}`}
+      <time className={styles.setting} dateTime={props.date.toISOString()}>
+        {date}
+      </time>
+      {separator}
+      <span className={styles.setting}>{time}</span>
+      {separator}
+      {location}
     </div>
   );
 }
diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css
index bd79bedb..18f75f62 100644
--- a/components/NewsCard.module.css
+++ b/components/NewsCard.module.css
@@ -8,19 +8,19 @@
   color: var(--purple-2);
   font-size: calc(18rem / 16);
   font-weight: bold;
-  line-height: calc(27rem / 16);
+  line-height: calc(27 / 18);
 }
 
 .author {
   color: var(--purple-1);
   font-style: normal;
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 16);
   font-size: calc(14rem / 16);
   margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
 }
 
 .content {
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 16);
   color: var(--purple-2);
 }
 
diff --git a/components/playground.module.css b/components/playground.module.css
index b7938a64..f43d992d 100644
--- a/components/playground.module.css
+++ b/components/playground.module.css
@@ -13,7 +13,7 @@
   font-weight: bold;
   color: var(--purple-2);
   font-size: calc(24rem / 16);
-  line-height: calc(36rem / 16);
+  line-height: calc(36 / 24);
   margin-bottom: calc(14rem / 16);
 }
 
@@ -21,7 +21,7 @@
   font-style: normal;
   font-weight: normal;
   font-size: calc(14rem / 16);
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 14);
   white-space: pre-line;
   color: var(--purple-2);
   vertical-align: baseline;
@@ -62,7 +62,7 @@
   color: var(--purple-2);
   font-weight: 600;
   font-size: calc(24rem / 16);
-  line-height: calc(36rem / 16);
+  line-height: calc(36 / 24);
 }
 
 .teamMemberDemo > hr {
@@ -84,7 +84,7 @@
 @media only screen and (max-width: calc(768rem / 16)) {
   .newsDemo,
   .eventDescriptionCardDemo {
-    background-color: #e1eefa;
+    background-color: var(--off-white);
   }
 
   .eventDescriptionCardDemo > * {
diff --git a/content/playground/after-hours.event.mdx b/content/playground/after-hours.event.mdx
index 7d227d63..5cb3ccec 100644
--- a/content/playground/after-hours.event.mdx
+++ b/content/playground/after-hours.event.mdx
@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Afterhours: Personal Relationships",
   short: "Learn how React works and make your own version!",
-  date: new Date("2021-03-02 2:00 PM"),
+  date: new Date("2021-03-02 2:00 PM GMT-4"),
   online: false,
   location: "MC",
   registerLink: "http://csclub.uwaterloo.ca/",
diff --git a/content/playground/alt-tab.event.mdx b/content/playground/alt-tab.event.mdx
index fc3567d6..16aa6a77 100644
--- a/content/playground/alt-tab.event.mdx
+++ b/content/playground/alt-tab.event.mdx
@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Alt-Tab",
   short: "CSC is proud to present to you Alt-Tab!",
-  date: new Date("March 25, 2021 19:00:00"),
+  date: new Date("March 25, 2021 19:00:00 GMT-4"),
   online: true,
   location: "Twitch",
   poster: "/images/playground/alt-tab.jpg",
diff --git a/content/playground/ootb-react.event.mdx b/content/playground/ootb-react.event.mdx
index 19c75a73..9b6dcab0 100644
--- a/content/playground/ootb-react.event.mdx
+++ b/content/playground/ootb-react.event.mdx
@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Out of the Box: React",
   short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.",
-  date: new Date("March 23, 2021 19:00:00"),
+  date: new Date("March 23, 2021 19:00:00 GMT-4"),
   online: true,
   location: "Twitch",
   poster: "/images/playground/intro-ootb.jpg",

From dc0cc390c16d266d320f2f49a9b38350f7556c11 Mon Sep 17 00:00:00 2001
From: William Tran <william.tran1@uwaterloo.ca>
Date: Thu, 10 Jun 2021 01:12:44 +0000
Subject: [PATCH 09/16] OrganizedContent

---
 components/OrganizedContent.module.css        | 119 ++++++++++++
 components/OrganizedContent.tsx               | 174 ++++++++++++++++++
 components/playground.tsx                     |  53 +++++-
 .../duties-of-officers.section.mdx            |  27 +++
 .../executive-council.section.mdx             |  10 +
 .../constitution/membership.section.mdx       |  10 +
 .../playground/constitution/name.section.mdx  |   6 +
 .../constitution/officers.section.mdx         |  30 +++
 .../constitution/purpose.section.mdx          |  10 +
 next-env.d.ts                                 |  14 ++
 package.json                                  |   4 +-
 pages/_app.css                                |   3 +
 pages/playground.mdx                          |  11 ++
 13 files changed, 467 insertions(+), 4 deletions(-)
 create mode 100644 components/OrganizedContent.module.css
 create mode 100644 components/OrganizedContent.tsx
 create mode 100644 content/playground/constitution/duties-of-officers.section.mdx
 create mode 100644 content/playground/constitution/executive-council.section.mdx
 create mode 100644 content/playground/constitution/membership.section.mdx
 create mode 100644 content/playground/constitution/name.section.mdx
 create mode 100644 content/playground/constitution/officers.section.mdx
 create mode 100644 content/playground/constitution/purpose.section.mdx

diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
new file mode 100644
index 00000000..2101334b
--- /dev/null
+++ b/components/OrganizedContent.module.css
@@ -0,0 +1,119 @@
+.wrapper {
+  display: flex;
+  line-height: calc(24 / 16);
+}
+
+.wrapper h1 {
+  font-size: calc(24rem / 16);
+  margin: 1rem 0 1rem 0;
+  color: var(--blue-2);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.nav {
+  margin: calc(8rem / 16) calc(32rem / 16) 0 0;
+  color: var(--purple-2);
+  font-weight: 500;
+}
+
+.navItem {
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: calc(14rem / 16);
+  border-bottom: calc(1rem / 16) solid var(--blue-2-25);
+  align-items: center;
+  height: calc(40rem / 16);
+  width: calc(284rem / 16);
+  padding: 0 calc(14rem / 16);
+  cursor: pointer;
+}
+
+.navItem > div {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selected {
+  background-color: var(--blue-1-05);
+  color: var(--blue-2);
+  font-weight: bold;
+}
+
+.readAll {
+  font-weight: bold;
+}
+
+.marker {
+  display: none;
+}
+
+.selected .marker {
+  display: inline;
+  background-color: var(--blue-2);
+  height: calc(24rem / 16);
+  width: calc(4rem / 16);
+  margin-right: 1rem;
+}
+
+.footer {
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.previous,
+.next {
+  flex: 1;
+  display: flex;
+  cursor: pointer;
+  display: flex;
+  color: var(--purple-2);
+  font-size: calc(12rem / 16);
+}
+
+.previous {
+  margin-right: calc(8rem / 16);
+}
+
+.next {
+  justify-content: flex-end;
+  justify-self: flex-end;
+  text-align: end;
+  margin-left: calc(8rem / 16);
+}
+
+.arrowHeading {
+  color: var(--blue-2);
+  font-size: calc(14rem / 16);
+  font-weight: bold;
+  border-bottom: calc(2rem / 16) solid var(--blue-2);
+  padding-bottom: calc(4rem / 16);
+}
+
+.arrow {
+  fill: var(--blue-2);
+  margin-top: calc(27rem / 16);
+}
+
+.prevArrow {
+  transform: rotate(90deg);
+  padding-right: calc(8rem / 16);
+}
+
+.nextArrow {
+  transform: rotate(270deg);
+  padding-left: calc(8rem / 16);
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .nav {
+    display: none;
+  }
+}
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
new file mode 100644
index 00000000..86a86f86
--- /dev/null
+++ b/components/OrganizedContent.tsx
@@ -0,0 +1,174 @@
+import React, { ReactNode, ComponentType } from "react";
+import styles from "./OrganizedContent.module.css";
+
+export interface LinkProps {
+  className?: string;
+  id: string;
+  children: ReactNode;
+}
+
+type Link = ComponentType<LinkProps>;
+
+interface Section {
+  id: string;
+  title: string;
+  Content: ComponentType;
+}
+
+const READ_ALL_TITLE = "Read All";
+export const READ_ALL_ID = "read-all";
+
+interface Props {
+  sections: Section[];
+  currentId: string;
+  link: Link;
+}
+
+export function OrganizedContent(props: Props) {
+  const sections = createSections(props.sections);
+  const currentIndex = sections.findIndex(({ id }) => id === props.currentId);
+
+  if (currentIndex < 0) {
+    throw new Error(`Section with ID ${props.currentId} was not found`);
+  }
+
+  const section = sections[currentIndex];
+  const isReadAll = section.id === READ_ALL_ID;
+
+  return (
+    <div className={styles.wrapper}>
+      <Nav sections={sections} currentIndex={currentIndex} link={props.link} />
+      <div className={styles.content}>
+        {isReadAll ? (
+          <section.Content />
+        ) : (
+          <>
+            <div>
+              <h1>{section.title}</h1>
+              <section.Content />
+            </div>
+            <Footer
+              sections={sections}
+              currentIndex={currentIndex}
+              link={props.link}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface NavProps {
+  sections: Section[];
+  currentIndex: number;
+  link: Link;
+}
+
+function Nav({ sections, currentIndex, link: Link }: NavProps) {
+  return (
+    <div className={styles.nav}>
+      {sections.map((section, index) => {
+        const classNames = [styles.navItem];
+
+        if (index === currentIndex) {
+          classNames.push(styles.selected);
+        }
+
+        if (section.id === READ_ALL_ID) {
+          classNames.push(styles.readAll);
+        }
+
+        return (
+          <Link
+            className={classNames.join(" ")}
+            id={section.id}
+            key={section.id}
+          >
+            <span className={styles.marker} />
+            <div>{section.title}</div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+interface FooterProps {
+  sections: Section[];
+  currentIndex: number;
+  link: Link;
+}
+
+function Footer({ sections, currentIndex, link: Link }: FooterProps) {
+  const prevSection =
+    currentIndex > 0 && sections[currentIndex - 1].id !== READ_ALL_ID
+      ? sections[currentIndex - 1]
+      : undefined;
+  const nextSection =
+    currentIndex < sections.length - 1 &&
+    sections[currentIndex + 1].id !== READ_ALL_ID
+      ? sections[currentIndex + 1]
+      : undefined;
+
+  return (
+    <div className={styles.footer}>
+      {prevSection && (
+        <Link className={styles.previous} id={prevSection.id}>
+          <Arrow direction="left" />
+          <div>
+            <div>Previous</div>
+            <div className={styles.arrowHeading}>{prevSection.title}</div>
+          </div>
+        </Link>
+      )}
+      {nextSection && (
+        <Link className={styles.next} id={nextSection.id}>
+          <div>
+            <div>Next</div>
+            <div className={styles.arrowHeading}>{nextSection.title}</div>
+          </div>
+          <Arrow direction="right" />
+        </Link>
+      )}
+    </div>
+  );
+}
+
+function createSections(sections: Section[]) {
+  return [
+    {
+      id: READ_ALL_ID,
+      title: READ_ALL_TITLE,
+      Content() {
+        return (
+          <>
+            {sections.map(({ id, title, Content: SectionContent }) => (
+              <div key={id}>
+                <h1>{title}</h1>
+                <SectionContent />
+              </div>
+            ))}
+          </>
+        );
+      },
+    },
+    ...sections,
+  ];
+}
+
+function Arrow({ direction }: { direction: "left" | "right" }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="9"
+      viewBox="0 0 14 9"
+      className={`${styles.arrow} ${
+        direction === "left" ? styles.prevArrow : styles.nextArrow
+      }`}
+    >
+      <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+    </svg>
+  );
+}
diff --git a/components/playground.tsx b/components/playground.tsx
index 9ea55249..2a4dd030 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-
+import React, { useState } from "react";
 import styles from "./playground.module.css";
 
 import AfterHoursContent, {
@@ -12,6 +11,25 @@ import AltTab, {
   metadata as altTabEventMetadata,
 } from "../content/playground/alt-tab.event.mdx";
 
+import Name, {
+  metadata as nameOrganizedContentMetadata,
+} from "../content/playground/constitution/name.section.mdx";
+import Purpose, {
+  metadata as purposeOrganizedContentMetadata,
+} from "../content/playground/constitution/purpose.section.mdx";
+import Membership, {
+  metadata as membershipOrganizedContentMetadata,
+} from "../content/playground/constitution/membership.section.mdx";
+import Officers, {
+  metadata as officersOrganizedContentMetadata,
+} from "../content/playground/constitution/officers.section.mdx";
+import Duties, {
+  metadata as dutiesOrganizedContentMetadata,
+} from "../content/playground/constitution/duties-of-officers.section.mdx";
+import ExecutiveCouncil, {
+  metadata as executiveCouncilOrganizedContentMetadata,
+} from "../content/playground/constitution/executive-council.section.mdx";
+
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
@@ -26,6 +44,7 @@ import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
+import { OrganizedContent, LinkProps } from "./OrganizedContent";
 import { Button } from "./Button";
 
 const events = [
@@ -34,6 +53,18 @@ const events = [
   { Content: AltTab, metadata: altTabEventMetadata },
 ];
 
+const constitution = [
+  { Content: Name, ...nameOrganizedContentMetadata },
+  { Content: Purpose, ...purposeOrganizedContentMetadata },
+  { Content: Membership, ...membershipOrganizedContentMetadata },
+  { Content: Officers, ...officersOrganizedContentMetadata },
+  { Content: Duties, ...dutiesOrganizedContentMetadata },
+  {
+    Content: ExecutiveCouncil,
+    ...executiveCouncilOrganizedContentMetadata,
+  },
+];
+
 export function MiniEventCardDemo() {
   return (
     <div className={styles.miniEventCardDemo}>
@@ -152,3 +183,21 @@ export function TeamMemberCardDemo() {
     </div>
   );
 }
+
+export function OrganizedContentDemo() {
+  const sections = constitution;
+
+  const [id, setId] = useState(sections[0].id);
+
+  function FakeLink({ className, id, children }: LinkProps) {
+    return (
+      <div className={className} onClick={() => setId(id)}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <OrganizedContent sections={sections} currentId={id} link={FakeLink} />
+  );
+}
diff --git a/content/playground/constitution/duties-of-officers.section.mdx b/content/playground/constitution/duties-of-officers.section.mdx
new file mode 100644
index 00000000..72f38bc4
--- /dev/null
+++ b/content/playground/constitution/duties-of-officers.section.mdx
@@ -0,0 +1,27 @@
+export const metadata = {
+  title: "5. Duties of Officers",
+  id: "duties-of-officers"
+};
+
+The duties of the President shall be:
+to call and preside at all general, special, and executive meetings of the Club, except during the election of officers;
+to appoint special committees of the Club and the membership and chairs of such committees, with the approval of the Executive Council; and
+to audit, or to appoint a representative to audit, the financial records of the club at the end of each academic term.
+with the approval of the Faculty Advisor, rule on any point of procedure under the constitution that arises outside of a meeting.
+The duties of the Vice-President shall be:
+to assume the duties of the President in the event of the President's absence;
+to chair the Programme Committee;
+to appoint members to and remove members from the Programme Committee;
+to ensure that Club events are held regularly; and
+to assume those duties of the President that are delegated to them by the President.
+The duties of the Secretary shall be:
+to keep minutes of all Club meetings;
+to care for all Club correspondence; and
+manage any persons appointed to internal positions by the Executive.
+The duties of the Treasurer shall be:
+to collect dues and maintain all financial and membership records;
+to produce a financial or membership statement when requested.
+The duties of the System Administrator shall be:
+to chair the Systems Committee;
+to appoint members to and remove members from the Systems Committee.
+to ensure that the duties of the Systems Committee are performed.
\ No newline at end of file
diff --git a/content/playground/constitution/executive-council.section.mdx b/content/playground/constitution/executive-council.section.mdx
new file mode 100644
index 00000000..3c1f3cfe
--- /dev/null
+++ b/content/playground/constitution/executive-council.section.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: "6. Executive Council",
+  id: "executive-council"
+};
+
+The Executive Council shall consist of the present officers of the Club and the Faculty Advisor (as a non-voting member) and has the power to run the affairs of this club within the limits of this constitution. This includes the power to overrule or issue directions to any officer.
+The Executive Council may appoint people to various positions to help manage the Club.
+The Executive Council must obey any instructions given to it by the members at a meeting and can be overruled by them.
+The Executive Council can act by consensus achieved on their mailing list.
+Minutes of the Executive Council meetings shall be available for inspection by any member of the Club and shall be filed with the Club records. On request, a member shall be shown the archive of any thread on the Executive Council mailing list which resulted in a decision being made.
\ No newline at end of file
diff --git a/content/playground/constitution/membership.section.mdx b/content/playground/constitution/membership.section.mdx
new file mode 100644
index 00000000..fecf3b31
--- /dev/null
+++ b/content/playground/constitution/membership.section.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: "3. Membership",
+  id: "membership"
+};
+
+In compliance with MathSoc regulations and in recognition of the club being primarily targeted at undergraduate students, full membership is open to all Social Members of the Mathematics Society and restricted to the same.
+Affiliate membership in this Club shall be open to all members of the University community, including alumni. Affiliate members shall have all the rights of full members except for the rights of voting and holding executive office.
+Membership shall be accounted for on a termly basis, where a term begins at the start of lectures in Winter or Spring, and at the start of Orientation Week in Fall.
+A person is not a member until he or she has paid the current membership fee and has been enrolled in the member database. The termly membership fee is set from time to time by the Executive. Under conditions approved by the Executive, a member who purchases a membership at the end of the current term may be given membership for both the current term and the next term. If the membership fee changes, then this does not affect the validity of any membership terms already paid for.
+The Club may grant access to its systems, either free of charge or for a fee, to members of the University community in order to offer them services. This does not constitute membership.
\ No newline at end of file
diff --git a/content/playground/constitution/name.section.mdx b/content/playground/constitution/name.section.mdx
new file mode 100644
index 00000000..c594f729
--- /dev/null
+++ b/content/playground/constitution/name.section.mdx
@@ -0,0 +1,6 @@
+export const metadata = {
+  title: "1. Name",
+  id: "name"
+};
+
+The name of this organization shall be the "Computer Science Club of the University of Waterloo".
diff --git a/content/playground/constitution/officers.section.mdx b/content/playground/constitution/officers.section.mdx
new file mode 100644
index 00000000..efa806d5
--- /dev/null
+++ b/content/playground/constitution/officers.section.mdx
@@ -0,0 +1,30 @@
+export const metadata = {
+  title: "4. Officers",
+  id: "officers"
+};
+
+The officers of the Club shall be:
+President
+Vice-President
+Secretary
+Treasurer
+System Administrator
+There shall additionally be a Faculty Advisor, selected by the Executive from time to time from among the faculty of the School of Computer Science. The Faculty Advisor shall be an ex-officio affiliate member of the Club.
+The choice of officers shall be limited to full members of the Club.
+All officers, other than the System Administrator, shall be elected at a meeting to be held no later than two weeks after the start of lectures in each term.
+The election of officers shall be accomplished by the following procedure:
+Before the end of the prior term, the then-Executive shall choose a willing Chief Returning Officer, who is responsible for carrying out elections according to this procedure.
+The CRO shall set the date and time of the election meeting, and set the nomination period. The nomination shall be at least one week long and shall end at least 24 hours before the start of the election meeting.
+Announcements of the election and the nomination procedure must be distributed to all members by the members' mailing list, and should also be advertised by posters in the MC building.
+During the nomination period, the Chief Returning Officer (CRO) shall be available to receive nominations for the posts of officers of the club, either in person, by email, by depositing nomination forms in the CSC's mailbox in the MathSoc office, or by writing the nomination in a place in the CSC office to be specified by the CRO.
+A nomination shall consist of the nominee's userid, and post(s) nominated for. Nominees must be full members of the Computer Science Club. A member may decline a nomination at any point prior to the taking of the vote.
+The election shall commence with the offering of memberships for sale. After a reasonable time, control of the meeting is given to the CRO who will preside over the election of the President, Vice-President, Treasurer, and Secretary, in that order.
+During each election, if the position has no nominees, the CRO will take nominations from the floor. Any present, eligible member can be nominated.
+Each election shall be carried out by secret vote, in a manner to be decided on by the CRO, with the approval of the members at the meeting. A simple heads-down-hands-up method is considered acceptable.
+The CRO shall not vote except to break a tie.
+The CRO may, if feasible, accept absentee ballots from full members. No absentee vote from a member shall be counted if the member is present at the time the vote is taken. The CRO shall make a best effort to ensure that absentee ballots are compatible with the method of voting chosen; if this is not possible (for instance, if the CRO is overruled by the membership), then the absentee votes shall not be counted.
+Immediately after the vote is taken, the CRO will announce the results of the election and the winner will be removed from subsequent contests. If, due to lack of candidates (because there were no nominations, or candidates withdrew or were eliminated), there is no one elected to an office, then the members at the meeting will decide whether or not to hold extra elections in accordance with the procedure for vacancies. If they choose not to, this does not prevent the Executive or a group of members from calling extra elections later in the term in accordance with the usual vacancy provisions.
+Following the elections, it is the responsibility of the new executive to select a System Administrator. The selection of System Administrator must then be ratified by the members at the meeting. If a suitable System Administrator is not available, then the executive may delay their selection until one becomes available. In this case the selection of System Administrator must be ratified at the next meeting of the Club.
+Any two offices may be held by a single person with the approval of the President (if any), and the explicit approval of the members.
+In the case of a resignation of an officer or officers, including the President, or if a vacancy occurs for any other reason, the Executive, members at a meeting, or any ten (10) members may call extra elections to replace such officer(s). If extra elections are held, they are held for all vacant offices.
+Whenever extra elections are held, they shall follow the usual election procedure. If they are held after elections failed to elect an officer, then the nomination period may be shortened to less than a week in order to allow the extra elections to take place at the same date and time in the following week. The Executive (or the ten (10) members who called the election) may appoint a replacement CRO if the previous CRO is unwilling or unable to fulfill their duties.
\ No newline at end of file
diff --git a/content/playground/constitution/purpose.section.mdx b/content/playground/constitution/purpose.section.mdx
new file mode 100644
index 00000000..904ad97c
--- /dev/null
+++ b/content/playground/constitution/purpose.section.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: "2. Purpose",
+  id: "purpose"
+};
+
+The Club is organized and will be operated exclusively for educational and scientific purposes in furtherance of:
+promoting an increased knowledge of computer science and its applications;
+promoting a greater interest in computer science and its applications; and
+providing a means of communication between persons having interest in computer science.
+The above purposes will be fulfilled by the organization of discussions and lectures with professionals and academics in the field of computer science and related fields, the maintenance of a library of materials related to computer science, the maintenance of an office containing the library as an aid to aim (1.3) above, and such other means as decided by the club membership.
\ No newline at end of file
diff --git a/next-env.d.ts b/next-env.d.ts
index 458d2ae0..cdebab18 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -48,3 +48,17 @@ declare module "*.team-member.mdx" {
   export const metadata: TeamMemberMetadata;
   export default ReactComponent;
 }
+
+declare module "*.section.mdx" {
+  import { ComponentType } from "react";
+
+  interface SectionMetadata {
+    title: string;
+    id: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: SectionMetadata;
+  export default ReactComponent;
+}
diff --git a/package.json b/package.json
index f7d1bc39..a600b83a 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
     "build": "next build",
     "start": "next start",
     "export": "next export",
-    "lint": "eslint '{pages,components}/**/*.{js,ts,tsx,jsx}' --quiet",
-    "lint:fix": "eslint '{pages,components}/**/*.{js,ts,tsx,jsx}' --quiet --fix"
+    "lint": "eslint \"{pages,components}/**/*.{js,ts,tsx,jsx}\" --quiet",
+    "lint:fix": "eslint \"{pages,components}/**/*.{js,ts,tsx,jsx}\" --quiet --fix"
   },
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
diff --git a/pages/_app.css b/pages/_app.css
index d55f4e2c..514fe1b8 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -9,8 +9,10 @@ body {
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
+  --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
+  --blue-2-25: #1482e340;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(
@@ -27,6 +29,7 @@ body {
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
+  --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
   --purple-1: #525284;
diff --git a/pages/playground.mdx b/pages/playground.mdx
index e9c6f6f5..5edcad2a 100644
--- a/pages/playground.mdx
+++ b/pages/playground.mdx
@@ -5,6 +5,7 @@ import {
   EventCardDemo,
   TeamMemberDemo,
   TeamMemberCardDemo,
+  OrganizedContentDemo,
   ButtonDemo,
 } from "../components/playground";
 
@@ -12,6 +13,14 @@ import { TeamMemberCard } from "../components/TeamMemberCard";
 
 # Playground
 
+## `<OrganizedContent />`
+
+Codey is supposed to say something here...
+
+<OrganizedContentDemo />
+
+---
+
 ## `<MiniEventCard />`
 
 The `<MiniEventCard />` component has a collapsible description, and it is used
@@ -70,3 +79,5 @@ The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
 display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 
 <TeamMemberCardDemo />
+
+---

From 426c81360edd8b20cc7c8ed41877618b8e8b6322 Mon Sep 17 00:00:00 2001
From: Linna Luo <l42luo@uwaterloo.ca>
Date: Thu, 10 Jun 2021 01:39:37 +0000
Subject: [PATCH 10/16] Fix MiniEventCard drop down icon styling

---
 components/MiniEventCard.module.css | 4 ++++
 components/MiniEventCard.tsx        | 6 +-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index 4675d9ae..cc4ac4ed 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -42,3 +42,7 @@
 .miniEventCard > summary {
   list-style: none;
 }
+
+.dropDownIcon {
+  fill: var(--blue-2);
+}
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index b297ded4..5d676fac 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -17,13 +17,9 @@ const dropDownIcon = (
     width="14"
     height="9"
     viewBox="0 0 14 9"
-    fill="none"
     className={styles.dropDownIcon}
   >
-    <path
-      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
-      fill="#1482E3"
-    />
+    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
   </svg>
 );
 

From 078276efa7e12e7a700b1bff2bebb815ba2cde00 Mon Sep 17 00:00:00 2001
From: Catherine Wan <c29wan@uwaterloo.ca>
Date: Sun, 13 Jun 2021 19:36:34 +0000
Subject: [PATCH 11/16] Link Component

---
 components/Link.module.css       | 10 ++++++++++
 components/Link.tsx              | 28 ++++++++++++++++++++++++++++
 components/playground.module.css | 11 +++++++++++
 components/playground.tsx        | 18 ++++++++++++++++++
 pages/_app.tsx                   | 14 ++------------
 pages/playground.mdx             |  9 +++++++++
 6 files changed, 78 insertions(+), 12 deletions(-)
 create mode 100644 components/Link.module.css
 create mode 100644 components/Link.tsx

diff --git a/components/Link.module.css b/components/Link.module.css
new file mode 100644
index 00000000..ba0d61f8
--- /dev/null
+++ b/components/Link.module.css
@@ -0,0 +1,10 @@
+.link {
+  color: var(--blue-2);
+  transition-duration: 0.3s;
+  text-decoration: none;
+  white-space: normal;
+}
+
+.link:hover {
+  color: var(--teal-2);
+}
diff --git a/components/Link.tsx b/components/Link.tsx
new file mode 100644
index 00000000..97325ff6
--- /dev/null
+++ b/components/Link.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./Link.module.css";
+import NextLink from "next/link";
+import { LinkProps as NextLinkProps } from "next/link";
+
+type Props = Omit<NextLinkProps, "href"> & { href: string };
+
+export const Link: React.FC<Props> = (props) => {
+  const { children, ...otherProps } = props;
+  const { href } = otherProps;
+
+  const isExternal = href.includes("http://") || href.includes("https://");
+
+  return isExternal ? (
+    <a
+      className={styles.link}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ) : (
+    <NextLink {...otherProps}>
+      <a className={styles.link}>{children}</a>
+    </NextLink>
+  );
+};
diff --git a/components/playground.module.css b/components/playground.module.css
index f43d992d..8a3adcde 100644
--- a/components/playground.module.css
+++ b/components/playground.module.css
@@ -91,3 +91,14 @@
     margin: calc(50rem / 16);
   }
 }
+
+.linkDemo {
+  padding: calc(50rem / 16);
+  background-color: var(--off-white);
+}
+
+.linkTitle {
+  font-weight: bold;
+  color: var(--purple-2);
+  font-size: calc(24rem / 16);
+}
diff --git a/components/playground.tsx b/components/playground.tsx
index 2a4dd030..347a8f08 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -40,6 +40,7 @@ import CodeyInfo, {
 
 import { MiniEventCard } from "./MiniEventCard";
 import { NewsCard } from "./NewsCard";
+import { Link } from "./Link";
 import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
@@ -184,6 +185,23 @@ export function TeamMemberCardDemo() {
   );
 }
 
+export function LinkDemo() {
+  return (
+    <div className={styles.linkDemo}>
+      <div className={styles.linkTitle}>Elections</div>
+      <p>
+        To find out when and where the next elections will be held, keep an eye
+        on the <Link href="https://csclub.uwaterloo.ca/news/">News</Link>. For
+        details on the elections, read our{" "}
+        <Link href="https://csclub.uwaterloo.ca/about/constitution">
+          Constitution
+        </Link>
+        .
+      </p>
+    </div>
+  );
+}
+
 export function OrganizedContentDemo() {
   const sections = constitution;
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index ba816722..cbb41c98 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,21 +1,11 @@
-import React, { AnchorHTMLAttributes } from "react";
+import React from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
-import NextLink from "next/link";
 import "./_app.css";
 import "./font.css";
-
-function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
-  const { href, ...other } = props;
-
-  return (
-    <NextLink href={href ?? "#"}>
-      <a {...other}></a>
-    </NextLink>
-  );
-}
+import { Link } from "../components/Link";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
diff --git a/pages/playground.mdx b/pages/playground.mdx
index 5edcad2a..3a38453a 100644
--- a/pages/playground.mdx
+++ b/pages/playground.mdx
@@ -2,6 +2,7 @@ import {
   MiniEventCardDemo,
   NewsCardDemo,
   EventDescriptionCardDemo,
+  LinkDemo,
   EventCardDemo,
   TeamMemberDemo,
   TeamMemberCardDemo,
@@ -81,3 +82,11 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 <TeamMemberCardDemo />
 
 ---
+
+## `<Link />`
+
+The `<Link />` component is used on various pages such as Meet the Team! and Our Supporters
+
+<LinkDemo />
+
+---

From 7a08e0c3310804ed2f14461a2247ec4081189888 Mon Sep 17 00:00:00 2001
From: Linhui Luo <l42luo@uwaterloo.ca>
Date: Sun, 13 Jun 2021 23:55:25 +0000
Subject: [PATCH 12/16] Footer

---
 components/Footer.module.css      |  36 ++++++
 components/Footer.tsx             |  16 +++
 components/SocialLinks.module.css |  15 +++
 components/SocialLinks.tsx        | 186 ++++++++++++++++++++++++++++++
 components/playground.tsx         |   1 +
 pages/_app.css                    |   2 +-
 pages/_app.module.css             |  12 ++
 pages/_app.tsx                    |  15 ++-
 8 files changed, 279 insertions(+), 4 deletions(-)
 create mode 100644 components/Footer.module.css
 create mode 100644 components/Footer.tsx
 create mode 100644 components/SocialLinks.module.css
 create mode 100644 components/SocialLinks.tsx
 create mode 100644 pages/_app.module.css

diff --git a/components/Footer.module.css b/components/Footer.module.css
new file mode 100644
index 00000000..4d70b0ba
--- /dev/null
+++ b/components/Footer.module.css
@@ -0,0 +1,36 @@
+.footer {
+  box-sizing: border-box;
+  background: var(--purple-2);
+  height: calc(66rem / 16);
+  padding: calc(14rem / 16) 0;
+  width: 100%;
+}
+
+.container {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: calc(1440rem / 16);
+  padding: 0 calc(48rem / 16);
+  margin: 0 auto;
+  height: 100%;
+}
+
+.text {
+  color: white;
+  font-style: normal;
+  text-align: center;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .footer {
+    height: calc(120rem / 16);
+  }
+
+  .container {
+    flex-direction: column-reverse;
+    justify-content: space-around;
+    padding: 0 calc(24rem / 16);
+  }
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 00000000..0ce6c715
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./Footer.module.css";
+import { SocialLinks } from "./SocialLinks";
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.container}>
+        <div className={styles.text}>
+          Have questions? Email us at XX@XXX.COM
+        </div>
+        <SocialLinks color="white" size="small" />
+      </div>
+    </footer>
+  );
+}
diff --git a/components/SocialLinks.module.css b/components/SocialLinks.module.css
new file mode 100644
index 00000000..99ca6366
--- /dev/null
+++ b/components/SocialLinks.module.css
@@ -0,0 +1,15 @@
+.link,
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.links > * {
+  margin: 0 calc(10rem / 16);
+}
+
+.big > * {
+  width: calc(40rem / 16);
+  height: calc(40rem / 16);
+}
diff --git a/components/SocialLinks.tsx b/components/SocialLinks.tsx
new file mode 100644
index 00000000..7f8714d3
--- /dev/null
+++ b/components/SocialLinks.tsx
@@ -0,0 +1,186 @@
+import React from "react";
+import styles from "./SocialLinks.module.css";
+
+interface Props {
+  color: "white" | "gradient";
+  size: "small" | "big";
+}
+
+export const SocialLinks: React.FC<Props> = (props) => {
+  return (
+    <div className={styles.links}>
+      {links.map((Link, index) => (
+        <Link {...props} key={index} />
+      ))}
+    </div>
+  );
+};
+
+const iconList = [
+  {
+    name: "Facebook",
+    image: FacebookSvg,
+    link: "https://www.facebook.com/uw.computerscienceclub",
+  },
+  {
+    name: "Instagram",
+    image: InstagramSvg,
+    link: "https://www.instagram.com/uwcsclub/",
+  },
+  {
+    name: "Twitch",
+    image: TwitchSvg,
+    link: "https://www.twitch.tv/uwcsclub",
+  },
+  {
+    name: "Discord",
+    image: DiscordSvg,
+    link: "https://discord.gg/pHfYBCg",
+  },
+];
+
+const links = iconList.map((icon) => {
+  function SocialLink({ size, color }: Props) {
+    return (
+      <a
+        key={icon.link}
+        href={icon.link}
+        rel="noreferrer"
+        target="_blank"
+        className={`${styles.link} ${size === "big" ? styles.big : ""}`}
+      >
+        {icon.image(color)}
+      </a>
+    );
+  }
+
+  SocialLink.displayName = icon.name;
+
+  return SocialLink;
+});
+
+export const [Facebook, Instagram, Twitch, Discord] = links;
+
+function InstagramSvg(color: string) {
+  return (
+    <svg
+      width="33"
+      height="32"
+      viewBox="0 0 33 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <linearGradient id="bluegreen-gradient">
+        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="100%" stopColor="#4ED4B2" />
+      </linearGradient>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.60352 8.00008C3.60352 6.58559 4.16542 5.22904 5.16561 4.22885C6.16581 3.22865 7.52236 2.66675 8.93685 2.66675H24.9368C26.3513 2.66675 27.7079 3.22865 28.7081 4.22885C29.7083 5.22904 30.2702 6.58559 30.2702 8.00008V24.0001C30.2702 25.4146 29.7083 26.7711 28.7081 27.7713C27.7079 28.7715 26.3513 29.3334 24.9368 29.3334H8.93685C7.52236 29.3334 6.16581 28.7715 5.16561 27.7713C4.16542 26.7711 3.60352 25.4146 3.60352 24.0001V8.00008ZM8.93685 5.33341C8.22961 5.33341 7.55133 5.61437 7.05123 6.11446C6.55113 6.61456 6.27018 7.29284 6.27018 8.00008V24.0001C6.27018 24.7073 6.55113 25.3856 7.05123 25.8857C7.55133 26.3858 8.22961 26.6667 8.93685 26.6667H24.9368C25.6441 26.6667 26.3224 26.3858 26.8225 25.8857C27.3226 25.3856 27.6035 24.7073 27.6035 24.0001V8.00008C27.6035 7.29284 27.3226 6.61456 26.8225 6.11446C26.3224 5.61437 25.6441 5.33341 24.9368 5.33341H8.93685ZM16.9368 12.0001C15.876 12.0001 14.8586 12.4215 14.1084 13.1717C13.3583 13.9218 12.9368 14.9392 12.9368 16.0001C12.9368 17.0609 13.3583 18.0784 14.1084 18.8285C14.8586 19.5787 15.876 20.0001 16.9368 20.0001C17.9977 20.0001 19.0151 19.5787 19.7653 18.8285C20.5154 18.0784 20.9368 17.0609 20.9368 16.0001C20.9368 14.9392 20.5154 13.9218 19.7653 13.1717C19.0151 12.4215 17.9977 12.0001 16.9368 12.0001ZM10.2702 16.0001C10.2702 14.232 10.9726 12.5363 12.2228 11.286C13.473 10.0358 15.1687 9.33342 16.9368 9.33342C18.705 9.33342 20.4007 10.0358 21.6509 11.286C22.9011 12.5363 23.6035 14.232 23.6035 16.0001C23.6035 17.7682 22.9011 19.4639 21.6509 20.7141C20.4007 21.9644 18.705 22.6667 16.9368 22.6667C15.1687 22.6667 13.473 21.9644 12.2228 20.7141C10.9726 19.4639 10.2702 17.7682 10.2702 16.0001ZM24.2702 10.6667C24.8006 10.6667 25.3093 10.456 25.6844 10.081C26.0595 9.70589 26.2702 9.19718 26.2702 8.66675C26.2702 8.13632 26.0595 7.62761 25.6844 7.25253C25.3093 6.87746 24.8006 6.66675 24.2702 6.66675C23.7397 6.66675 23.231 6.87746 22.856 7.25253C22.4809 7.62761 22.2702 8.13632 22.2702 8.66675C22.2702 9.19718 22.4809 9.70589 22.856 10.081C23.231 10.456 23.7397 10.6667 24.2702 10.6667Z"
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+      />
+    </svg>
+  );
+}
+
+function DiscordSvg(color: string) {
+  return (
+    <svg
+      width="31"
+      height="30"
+      viewBox="0 0 31 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id="bluegreen-gradient">
+          <stop offset="0%" stopColor="#1481E3" />
+          <stop offset="100%" stopColor="#4ED4B2" />
+        </linearGradient>
+      </defs>
+      <g clipPath="url(#clip0)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24.4845 0.872314C26.1684 0.872314 27.5394 2.20412 27.5394 3.85441V29.8247L24.3355 27.0742L22.5323 25.4529L20.6249 23.7302L21.4147 26.4083H4.51584C2.83192 26.4083 1.46094 25.0765 1.46094 23.4262V3.85441C1.46094 2.20412 2.83192 0.872314 4.51584 0.872314H24.4845V0.872314ZM18.7323 19.7782C22.0256 19.6769 23.2923 17.5778 23.2923 17.5778C23.2923 12.9165 21.1464 9.13822 21.1464 9.13822C19.0005 7.57479 16.959 7.61822 16.959 7.61822L16.7504 7.84984C19.2837 8.6026 20.4609 9.68831 20.4609 9.68831C18.9111 8.86317 17.3911 8.45784 15.9755 8.2986C14.9025 8.18279 13.8743 8.21174 12.9653 8.32755L12.7119 8.35651C12.1904 8.39993 10.9237 8.58812 9.32917 9.26851C8.7778 9.5146 8.44996 9.68831 8.44996 9.68831C8.44996 9.68831 9.68682 8.5447 12.3692 7.79193L12.2202 7.61822C12.2202 7.61822 10.1786 7.57479 8.0327 9.13822C8.0327 9.13822 5.88682 12.9165 5.88682 17.5778C5.88682 17.5778 7.13859 19.6769 10.4319 19.7782C10.4319 19.7782 10.9833 19.1268 11.4304 18.5767C9.5378 18.0266 8.82251 16.8685 8.82251 16.8685L9.23976 17.1146L9.29937 17.158L9.35774 17.1906L9.37512 17.1978L9.43349 17.2304C9.80604 17.4331 10.1786 17.5923 10.5213 17.7226C11.1323 17.9542 11.8625 18.1858 12.7119 18.3451C13.8296 18.5477 15.1409 18.6201 16.5715 18.3596C17.2719 18.2437 17.9872 18.0411 18.7323 17.7371C19.2539 17.5489 19.8351 17.2738 20.446 16.883C20.446 16.883 19.7009 18.07 17.7488 18.6056C18.1958 19.1557 18.7323 19.7782 18.7323 19.7782ZM11.8029 13.0178C10.9535 13.0178 10.2829 13.7416 10.2829 14.6247C10.2829 15.5077 10.9684 16.2316 11.8029 16.2316C12.6523 16.2316 13.3229 15.5077 13.3229 14.6247C13.3378 13.7416 12.6523 13.0178 11.8029 13.0178ZM17.2421 13.0178C16.3927 13.0178 15.7221 13.7416 15.7221 14.6247C15.7221 15.5077 16.4076 16.2316 17.2421 16.2316C18.0915 16.2316 18.7621 15.5077 18.7621 14.6247C18.7621 13.7416 18.0915 13.0178 17.2421 13.0178Z"
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect
+            width="29.8039"
+            height="28.9524"
+            fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+            transform="translate(0.217773 0.872314)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function TwitchSvg(color: string) {
+  return (
+    <svg
+      width="26"
+      height="31"
+      viewBox="0 0 26 31"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <linearGradient id="bluegreen-gradient">
+        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="100%" stopColor="#4ED4B2" />
+      </linearGradient>
+      <g clipPath="url(#clip0)">
+        <path
+          d="M5.83051 0.872314L0.535156 6.15123V25.1553H6.88958V30.4342L12.1849 25.1553H16.4212L25.9529 15.6533V0.872314H5.83051ZM23.8347 14.5975L19.5984 18.8206H15.3622L11.6554 22.5159V18.8206H6.88958V2.98388H23.8347V14.5975Z"
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+        />
+        <path
+          d="M20.6572 6.6792H18.5391V13.0139H20.6572V6.6792Z"
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+        />
+        <path
+          d="M14.832 6.6792H12.7139V13.0139H14.832V6.6792Z"
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect
+            width="25.4177"
+            height="29.5619"
+            fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+            transform="translate(0.535156 0.872314)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function FacebookSvg(color: string) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <linearGradient id="bluegreen-gradient">
+        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="100%" stopColor="#4ED4B2" />
+      </linearGradient>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33268 2.66675H26.666C28.1388 2.66675 29.3327 3.86066 29.3327 5.33342V26.6668C29.3327 28.1395 28.1388 29.3334 26.666 29.3334H5.33268C3.85992 29.3334 2.66602 28.1395 2.66602 26.6668V5.33342C2.66602 3.86066 3.85992 2.66675 5.33268 2.66675ZM5.3311 5.33333V26.6667H26.6644V5.33333H5.3311ZM14.8428 16.0059H17.332V24H19.9987V16.0059H22.6419V13.3392H19.9987V12C19.9987 11.2636 20.5957 10.6667 21.332 10.6667H22.6654V8H21.332C19.1229 8 17.332 9.79086 17.332 12V13.3392H14.8428V16.0059Z"
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+      />
+    </svg>
+  );
+}
diff --git a/components/playground.tsx b/components/playground.tsx
index 347a8f08..68478ad1 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -47,6 +47,7 @@ import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
 import { OrganizedContent, LinkProps } from "./OrganizedContent";
 import { Button } from "./Button";
+import { Footer } from "./Footer";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
diff --git a/pages/_app.css b/pages/_app.css
index 514fe1b8..46c08410 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -41,7 +41,7 @@ body {
   );
 }
 
-@media only screen and (max-width: calc(375rem / 16)) {
+@media only screen and (max-width: calc(425rem / 16)) {
   body {
     font-size: calc(14rem / 16);
   }
diff --git a/pages/_app.module.css b/pages/_app.module.css
new file mode 100644
index 00000000..a9bb4d65
--- /dev/null
+++ b/pages/_app.module.css
@@ -0,0 +1,12 @@
+.appContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* This makes the footer stay at the bottom, even if there's not much content
+ * on the screen.
+ */
+.contentContainer {
+  flex-grow: 1;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cbb41c98..892f09dd 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,16 +3,25 @@ import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
+import { Footer } from "../components/Footer";
+import { Link } from "../components/Link";
+import styles from "./_app.module.css";
+
 import "./_app.css";
 import "./font.css";
-import { Link } from "../components/Link";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ThemeProvider theme="light">
       <MDXProvider components={{ a: Link }}>
-        <Navbar />
-        <Component {...pageProps} />
+        <div className={styles.appContainer}>
+          <Navbar />
+          {/* Wrapping content with a div to allow for a display: block parent */}
+          <div className={styles.contentContainer}>
+            <Component {...pageProps} />
+          </div>
+          <Footer />
+        </div>
       </MDXProvider>
     </ThemeProvider>
   );

From 23558a2b2b2b7a0d6824f0bd9c52a3799c44acb3 Mon Sep 17 00:00:00 2001
From: Neil Parikh <parikh.neil@me.com>
Date: Sun, 13 Jun 2021 21:32:28 -0400
Subject: [PATCH 13/16] fix date format in after hours

---
 content/playground/after-hours.event.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/playground/after-hours.event.mdx b/content/playground/after-hours.event.mdx
index 5cb3ccec..50179071 100644
--- a/content/playground/after-hours.event.mdx
+++ b/content/playground/after-hours.event.mdx
@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Afterhours: Personal Relationships",
   short: "Learn how React works and make your own version!",
-  date: new Date("2021-03-02 2:00 PM GMT-4"),
+  date: new Date("March 25, 2021 19:00:00 GMT-4"),
   online: false,
   location: "MC",
   registerLink: "http://csclub.uwaterloo.ca/",

From ae8e84564bc7b8e04d65e5b4dd9bacc888299f89 Mon Sep 17 00:00:00 2001
From: Bonnie Peng <bonnie.peng@uwaterloo.ca>
Date: Tue, 22 Jun 2021 01:22:54 +0000
Subject: [PATCH 14/16] Our Supporters Page

---
 components/Navbar.tsx                      |  4 ++
 content/our-supporters.mdx                 | 31 ++++++++++++
 next-env.d.ts                              |  8 ++++
 pages/about/our-supporters.module.css      | 56 ++++++++++++++++++++++
 pages/about/our-supporters.tsx             | 34 +++++++++++++
 public/our-supporters/supporters-codey.svg | 38 +++++++++++++++
 6 files changed, 171 insertions(+)
 create mode 100644 content/our-supporters.mdx
 create mode 100644 pages/about/our-supporters.module.css
 create mode 100644 pages/about/our-supporters.tsx
 create mode 100644 public/our-supporters/supporters-codey.svg

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 5bf8d8c4..dd97771b 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -38,6 +38,10 @@ const menu: NavLink[] = [
         name: "Code of Conduct",
         route: "/about/code-of-conduct",
       },
+      {
+        name: "Our Supporters",
+        route: "/about/our-supporters",
+      },
     ],
   },
   {
diff --git a/content/our-supporters.mdx b/content/our-supporters.mdx
new file mode 100644
index 00000000..10e6003c
--- /dev/null
+++ b/content/our-supporters.mdx
@@ -0,0 +1,31 @@
+## Mathematics Endowment Fund
+
+The [Mathematics Endowment Fund](https://uwaterloo.ca/math-endowment-fund/) has provided funding for a variety of projects, events, and hardware:
+
+- A new disk shelf (24 disks x 2TB) for the NetApp filers donated by CSCF and MFCF, to be used to improve home directories
+- Ginkgo, a server to improve CSC web hosting services
+- Drives for Potassium-Benzoate, the server that runs [mirror.csclub.uwaterloo.ca](http://mirror.csclub.uwaterloo.ca/)
+- Potassium-Benzoate, the server that runs [mirror.csclub.uwaterloo.ca](http://mirror.csclub.uwaterloo.ca/)
+- High-Fructose Corn Syrup, a server used for high performance computing
+- Sodium-Benzoate, the server that previously ran [mirror.csclub.uwaterloo.ca](http://mirror.csclub.uwaterloo.ca/)
+- A gigabit switch for the MathSoc offices (including ours)
+- Academic talks
+- Linux CDs for first-year students
+- Caffeine, our primary server
+- Various books for the CSC library
+
+The Computer Science club graciously thanks the Mathematics Endowment Fund for their financial support.
+
+## MathSoc Capital Improvements Fund
+
+The [MathSoc Capital Improvements Fund](http://mathsoc.uwaterloo.ca/council/policies/Capital+Improvements+Fund) has provided funding of new office hardware:
+
+- Strombola and Bit-Shifter hardware upgrade (new motherboard, CPU and RAM)
+- 2x 8-port 10Gbps SFP+ network cards for the Math Student Orgs routers/switches
+- Natural-Flavours hardware upgrade (new motherboard, CPU and RAM)
+
+## Student Life Endowment Fund
+
+The [Student Life Endowment Fund](https://feds.ca/funding#fund-slef) has provided funding of new hardware:
+
+- Biloba, a server to improve CSC web hosting services
diff --git a/next-env.d.ts b/next-env.d.ts
index cdebab18..ffde38ef 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -62,3 +62,11 @@ declare module "*.section.mdx" {
   export const metadata: SectionMetadata;
   export default ReactComponent;
 }
+
+declare module "*.mdx" {
+  import { ComponentType } from "react";
+
+  const ReactComponent: ComponentType;
+
+  export default ReactComponent;
+}
diff --git a/pages/about/our-supporters.module.css b/pages/about/our-supporters.module.css
new file mode 100644
index 00000000..0ee1b98c
--- /dev/null
+++ b/pages/about/our-supporters.module.css
@@ -0,0 +1,56 @@
+.container {
+  margin: 0 auto;
+  max-width: calc(806rem / 16);
+  padding: 0 calc(60rem / 16);
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  padding-bottom: 1rem;
+  border-bottom: calc(1rem / 16) solid var(--purple-2);
+}
+
+.header {
+  color: var(--purple-2);
+  font-size: calc(48rem / 16);
+  margin: 0 1rem 0 0;
+  text-align: center;
+}
+
+.title {
+  font-weight: 600;
+  font-size: calc(24rem / 16);
+  line-height: calc(36 / 24);
+  color: var(--blue-2);
+  margin-top: calc(35rem / 16);
+}
+
+.text {
+  line-height: calc(24 / 16);
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .container {
+    padding: 0 calc(45rem / 16);
+  }
+
+  .headerContainer {
+    flex-direction: column-reverse;
+    align-items: center;
+    border: none;
+  }
+
+  .header {
+    font-size: calc(24rem / 16);
+  }
+
+  .codey {
+    width: calc(100rem / 16);
+  }
+
+  .list {
+    padding: 0 calc(18rem / 16);
+  }
+}
diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx
new file mode 100644
index 00000000..dc79825b
--- /dev/null
+++ b/pages/about/our-supporters.tsx
@@ -0,0 +1,34 @@
+import { MDXProvider } from "@mdx-js/react";
+import React, { HTMLAttributes } from "react";
+import { Image } from "../../components/Image";
+import Content from "../../content/our-supporters.mdx";
+import styles from "./our-supporters.module.css";
+
+export default function OurSupporters() {
+  return (
+    <MDXProvider components={{ h2: H2, p: Text, ul: UL }}>
+      <div className={styles.container}>
+        <div className={styles.headerContainer}>
+          <h1 className={styles.header}>Our Supporters</h1>
+          <Image
+            src="our-supporters/supporters-codey.svg"
+            className={styles.codey}
+          />
+        </div>
+        <Content />
+      </div>
+    </MDXProvider>
+  );
+}
+
+function H2(props: HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 {...props} className={styles.title} />;
+}
+
+function Text(props: HTMLAttributes<HTMLParagraphElement>) {
+  return <p {...props} className={styles.text} />;
+}
+
+function UL(props: HTMLAttributes<HTMLUListElement>) {
+  return <ul {...props} className={styles.list} />;
+}
diff --git a/public/our-supporters/supporters-codey.svg b/public/our-supporters/supporters-codey.svg
new file mode 100644
index 00000000..d6e9872a
--- /dev/null
+++ b/public/our-supporters/supporters-codey.svg
@@ -0,0 +1,38 @@
+<svg width="164" height="152" viewBox="0 0 164 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.6987 10.1311C60.6987 10.1311 65.5243 13.8573 67.5873 17.0706C70.5243 21.6451 71.2736 30.4939 71.2736 30.4939L50.5187 30.6942C50.5187 30.6942 51.4565 21.8685 54.3141 17.1987C56.2555 14.026 60.6987 10.1311 60.6987 10.1311Z" fill="#5CAFF9"/>
+<path d="M60.7055 15.483C60.7055 15.483 64.1715 17.8748 65.652 19.9389C67.7597 22.8775 68.2919 28.5653 68.2919 28.5653L53.373 28.7093C53.373 28.7093 54.0536 23.0351 56.111 20.031C57.5088 17.99 60.7055 15.483 60.7055 15.483Z" fill="white"/>
+<path d="M95.2108 18.1675C95.2108 18.1675 89.2355 19.3787 85.9652 21.3501C81.3096 24.1568 76.7284 31.7643 76.7284 31.7643L95.2599 41.1124C95.2599 41.1124 98.3173 32.7803 97.8166 27.3285C97.4764 23.6246 95.2108 18.1675 95.2108 18.1675Z" fill="#5CAFF9"/>
+<path d="M92.5575 23.0171C92.5575 23.0171 88.0539 23.8047 85.6109 25.1942C82.1329 27.1723 78.7914 32.6681 78.7914 32.6681L92.9771 39.824C92.9771 39.824 95.153 33.7721 94.683 29.7706C94.3637 27.052 92.5575 23.0171 92.5575 23.0171Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.9722 122.412C71.9599 124.118 66.6098 124.459 61.1223 123.181C40.6941 118.424 21.5523 102.08 32.3877 66.0153C33.4918 63.333 34.5321 60.7517 35.5289 58.2782C45.9438 32.4358 51.6121 18.3708 75.6814 23.9753C95.5913 28.6113 98.2601 44.8237 100.996 61.4422C101.845 66.6018 102.701 71.8004 104.081 76.704C117.072 85.0493 122.021 97.3949 119.091 109.978C115.301 126.256 100.664 127.341 76.9722 122.412Z" fill="#5CAFF9"/>
+<path d="M49.0293 78.6378L54.172 95.5727C54.172 95.5727 12.7709 106.808 11.8631 106.287C10.9554 105.765 7.99875 97.0159 8.64895 95.7023C9.00861 94.9757 22.7298 89.2279 33.7886 85.1795C44.1371 80.4424 49.0293 78.6378 49.0293 78.6378Z" fill="#5CAFF9"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="20" y="16" width="116" height="120">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.8037 122.373C71.7915 124.079 66.4416 124.42 60.9544 123.142C40.5261 118.385 21.3843 102.041 32.2198 65.9762C33.3238 63.2939 34.3642 60.7126 35.361 58.2392C45.7758 32.3968 51.4442 18.3317 75.5134 23.9362C95.4233 28.5723 98.0921 44.7847 100.828 61.4031C101.677 66.5631 102.533 71.7622 103.913 76.666C116.903 85.0113 121.852 97.3564 118.922 109.939C115.132 126.217 100.495 127.302 76.8037 122.373Z" fill="#5CAFF9"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M57.0627 89.3998C53.5322 111.35 60.451 134.192 43.0797 121.691C38.2814 120.178 33.901 106.779 37.4316 84.8287C40.9621 62.8786 49.8813 44.5761 64.0963 46.8625C71.8227 48.1053 79.2637 54.6767 74.0675 67.1846C71.5001 73.3646 58.254 81.9934 57.0627 89.3998Z" fill="white"/>
+</g>
+<ellipse cx="122.342" cy="77.1764" rx="18.989" ry="20.8326" transform="rotate(-21.9209 122.342 77.1764)" fill="#5CAFF9"/>
+<circle cx="50.6767" cy="38.7855" r="12.8002" transform="rotate(13.1078 50.6767 38.7855)" stroke="#2A2A62" stroke-width="2.05361"/>
+<circle cx="81.0087" cy="45.0912" r="12.8002" transform="rotate(13.1078 81.0087 45.0912)" stroke="#2A2A62" stroke-width="2.05361"/>
+<path d="M61.5943 44.7352C61.5943 44.7352 63.8927 44.7025 65.3108 45.0327C66.729 45.3629 68.7765 46.4076 68.7765 46.4076L68.2748 48.5623C68.2748 48.5623 66.1767 47.6951 64.7673 47.367C63.3579 47.0388 61.0926 46.8899 61.0926 46.8899L61.5943 44.7352Z" fill="#2A2A62"/>
+<path d="M93.1609 119.081L89.7846 97.0617C89.7846 97.0617 96.9909 91.9125 105.424 92.3482C113.857 92.7839 119.891 98.3109 119.891 98.3109C119.891 98.3109 141.191 115.598 141.269 116.504C141.347 117.411 137.173 125.646 136.058 126.261C135.44 126.601 126.141 124.61 118.656 121.361C101.128 131.273 93.1609 119.081 93.1609 119.081Z" fill="#5CAFF9"/>
+<path d="M63.2051 99.4518L69.0121 118.574C69.0121 118.574 36.5634 126.918 35.7775 126.257C34.9916 125.595 31.7487 115.687 32.1481 114.305C32.3691 113.541 42.9271 108.55 51.4931 105.169C59.417 100.962 63.2051 99.4518 63.2051 99.4518Z" fill="#5CAFF9"/>
+<g clip-path="url(#clip0)">
+<path d="M70.8476 57.937C70.0636 63.696 62.8994 63.3647 58.6038 61.399C54.3164 59.398 53.978 53.6747 55.4535 50.5275C56.9372 47.3451 61.5802 46.3838 65.8676 48.3848C67.7244 49.8198 67.8388 50.9234 68.7764 52.4786C69.8844 54.2591 70.0962 55.4225 70.8476 57.937Z" fill="white"/>
+<path d="M61.9285 51.5898C63.7767 52.0201 65.4953 51.4227 65.7671 50.2554C66.0389 49.0882 64.761 47.7931 62.9128 47.3627C61.0646 46.9324 59.3461 47.5298 59.0743 48.697C58.8025 49.8643 60.0804 51.1594 61.9285 51.5898Z" fill="#2A2A62"/>
+<path d="M70.0925 60.5456C69.015 61.186 67.6615 61.5764 66.4195 61.8071C64.7841 62.1319 63.2357 62.4026 61.418 61.7565C56.802 60.0504 54.6116 55.9011 55.9178 52.0461C56.8369 49.215 59.6433 47.529 62.845 47.4947C58.7752 46.4727 55.7647 48.5569 54.502 52.3849C53.1303 56.5217 55.7342 61.2872 60.3501 62.9933C64.1101 64.3887 68.0403 63.2986 70.0925 60.5456Z" fill="#2A2A62"/>
+<path d="M60.9848 39.0838C61.4843 38.219 60.7674 36.87 59.3837 36.0708C57.9999 35.2717 56.4732 35.3249 55.9737 36.1898C55.4742 37.0546 56.1911 38.4036 57.5749 39.2028C58.9586 40.0019 60.4853 39.9487 60.9848 39.0838Z" fill="white"/>
+<path d="M76.2391 43.963C77.8338 43.8599 79.0743 42.9683 79.0099 41.9716C78.9454 40.9749 77.6003 40.2505 76.0056 40.3537C74.4109 40.4569 73.1704 41.3485 73.2349 42.3452C73.2994 43.3419 74.6444 44.0662 76.2391 43.963Z" fill="white"/>
+<path opacity="0.5" d="M61.5594 53.1746L63.4289 56.4693L59.8644 59.0186L58.1764 54.4664L61.5594 53.1746Z" fill="#5CAFF9"/>
+<path d="M61.9284 51.589C61.9284 51.589 60.5466 56.7261 66.2333 55.7479" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62.1003 50.8498C62.1003 50.8498 60.7305 56.7325 57.0458 52.9408" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M63.6088 55.6943C63.6088 55.6943 58.9926 63.7175 58.1064 53.9674" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M70.8316 46.5814C70.202 47.5705 70.9875 48.7695 71.8456 48.1325C72.4826 47.6831 73.2615 47.3863 74.1031 47.5822C74.9026 47.7684 75.4702 48.3788 75.8432 49.0633C76.3448 49.9572 77.5082 49.1522 77.3671 48.0434C77.2756 47.4841 77.113 46.8485 76.7979 46.297C75.3218 43.6819 72.4802 44.4547 71.1608 46.1201C71.0371 46.2706 70.9133 46.4211 70.8316 46.5814Z" fill="#2A2A62"/>
+<path d="M53.2183 42.4802C52.5888 43.4693 53.3742 44.6683 54.2323 44.0313C54.8693 43.5819 55.6482 43.2851 56.4898 43.481C57.2893 43.6672 57.857 44.2776 58.2299 44.9621C58.7315 45.856 59.8949 45.051 59.7539 43.9422C59.6623 43.3829 59.4997 42.7473 59.1846 42.1958C57.7085 39.5807 54.8669 40.3536 53.5475 42.0189C53.4238 42.1694 53.3 42.3199 53.2183 42.4802Z" fill="#2A2A62"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="25.1365" height="26.2577" fill="white" transform="translate(54.9102 34.8413) rotate(13.1078)"/>
+</clipPath>
+</defs>
+</svg>

From 48056ca82ea3f9903bd6a284bead2fef94b8edd9 Mon Sep 17 00:00:00 2001
From: Bonnie Peng <bonnie.peng@uwaterloo.ca>
Date: Thu, 24 Jun 2021 02:10:51 +0000
Subject: [PATCH 15/16] Event Description Card: Logo update

---
 components/EventDescriptionCard.module.css |  25 +++++------
 components/EventDescriptionCard.tsx        |  46 ++++++++++-----------
 components/SocialLinks.module.css          |   8 ++++
 components/SocialLinks.tsx                 |  26 ++++++++----
 public/logos/Discord.png                   | Bin 900 -> 0 bytes
 public/logos/Facebook.png                  | Bin 615 -> 0 bytes
 public/logos/Instagram.png                 | Bin 1077 -> 0 bytes
 public/logos/Twitch.png                    | Bin 575 -> 0 bytes
 8 files changed, 57 insertions(+), 48 deletions(-)
 delete mode 100644 public/logos/Discord.png
 delete mode 100644 public/logos/Facebook.png
 delete mode 100644 public/logos/Instagram.png
 delete mode 100644 public/logos/Twitch.png

diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css
index 93364b1e..323fbfec 100644
--- a/components/EventDescriptionCard.module.css
+++ b/components/EventDescriptionCard.module.css
@@ -14,8 +14,9 @@
 }
 
 .details {
-  position: relative;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .name {
@@ -31,21 +32,9 @@
   margin-top: calc(12rem / 16);
 }
 
-.spacer {
-  height: calc(35rem / 16);
-}
-
-.button {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
 .logo {
   width: calc(32rem / 16);
-  position: absolute;
-  bottom: 0;
-  right: 0;
+  margin-left: auto;
 }
 
 .setting {
@@ -55,6 +44,14 @@
   font-size: calc(14rem / 16);
 }
 
+.details > footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 1rem;
+  margin-top: auto;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     padding: 0;
diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx
index 0767c2a0..69e22887 100644
--- a/components/EventDescriptionCard.tsx
+++ b/components/EventDescriptionCard.tsx
@@ -3,6 +3,7 @@ import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
+import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
 interface Props {
   name: string;
@@ -14,21 +15,6 @@ interface Props {
   children: ReactNode;
 }
 
-function getPlatformURL(platform: string) {
-  switch (platform) {
-    case "Twitch":
-      return "https://www.twitch.tv/uwcsclub";
-    case "Discord":
-      return "https://discord.gg/pHfYBCg";
-    case "Facebook":
-      return "https://www.facebook.com/uw.computerscienceclub";
-    case "Instagram":
-      return "https://www.instagram.com/uwcsclub/";
-    default:
-      return;
-  }
-}
-
 /**
  * @remarks
  * - Child elements will display as the event's description
@@ -48,7 +34,7 @@ export function EventDescriptionCard({
   registerLink,
   children,
 }: Props) {
-  const platformURL = getPlatformURL(location);
+  const Icon = getIcon(location);
 
   return (
     <article className={styles.card}>
@@ -60,7 +46,6 @@ export function EventDescriptionCard({
           <EventSetting date={date} online={online} location={location} />
         </h2>
         <div className={styles.desc}>{children}</div>
-        <div className={styles.spacer}></div>
 
         <footer>
           {registerLink && (
@@ -70,17 +55,28 @@ export function EventDescriptionCard({
               </Button>
             </div>
           )}
-          {online && platformURL && (
-            <a target="_blank" href={platformURL} rel="noreferrer">
-              <Image
-                className={styles.logo}
-                alt={location}
-                src={"logos/" + location + ".png"}
-              />
-            </a>
+          {online && Icon && (
+            <div className={styles.logo}>
+              <Icon color="blue" size="small" />
+            </div>
           )}
         </footer>
       </div>
     </article>
   );
 }
+
+function getIcon(platform: string) {
+  switch (platform) {
+    case "Twitch":
+      return Twitch;
+    case "Discord":
+      return Discord;
+    case "Instagram":
+      return Instagram;
+    case "Facebook":
+      return Facebook;
+    default:
+      return null;
+  }
+}
diff --git a/components/SocialLinks.module.css b/components/SocialLinks.module.css
index 99ca6366..98f5e00b 100644
--- a/components/SocialLinks.module.css
+++ b/components/SocialLinks.module.css
@@ -13,3 +13,11 @@
   width: calc(40rem / 16);
   height: calc(40rem / 16);
 }
+
+.blue {
+  fill: var(--blue-1);
+}
+
+.white {
+  fill: var(--white);
+}
diff --git a/components/SocialLinks.tsx b/components/SocialLinks.tsx
index 7f8714d3..91847ac4 100644
--- a/components/SocialLinks.tsx
+++ b/components/SocialLinks.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./SocialLinks.module.css";
 
 interface Props {
-  color: "white" | "gradient";
+  color: "white" | "gradient" | "blue";
   size: "small" | "big";
 }
 
@@ -75,10 +75,11 @@ function InstagramSvg(color: string) {
         <stop offset="100%" stopColor="#4ED4B2" />
       </linearGradient>
       <path
+        className={color !== "gradient" ? styles[color] : ""}
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.60352 8.00008C3.60352 6.58559 4.16542 5.22904 5.16561 4.22885C6.16581 3.22865 7.52236 2.66675 8.93685 2.66675H24.9368C26.3513 2.66675 27.7079 3.22865 28.7081 4.22885C29.7083 5.22904 30.2702 6.58559 30.2702 8.00008V24.0001C30.2702 25.4146 29.7083 26.7711 28.7081 27.7713C27.7079 28.7715 26.3513 29.3334 24.9368 29.3334H8.93685C7.52236 29.3334 6.16581 28.7715 5.16561 27.7713C4.16542 26.7711 3.60352 25.4146 3.60352 24.0001V8.00008ZM8.93685 5.33341C8.22961 5.33341 7.55133 5.61437 7.05123 6.11446C6.55113 6.61456 6.27018 7.29284 6.27018 8.00008V24.0001C6.27018 24.7073 6.55113 25.3856 7.05123 25.8857C7.55133 26.3858 8.22961 26.6667 8.93685 26.6667H24.9368C25.6441 26.6667 26.3224 26.3858 26.8225 25.8857C27.3226 25.3856 27.6035 24.7073 27.6035 24.0001V8.00008C27.6035 7.29284 27.3226 6.61456 26.8225 6.11446C26.3224 5.61437 25.6441 5.33341 24.9368 5.33341H8.93685ZM16.9368 12.0001C15.876 12.0001 14.8586 12.4215 14.1084 13.1717C13.3583 13.9218 12.9368 14.9392 12.9368 16.0001C12.9368 17.0609 13.3583 18.0784 14.1084 18.8285C14.8586 19.5787 15.876 20.0001 16.9368 20.0001C17.9977 20.0001 19.0151 19.5787 19.7653 18.8285C20.5154 18.0784 20.9368 17.0609 20.9368 16.0001C20.9368 14.9392 20.5154 13.9218 19.7653 13.1717C19.0151 12.4215 17.9977 12.0001 16.9368 12.0001ZM10.2702 16.0001C10.2702 14.232 10.9726 12.5363 12.2228 11.286C13.473 10.0358 15.1687 9.33342 16.9368 9.33342C18.705 9.33342 20.4007 10.0358 21.6509 11.286C22.9011 12.5363 23.6035 14.232 23.6035 16.0001C23.6035 17.7682 22.9011 19.4639 21.6509 20.7141C20.4007 21.9644 18.705 22.6667 16.9368 22.6667C15.1687 22.6667 13.473 21.9644 12.2228 20.7141C10.9726 19.4639 10.2702 17.7682 10.2702 16.0001ZM24.2702 10.6667C24.8006 10.6667 25.3093 10.456 25.6844 10.081C26.0595 9.70589 26.2702 9.19718 26.2702 8.66675C26.2702 8.13632 26.0595 7.62761 25.6844 7.25253C25.3093 6.87746 24.8006 6.66675 24.2702 6.66675C23.7397 6.66675 23.231 6.87746 22.856 7.25253C22.4809 7.62761 22.2702 8.13632 22.2702 8.66675C22.2702 9.19718 22.4809 9.70589 22.856 10.081C23.231 10.456 23.7397 10.6667 24.2702 10.6667Z"
-        fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
       />
     </svg>
   );
@@ -104,7 +105,8 @@ function DiscordSvg(color: string) {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M24.4845 0.872314C26.1684 0.872314 27.5394 2.20412 27.5394 3.85441V29.8247L24.3355 27.0742L22.5323 25.4529L20.6249 23.7302L21.4147 26.4083H4.51584C2.83192 26.4083 1.46094 25.0765 1.46094 23.4262V3.85441C1.46094 2.20412 2.83192 0.872314 4.51584 0.872314H24.4845V0.872314ZM18.7323 19.7782C22.0256 19.6769 23.2923 17.5778 23.2923 17.5778C23.2923 12.9165 21.1464 9.13822 21.1464 9.13822C19.0005 7.57479 16.959 7.61822 16.959 7.61822L16.7504 7.84984C19.2837 8.6026 20.4609 9.68831 20.4609 9.68831C18.9111 8.86317 17.3911 8.45784 15.9755 8.2986C14.9025 8.18279 13.8743 8.21174 12.9653 8.32755L12.7119 8.35651C12.1904 8.39993 10.9237 8.58812 9.32917 9.26851C8.7778 9.5146 8.44996 9.68831 8.44996 9.68831C8.44996 9.68831 9.68682 8.5447 12.3692 7.79193L12.2202 7.61822C12.2202 7.61822 10.1786 7.57479 8.0327 9.13822C8.0327 9.13822 5.88682 12.9165 5.88682 17.5778C5.88682 17.5778 7.13859 19.6769 10.4319 19.7782C10.4319 19.7782 10.9833 19.1268 11.4304 18.5767C9.5378 18.0266 8.82251 16.8685 8.82251 16.8685L9.23976 17.1146L9.29937 17.158L9.35774 17.1906L9.37512 17.1978L9.43349 17.2304C9.80604 17.4331 10.1786 17.5923 10.5213 17.7226C11.1323 17.9542 11.8625 18.1858 12.7119 18.3451C13.8296 18.5477 15.1409 18.6201 16.5715 18.3596C17.2719 18.2437 17.9872 18.0411 18.7323 17.7371C19.2539 17.5489 19.8351 17.2738 20.446 16.883C20.446 16.883 19.7009 18.07 17.7488 18.6056C18.1958 19.1557 18.7323 19.7782 18.7323 19.7782ZM11.8029 13.0178C10.9535 13.0178 10.2829 13.7416 10.2829 14.6247C10.2829 15.5077 10.9684 16.2316 11.8029 16.2316C12.6523 16.2316 13.3229 15.5077 13.3229 14.6247C13.3378 13.7416 12.6523 13.0178 11.8029 13.0178ZM17.2421 13.0178C16.3927 13.0178 15.7221 13.7416 15.7221 14.6247C15.7221 15.5077 16.4076 16.2316 17.2421 16.2316C18.0915 16.2316 18.7621 15.5077 18.7621 14.6247C18.7621 13.7416 18.0915 13.0178 17.2421 13.0178Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
       </g>
       <defs>
@@ -112,7 +114,8 @@ function DiscordSvg(color: string) {
           <rect
             width="29.8039"
             height="28.9524"
-            fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+            className={color !== "gradient" ? styles[color] : ""}
+            fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
             transform="translate(0.217773 0.872314)"
           />
         </clipPath>
@@ -137,15 +140,18 @@ function TwitchSvg(color: string) {
       <g clipPath="url(#clip0)">
         <path
           d="M5.83051 0.872314L0.535156 6.15123V25.1553H6.88958V30.4342L12.1849 25.1553H16.4212L25.9529 15.6533V0.872314H5.83051ZM23.8347 14.5975L19.5984 18.8206H15.3622L11.6554 22.5159V18.8206H6.88958V2.98388H23.8347V14.5975Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
         <path
           d="M20.6572 6.6792H18.5391V13.0139H20.6572V6.6792Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
         <path
           d="M14.832 6.6792H12.7139V13.0139H14.832V6.6792Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
       </g>
       <defs>
@@ -153,7 +159,8 @@ function TwitchSvg(color: string) {
           <rect
             width="25.4177"
             height="29.5619"
-            fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+            className={color !== "gradient" ? styles[color] : ""}
+            fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
             transform="translate(0.535156 0.872314)"
           />
         </clipPath>
@@ -179,7 +186,8 @@ function FacebookSvg(color: string) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.33268 2.66675H26.666C28.1388 2.66675 29.3327 3.86066 29.3327 5.33342V26.6668C29.3327 28.1395 28.1388 29.3334 26.666 29.3334H5.33268C3.85992 29.3334 2.66602 28.1395 2.66602 26.6668V5.33342C2.66602 3.86066 3.85992 2.66675 5.33268 2.66675ZM5.3311 5.33333V26.6667H26.6644V5.33333H5.3311ZM14.8428 16.0059H17.332V24H19.9987V16.0059H22.6419V13.3392H19.9987V12C19.9987 11.2636 20.5957 10.6667 21.332 10.6667H22.6654V8H21.332C19.1229 8 17.332 9.79086 17.332 12V13.3392H14.8428V16.0059Z"
-        fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+        className={color !== "gradient" ? styles[color] : ""}
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
       />
     </svg>
   );
diff --git a/public/logos/Discord.png b/public/logos/Discord.png
deleted file mode 100644
index e231006c7cdcd5be8ea082c33e150e616189c983..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 900
zcmV-~1AF|5P)<h;3K|Lk000e1NJLTq001Wd001Qj1^@s6!E5k700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0~tv~K~#7F?N?iF
z(?AqGGd5`}Dv=$K9W>oR_~xUrcnFmu(jCAG+O7byf}~PpArNx<!FSUY5O$F6APA(W
zNj#T3&ZF+wNhXc^K<be!+4J(5J9E#ySHQsDw_b@{=RIx-q{1`*#YR1?PsBgo1^pU<
zD!64ZiH?KZcHI-*c)Ogu?0)Z6?t+*G0fix59GdM@a#G&jQKmwO#Q!Dk5AtTieIl2@
z1G(#B6>?oI0kitX&q{Ey9J-3=n1pCKkXtN0B^H7<;ZmOjD7x6())5F#6w8EwJm8HK
zuq3R>@z0n<e_x761))^_kIYq@o;aE{z8p|~lgX3b5Y#gVqAVajVF_513lVyN1K(R~
z+Kg|G)IL7;^Ip*3L1gU=$+6YyU%ZVDRz}E{mL=QKRt_PC;W08m!`o=_YAxIG3(4`F
z=`>#HMYBS9W;@d2Skrf^Q!5CWcb#0z%qAv%jhD&$so*pv=l~X2XgP(!iP@$z7`XD3
z{UaD+5L_X4GB}v@y$$*a@ASP~8<rZlkR0n)CoxINoy#vO?f#&r(@&+!vALBQ%eIgO
zIp5oCCtKC8$(z2D{&R7D*%v=z(N0?vMCVwQ+^q1#UU$gCy00ZBWPy$Mxp?Gp6shWG
zh;Tn`J_*%<1?D=04nbzyo1j<Fn&*2_-d{KS$IkH~ZO-IdD$yki5nC{Xij{!!#)J}I
z^xE#%zr}eob@<X=o8}ad&K4{%EpRxroTi5s(dOgv;yc%taN*SW!Wa0?wWA=f!r#$$
zr1OLqEk=DIKALh8d9zZ7X=EDS+LeOKLg%RHLjGh6G-=SU`maY0GA33)ly#7H;qh*1
zG)q5%bbn;U$EsHm(%oTVC0N43a;cNLl#=tWI@Yw@wUSNSpDjDq#6t~nUHmWPXyt-r
z9&|Lpl0{F9oT}mmp$nWL)Hcno*b<nM8)d2L2sZ{Qu4BEcW3eqkVK$7^Ulw(Rg^c0I
z^`?%!`X5|co|@&NsdEB%1Rb-7=-2pln*U`Y!dXCDkjZ%SuF{=LiOvmg_O54uz2Ks3
aw*3R6#5`GfCuSo60000<MNUMnLSTXfY^&1%

diff --git a/public/logos/Facebook.png b/public/logos/Facebook.png
deleted file mode 100644
index 60cf3ca2431a72dde23a1c26a7de8566ede6942c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 615
zcmV-t0+{`YP)<h;3K|Lk000e1NJLTq001cf001cn1^@s6s9*s000009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0sKisK~#7F?U-Lm
z>p&F7zd6ahq+Tz$gt`LnUBPXi?}G*rL?Y@A+=1;5bOriQL=Z{cL3dzXfpG@~A5z-n
zj5BSOG*uz(B&C=il*}KRe4I09=F9;~z7Zllu;a^(UmPBT>@5@tM~^Xy_KjN!(o-`c
zJ%8{3$Uj&DN=z^W*V95N**UmV7F?1*jRdN;6sPHNJJ}HewM4h4M!F~f30YNEtd2E^
zZS|NEYJdJ$(QUau>nH&4E^L74?6Y~o3a}C)ZRCs&Mk4D-sDM;~u>t00Yq!$K@{U|Z
z9{Phz6%@y#(7^oU=5FtPcs3TeIQdzU`F$HvRt$jnf>`uoiZgF(xrp@qum-*UCWwen
zT6=39%t;~9&1=pR7QmP#bz-s}^(RNFm`YA$IQZ+`hMT$_*$6&LB2a|L-`wAkHeG%+
zXIb#yoJPzi>T!h(lqZfUjJf-ToVJ60N4I}4YLXJJkGQVaqHgxd=^-P=M7CX_KRyzm
zwxA$6r=$Dkzj(%+lxxxyrASkhB27_>G(|2VTW+Njfj8fN*9&aqn%pw;tm)WStagH-
zOCO`kLJ^Sl50m?(oSgqj(zT%Ay{&6AUz9$~A``9I`qPxVZ8+!So88jr#fY2f!I}Ex
zz8_XCiG~ogB@#EjyivyKGKS4-cfF8GUP;L!yaHe1pFdTIb4~yN002ovPDHLkV1lm`
B5a|E_

diff --git a/public/logos/Instagram.png b/public/logos/Instagram.png
deleted file mode 100644
index 83729cd354d1fa9cd16daf4667452b5cbd9cca55..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1077
zcmV-51j_q~P)<h;3K|Lk000e1NJLTq001fg001cn1^@s6Lsz@?00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1IkH6K~#7F?O1(M
z+CUV4yGd0l9qA451f?e^oIuk~I~}ECJb`!u@dWA##2I8d(~sZ@#1oVoNKYV6Z4pRz
z`(6xj2{Awj_K*5wLXypX{PI5by%&Hd{HI{!I&4@sIVN}>xc&;}04AKDAfQowpK3(*
zd+5QsB{R#=JHQSmJPztMh~3XdsulJylqivW0lgm*APbKOB-84HD1?#K!v>Hf10>sc
zv~a36Bo3Lwzl?i@YwDmK<7FY(Yeb?StqykPm;N-snhrR|Ln@gS-g*akx$ZaGq7by%
z5sB&oZIa*LCry&fDh>9I1euk>xu_YbifPGh8+v&dNLJUj@YGPp@!&*~sVZlUq$NqV
z4<O16q{%ry-uTurD+ZdBlqdeGA-=(*CY7#TCWoTc$p;;jF?OeNDI@J)hXmo;n|((_
zNT*%<kZ!8aZG7?If{gJMm;f^q9oQTLVY<@tX5{$$WOZ8t%?Is#pG=63;`iGlWVhoD
zZ`<H(PqGe&89-5MU~^%6F13*@J_CMU{MvO@Tz$J#!u|y&#P$s=tWN3!u_a1s){ubo
zJT(gLOK4zip4sN<ntoC>qQhkvVo8+L{cMCJYv7-OVQ`fWlA4s_L>-55{g7S|Vjz}8
zmqpi<oMrt6A@-~9QsqFm79I`sbUgDtuPvj2M%NSBrHWV*<=l4$1Z#$n^nq$FtCB^V
zUB?Z6thtP=2~%Rj>g80&aiG6HZVY2kQEoF`_>+ezF*Q*R&X6<~;dx`+7|(h94IT5_
z`AakjFktg1DnJ_wb+&z*8#l)Dbf28yP79{Q)I@8>0)@qUvbwf6Zj8?LE%jakZ^D#_
zsd{mwESoP{{RhbwzjX4reU<&*Ql7=h$YK%IVd)T5sbUD-w0g(tW==uDeF2@Ht79D|
zOArIGh*JJ2un<$*D5g_ofQiTz9+zq8UC|2+4aC3@H@}VT^^}<-S&A@2&P8E0JVBAW
zQGsC`X4;;JEXMWM!I(Y_$^k^-)NsuuHfGL8Jyn`$lO<F)X7Emy+PPruUwo-vH<GDb
z6U*>DLUouEqE#=&OL#1>=x8-Ulqnw>u<&{lC)0@oTx)G`jW&NBd_F2sCRO!i`p`ds
zIiq;i-&1!AIn3dXR_H*hcTN#U=|n|Z9W(T6NDz{1D>!#fU5iTeQ)6*8*f-Rfs4}E_
zXz(GxE7D4sF+-AIH1jap68c71-_Vt5%W<gYN%#Xq6r`)QexYWhLlc$>KIC>xtkKEP
vQL2!*V<EvN?!6bkAyr9g&wauZ{ssO5TSJd*YtuSs00000NkvXXu0mjf6=~!4

diff --git a/public/logos/Twitch.png b/public/logos/Twitch.png
deleted file mode 100644
index 7a820e065ce1396f7d27ad0038baba7391635b25..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 575
zcmV-F0>J%=P)<h;3K|Lk000e1NJLTq001EX001Tk1^@s6O5yU?00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0n|xEK~#7F?U>tb
z!Y~v-uWyVLBqTCIM(7Cb2BiI|sz{|9umNF$c7yVP`qe6Bf-*uzNH^f46{%?K+CU^8
zG34O{q;h^@V{&s6KW-cX3U2+GZGh2-ieWJyQ&0#r06#cz8!E;i>=QvL05;SFJt)A~
zV06>;KqIa{y99Baq>g(9Y66cfu#h;mfP_*8U5>>Bx<0pJ7IkDf#yEI!TETj|`})%%
zgjphfIC7d3RU8T>h#;~k;<GFxgMm0~NDzZRazI;@CZak~#X&d$&Jqb{iG-7oC^bb*
zFsE~v4`rDl2HWkN!<ZA&7TGw2sw9REnTo@Ms(o~A_8<fQb4<uwMPRwgCY0)qyxjR;
z7sfJKTC&c81m9>r)%GNo0*y@pXk5LEaaD`NJ^@)j*c}{=w(Q64-y<<SlOPFc|D(Sk
z$AGUA$Rt64_bA}bRBN$Frfx5(yW@FZypMW20jRw2>V{GTBwD&dDX@l0K#N3KfzlE>
z1SEym34(af8MC3JfTZw~IP`X&RiKoFE&&PU$mNO^ssk?Ox0TjLQqB_sp%8Gg3asMn
z$9<c5fVlgKK;s^@Sa)dNB<Gi?V3(dxq5^?@5)}z#m#9!66KUyLH-C42>$3<&{5Ajp
N002ovPDHLkV1ig7>B0a2


From 93ede558a49456d20a9d2bb93a3492f35f5091de Mon Sep 17 00:00:00 2001
From: Adi Thakral <aditya.thakral@uwaterloo.ca>
Date: Sun, 27 Jun 2021 03:33:09 +0000
Subject: [PATCH 16/16] Fix font-size, line-height, and some other smaller
 changes

---
 components/EventCard.module.css            |  3 +-
 components/EventDescriptionCard.module.css | 14 ++-----
 components/EventDescriptionCard.tsx        |  8 ++--
 components/Footer.module.css               |  2 +-
 components/MiniEventCard.module.css        | 20 ++++-----
 components/MiniEventCard.tsx               | 26 ++++++------
 components/NewsCard.module.css             | 26 +++++++-----
 components/NewsCard.tsx                    |  6 +--
 components/OrganizedContent.module.css     | 12 +++---
 components/TeamMember.module.css           |  5 +--
 components/TeamMemberCard.module.css       | 33 +++------------
 components/playground.module.css           | 28 ++++++-------
 components/playground.tsx                  |  5 +--
 pages/_app.css                             | 47 ++++++++++++++++++----
 pages/_app.module.css                      |  7 ++++
 pages/_app.tsx                             | 27 +++++++++++--
 pages/about/our-supporters.module.css      | 22 ++--------
 pages/about/our-supporters.tsx             | 35 +++++-----------
 18 files changed, 162 insertions(+), 164 deletions(-)

diff --git a/components/EventCard.module.css b/components/EventCard.module.css
index f2efd058..269f51b0 100644
--- a/components/EventCard.module.css
+++ b/components/EventCard.module.css
@@ -1,7 +1,6 @@
 .card {
   display: flex;
   flex-direction: row;
-  max-width: calc(1000rem / 16);
   box-sizing: border-box;
   padding: calc(24rem / 16);
 }
@@ -35,7 +34,6 @@
 
 .content,
 .content > h2 {
-  color: var(--purple-2);
   font-weight: 400;
   font-style: normal;
   margin-top: 0;
@@ -43,6 +41,7 @@
 }
 
 .content > h2 {
+  color: var(--purple-2);
   font-size: 1rem;
   margin-bottom: calc(14rem / 16);
 }
diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css
index 323fbfec..011ecd2a 100644
--- a/components/EventDescriptionCard.module.css
+++ b/components/EventDescriptionCard.module.css
@@ -20,16 +20,12 @@
 }
 
 .name {
-  color: var(--purple-2);
-  font-weight: bolder;
   font-size: calc(18rem / 16);
-  line-height: calc(27 / 18);
   margin: 0;
 }
 
 .desc {
-  color: var(--purple-2);
-  margin-top: calc(12rem / 16);
+  margin: 1rem 0;
 }
 
 .logo {
@@ -40,8 +36,8 @@
 .setting {
   margin: 0;
   color: var(--blue-2);
-  font-weight: bolder;
   font-size: calc(14rem / 16);
+  font-weight: 600;
 }
 
 .details > footer {
@@ -64,8 +60,7 @@
 
   .name,
   .setting {
-    font-size: calc(14rem / 16);
-    line-height: calc(21 / 14);
+    font-size: 1rem;
   }
 
   .poster {
@@ -77,8 +72,7 @@
   }
 
   .desc {
-    font-size: calc(12rem / 16);
-    line-height: calc(18 / 12);
+    margin: 0;
   }
 
   .logo,
diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx
index 69e22887..11c73d97 100644
--- a/components/EventDescriptionCard.tsx
+++ b/components/EventDescriptionCard.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
@@ -7,12 +7,12 @@ import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
 interface Props {
   name: string;
+  short: string;
   online: boolean;
   location: string;
   date: Date;
   poster?: string;
   registerLink?: string;
-  children: ReactNode;
 }
 
 /**
@@ -29,10 +29,10 @@ export function EventDescriptionCard({
   location,
   poster,
   name,
+  short,
   date,
   online,
   registerLink,
-  children,
 }: Props) {
   const Icon = getIcon(location);
 
@@ -45,7 +45,7 @@ export function EventDescriptionCard({
         <h2 className={styles.setting}>
           <EventSetting date={date} online={online} location={location} />
         </h2>
-        <div className={styles.desc}>{children}</div>
+        <p className={styles.desc}>{short}</p>
 
         <footer>
           {registerLink && (
diff --git a/components/Footer.module.css b/components/Footer.module.css
index 4d70b0ba..885469ed 100644
--- a/components/Footer.module.css
+++ b/components/Footer.module.css
@@ -18,7 +18,7 @@
 }
 
 .text {
-  color: white;
+  color: var(--white);
   font-style: normal;
   text-align: center;
 }
diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index cc4ac4ed..ce61aa2b 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -1,11 +1,11 @@
-.miniEventCard {
-  max-width: calc(936rem / 16);
+.card {
   box-sizing: border-box;
   position: relative;
-  color: var(--purple-2);
   padding: calc(20rem / 16);
-  /* FIXME: Check figma for updated size */
-  font-size: calc(14rem / 16);
+}
+
+.card:nth-child(odd) {
+  background-color: var(--teal-2-20);
 }
 
 .name {
@@ -19,6 +19,7 @@
 }
 
 .info {
+  color: var(--purple-2);
   margin-bottom: calc(12rem / 16);
 }
 
@@ -27,19 +28,20 @@
   top: 0;
   right: 0;
   cursor: pointer;
-  color: var(--blue-2);
   margin: calc(20rem / 16);
+  color: var(--blue-2);
+  font-size: calc(14rem / 16);
 }
 
-.miniEventCard[open] .shortDescription {
+.card[open] .shortDescription {
   display: none;
 }
 
-.miniEventCard[open] .dropDownIcon {
+.card[open] .dropDownIcon {
   transform: rotate(180deg);
 }
 
-.miniEventCard > summary {
+.card > summary {
   list-style: none;
 }
 
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 5d676fac..5236a7b0 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -11,18 +11,6 @@ interface Props {
   date: Date;
 }
 
-const dropDownIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="14"
-    height="9"
-    viewBox="0 0 14 9"
-    className={styles.dropDownIcon}
-  >
-    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-  </svg>
-);
-
 export const MiniEventCard: React.FC<Props> = ({
   name,
   short,
@@ -32,7 +20,7 @@ export const MiniEventCard: React.FC<Props> = ({
   online,
 }) => {
   return (
-    <details className={styles.miniEventCard}>
+    <details className={styles.card}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
           <h2 className={styles.name}>
@@ -52,3 +40,15 @@ export const MiniEventCard: React.FC<Props> = ({
     </details>
   );
 };
+
+const dropDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="9"
+    viewBox="0 0 14 9"
+    className={styles.dropDownIcon}
+  >
+    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+  </svg>
+);
diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css
index 18f75f62..87d6ba99 100644
--- a/components/NewsCard.module.css
+++ b/components/NewsCard.module.css
@@ -1,27 +1,22 @@
 .card {
-  padding: calc(27rem / 16) calc(39rem / 16);
+  padding: calc(30rem / 16) calc(40rem / 16);
   max-width: calc(524rem / 16);
-  background-color: white;
+  background-color: var(--white);
+  border-radius: calc(20rem / 16);
 }
 
 .date {
-  color: var(--purple-2);
   font-size: calc(18rem / 16);
-  font-weight: bold;
-  line-height: calc(27 / 18);
+  margin: 0;
 }
 
 .author {
   color: var(--purple-1);
   font-style: normal;
-  line-height: calc(21 / 16);
-  font-size: calc(14rem / 16);
-  margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
 }
 
-.content {
-  line-height: calc(21 / 16);
-  color: var(--purple-2);
+.content > *:first-child {
+  margin-top: 0;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
@@ -29,4 +24,13 @@
     padding: 0;
     background-color: transparent;
   }
+
+  .content > *:first-child {
+    margin-top: 1rem;
+  }
+
+  .content ul,
+  .content ol {
+    padding: 0 1rem;
+  }
 }
diff --git a/components/NewsCard.tsx b/components/NewsCard.tsx
index 765749d6..f88c9676 100644
--- a/components/NewsCard.tsx
+++ b/components/NewsCard.tsx
@@ -14,15 +14,15 @@ export const NewsCard: React.FC<NewsCardProps> = ({
 }) => {
   return (
     <article className={styles.card}>
-      <h3>
-        <time className={styles.date} dateTime={date.toISOString()}>
+      <h1 className={styles.date}>
+        <time dateTime={date.toISOString()}>
           {date.toLocaleDateString("en-US", {
             year: "numeric",
             month: "long",
             day: "numeric",
           })}
         </time>
-      </h3>
+      </h1>
       <address className={styles.author}>{author}</address>
       <div className={styles.content}>{children}</div>
     </article>
diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index 2101334b..61d11ec6 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -1,11 +1,11 @@
 .wrapper {
   display: flex;
-  line-height: calc(24 / 16);
 }
 
 .wrapper h1 {
+  margin: 1rem 0;
   font-size: calc(24rem / 16);
-  margin: 1rem 0 1rem 0;
+  font-weight: 600;
   color: var(--blue-2);
 }
 
@@ -43,11 +43,11 @@
 .selected {
   background-color: var(--blue-1-05);
   color: var(--blue-2);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .readAll {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .marker {
@@ -73,7 +73,6 @@
   flex: 1;
   display: flex;
   cursor: pointer;
-  display: flex;
   color: var(--purple-2);
   font-size: calc(12rem / 16);
 }
@@ -84,7 +83,6 @@
 
 .next {
   justify-content: flex-end;
-  justify-self: flex-end;
   text-align: end;
   margin-left: calc(8rem / 16);
 }
@@ -92,7 +90,7 @@
 .arrowHeading {
   color: var(--blue-2);
   font-size: calc(14rem / 16);
-  font-weight: bold;
+  font-weight: 700;
   border-bottom: calc(2rem / 16) solid var(--blue-2);
   padding-bottom: calc(4rem / 16);
 }
diff --git a/components/TeamMember.module.css b/components/TeamMember.module.css
index e92a14a5..b2f3a376 100644
--- a/components/TeamMember.module.css
+++ b/components/TeamMember.module.css
@@ -17,12 +17,11 @@
 }
 
 .name {
-  font-weight: bold;
-  color: var(--blue-1);
+  font-weight: 700;
+  color: var(--blue-2);
 }
 
 .role {
   font-weight: 600;
   color: var(--purple-2);
-  line-height: 1.875;
 }
diff --git a/components/TeamMemberCard.module.css b/components/TeamMemberCard.module.css
index 0c4af7b1..3065f92c 100644
--- a/components/TeamMemberCard.module.css
+++ b/components/TeamMemberCard.module.css
@@ -9,8 +9,6 @@
   row-gap: 0;
   justify-items: start;
   align-items: start;
-
-  max-width: calc(847rem / 16);
 }
 
 .picture {
@@ -31,47 +29,26 @@
   grid-area: name;
   margin: 0;
 
-  color: var(--blue-1);
+  color: var(--blue-2);
   font-size: calc(36rem / 16);
-  line-height: 1.1;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .role {
   grid-area: role;
   margin: 0;
 
-  color: var(--purple-2);
   font-size: calc(24rem / 16);
-  line-height: 1.7;
+  line-height: calc(40 / 24);
   font-weight: 600;
 }
 
 .description {
   grid-area: description;
-  margin: 0;
-
-  line-height: 1.875;
 }
 
-@media screen and (max-width: calc(768rem / 16)) {
-  .card {
-    grid-template-columns: calc(90rem / 16) auto;
-    column-gap: calc(22rem / 16);
-
-    max-width: calc(460rem / 16);
-  }
-
-  .picture {
-    max-width: calc(90rem / 16);
-    max-height: calc(90rem / 16);
-  }
-
-  .name,
-  .role,
-  .description {
-    line-height: 1.5;
-  }
+.description > *:first-child {
+  margin-top: 0;
 }
 
 /* TODO: Use the correct mobile styles from figma
diff --git a/components/playground.module.css b/components/playground.module.css
index 8a3adcde..47be0feb 100644
--- a/components/playground.module.css
+++ b/components/playground.module.css
@@ -1,7 +1,3 @@
-.miniEventCardDemo > *:nth-child(odd) {
-  background: #e1eefa;
-}
-
 .newsDemo {
   padding: calc(50rem / 16);
   background-color: var(--off-white);
@@ -53,7 +49,6 @@
 }
 
 .teamMemberDemo {
-  padding: calc(10rem / 16) calc(50rem / 16) calc(30rem / 16) calc(50rem / 16);
   max-width: calc(847rem / 16);
 }
 
@@ -81,17 +76,6 @@
   column-gap: calc(53rem / 16);
 }
 
-@media only screen and (max-width: calc(768rem / 16)) {
-  .newsDemo,
-  .eventDescriptionCardDemo {
-    background-color: var(--off-white);
-  }
-
-  .eventDescriptionCardDemo > * {
-    margin: calc(50rem / 16);
-  }
-}
-
 .linkDemo {
   padding: calc(50rem / 16);
   background-color: var(--off-white);
@@ -102,3 +86,15 @@
   color: var(--purple-2);
   font-size: calc(24rem / 16);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .newsDemo,
+  .eventDescriptionCardDemo {
+    padding: calc(20rem / 16);
+    background-color: var(--off-white);
+  }
+
+  .eventDescriptionCardDemo > * {
+    margin: 0;
+  }
+}
diff --git a/components/playground.tsx b/components/playground.tsx
index 68478ad1..c03e169a 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -47,7 +47,6 @@ import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
 import { OrganizedContent, LinkProps } from "./OrganizedContent";
 import { Button } from "./Button";
-import { Footer } from "./Footer";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -130,9 +129,7 @@ export function EventDescriptionCardDemo() {
         <EventDescriptionCard
           {...metadata}
           key={metadata.name + metadata.date.toString()}
-        >
-          {metadata.short}
-        </EventDescriptionCard>
+        />
       ))}
     </div>
   );
diff --git a/pages/_app.css b/pages/_app.css
index 46c08410..664bdb16 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -1,13 +1,10 @@
 body {
-  font-family: "Poppins", "sans-serif";
-  font-size: 1rem;
-  margin: 0;
-
   /* Default is light theme */
   --white: #ffffff;
   --off-white: #fdf8f5;
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
+  --teal-2-20: #4ed4b234;
   --blue-1: #5caff9;
   --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
@@ -15,11 +12,20 @@ body {
   --blue-2-25: #1482e340;
   --purple-1: #525284;
   --purple-2: #2a2a62;
+  --black: #000000;
   --gradient-blue-green: linear-gradient(
     99.94deg,
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
+
+  color: var(--black);
+  font-family: "Poppins", "sans-serif";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: calc(30 / 16);
+
+  margin: 0;
 }
 
 /* FIXME: Dark theme is the same as light theme right now */
@@ -41,8 +47,33 @@ body {
   );
 }
 
-@media only screen and (max-width: calc(425rem / 16)) {
-  body {
-    font-size: calc(14rem / 16);
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-style: normal;
+  line-height: 1.5;
+  color: var(--purple-2);
+}
+
+h1 {
+  font-size: calc(48rem / 16);
+  font-weight: 700;
+}
+
+h2 {
+  font-size: calc(36rem / 16);
+  font-weight: 700;
+}
+
+h3 {
+  font-size: calc(24rem / 16);
+  font-weight: 600;
+}
+
+h4 {
+  font-size: calc(18rem / 16);
+  font-weight: 600;
 }
diff --git a/pages/_app.module.css b/pages/_app.module.css
index a9bb4d65..c545d6e9 100644
--- a/pages/_app.module.css
+++ b/pages/_app.module.css
@@ -10,3 +10,10 @@
 .contentContainer {
   flex-grow: 1;
 }
+
+.defaultLayout {
+  margin: 0 auto;
+  max-width: calc(800rem / 16);
+  padding: 0 calc(20rem / 16);
+  padding-bottom: calc(20rem / 16);
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 892f09dd..f897db09 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,6 @@
-import React from "react";
-import { AppProps } from "next/app";
+import React, { ComponentType, ReactNode } from "react";
+import { NextComponentType, NextPageContext } from "next";
+import { AppProps as DefaultAppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
@@ -11,6 +12,8 @@ import "./_app.css";
 import "./font.css";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
+  const Layout = Component.Layout ?? DefaultLayout;
+
   return (
     <ThemeProvider theme="light">
       <MDXProvider components={{ a: Link }}>
@@ -18,7 +21,9 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}
           <div className={styles.contentContainer}>
-            <Component {...pageProps} />
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
           </div>
           <Footer />
         </div>
@@ -26,3 +31,19 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
     </ThemeProvider>
   );
 }
+
+function DefaultLayout(props: { children: React.ReactNode }) {
+  return <div className={styles.defaultLayout}>{props.children}</div>;
+}
+
+type PageComponent = NextComponentType<
+  NextPageContext,
+  unknown,
+  Record<string, unknown>
+> & {
+  Layout?: ComponentType<{ children: ReactNode }>;
+};
+
+type AppProps = DefaultAppProps & {
+  Component: PageComponent;
+};
diff --git a/pages/about/our-supporters.module.css b/pages/about/our-supporters.module.css
index 0ee1b98c..d2469b6a 100644
--- a/pages/about/our-supporters.module.css
+++ b/pages/about/our-supporters.module.css
@@ -1,9 +1,3 @@
-.container {
-  margin: 0 auto;
-  max-width: calc(806rem / 16);
-  padding: 0 calc(60rem / 16);
-}
-
 .headerContainer {
   display: flex;
   flex-direction: row;
@@ -19,23 +13,14 @@
   text-align: center;
 }
 
-.title {
+.content h2 {
   font-weight: 600;
   font-size: calc(24rem / 16);
-  line-height: calc(36 / 24);
   color: var(--blue-2);
   margin-top: calc(35rem / 16);
 }
 
-.text {
-  line-height: calc(24 / 16);
-}
-
 @media only screen and (max-width: calc(768rem / 16)) {
-  .container {
-    padding: 0 calc(45rem / 16);
-  }
-
   .headerContainer {
     flex-direction: column-reverse;
     align-items: center;
@@ -50,7 +35,8 @@
     width: calc(100rem / 16);
   }
 
-  .list {
-    padding: 0 calc(18rem / 16);
+  .content ol,
+  .content ul {
+    padding: 0 1rem;
   }
 }
diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx
index dc79825b..e6a13c06 100644
--- a/pages/about/our-supporters.tsx
+++ b/pages/about/our-supporters.tsx
@@ -1,34 +1,21 @@
-import { MDXProvider } from "@mdx-js/react";
-import React, { HTMLAttributes } from "react";
+import React from "react";
 import { Image } from "../../components/Image";
 import Content from "../../content/our-supporters.mdx";
 import styles from "./our-supporters.module.css";
 
 export default function OurSupporters() {
   return (
-    <MDXProvider components={{ h2: H2, p: Text, ul: UL }}>
-      <div className={styles.container}>
-        <div className={styles.headerContainer}>
-          <h1 className={styles.header}>Our Supporters</h1>
-          <Image
-            src="our-supporters/supporters-codey.svg"
-            className={styles.codey}
-          />
-        </div>
+    <>
+      <div className={styles.headerContainer}>
+        <h1 className={styles.header}>Our Supporters</h1>
+        <Image
+          src="our-supporters/supporters-codey.svg"
+          className={styles.codey}
+        />
+      </div>
+      <div className={styles.content}>
         <Content />
       </div>
-    </MDXProvider>
+    </>
   );
 }
-
-function H2(props: HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 {...props} className={styles.title} />;
-}
-
-function Text(props: HTMLAttributes<HTMLParagraphElement>) {
-  return <p {...props} className={styles.text} />;
-}
-
-function UL(props: HTMLAttributes<HTMLUListElement>) {
-  return <ul {...props} className={styles.list} />;
-}